ChatGPT 선생님과 성장하는 독학 개발자의 기록

2024년 4월 2일, 원티드 프론트엔드 챌린지 요약 정리 리액트를 추천하는 이유NPM 다운로드 1위가장 많은 사용자 수큰 시장방대한 커뮤니티이슈/정보들로 답을 얻어 낯선 에러 없음높은 자유도와 효율성자바스크립트 기반라이브러리로 코드 작성 및 구성 유연다른 프레임워크도 쉽게 사용 가능유리한 취업기본적인 자격 요건대부분 회사에서 요구 리액트 이전의 브라우저페이지 이동마다 'HTML 파일' 재호출 → 페이지 로딩할 때마다 서버에서 리소스를 전달받고 해석한 뒤 출력서버 성능상의 이슈 발생 → 과도한 트래픽으로 서버에 높은 부화 모던 웹앱 특성 상 사용자 인터렉션이 잦으면 상태 유지의 번거로움과 불필요한 로딩 발생으로 "비효율적" 리액트 등장메타 개발의 프론트엔드 라이브러리 → 코드를 효율적으로 관리할 목적으로..

React에서 컴포넌트는 쉽게 말해 '함수'를 말한다. 함수는 값이 변경되는 등 변화가 생겼을 때, 다시 호출된다. 문제는 'State'의 값이 호출될 때마다 초기화된다는 것이다. 간단한 상황일 때는 문제가 없으나, 복잡한 계산과 같은 경우일 때는 성능에 문제가 발생하게 된다. 이 때, 내용을 기억하라는 의미의 'Memoization'을 담은 'useMemo'를 사용한다면, 매번 호출되는 것이 아닌 해당 함수에 변화가 발생했을 때만 다시 렌더링되도록 하는 것이다. 아래의 예시 코드를 보면, const expansiveCalculate = (numbers) => { console.log("계산중..."); return numbers.reduce((acc, curr) => acc + curr, 0); }; ..

퀵뉴스라는 프로젝트를 만들면서, 오픈 API의 데이터를 가져오기 위해서 나는 "useQuery"를 사용했었다. 이 이전에는 "axios.get()"으로 데이터를 가져왔으나, 조금 더 나은 방법으로 실무에서도 자주 사용하고 있는 "useQuery"를 사용해서 데이터를 가져오도록 했다. 그러나, 이번에 "RTK Query"에 대해 알게 되면서 "둘 중에 무엇이 더 나을까?"에 대해 알아보기 시작했고, 데이터를 "RTK Query"로 가져오는 것이 "useQuery"로 가져오는 것보다 장점이 더 많고, 실무에서도 더 자주 사용하고 있다고 하는 정보를 알게 됐다. 간단하게 "useQuery"보다 "RTK Query"가 가지고 있는 장점에 대해 말하자면, useQuery보다 더 간결한 코드 자체적인 캐싱 기능 에..

올 해 1월, 원티드 프리온보딩 프론트엔드 챌린지를 수강하는 기간동안 디스코드에서 많은 사람들의 경험을 공유받았다. 이 때, 사람들이 모달 생성에 대해 이야기를 나눴고, 이 때, 한 사람이 "createPortal()"에 대해 언급했다. 모달창을 생성하기 위해서 한 가지 방법이라고 추천을 해준 것이다. 이 당시 나는 모달창 생성을 구현하고 있었고, "createPortal()"를 처음 알게 되면서 궁금함이 생겨 공식 문서를 찾아봤다. 생각보다 여러 가지 활용법이 있었고, 그 중 하나가 모달이었다. 구현도 생각보다 단순했다. 그렇지만, 당장 활용할 가치가 있는지 의문이 들었다. 왜냐하면, 개발중인 프로젝트는 모달 컴포넌트를 재사용할 필요가 없는 상황이었고, 예시 코드를 봤을 때, 오히려 컴포넌트의 개수만 ..

나는 몇 달 전까지 "1일 1커밋"을 목표했었다. 많은 사람들이 자기소개서에 1일 1커밋을 강조하는 것이 유행이였고, 나 또한 그 유행에 따라 1일 1커밋을 진행했었다. 그러나, 지금은 1일 1커밋을 목표하지 않는다. 그 이유를 작성해보려고 한다. 1일 1커밋을 목표한 이유 많은 사람들이 1일 1커밋을 목표하고, 강조하였다. 한 유명한 개발자가 1일 1커밋을 언급한 적이 있었는데, 아마 그 글을 읽고 나서 많은 사람들이 1일 1커밋을 따라하기 시작한 것 같다. 나 또한, 1일 1커밋이 스스로를 성실한 사람으로 보이게 만들 수 있겠다는 생각이 들어 1일 1커밋을 목표하게 되었다. 그러나, 어느 순간 의도하지 않게 무의미한 커밋을 하게 되는 것을 느꼈다. 1일 1커밋을 중단한 이유 매일 커밋을 해야 한다는 ..

쉽게 오늘의 뉴스를 확인할 수 있는 프로젝트인 "퀵뉴스"에서 뉴스를 검색할 때, 검색어를 입력받고, 단어와 관련된 뉴스를 출력하도록 구현했다. 실행하여 확인한 결과, 문제없이 동작하였다. 그러나 이 때, 문제가 하나 있었다. 바로, 같은 단어를 여러 번 검색 요청을 하면 중복 요청이 일어난다는 것이다. 검색 기능을 구현할 때, 검색어를 입력하지 않을 경우에는 검색이 되지 않고, 검색어가 입력하였을 때만 검색하도록 구현하였다. 이 때, 중복 단어에 대한 검사를 구현하지 않아 문제가 발생한 것이다. 이 문제는 불필요한 API 요청을 할 뿐만 아니라, 비용적인 면에서도 비효율적이었다. 이를 해결하기 위해, 같은 단어로 검색할 경우, 요청이 일어나지 않도록 수정하여 개선해야 했다. 여기서 도움을 얻은 것은 바로..

나는 영상 제작에 취미를 가지고 있다. 촬영한 영상들을 한 페이지에 나타낼 수 있는 페이지를 만들 계획을 갖고 있었고, 새해가 된 기념으로 이번 기회에 프로젝트를 만들기 시작했다. 우선, 기본적인 구현 목록은 다음처럼 계획하였다. 각 카테고리 별 동영상 출력하기 각 동영상을 이미지 버튼으로 실행할 수 있도록 구현하기 해당 동영상의 이미지 버튼을 클릭하면 모달창으로 동영상 실행하기 위의 구현 내용을 테스트 이미지와 동영상 파일을 활용해 최적화를 고려하지 않은 채 구현까지는 성공했다. 구현을 성공했으니, 최적화 전에 실제로 사용할 이미지 파일들과 동영상 파일들을 사용해야 했다. 문제 원인 모든 파일들을 용량 최적화를 진행하고 나서, 프로젝트에 추가했다. 이미지 파일들은 동영상보다 용량이 작았기 때문에 프로젝..

트위터 클론코딩 챌린지 메인 와이어프레임 자기소개 프론트엔드 개발자로 취업을 준비하고 있습니다. 노마드 코더에서 자바스크립트, 타입스크립트, React, Next.js 등 프론트엔드 기술부터 기본적인 백엔드 기술까지 강의를 통해 많은 것을 얻었습니다. 저는 React, Next.js, TypeScript, Styled-Components로 개발하는 것을 선호합니다. 주도적인 개발 경험과 프론트엔드, 백엔드의 기본적인 기술에 대한 복습을 위해 이번 챌린지를 신청했습니다. 디자인 역량은 많이 부족하지만, 와이어프레임 인증합니다. 메인 페이지 와이어프레임 사진 포인트 색상/로고/기타 구현하고 싶은 사항 기본적인 레이아웃 구성은 트위터(X)와 비슷하게 구현할 계획입니다. 메인 색상은 Tailwind CSS에서 ..