Life is connecting the dots .

지난 프로젝트를 진행하면서 Next.js에 기본값으로 StrictMode 값이 true로 설정되어 있어서 버그를 발견하고 예방할 수 있었다. 그때의 상황을 대략 설명하자면 컴포넌트 안에서 useEffect를 실행했었고, useEffect의 콜백함수로 API를 호출하는 중이었다. 단순히 데이터를 불러오는 API라면 여러 번 호출해도 이상 없겠지만, 해당 API는 로그인 인증 관련된 부분이어서 동일한 데이터를 두 번 호출했기 때문에 에러가 발생하는 상황이었다. 결론적으로 컴포넌트가 다시 마운트 될 때, 이전 API요청을 취소하는 방법으로 해결했고, 개발환경에서만 React StrictMode가 동작하므로 배포환경에서는 문제가 안 되는 것을 확인했지만 혹시 모를 상황에 대비하여 코드를 제대로 작성할 수 있었다..

지난 9월 부트캠프를 시작하고 드디어 오늘 기나긴 여정의 마지막 날이 되었다. 그동안 파트1 에서의 회고, 각 프로젝트마다 회고를 작성하면서 중간중간 학습 과정을 돌아봤었다. 지난 6개월 동안 부트캠프에서 참여했던 활동을 돌아보며 스프린트로서 마지막으로 회고를 작성해 보려 한다. 🏃🏻‍♀️여정 시작경영학과를 졸업하고 전공을 살려 취업해서 커리어를 계속 쌓아왔었다. 해를 거듭할수록 실무 경험도 차곡차곡 쌓였고 회사에서 인정받았고, 직무에 욕심도 많았었지만 직무 특성상 새로운 배움, 새로운 지식을 얻을 수 없다는 점이 내가 과연 30대, 40대에도 이 직업을 계속하며 보람을 느낄 수 있을까?라는 생각이 많이 들었던 것 같다. 동생이 IT분야 직무를 하고 있기에 자연스럽게 관심이 가게 되었고, 데이터 분..

기초 프로젝트를 끝낸 게 엊그제 같은데 part3에서 중급프로젝트를 진행하며 연말, 연초를 보냈다. part3에서 만난 우리 팀은 총 4명으로 Next.js를 공부하고 프로젝트를 함께했다. 나도 그렇듯 다른 팀원들도 part2에서 프로젝트에 대한 아쉬움이 남았던 부분들을 팀미팅 시간에 얘기도 하면서 이번 프로젝트에서 시행착오를 줄이기 위해 미리 대화하는 시간을 많이 가졌다. 이번 팀 프로젝트 회고에는 지난번 프로젝트에서 유지했던 방법보다는 새롭게 도입한 부분에 대해 적어보려고 한다. 🔮 프로젝트 소개 이번 중급 프로젝트도 피그마와 API 명세서, 기본 요구사항이 주어진 상태에서 UI와 기능을 구현하는 프로젝트이다. 우리가 선택한 프로젝트는 [🎯 Taskify]로 칸반보드 단위로 팀 일정을 관리하는 서비스..

최근에 React와 Next.js 프로젝트에서 CSS module과 styled-components를 사용해 보았다. 어느 방법이던 스타일 코드를 작성할 때 비슷한 부분이 많았지만 설정이 필요한 부분이나, 조건에 따른 스타일링을 적용방법, 주의할 점 등에 대해 새롭게 알게 된 점이 있어서 나중에 필요할 때 꺼내보고자 정리해 두려고 한다. CSS module 기본 사용법 CSS module의 기본 사용법은 다음과 같다. module.css 확장자를 사용하여 CSS 스타일 파일을 만들어 주고, 사용처에서는 해당 파일을 import해와서 사용하면 된다. import로 불러온 styles 객체 안에 있는 값인 CSS 파일에서 선언한 클래스 이름을 참조해서 className을 지정해 준다. 클래스이름이 .card..

어느덧 코드잇 부트캠프도 11주 차를 보내고 있다. 9주 차부터는 기초 프로젝트를 진행하면서 약 2주간에 걸쳐 팀프로젝트를 완성했다. part2에서 만난 팀원분들과 함께 리액트를 공부하며 3주를 보내고, 이후 프로젝트를 진행하고 발표까지 하면서 정신없는 시간을 보냈던 것 같다. 이 포스팅에서는 코드잇 처음 팀프로젝트인 만큼 전체적인 팀프로젝트 진행과정에 대한 회고를 작성해 보려 한다. 🔮 프로젝트 소개 기초프로젝트인 만큼 피그마와 API 명세서, 기본 요구사항이 주어진 상태에서 UI와 기능을 구현하는 프로젝트이다. 우리가 선택한 프로젝트는 [💌 오픈마인드]로 질문과 답변을 통해 마음을 열고 대화 나누는 소통 플랫폼이다. 질문 대상을 선택해서 원하는 질문을 남기고, 질문을 받은 사람은 답변을 하면서 소통해..

프론트엔드 개발자를 꿈꾸면서 올해 3월부터 지금까지 쉼 없이 달려온 것 같다. 지난달부터 [코드잇] 부트캠프 1기에 지원하여 열심히 공부 중이다. 얼마 전에 첫 시작부터 6주간 해온 part1 활동이 마무리되었고, 그동안의 생각을 정리할 겸 회고를 작성해 본다. 6주 동안 학습한 내용 코드잇 부트캠프는 6~7주 단위로 part가 구성되어 있고, 총 4개의 part로 이루어져 있다. part1에서는 웹 개발 기본기(HTML, CSS, JS) 커리큘럼을 수강하였다. part1 기간 동안 과제로 라이브러리, 프레임워크 없이 HTML, CSS만으로 웹페이지를 제작하고, JS를 수강하면서 간단한 인터랙티브 웹을 구현하였다. 과제를 하면서 예전에 포트폴리오 클론코딩을 할 때 배운 BEM 네이밍 방식을 class 이..

최근 자바스크립트 '이벤트(event)'를 다시 공부하면서 이벤트 전파에 대한 개념을 다시 한번 정리하는 시간을 가졌다. 또한 이벤트 전파와 더불어 이벤트 위임에 관한 개념도 더 확실히 알게 되어 글로 정리하게 되었다. 🫧 이벤트 전파 - 버블링과 캡쳐링 🫧 이벤트 위임 🛠️ 위 개념을 바탕으로 로그인 페이지 폼양식을 이벤트 버블링 개념을 활용하여 리팩토링 하기 이벤트 전파 DOM 트리의 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파된다. 즉, 이벤트가 발생했을 때 생성된 이벤트 객체는 이벤트 타깃(event target)을 중심으로 DOM 트리를 통해서 전파되는데 전파 방향에 따라 캡쳐링과 버블링으로 구분된다. ✅ 이벤트 캡쳐링 (capturing phase) 이벤트가 상위 요소에서 하위 요소..

부트캠프에서 최근 2주 동안은 HTML, CSS를 배우면서 매주 과제로 주어지는 웹사이트를 점진적으로 만들고 있다. 오랜만에 HTML과 CSS만으로 웹사이트를 만들어보니 확실히 리액트처럼 컴포넌트 단위로 만들 때보다는 전체적인 레이아웃을 고려해서 태그와 스타일을 적용해 나가야 한다는 점에서 차이가 느껴진다. 이번 포스팅에서는 지금까지 화면을 구현해 나가면서 고려해서 적용한 점, 미리 생각하지 못해서 아쉬웠던 점, 더 좋았던 방법 등을 토대로 앞으로 비슷한 상황에서 어떻게 좋은 레이아웃을 그릴지에 대해 스스로 정리해 볼 겸 글을 작성하려고 한다. 초기값 설정과 reset.css 보통 css 초기값을 설정할 때 하나의 파일 맨 상단에 넣어주는 경우가 많았는데 각 페이지별로 html파일도 각각 만들어가다 보니..