천진난만 코딩 스토리

7주차의 미니프로젝트 주차와 8주차의 클론코딩 프로젝트 주차를 지나서 어느새 실전 프로젝트 주차가 되었다. 7,8주차에는 일주일동안 만들어내야 해서 뭔가 바쁘게 지나갔던 것 같다. 실전 프로젝트는 그만큼 스코프도 넓고 실전이고 팀 리더이기에 따라오는 부담감과 책임감은 있지만, 기간이 길어서 그런지 촉박하거나 불안하지는 않다. 오히려 해야할 것들을 하나하나 해결해 나가며 얻는 뿌듯함이 더 크달까?? 7주차에는 협업이라는 것에 들떠서 했던 것 같고, 8주차에는 클론 답게 똑같이 만드는 과정에 허덕였던 것 같고, 이번엔 약간 지친 상태에서 시작을 한 것 같다. 하지만 팀원들과 기획을 하고 프로젝트를 진행 하면서 오히려 힘을 얻어간 것 같다. 이번 실전 프로젝트에서는 드래그 앤 드롭으로 space를 구성하고 s..

과제만 주구장창 했기에 오류와 싸우느라 바빠서 블로그에 적을 것들을 잊어버렸당....... 그나마 기억나는 것을 적어야겠다. 일단 느낀 건 thunk는 어렵다...... 리액트 쿼리랑 너무 비교될 정도로 어려웠다. 그치만 thunk로도, 리액트 쿼리로도 과제 구현에 성공했다!!!! 먼저 데이터를 받아와서 get을 해주고 상세페이지를 연결해야 하는데 상위 컴포넌트에서 get을 한 것이 아니기에 오류가 났다.. 그래서 아예 Router.js에서 get을 해주고 데이터를 내려주었다. 그렇게 사용하니 문제없이 사용할 수 있었다!! 과제 해둔게 배포 안되어 뭔가 했더니 yarn build로 확인해보니! 리액트 아이콘 패키지 설치 안했다... 별다른 오류는 안 떠서 몰랐다..... 패키지 설치하니 잘 된다!!!!

이 부분 내용들을 아직은 와닿지 않는다.... 중요한 부분인 것은 알겠고 흐름까지는 이해했지만, 이 부분은 협업 때 사용하기 위해 더 공부가 필요할 것 같다. 다시 한번 보는걸로!!! 1) 인증&인가 ① 인증(Authentication) vs. 인가(Authorization) ❶인증(Authentication) 서비스를 이용하려는 유저가 등록된 회원인지 확인하는 절차이다. ❷인가(Authorization) 특정 리소스에 접근할 수 있는 권한이 있는지 확인하는 절차이다. ② http 프로토콜 통신의 특징 ❶ 무상태 (Stateless) 서버는 클라이언트의 상태를 기억하지 않는다. 각 요청마다 서버에서 요구하는 모든 상태 정보를 담아서 요청해야 한다. 상태값은 매 요청마다 클라이언트가 가지고 오기 때문에, ..

이 내용은 뭔가 재미있는 부분이었다!! 테스트 하기 위해 버튼을 여러번 타다다다다닥 누르며 스트레스를 풀었달까 ㅎㅎㅎㅎㅎ 많이 어렵지도 않고 재미있어서 좋았다 하지만 이 부분이 나중에 내게 어떤 어려움으로 다가올지 아주 두근하다.....!! 1) Throttling & Debouncing 짧은 시간 간격으로 연속해서 이벤트가 발생했을 때, 과도한 이벤트 핸들러 호출을 방지하는 기법에 쓰로틀링과 디바운싱이 있다. Timer Web API 중 setTimeout 메소드를 사용하여 쓰로틀링과 디바운싱을 각각 구현해보고 원리를 이해하고 적용할 줄 알아야 한다. ① Throttling 짧은 시간 간격으로 연속해서 발생한 이벤트들을 일정시간 단위(delay)로 그룹화하여 처음 또는 마지막 이벤트 핸들러만 호출되도록..

리액트 쿼리...... 생각보다 이 친구가 날 괴롭혔다... 썽크를 해서 가볍게 할 줄 알았던 나 반성해.... 결국 이 내용을 이해하기 위해 내가 전에 만들었던 투두리스트 파일을 뜯어가며 새로 고쳐보며 이해하였다. 결국 강의에 나오지 않은 부분도 완성하기 성공했다ㅡㅜㅜㅜ 너무 감격스러운 것 ㅠㅠㅠㅠㅠ 요 몇 주 심각히 힘들었는데 보상받은 기분이라 너무 좋았다! 1) React Query ① 리액트 쿼리란 ❶ 기존 미들웨어의 한계 우리는 다른 서버와의 API 통신과 비동기 데이터 관리를 위해 Redux-thunk, Redux-Saga 등 미들웨어를 채택해서 사용할 수 있다. 하지만 다음과 같은 문제가 있습니다. 보일러 플레이트 : 코드량이 너무 많다. 규격화 문제 : Redux가 비동기 데이터 관리를 위..

지금 이 내용들은 "아 이렇게 쓰는거구나.", "이런식으로 사용하면 되겠네"라는 이해는 되지만 막상 과제에서는 잘 적용할 수 있을지 모르겠다. 사실 걱정되는 것이 이번 주차는 저번 주차의 과제를 하고 강의를 늦게 보기 시작해서 속도가 많이 느리다... 그래서 더 분발하고 있지만 내용이 어려운 만큼 시간이 부족한 것 또한 사실이다.. 그래서 과제 두 개를 모두 해낼 수 있을지도 모르겠다. 그렇지만 일단 기죽지는 않기로 했다!! 1) Redux 미들웨어 ① 미들웨어란? 리덕스에서 dispatch를 하면 action 이 리듀서로 전달이 되고, 리듀서는 새로운 state를 반환한다. 근데 미들웨어를 사용하면 이 과정 사이에 우리가 하고 싶은 작업들을 넣어서 할 수 있다. 만약 counter 프로그램에서 더하기 ..

이번 주는 월요일부터 멘탈이 깨져서 쉽지 않은 주였다. 그렇기에 지치기도 많이 지쳤고 멘타도 여러번 깨져서 쉽지 않은 주를 보냈다. 하지만 그 계기로 각성하는 계기가 되기도 했다... 저번주차에는 리덕스가 뭔지도 몰랐으니 성장하고 있다는거니까.....!

드디어 걱정되던 비동기 시작......!!! 내용 자체는 크게 어렵지 않았다. 다만 포트를 잘못 연결해서 오류가 나거나 깃 하면서 오류가 났어서 그렇지........ 강의에는 없는 내용인 인풋에서 값 입력 후 버튼을 누르면 인풋을 빈 값이 되도록 구현도 하였다. 오늘은 좀 늦게까지 공부하느라 힘들긴 했지만 뿌듯하니 됐당!!!!!!!! *이번 내용에서 사용하게 될 기본 명령어 모음! yarn add react-redux @reduxjs/toolkit //리덕스 툴킷 설치 yarn add json-server //json-server 설치 yarn json-server --watch db.json --port 4000 //json-server의 4000 port 실행 1) Axios 공식문서에 따르면 axi..

협업이 곧 얼마 남지 않았음이 와닿는 주차긴 하다. json-server도 사용해보고 HTTP 프로토콜도 배우고 나니 뭔가 설레면서 걱정되는 기분이 동시에 들었다. 다른 분들의 발목을 잡지 않기 위해 열심히 해야겠따!!! 1) json-server json-server를 통해서 FE에서는 BE가 하고 있는 작업을 기다리지 않고, FE의 로직과 화면을 구현 할 수 있어 효율적으로 협업을 할 수 있다. json-server란, 아주 간단한 DB와 API 서버를 생성해주는 패키지 이다. 우리가 json-server를 사용하는 이유는BE에서 실제 DB와 API Server가 구축될 때까지, FE 개발에 임시적으로 사용할 mock data를 생성하기 위해서다! ① json-server 설치하기 yarn add j..

리덕스에 데여서 괜히 겁먹고 리덕스 툴킷도 어려울까봐 걱정을 엄청하며 두려운 마음으로 시작했다. 근데 다행히도 걱정과는 다르게 빠르게 이해할 수 있었다!! 괜히 쫄았네.... 이번 주차에서 비동기 부분이 힘들다고 하니 쉽지만은 않겠지만 시작은 좋당! 1) 리덕스 툴킷 리덕스 툴킷은 리덕스를 개량한 것이다! 코드는 더 적게 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것이 리덕스툴킷 이고, 줄여서 RTK 라고도 한다. 새로운 것이 아닌, 리덕스의 전체 코드의 양을 줄이기 위해 새로운 API가 추가되었고, 일일히 손으로 만들어 줘야 했던 ducks 패턴의 요소들이 어느정도 자동화 되었다. 컴포넌트에서 useSelector를 통해서 사용하는 것은 모두 똑같다. 바뀐 부분은 그저 모듈 파일일 뿐!! 리..