Land of Joe

4월 1일! 지난 프로젝트 진행 일지를 쓴 지 벌써 한 달이 또 지나갔다. 3월이 어떻게 지나갔는지 모르게 그저 꾸준하게 살다보니 벌써 4월이다. 아침 6:30에 일어나 30분 가량 산책을 하고 아침밥을 먹고, 8시에 출발해 9시 경 학원에 도착해 오늘 할 일을 스케줄러에 적고 9:30부터 할 일을 시작하는 것으로 매일을 보냈다. 할 일을 구체적으로 적긴 어려웠지만 한 일을 상세하게 적음으로써 프로젝트 진행 정도를 파악하기에도 좋고, 나의 진행 속도를 돌이켜보기에도 좋았다. (오전시간엔 뇌를 깨우는 용도로 c++ 언어 공부를 30분 정도씩 하는 것도 좋은 루틴이었다) 한 달 동안 api 연결을 제외한 페이지 제작은 모두 끝냈다! 정확히 3월 8일(금)부터 3월 28일(목)까지 진행하였다. (주말 제외) ..

2024/02/08 프로젝트 첫 모임 (정기미팅 #1) 을 가졌다. 프론트엔드는 나 포함 2명, 백엔드는 세 명, 총 다섯 명. 시간을 보니 프로젝트를 공식적으로 시작한 지도 벌써 한 달이 다 지나갔다. 현재 진행상황은 기획(요구사항 명세서, 와이어프레임), 디자인(스토리보드), DB 및 API 명세까지 마무리 한 상태이다. 위 단계들이 모두 개발은 아니므로 기획이라고 뭉뚱그려 말한다면, 사실 기획이 이렇게 오래 걸릴 줄은 몰랐다. 첫 미팅 날 바로 아이템 선정을 마무리 지었기 때문이다. 아이템 선정은 팀원들 각자가 생각해온 아이디어들을 모두 취합한 후, 그중에서 가장 실현 가능성이 있는, 쉽게 말해 우리가 진짜 만들어낼 수 있을 만한 것으로 선택하였다. UX적으로 아쉬움과 한계가 있을 것은 당연했고, ..

Unknown command: "create-react-app" 계속 이런 오류가 나오고 npm ERR! Your cache folder contains root-owned files, due to a bug in npm ERR! previous versions of npm which has since been addressed. npm ERR! npm ERR! To permanently fix this problem, please run: npm ERR! sudo chown -R 501:20 "/Users/jke/.npm" 이런 오류가 나오고... 개발 진행하는 것도 두려운데 왜 시작부터 날 어렵게 하는지.....ㅠㅠㅠㅠ 오류를 읽고도 캐쉬 폴터 권한에 문제가 있구나까진 파악을 했는데 아래 떡하니 su..

1. 비동기 1-1. 비동기 함수 기본적으로 자바스크립트는 동기적이다. = 호이스팅(변수 및 함수 선언)이 된 후부터 코드가 작성된 순서에 따라 작동한다. ※ 비동기 함수는 본인이 끝나는 것을 기다리지 않고 다음 줄을 바로 실행하도록 한다. ※ 오래 걸리는 작업을 기다리지 않고 다음 작업을 먼저 하게 하기 위함. 1-2. 비동기 함수의 종류 [ js 내에 이미 있는 비동기 함수 ] 시간을 이용하는 함수 (setTimeout, setInterval) 이벤트 등록 함수 (addEventListener) 백엔드 통신 함수 (fetch) 리액트 내에서의 비동기 함수 (useEffect) 데이터베이스 연결 함수 ⇒ 위 함수들의 공통점: 시간이 오래 걸리는 함수임. 함수의 매개변수로 함수를 받음. [ 개발자가 직접..

지난 주엔 전역 상태 관리 Global State Package의 대표 주자, Redux에 대해 배우고 나의 CRA 리액트 프로젝트에 적용해보았다. React-Redux를 사용할 때엔 action, reducer 개념부터 시작해서 useDispatch, useSelector까지 전체 흐름을 이해하는 데 꽤 애를 썼었다. 그러나 오늘 배운 Recoil 리코일! 정말 얼마나 단순하던지..! 그리고 useState와 사용 방식이 비슷해 반갑기도 했다. 각설하고 배운 내용 정리 시작~! Recoil 전역 상태 관리 패키지 20년도 Meta에서 리액트 전용으로 쓰라고 만들어준 패키지 [ Recoil의 특징 ] 리액트 전용이라서, 리액트 문법에 매우 어울린다. 불필요한 설정이나 연결 코드 등이 필요 없다. Hook..

Actions must be plain objects. Instead, the actual type was: 'function'. You may need to add middleware to your store setup to handle dispatching other values, such as 'redux-thunk' to handle dispatching functions. See https://redux.js.org/tutorials/fundamentals/part-4-store#middleware and https://redux.js.org/tutorials/fundamentals/part-6-async-logic#using-the-redux-thunk-middleware for example..

제목 오타임..... 사실 오타 아님.......ㅎ

[ CRA가 기본으로 제공하는 초기 구성 ] => 폴더: node_modules, public, src => 파일: .gitgnore, package-lock.json, package.json, README.md public 폴더엔 정적 파일들을, src 폴더엔 동적 파일들을 넣는다고 한다. 그래서 public 폴더에 index.html 파일을 넣고, src 폴더에 App.js와 index.js 파일을 넣는 것으로 보통 CRA를 시작한다. 내가 고민한 부분은 위 세 파일을 제외한 프로젝트 설계를 하는 과정에서 발생하는 파일들을 어떻게 구조화할 것이냐에 대한 것이다. (public / src 폴더에 넣을 것이냐, 폴더 내부에서 하위 폴더 구조화는 어떻게 할 것이냐 등..) 이 것엔 정답은 물론 없거니와, ..