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

2023년 8월, 원티드 프리온보딩 프론트엔드 챌린지 요약 테스트 코드테스트는 비즈니스 로직을 테스트하는 것이다.UI는 비즈니스 로직과 관련된 것만! 스타일과 관련된 테스트는 진행하지 않는다. 또한, 테스트케이스 1개 당 하나의 로직만 테스트한다."Jest"의 "Describe" 안에 "it"/"test" 중 하나를 사용하여 하나의 로직을 테스트한다.각 테스트 케이스는 "expect"를 사용해서 검증하며, 실제 컴포넌트에서 성공한 경우 일어나는 일과 실패한 경우 일어나는 일을 활용하여 검증하게 된다. 이 후, 테스트코드를 리뷰하는 과정을 거친다. React 최적화성능 측정 툴Lighthouse이는, 웹 성능을 분석하는 오픈소스이다.주요기능에는 다음과 같다.성능분석접근성검사SEO 평가PWA기준 평가"Lig..

2023년 6월, 원티드 프리온보딩 프론트엔드 챌린지 요약 Atomic Design Pattern아토믹 디자인 패턴을 위해서는 '인터페이스'가 가장 중요하다.그렇다면, 인터페이스는 무엇일까? 타입스크립트의 인터페이스일까?인터페이스는 '대시보드'일 수도 있고, '깜빡이'일 수도, '사이드미러'일 수도 있다. 더 쉽게 말하자면, 애플의 USB 케이블(충전기, 포트)일 수도 있을 것이며, 가위바위보, 더 복잡해지면 묵찌바일 수도 있다. 아토믹 디자인 패턴은, 원자와 분자를 이루는 인터페이스를 만드는 방법이다.'Atom'은 인터페이스를 구성하는 가장 작은 단위이며, 조합이 없다.'Molecule'은 Atom을 조합하여 만든 더 복잡한 컴포넌트이며, 여기서부터는 조합이 있다.'Organism'은 Molecule을..

2023년 8월, 원티드 프리온보딩 프론트엔드 챌린지 요약 지역변수와 전역변수프로그래밍을 하다보면, 지역변수와 전역변수를 어떻게 사용해야 할 지 고민할 때가 있다. 여기서 알아가야 할 것은, 가급적이면 "지역변수"를 사용하는 것이 권장된다. "전역변수"는 가독성에도 불편함을 줄 수 있고, 나중에 에러가 발생할 가능성도 존재한다. 그래서 꼭 필요한 경우에만 전역변수를 사용해야 한다. Context API이는, 상태관리에 필요한 기술로 리액트 내장 패키지로 추가 라이브러리 설치할 필요가 없다.관심사가 여러 개라면, 숫자에 맞는 "Provider"를 선언해야 한다. 그러나, Context API를 사용하게 되면 불필요한 렌더링이 발생할 가능성이 있으니, 이를 유의해서 사용해야 한다. Recoil이는, 리액트와..

2023년 8월, 원티드 프리온보딩 디자인 챌린지 UI/UX 요약 간격(Spacing)컴포넌트 내부의 여백 혹은 공간이나 컨텐츠 사이의 공간을 의미하며, 넓은 의미로는 사용되는 모든 수치를 포함한다. CSS 간격 용어 알아보기paddingmargingap 근접성 원칙으로 알아보는 간격의 중요성게슈탈트 이론 - Proximity시각인지 이론의 근접성의 원칙에 따르면, 근접한 개체들은 동일한 개체로 인식하는 것을 말한다. UI에 적용하기연관성이 있는 요소들은 서로 가까이 배치관련이 없는 요소들은 간격을 충분히 넓게 사용동일한 유형을 가진 요소들은 같은 간격을 두고 배치 8배수로 간격 규칙 정하기왜 8배수로 정해야 할까? 그 이유는, 간격 요소에 8배수를 사용하면, 0.75나 1.5배 렌더링을 가진 환경 등을..

2023년 8월, 원티드 프리온보딩 디자인 챌린지 UI/UX 요약 사용자 경험 (User Experience, UX)사용자가 어떤 제품이나 서비스를 직/간접적으로 이용하면서 느끼는 총체적인 경험을 말한다. 사용자 경험의 예시는 다음과 같다.만약, 취업 또는 이직 목적으로 원티드 서비스를 사용한다고 가정했을 때, IT회사에 프로덕트 디자이너로 구직한다고 하자.그럴 때, 첫 번째로 다양한 경로로 원티드 사이트로 진입하게 된다. 구글 검색이나 네이버 검색이 될 수도 있고, SNS의 게시글을 통해서 접근할 수 있을 것이다. 그리고 해당 서비스에 처음 접속했을 때 보이는 화면과 구직을 위한 서비스를 사용할 때, 실제 채용까지 이어지는 서비스 경험 등이 모두 사용자 경험이 될 수 있다. 사용자 인터페이스 (User..

결국 네이버 부스트캠프에 최종탈락하였다. 이전에 말한대로 부스트캠프에 탈락하게 된다면, 부트캠프에 미련없이 포기하겠다고 다짐했는데 이제 이 다짐을 지키게 되었다. 1차 코딩테스트를 통과할 때만 해도, "이거 생각보다 할 만 한데?", "잘하면 합격할 수 있겠는데?" 하는 생각이 들었다. 그러나, 2차 코딩테스트를 보고 나서, 어느 정도 포기하고 있었다. 그래도 혹시나 하는 마음이 1% 정도 있었다. 결과적으로는 역시나 1%의 기대가 사르르 무너지면서 탈락의 맛을 봤다. 이제부터 나만의 부트캠프를 만들어서 스스로 나아갈 방법을 찾고, 실천하고, 행동할 것이다. 힘내자! 이런 실수를!! 네이버 부스트캠프 최종 결과가 나오기 얼마 전, 애플 디벨로퍼 아카데미 @포스텍에서 과제 전형 합격 메일을 받았다. 그래서..

마지막으로 지원했던 원티드 프리온보딩 인턴십에 탈락했다. 사전 과제에서 풀지 못한 에러를 해결하지 못한 게 큰 원인이라고 생각이 든다. 나중에 발생했던 회원가입을 하고 나서 로그인을 했을 때 ToDo 페이지로 이동하지 못하는 에러를 해결하지 못했다. 그래도 사전 과제를 하며, React의 기초적인 부분을 다시 한 번 다루어볼 수 있었다. 그리고, Nest로 이미 구현된 서버 코드를 활용하여 "Input"의 값들을 "POST"로 API 요청 코드를 구현해보면서 과정을 눈으로, 그리고 손과 머리로 직접 배울 수 있었다. (LocalStorage에 등록된 ID값으로 ToDo List를 불러오는 것까지!) 비록, 탈락하였지만 사전 과제를 통해서 새로운 배움도 얻었고, 목표 달성을 위한 의지도 가질 수 있어서 좋..

원티드 프리온보딩 챌린지는 누구나 참여할 수 있는 아주 좋은 강의이다. 강사님의 경험과 기술 지식을 전달받을 수 있고, 함께 참여하고 있는 사람들과 대화하며 다양한 지식을 습득할 수 있다. 우연히 알게 된 그 기회를 놓치고 싶지 않았고, 나는 6월 원티드 프리온보딩 프론트엔드 챌린지에 참여했다. 첫 번째 날 첫 날은 월요일 저녁 8시에 시작되었고, 강사님의 소개로 강의는 본격적으로 시작했다. 강사님은 "캐치테이블" 서비스를 운영하고 있는 와드에서 근무하고 계신다고 소개하셨다. 와드는 최근 자주 듣고 있는 기업이다. 배달의 민족을 운영하는 우아한 형제들 개발자들이 많이 이직했다는 곳으로 알고 있기 때문이다. 강사님은 많이 바쁜 와중에도 챌린저들을 위해 강의를 진행하셨다. 소개가 끝나고, "컴포넌트 주도 개..