우주먼지 개발 log

redux Toolkit redux를 개량하여 코드를 더 적게, 편하게 사용할 수 있게 해주는 툴킷이다. ducks 패턴의 자동화! (ducks 패턴, 나중 정리) 일반 리덕스 사용하는 법 다시보기 폴더 구조와, Provider 주입해주는 부분은 동일하기 때문에 이번엔 Pass ! [TIL] 23/11/09 React 숙련: Redux 란? 한 일 - redux 강의 다 듣기 - 알고리즘 스터디 : 프로그래머스 4문제 풀기 TIL Redux ? 전역 상태(Global state) 관리 라이브러리 기존 useState 불편 해소 - 컴포넌트 간에 상태(state)를 공유 하려면 부모자식 developer.happymunzi.com redux Toolkit설치 프로젝트 생성 후 yarn 을 이용해 패키지 설..

javascript 메소드의 불변성을 확인해주는 사이트 Does it mutate? Does it mutate? The lastIndexOf() method returns the last index at which a given element can be found in the array, or -1 if it is not present. The array is searched backwards, starting at fromIndex.Array.prototype.lastIndexOf ( searchElement [ , fromIndex ] ) doesitmutate.xyz mutate : 변형되다 객체나 리스트 내에 변형을 일으키는 메소드는 === 불변성을 유지해주지않는다고 말할 수 있다. 예를 들어 ..

reduce() 메소드 이해하기 reduce 는 "누적하다" 라는 뜻으로 배열의 값들을 누적해서 처리하고 싶을 때 쓰인다. 매개변수로 누적값과 현재값을 가진다. acc 와 c 로 종종 표현해준다. (accumulator, currentValue 이런 약자) 배열을 돌면서 return에 적힌 값으로 acc를 업데이트 해준다. 이해가 잘 되지 않으므로 테스트를 해본다. react 수업 듣는 중이라 react 프로젝트 이벤트핸들러함수에서 뜯어온 코드지만 안에 내용물만 보자. 결과물은 아래와 같다. console.log로 acc와 c 를 찍어보자. 여기서 처음에 알수 있는 것 한가지는 reduce함수가 처음 돌 때 acc 와 c 는 처음에 인덱스 0번, 1번 있는 것을 넣어준 다는 것이다~! 그러면 아래처럼 수..

TIL 스스로 반성 : 1. 할 게 자꾸 보일 때 마다, 이거 하고 저거하다가 이거하려고 하는 등 횡설 수설 작업을 해서 고생이 많았다. 우선순위에 맞춰 작업하고 손이 먼저 가기보다는 큰 단위로 그림을 그려보고 작업하는 연습이 필요한 것 같다. - 심지어 API list를 먼저 작성했으나 보고 하지 않았다. - 과제 계획서에서 쓰라고 해서 썼지, 잘 모르고 한 셈이다. 2. 로그인만 맡았으면 기깔나게 만들어 보려고 했는데 역량 대비 많은 기능을 하려고 했다. - (남는 시간이 있다면) 추가 하고싶은 부분 1) 로그인 validation 체크 입력오류에 따른 구분 2) 회원가입 화면 따로 (현재 로그인 입력창에서 받음) 3. 여태 겪었던 이슈를 임시방편으로 덕지덕지 막아두고 난 후에야 프로젝트 당일에서야 ..

TIL 1. react 모달창 만들기 모달 객체 불러오는 부분. {modalOpen && createPortal( setModalOpen(false)} />, document.body) }​ {modalOpen && setModalOpen(false)} />} 동료분이 알려주셔서 createPortal도 써봤는데, 아직 뭔차이인지 모르겠다. 헤헤 어디서든지 불러올 수 있다고 하던뎀..맞나 내 코드에서 두고자 하는 위치는 차이가 없어서 그냥 둠 ^.^;; 리액트 모달창 css 참고한 페이지 저장~ [React] React에서 모달창 구현하기 예전에 CSS와 자바스크립트를 이용해서 모달창을 구현했습니다. 마찬가지로 리액트로도 모달창을 구현할 수 있는데요. 바닐라 자바스크립트와는 조금 다르기에 방법을 소개해보..

TIL 플젝 중 발생한 2가지 상황 공유 ^.^ 상황 1. 프로젝트 중 commit 올린 사람은 잘 되는데 나는 왜 안돼 ? 나는 한 짓도 없는데 에러가 나고있다. 한 짓이 없기 떄문이다. 팀원 H가 redux를 추가 하셨는데 redux를 못찾아서 나고 있는 에러다. 우리는 package.json 파일을 공유 하고 있지만, redux 처럼 패키지가 추가 되었을 때 설치를 실행 해주지 않으면 동작하지 않는다. pakage.json 파일은 뭐뭐를 설치해라 명시 해주는 파일일 뿐이기 때문! 우리가 해줘야 할 것은 ? yarn install 이다 (혹은 npm install / 우리는 yarn.lock 파일을 공유하며, yarn 으로 통일해서 관리 하는 중이다.) 한 팀원이 패키지를 추가한 것을 받아올때마다 다..

TIL git clone 후 npm i 실행 시 나랑 한명의 팀원H만 package-lock.json 파일이 생겼고, yarn.lock 파일이 최조 배포한 팀원 E의 파일에서 수정이 되었다. 튜터님들한테 다녀왔지만 이해가 안된 부분을 뒤로하고.. 변경된 yarn.lock 파일을 살펴보니 패키지들의 버전 변경은 없어서 상관 없는 것 같고, 버전이 달라서 포맷이 좀 정리된 듯 한 느낌이었다. 협업 시 package-lock.json 이거나 yarn.lock 둘중의 하나로 통일해서 사용하면 되어서 package-lock.json은 지우고, yarn.lock은 기존 E님 파일 그대로 사용하면 될 것 같다. 그리고 패키지 추가가 필요할 때 설치는 모두 yarn을 사용한다. 끝~! 결론 : 문제는 누군가는 npm ..

🍁 TIL / 한 일 props drilling 으로 상세페이지 만들기 까지 완료 - 수정, 삭제 기능 완료 어려웠던 부분 기존에 내가 Home에서 letter list data를 만들어주고 있었기 때문에 상세페이지에서는 props 를 어디서 받아와야 하는가에 대해 난감했었는데, 팀원들의 코드리뷰를 통해 알게 되었다. 현재 페이지 구조 Apps - > Router -> Home, Detail -> 각각 필요한 components 몰랐는데 깨달은 개념: 1) Router 도 component 다. 라우터를 연결해줄 때 Apps.js에 넣어주기 때문에, 혹시라도 Apps 에서 data들을 만들어 줬다면, Router에도 props를 내려줄 수 있는 것이었다. 현재는 Apps에서 Router 컴포넌트만 부르고..

한 일 개인과제 순서대로 안해서 조금 혼란스러워짐 ^.^ 앞에부터 차근차근 TIL jsconfig.json 파일 ( * 파일 적용 시 이미 브라우저 페이지가 실행 중이라면 터미널 껐다가 yarn start 다시 해주기 !!! ) { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } 리액트 입문 과정에서 너무 초반에 휘리릭 지나가서 까먹어버린, 과제에서 다시 쓰라고해서 ㅠ.ㅠ 공부해본다. 공식문서 봐도 잘 모르겠다 근데. https://code.visualstudio.com/docs/languages/jsconfig 이때는 파일들에서 모듈 임포트 시 url을 절대 경로로 쓸 수 있게 해주기 위해 사용했다. jsconfig.json 파일은 root..

TIL jsx 란 무엇인가요 ? 더보기 javascript를 확장한 문법으로, javascript의 모든 기능을 사용할 수 있고, 동시에 html과 유사한 React Element를 생성해 UI를 구성할 수 있다. SPA와 MPA 의 개념 및 각각의 특징 더보기 Single Page Aplication : 하나의 html 페이지로 구성 된 어플리케이션. 서버로 부터 한번만 페이지를 로딩하며, 부분 렌더링 방식으로 화면 업데이트. 필요한 부분만 업데이트 하므로 빠른 상호작용, 대신 초기 로딩 시간이 김. (클라이언트 사이드 렌더링, CSR) - react, vue, angular 프레임워크 에서 적용 -SEO 최적화가 어렵다. Multi Page Aplication : 두개 이상의 html 페이지로 구성 ..