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

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

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

API 호출에 필요한 상태, 한 눈에 관리하기 const [registerData, setRegisterData] = useState() const [step, setStep] = useState("가입방식") return ( {step === "가입방식" && { setRegisterData(prev => ({ ...prev, 가입방식: data })) setStep("주민번호") }} />} {step === "주민번호" && setStep("집주소")} />} {step === "집주소" && { await fetch("/api/register", { data }) // API 호출 장소변경 setStep("가입성공") }} />} {step === "가입성공" && } ) 위의 코드를 "Step"..

프론트엔드에서 성능은 무엇일까? 웹 화면을 구현하고 서버로부터 데이터를 받아오는 과정에서 리소스들을 사용자들에게 빠르게 보여줄 수 있기 때문이다. 즉, "성능 == 속도"이다. 그렇다면, 성능이 왜 중요할까? 사용자 유지, 웹 사이트의 성능이 더욱 좋아질수록 사용자 참여도와 충성도 증가 사용자 경험, 웹 사이트 성능은 사용자 경험의 중요한 요소이며 느린 웹 사이트는 "사용자의 스트레스 증가"의 원인이고, 그로 잉ㄴ해 사용자가 웹 사이트를 "이탈할 가능성"이 상승 전환율 향상, 웹 사이트와 로딩 속도는 직접적으로 전환율에 영향 비용 절감, 성능이 좋지 않은 웹 사이트는 사용자에게 실질적인 비용을 초래하며, 데이터 요금제를 사용하는 모바일 사용자는 "페이지 크기가 커질수록 추가 비용"이 발생 실제로 비즈니스..

componentDidMount와 useEffect useEffect로 componentDidMount를 비슷하게 흉내낼 수 있는 방법은 "useEffect(function, [])"을 사용하는 것이다. 이는, prop와 state를 잡아두기 때문에 초기 prop과 state를 확인할 수 있다는 것이 차이점이다. 즉, 비슷하지만, componentDidMount를 포함한 다른 라이프사이클 모델과는 다르다. useEffect 기본 두 번째 인자의 배열은 빈 의존성 배열로, 리액트 데이터 흐름에 관여하는 어떠한 값도 사용하지 않겠다는 뜻이다. 즉, 다른 props와 state에 영향을 받지 않고 처음 컴포넌트가 새로 생성되는 시점에 한 번 실행된다. 만약, 잘못된 방식으로 의존성 체크를 생략하는 것보다 의존..

HTML 태그를 사용하게 될 때면, 태그가 범벅이 된다. 그 만큼, 시멘틱 태그를 제대로 알지 못하고, 그래서 제대로 활용하지 못하고 있다는 뜻이다. 지금은 그나마 나아졌지만, 예전에는 정말로 만 사용했다. 그래서 이번 기회에 시맨틱 태그를 제대로 사용하기 위해 학습하려고 한다. HTML 시멘틱 태그 웹 페이지의 구조와 의미를 더 명확하게 전달하기 위해 사용한다. 이를 통해 웹 페이지의 가독성, 접근성, SEO 등이 향상될 수 있다. 더욱 효율적이고 적절한 HTML 시멘틱 태그 사용 방법과 예시를 확인하면서 학습하려고 한다. 웹 페이지의 머리말을 나타내는 영역으로 사용된다. 사이트 로고, 제목, 검색 폼, 사이트 내비게이션 등이 포함된다. Website Title Home About Contact 웹 페..

오랜만에 이전에 작업했던 프로젝트를 실행하였다. 잠깐, 내용을 확인할 것이 있었기 때문이다. 그런데, 실행으로 "npm start"을 입력하니 에러가 발생했다. There might be a problem with the project dependency tree. It is likely not a bug in Create React App, but something you need to fix locally. The react-scripts package provided by Create React App requires a dependency: "webpack": "4.41.0" Don't try to install it manually: your package manager does it autom..

프로젝트를 하면서 '상태 관리'를 편하게 하기 위해 사용하는 라이브러리가 'Redux'이다. 그러나, 'Redux'는 이전에 사용한 라이브러리이며 단점이 존재한다. 이를 개선해 나온 것이 'Redux Toolkit'이다. 이번 시간에 프로젝트에 활용할 'Redux Toolkit'을 미리 학습하려고 한다. npm install @reduxjs/toolkit 우선, 사용할 라이브러리를 설치해야 한다. // productSlice.js let initialState = { productList: [], selectedItem: null, } function productReducer(state = initialState, action) { let {type, payload} = action; switch (t..