웹 개발을 공부하면서 느끼는 점은 사용자의 경험이 제일 중요하다는 것이다.사이트 이용을 하는데 어려움이 있고, 속도가 느리다면 사용자의 이탈율은 당연이 높을 것이다.하지만 사용자 경험보다 더 중요한 것은 검색 사이트 상위 노출이라고 생각한다.아무리 사용자 경험과 로딩

저번 프로젝트를 진행하면서 큰 이슈가 있었다.우리 팀은 지속적인 배포를 하지 않고 프로젝트를 작업했다.그리고 발표 전날에 배포하니까 배포 오류 때문에 발표를 망친 기억이 있다..그래서! 이번에 하는 개인 프로젝트는 처음부터 CI/CD 파이프라인을 설계해서 지속적인 코드

이번에 진행하는 프로젝트에서는 네이버 뉴스 api를 활용하기로 하였다.하지만 전에도 한 번 검색 api를 사용했었을 때도 CORS 오류가 나왔다.당연히 이번에도 CORS 오류가 났기 때문에 트러블 슈팅의 과정을 정리해 보자 한다.네이버 api를 그대로 사용하게 된다면

이번 프로젝트 이전에 카카오 지도를 사용할 때는 아주 간단한 작업만 진행하거나, 선임분께서 작업한 코드를 복붙하는 식으로 진행했었다.그래서 이번 프로젝트에서는 카카오 지도의 기능 중 마커와 클러스터러를 사용해보며 겪었던 오류에 대해 남겨보기로 하였다.바로 처음 겪었던

RN으로 프로젝트를 진행하면서 제일 처음 궁금했던 점이다.RN은 html 파일도 없고, css 파일도 만들지 못하는데 어떻게 폰트를 적용할까? 라는 생각이 들었고, 검색해보니 expo 공식문서에 자세히 나와있었다.https://docs.expo.dev/deve

평소 width 값을 계산할 때 calc를 자주 썼었다.이번에 RN 개인 포폴을 진행하면서 calc를 적용할 일이 생겨서 적용을 해봤다. Web에서는 제대로 적용이 되었지만 Android 애뮬레이터에서는 적용이 안되는 모습이 보였다.그래서 구글링을 해보았고, RN에서는

리액트 네이티브를 공부하면서 궁금한 점이 생겼다.html은 button 태그가 있지만 RN(React Native)에서는 Pressable, Button, Touchable 같은 다양한 상호작용 감지 컴포넌트가 존재한다.그럼 어떤 상황에 어떤 컴포넌트를 써야하는지에 대

서론 웹 퍼블리셔를 하다가 웹 개발을 배우며 느끼는 점은 화면 구현 보다는 최적화가 더 중요해졌다고 생각이 든다. 렌더링이 더 빨라지게, 이미지의 용량이 더 적어지게, 폰트의 용량이 더 적어지게 등 다양한 웹 최적화 방법이 있다. 이번 프로젝트에서 초기 셋팅을 하던

서론 협업 프로젝트에서 로그인 파트를 맡게 되었다. 그 중 카카오 로그인을 구현하게 되었는데 카카오 로그인은 REST API와 SDK 방법이 있다고 한다. 이번 포스트에서는 REST API방법과 SDK 방법에 대해 기록해본다. 카카오 로그인이란? 카카오 로그인은 카

서론 프로젝트에서 기획 단계가 끝나고 각자 작업할 파트를 나누기로 했다. 이전 프로젝트에서 인증과 인가를 해보지 않아서 이번 프로젝트에서는 꼭 해보고 싶었다. 그 중 기획 단계에서 정한 소셜 로그인 부분을 개발하기 위하여 문서를 찾아보고 직접 적용을 해보았다. 소셜

Framer Motion이란? framer motion이란 단순하면서도 강력한 React 애니메이션 라이브러리이다. 현재 React 19버전은 지원하지 않고 있다고 한다. https://www.framer.com/motion/ 시작하기 사용법 framer moti

서론 매일 하는 팀미팅을 진행하면서 한 가지 단어를 알게 되었다. 디자인 패턴이라는 단어이다. 디자인 패턴이 뭐지? 디자인 구조를 잘 잡기 위한 디자인의 기술 중 하나인가? 라는 생각이 들었고 바로 구글링을 해보았다. 디자인 패턴은 "기존 환경 내에서 반복적으로

제어 컴포넌트는 form의 사용자 입력값을 제어 컴포넌트가 제어하는 것을 말한다.데이터 관리를 react에서 한다.state onChange로 값을 관리하기 때문에 input에 값을 입력할 때마다 데이터가 갱신되고, 리렌더링이 발생한다.Code비제어 컴포넌트는 form

이벤트 위임은 하위 요소들의 공통 상위 요소를 갖는 요소에게 이벤트를 주는 방법이다.상위 요소에 이벤트를 설정하면 어떤 하위 요소를 클릭하더라도 상위 요소의 이벤트를 위임 받아 설정된 이벤트가 작동될 수 있다.버블링은 이벤트 핸들러가 걸린 요소를 클릭했을때 해당 요소를

데이터를 추가(POST), 수정(PUT), 삭제(DELETE)할 때 사용한다.비동기 함수를 실행하여 성공과 실패 여부를 확인하고, 이에 따라 화면을 구성한다.useMutation은 직접 호출을 해야만 서버로 요청을 보낼 수 있다.invalidateQueries를 활용하

서버 상태란 서버에서 관리되는 데이터를 의미한다.데이터베이스, 웹 서버 메모리에 저장되고 상태가 관리되는 특징이 있다.보통 벡엔드에서 받아오는 api json 파일이 백엔드 서버에서 관리된다.예시로는 사용자 목록, 유저 데이터 등 데이터베이스에서 관리되는 상태를 서버

suspense는 React v18에 새로 업데이트 된 기능이다.공식 문서에서 suspense에 대한 설명은 "Suspense is lets you display a fallback until its children have finished loading." 라고 설명

React는 두 트리에서 일치하는 것을 확인하고 재렌더링 합니다. 하지만 이런 식으로 렌더링 하는 방식은 효율적이지 않습니다.React는 key 속성을 지원합니다. 자식들이 key를 가지고 있다면, React는 key를 통해 기존 트리와 이후 트리의 자식들이 일치하는지

1번에서는 num이라는 변수를 선언하고 할당합니다. 2번에서 setTimeout이라는 비동기 함수를 사용하여 num = 2 로 재할당 하지만 비동기 함수이기 때문에 3번인 num = 3로 재할당 후 4번 console.log(num)으로 3이 출력됩니다. 2번을 제외한

💻버블링버블링은 이벤트 핸들러가 걸린 요소를 클릭했을때 해당 요소를 시작으로 부모 요소, body, html 최상단 요소까지 핸들러가 반복되는 현상을 말합니다. addEventListener의 capture가 false로 되어있거나 공백으로 채워있다면 버블링이 작동합