본문 바로가기

CodeSoom- React 13기/주간회고

 (8)
[코드숨] 리액트 13기 - 8주차 주간 회고 CodeSoom 2022.11.28 - 2022.12.04 Redux Toolkit, Emotion 과제 : 레스토랑 앱 꾸미기 벌써 ..!!! 코드숨 리액트 과정이 끝이 났다. 교육을 듣는 동안 시간이 빠르게 지나간 것 같다. 이제 연말이라니..😂 오늘은 마지막 과제 PR을 올리는 최종 데이였다! 그동안 진행했던 레스토랑 앱을 꾸며 최종 결과물을 내는 것이 이번 과제였다. 강의에서 배운 Emotion으로 전체 style을 입히고 본문에 내용을 추가했다. 수정됨에 따라 다시 test 작성을 하는 중에 에러가 나서 이리저리 추가하다보니 시간이 금방 갔다. 그래도 style을 적용시킨 결과물을 보니 매우 뿌듯하였다.😊 이번 주엔 Redux Toolkit을 사용해보았는데 slice파일에 action creat..
[코드숨] 리액트 13기 - 7주차 주간 회고 CodeSoom 2022.11.21 - 2022.11.27 로그인 과제 : 레스토랑 로그인 페이지 및 리뷰 작성 페이지 구현하기 HTTPie를 사용하여 데이터 조회 및 전송을 테스트하는 방법을 배웠다. 설치를 하는데 Windows는 Mac과 방법이 달라 꽤 애를 먹었다..😂 처음 Python을 설치하고 환경변수를 설정 후 CMD에서 HTTPie를 설치했는데 CMD에서 계속 Python만 출력되고 작동되지 않았다. 알고보니 환경변수 Path를 잘못 설정하여 일어난 오류라 폴더 위치를 다시 확인 후 설정하자 에러가 해결되었다. 그리고 다시 HTTPie를 설치하는데 중단되는 에러가 발생하였다. 환경변수를 다시 살펴보고, 설치방법이 잘못되었는지 다시 확인하는 등 다양한 방법을 시도 끝에 Python 버전을 낮은..
[코드숨] 리액트 13기 - 6주차 주간 회고 CodeSoom 2022.11.14 - 2022.11.20 Routing 과제 : 레스토랑 상세 페이지 구현하기 이번주는 Routing을 배웠는데 BrowserRouter를 사용할 경우, 페이지를 새로 고침없이 주소만 변경하여 컴포넌트들을 렌더링 할 수 있음을 알게되었다. window.location.pathname 을 통해 라우팅했을 때보다 더 간편하게 사용할 수 있었다. 강의를 보면서 처음 작성할 때 로 했는데 오류가 나서 찾아보니 현재는 로 사용되며 작성법이 달라졌음을 알 수 있었다. 그리고 이번주 과제를 수행하면서 react-router-dom을 사용하였는데 클릭시에는 URL이 바뀌며 랜더링되었지만 주소창에 직접 URL을 작성할 때는 404 (Not Found) 에러가 발생하였다. 알고보니 ind..
[코드숨] 리액트 13기 - 5주차 주간 회고 CodeSoom 2022.11.07 - 2022.11.13 비동기 처리 과제 : 레스토랑 조회 구현하기 TDD로 레스토랑 조회 구현을 하는 과제를 이번주에 수행하였다. TDD를 아직 혼자서 작성하는 건 어렵게 느껴진다. 과제를 진행하다가 해설 강의를 보고 코드를 이어서 작성하는데 계속 오류가 나서 슬펐다..😥 각 Container 컴포넌트의 Test를 작성할 때 오류가 났는데 describe -it 에서 it의 바깥과 안에 작성함에 있어서 범위 오류가 났던 것이었다..! 이를 통해 render 함수를 불러오거나 useSelector 를 작성 등.. 작성하는 순서와 범위를 고려하며 코드를 작성해야하는 것을 깨달았다. TDD를 작성하면서 다양한 오류를 겪고 있는데 결국 기초부터 잘 이해하는 것이 중요한 것 ..
[코드숨] 리액트 13기 - 4주차 주간 회고 CodeSoom 2022.10.31 - 2022.11.06 Redux 적용하기 과제 1: To-do 리스트 Redux를 사용하여 리팩터링 하기 과제 2: 레스토랑 정보 확인 및 예약 시스템 구축하기 이번주 강의 내용에서는 Redux로 상태 관리를 하는 방법을 배웠는데 App에서는 사실 View가 어떻게 그려지는 지 관심만 갖게 하고 상태가 어떻게 처리되는지는 모르게 해야 함을 알게 되었다..! 그리고 Redux를 사용하여 지난번 과제였던 To-do 리스트를 리팩터링하고, 레스토랑 리스트를 등록하는 과제를 수행했다. 테스트하는 문구를 적절하게 입력하는 것이 은근 어려웠는데, 코드 리뷰를 통해 테스트 코드로 어떤 상황을 테스트하고 있는지를 다시 생각해보라고 말씀해주셔서 작성한 테스트 코드를 다시 살펴 보며 ..
[코드숨] 리액트 13기 - 3주차 주간 회고 CodeSoom 2022.10.24 - 2022.10.30 리액트 Testing 과제 : To-do 테스트 작성하기 이번 주는 TDD에 대한 어려움을 겪었던 한 주였다. 처음으로 TDD를 접해보니까 과제를 진행할 때 무엇을 테스트해야할 지, 어떻게 코드를작성해야되는 지도 잘 몰랐다. 그래서 지난번 기수들의 코드와 코멘트를 살펴보고 트레이너님이 알려주신 링크와 다양한 참고사이트를 통해 테스트 코드를 작성하는 법을 공부했다. 그래도 작성에 어려움을 겪어서 나중에 아샬님의 해설 강의를 보고 코드를 이해하는 시간을 가질 수 있었다. test대신 코드의 행동을 더 섬세하게 설명하는데 적합하다는 describe-context-it 구조를 사용하여 테스트 코드를 작성하였는데 계층 구조로 구분할 수 있어서 유용했다. ..
[코드숨] 리액트 13기 - 2주차 주간 회고 CodeSoom 2022.10.17 - 2022.10.23 Facts (사실, 객관) Feelings(느낌, 주관) Findings(배운 점) Facts (사실, 객관) ㆍ리액트 이해하기 (ReactDOM.render, Components & Props, Hook- useState, 선언형 프로그래밍, 관심사의 분리) ㆍ과제 1 수행 : 카운터 앱을 만들고 각 컴포넌트 마다 파일을 분류한다. ㆍ과제 2 수행 : Todo 앱 만들기 - 입력하여 등록, Todo List 삭제, 없을시 해당 문구 띄우기 Feelings(느낌, 주관) 더 많은 공부의 필요성 제출한 과제의 코드 리뷰를 받으면서 몰랐던 정보를 많이 알게 되었다. import React from 'react'; 를 사용하는 것이 당연한 줄 알았는데..
[코드숨] 리액트 13기 - 1주차 주간 회고 CodeSoom 2022.10.10 - 2022.10.16 Facts (사실, 객관) Feelings(느낌, 주관) Findings(배운 점) Facts (사실, 객관) ㆍ개발환경을 구축하는 방법 - Node.js, NPM, Webpack Dev Server, ESLint ㆍJSX 이해 ㆍ변수의 재할당 대신 매개변수를 사용하여 값을 변경하였다. - let 제거하기 과제 수행, 사칙연산 계산기능 과제 수행 Feelings(느낌, 주관) 코드리뷰의 중요성 지금까지 내가 작성한 코드를 누군가 봐주고 리뷰해줄 일이 없었기 때문에 이번 코드숨의 리뷰 과정이 무척이나 좋았다. 지금까지 코딩 공부를 하며 프로젝트를 할 때에도 내가 코드를 올바르게 작성하고 있는지 알 수 없었기에 불안함을 가졌다. 만약 혼자서 강의를 ..

티스토리툴바