📌 전체 게시글 목록

이번 장에서는State와 Props의 개념과 차이점을 자세히 다뤄볼 예정입니다.여러분은 React의 state에 얼만큼 알고 계신가요 ? 둘의 차이는 뭘까요 ? 결론부터 보자면,state 컴포넌트의 상태를 나타내는 데이터컴포넌트 내부에서 관리되는 동적인 데이터로, 변경이 가능하며 주로 UI의 동작을 제어합니다.props 외부로부터 주어진 데이터부모 컴포넌트에서 자식 컴포넌트로 전달되는 읽기 전용 데이터로, 주로 컴포넌트 간 데이터 전달에 사용됩니다. 우리가 데이터 변경이 있는 웹 페이지를 만들고 싶다고 가정했을 때 state가 없었다면.이를 위해서 페이지에 있는 데이터 부분이 변경되었을 때마다 DOM에 접근하여 직접 수정해 주었을 것입니다.데이터가 변경된 만큼 당연히 화면도 변경되어야 하니까요 여기서 잠..

🔅 미라클 모닝새벽 6시 이전에 기상해 자기개발 활동을 하는 것새벽이 아니더라도 본격적인 일과가 시작되기 2~3시간 전에 일어나 자신의 생활 습관을 행하면 된다.또한, 거창한 계획이 없어도 소소한 습관을 실천하면 된다.우리가 흔히 알고있는 미라클 모닝은 이런의미를 갖고있다. 2022년에 지어진 책인데 이때부터 유행되기 시작했던 것 같다6시 이전 기상만 미라클 모닝으로 쳐주는줄 알았는데 그런의미가 아니라 한시름 놓고 미라클 모닝에 도전해보려고 한다 ^^요즘 6개월의 부트캠프가 끝나고 일주일동안 refresh 기간 삼아 푹 쉬엇다. 딱 일주일만 푹쉬고 다시 공부와 취업준비를 위해 열심히 살아야겠다는 나의 마음다짐 :)2025년 1월 8일부터 갓생살기에 도전해보겠다 ㅋ,,ㅋ하지만 .... 혼자하기에는 아침에..

구글 간편 로그인 하는 법1. 구글 클라우드 사이트 접속- 구글 클라우드한국어 옆에 보이는 콘솔링크로 이동합니다. 2. 새 프로젝트 생성새 프로젝트를 생성 합니다.프로젝트가 만들고 해당 프로젝트로 이동합니다.위에 보이는 경로로 OAuth 동의 화면을 찾아갑니다. 3. OAuth 동의외부를 선택하여 만들기.위 진행단계로 진행합니다.앱이름, 사용자 이메일, 앱 도메인을 입력합니다. 앱 도메인은 개발 상태에선 http://localhost:3000/로 작성하면 됩니다. 4. 범위사용자가 동의해야 할 권한들을 설정합니다. 예를 들어, 구글 계정 정보 접근을 원하면 email, profile 등의 범위를 추가합니다.권한을 추가하려면, 필요한 구글 API 범위를 선택해야 합니다.여기서 선택한 범위에 따라 goog..

내가 하고있는 프로젝트는 Next.js + typeScript + app router를 사용하는 프로젝트이다.카카오 간편 로그인은 처음이라 좀 헤메었지만 일단 차근차근 해보았다.1. 카카오 개발자 사이트에서 애플리케이션 등록- 카카오 개발자 사이트 에 접속하여 애플리케이션을 등록합니다.- REST API 키와 Redirect URI를 확인합니다.사이트 도메인 등록등록하러 가기 링크 클릭 ‼️ Redirect URL 등록2. OAuth 인증 흐름 / API 엔드포인트 구현- 사용자가 카카오 로그인 버튼을 클릭하면 카카오 인증 페이지로 리다이렉트합니다.- 사용자가 인증을 완료하면 카카오는 설정한 Redirect URI로 `code`를 포함하여 리다이렉트합니다.- 이 `code`를 사용하여 액세스 토큰을 요..

심화프로젝트에 들어가며 프로젝트 세팅하는 과정중에 내가 storybook 세팅을 하게되었다.🎨 storybook을 사용하면 좋은 이유storybook은 컴포넌트를 독립적으로 개발하고 테스트할 수 있는 환경을 제공한다.⚙️ 스토리북 설치1. 설치npm install --save-dev @storybook/react2. script 확인package.json 파일의 scripts 섹션에서 storybook 스크립트가 올바르게 설정되어 있는지 확인해야한다. storybook은 6006포트를 사용하고있다."scripts": { "storybook": "storybook dev -p 6006"}3. 명령어 실행npm run storybook설치가 된 후 storybook 관련 폴더가 생성되었다.기본 폴더 구조..

우선 ,Taskify 프로젝트를 개발하면서, 에러 처리 로직이 여러 컴포넌트에 분산되어 있음을 알게 되었습니다. 각 컴포넌트에서 중복된 방식으로 에러를 처리하고, 에러 메시지를 표시하는 방법이 일관되지 않아 사용자 경험이 저하되는 문제를 겪었습니다. 😞 이 문제를 해결하기 위해, useErrorModal이라는 커스텀 훅을 만들어 전역적으로 일관된 에러 처리 방식을 구현했습니다.이를 통해 에러 처리 로직을 통합하고, 사용자에게 서버에서 발생한 에러 메시지를 명확하게 전달할 수 있게 되었습니다.  ☄️ 문제 상황 - 에러 처리 로직의 중복과 일관성 부족프로젝트 초기에는 각각의 컴포넌트에서 에러를 개별적으로 처리하고 있었습니다.예를 들어, API 요청 실패 시 발생하는 에러나 사용자 입력에서 발생하는 에러를..