[인프런 워밍업 클럽 2기 FE] 3주차 발자국

Day 11 리액트 테스트 경험하기평소에 개발할 때는 구현하는데 급해서 테스트 코드를 작성해 본 적이 없었는데 재밌는 경험이었다.전 직장에 근무할때는 Jenkins로 CI/CD를 했었는데, 요즘은 Github Action을 이용해서 배포를 많이 진행하는 것 같다.Github Action은 사용해보진 않았지만 Gitlab의 Webhook 기능을 사용해 Jenkins로 배포를 진행했던 적이 있어서, AWS S3 , Github Action 파트는 큰 어려움이 없었던 것 같다.앞으로 내가 주도적으로 개발을 진행하게 된다면 TDD)를 도입해보는 것도 좋은 선택이 될 것 같다. Day 12 NextJS, 타입스크립트현재 맡은 프로젝트도 NextJS를 사용했기 때문에 좀 더 집중해서 들으려고 했다.팀 프로젝트를 진행할 때 Next.js를 사용하지 않았던 경험이 있는데, 그때 SEO 최적화 작업이 상당히 복잡하게 느껴졌다. (나는 백엔드만 했지만) 그러나 Next.js는 이러한 기능을 기본적으로 지원하므로, 그 부분에서 확실한 장점이 있는 것 같다.현재 맡은 프로젝트에선 AWS Amplify로 Next.js코드를 배포하고, AWS Lambda에서 API를 호출하는데, SSR을 사용하는 경우에 초기 로딩 속도 면에서 더 유리하다.Day 13 리덕스 학습하기 및 리액트 19Redux는 애플리케이션의 전역 상태를 중앙에서 관리해 컴포넌트 간의 상태 공유를 용이하게 한다.현재 맡은 프로젝트에선 Recoil을 사용하고 있는데, 아마 Atomic 패턴을 사용하고 있어서 차용한 것 같다.요즘은 Redux,Recoil 뿐만 아니라 Zustand, Jotai도 상태 관리 라이브러리로 떠오르는 것 같다.과제 정리과제를 강의보다 먼저 진행하다 보니, 초반에 있던 자바스크립트 과제들도 자바스크립트를 사용해서 진행하는 줄 모르고 모든 과제를 React + TypeScript로 진행했다.1. 음식 메뉴 앱2. 가위 바위 보 앱useState를 사용해 상태관리를 했다.플레이어가 선택한 값을 상태에 저장하고, 컴퓨터는 무작위로 선택을 한다.총 10라운드가 끝나면 결과를 보여주고, 재시작 버튼을 눌러 게임을 다시 시작할 수 있다.3. 퀴즈 앱handleOptionClick으로 사용자가 선택지를 클릭하면, 해당 옵션을 선택하고 정답 여부를 확인한다.handleNext로 새로운 퀴즈를 생성하고 상태를 초기화 한다.css를 평소에 해본적 없어서 이것저것 해봤는데 지금와서 보니까 진짜 보기 싫다..4. 책 리스트 나열 앱책 이름, 책 저자를 입력하면 제출 버튼이 활성화된다.책을 등록하면 책이 추가되었다는 알림이 5초동안 뜬다.삭제 버튼을 누르면 책 리스트에서 책이 삭제되고 삭제 되었다는 알림이 5초동안 뜬다.useEffect 훅을 사용해서 상태가 변경될때 5초 후에 자동으로 알림 메시지를 제거했다.5. Github Finder 앱Axios로 Github API를 호출해 프로필 정보, 저장소 목록을 가져온다.입력 필드에 닉네임을 입력하면 실시간으로 정보를 가져온다.Github Token 없이 API를 호출하면 시간당 60개의 API밖에 호출을 못해서, 환경 변수로 깃허브 토큰을 따로 등록해서 사용했다.과제 6,7,8[인프런 워밍업 클럽 2기 FE] 2주차 발자국2주차 발자국에 정리해놨다.9. 디즈니 플러스 앱모든 과제중 시간이 제일 오래 걸렸다..알고보니 리액트 강의에 Netflix 사이트를 만들어보는게 있었다... 그걸 보기 전에 혼자서 진행해서 더 어려웠던 것 같다.CSS도 계속 어긋나고.. 우여곡절이 많았는데 결국 외적으로 보이는 부분은 상당 부분 포기했다.Google OAuth로 로그인을 하고, Google OAuth 서버에서 토큰을 발급 받아왔다.받아온 엑세스 토큰으로 사용자의 프로필 정보를 가져와 오른쪽 상단에 프로필 이미지를 화면에 보여줬다.tmdb 에서 토큰을 발급받아 영화 정보를 가져왔다.10. 포켓몬 도감 앱모든 과제중 제일 공들여서 작업했고, 아는 주제라 제일 재밌었다.초기에 40개의 포켓몬을 불러오고, 포켓몬 색깔에 맞춰 디자인했다. 또 타입별로 색깔을 지정해줬다.포켓몬 색깔이나 타입의 색깔이 흰색일 때는 가시성을 위해 폰트 색상을 검정색으로 변경해줬다.const getPokemonColor = (colorName: string) => { const colorMap: { [key: string]: string } = { red: "#F08030", blue: "#6890F0", green: "#78C850", yellow: "#F8D030", brown: "#A52A2A", purple: "#A040A0", pink: "#EE99AC", gray: "#B8B8D0", white: "#F5F5F5", black: "#705848", default: "#A8A878", }; return colorMap[colorName] || colorMap.default; }; const typeColors: { [key: string]: string } = { grass: "#78C850", poison: "#A040A0", fire: "#F08030", water: "#6890F0", bug: "#A8B820", normal: "#A8A878", flying: "#A890F0", electric: "#F8D030", ground: "#E0C068", psychic: "#F85888", rock: "#B8A038", ice: "#98D8D8", dragon: "#7038F8", dark: "#705848", steel: "#B8B8D0", fairy: "#EE99AC", };react-chartjs-2 라이브러리를 활용해 포켓몬의 능력치를 육각형 차트로 표현했다.포켓몬 타입 상성에 대해서는, 공격,방어를 나눠서 보여줬다.11. 퀴즈 앱(리액트)과제중 처음으로 Next.js를 사용했다. Question 페이지에서는 랜덤한 퀴즈 두개를 제시하고 즉시 정답을 확인할 수 있다.State 페이지에서는 카테고리를 고르고 그 카테고리 내에서 랜덤한 퀴즈 두개를 제시하고 즉시 정답을 확인할 수 있다.Quiz 페이지에서는 카테고리를 고르고 테스트를 시작하고 총 4문제를 제시한다. 3문제 이상 맞출시 합격, 그 외에는 불합격으로 표시하고 재시작 버튼으로 다시 테스트를 볼 수 있다.12. 쇼핑몰 앱 장바구니에 담기 버튼을 누르면 실시간으로 장바구니 카트 모양에 숫자가 올라간다.제품 이미지를 클릭하면 제품 상세 페이지로 넘어가고, 장바구니에 담기, 장바구니로 이동하는 버튼이 존재한다.장바구니에서 +,- 버튼을 누르면 갯수가 증감하고 1일때 -를 누르면 리스트에서 삭제된다.Redux를 활용해 상태관리를 진행했다.후기이렇게 총 3주간의 인프런 워밍업 클럽이 마무리되었다.다행히 회사 업무가 아직 여유로워서, 업무 중간중간 과제를 수행할 수 있었다. 채팅 앱과 Note 앱을 제외한 대부분의 과제를 완수했지만, 다른 분들의 과제를 보니 내 작업의 퀄리티가 확실히 부족하다는 생각이 들었다.워밍업 클럽 이전에는 프론트엔드 경험이 전무했으나, 이번 기회를 통해 다양한 것들을 만들어보며 좋은 경험을 쌓았다. 곧 시작될 새로운 프로젝트에서 Node와 React를 맡게 되었는데, 워밍업 클럽에서의 경험 덕분에 조금은 자신감이 붙은 것 같다.

[인프런 워밍업 클럽 2기 FE] 2주차 발자국

Day 6 Iterator, Generator, Design Pattern요즘 실무를 하면서 디자인 패턴에 관심이 점점 더 생기고 있다. 현재 내가 진행하고 있는 프로젝트는 아토믹 패턴을 사용해 함수형 프로그래밍을 적용하고 있지만, 최근 대부분의 트렌드는 객체지향 쪽으로 흐르는 것 같다.강의에서는 싱글턴(Singleton), 팩토리(Factory), 미디에이터(Mediator), 옵저버(Observer), 모듈(Module) 패턴을 배우고 있는데, 이 패턴들도 전부 객체지향적 패턴이다.현재 진행 중인 프로젝트는 어쩔 수 없이(능력의 부족으로..) 함수형 프로그래밍으로 가야 하지만, 앞으로 진행할 프로젝트에서는 어떤 방식을 사용하는 것이 더 효율적일지 고민하고 있다. 객체지향 프로그래밍이 더 나을지, 함수형 프로그래밍을 유지할지 앞으로 많이 찾아봐야겠다.미션: 비밀번호 생성 앱사실 강의보다는 과제 위주로 먼저 진행을 해서 자바스크립트로 해야 되는 과제도 모두 리액트로 진행했다.Day 7 프로젝트 만들기 미션: 타이핑 테스트 앱생각보다 많은 시간이 걸렸다.. CPM, WPM 계산 식도 헷갈렸고, 특히 html/css 에 매우 취약해서 그 부분에 시간을 많이 소모했다.총 10개의 문장에서 랜덤하게 2문장을 타이핑 테스트 하게 구현했다.재시작 버튼을 누르면 한 문장만 테스트하고 결과를 출력하길래 계속 무슨 문젠지 모르고 있었는데 그냥 브라우저에 캐시가 남아 있어서 났던 오류였다..Day 9 리액트 기본 및 Todo 앱 만들기현재 프로젝트가 기획 및 디자인 단계라, 업무적으로는 여유가 있어서 회사 업무 시간에도 공부를 틈틈이 하는데, 그래도 이어폰 끼고 강의 듣기에는 눈치가 보여서 리액트는 일단 공식 문서를 쭉 읽어보고 현재 프로젝트의 코드를 리딩하는 식으로 공부를 하고 있다. 미션: 예산 계산기 앱 Day 10 리액트로 Netflix 만들기항상 학습하는 성향 자체가 일단 무작정 시도하는 식으로 하는데, 이 부분부터는 그런 식으로 안될 것 같아서, 현재 강의 밀린 부분을 먼저 천천히 보려고 한다. 남은 기간 동안 다른 앱들을 얼마나 완성할 수 있을지 모르겠다. 취직하기 전에는 안 하던 공부를 하려니까 적응이 정말 힘들고, 마인드셋을 잡는 것도 어려운 것 같다. 회사를 다니면서도 워밍업 클럽에 참여하시는 분들을 보니 정말 존경스럽다.현재 강의가 조금 밀려 있는데, 남은 기간 동안에는 앱 구현보다는 강의를 들으며 기초에 더 집중하려고 한다.

[인프런 워밍업 클럽 2기 FE] 1주차 발자국

인프런 워밍업 클럽 2기 FE를 시작하게 된 계기최근 Node.js 백엔드 개발을 중점적으로 공부하다가, 풀스택 개발자로 취업하게 되었다. 주로 백엔드로 취업을 목표로 했지만, 예상치 않게 React와 Node.js를 다루는 풀스택 개발자로 일하게 되면서, 프론트엔드를 공부하고자 인프런 워밍업 클럽 FE를 수강하게 되었다. 느낀 점기존에 프론트엔드를 맡아서 프로젝트를 진행해 보지 않았기 때문에, 과제를 진행하는데 생각보다 시간이 오래 걸렸지만 차근차근 하면서 완성할 수 있었다. 회사에서는 아토믹 패턴을 사용 중인데, 이번 강의를 통해 다양한 디자인 패턴을 배우면서 각 패턴을 비교하고 상황에 맞게 적용하는 능력을 길러야겠다고 생각했다.앞으로출근 3주 차라 회사 업무에 적응하는 데 집중하느라 충분한 시간을 투자하지 못했지만, 2주 차부터는 매일 과제에 꾸준히 시간을 투자해 모든 과제를 완성할 수 있도록 노력할 계획이다. 앞으로 더욱 체계적으로 시간 관리를 하며 공부와 업무를 병행해야겠다.