우주먼지 개발 log

오늘도 화이팅! TIL styled-components 활용 조건부 스타일링 숙련주차 때 해두어야 할것을 지금 다시한다. 왜냐 연습이 안되어있어서 자꾸자꾸 다시 강의자료를 찾아보니까. 강의자료 보기 귀찮으면 그냥 무식한 코드를 생성해 버리니까.. 아이디, 비번 들어오면 로그인 버튼을 활성화 하는 코드를 작성하려고 한다. 1) 무식한 코드 : 지금 과제 코드^.^ 로그인 버튼에 호버하면 로그인에 색깔을 주려고 한다. - 미리 분기해서 css 가 다른 버튼 컴포넌트 호출 (컴포넌트가 두개여야 함) { (id && password) ? 로그인 : 로그인 } 2) 여전히 복잡해서 기분나쁜 코드 - props로 받아서 스타일 컴포넌트 안에서 분기처리 -( color : 뒤에서 분기를 해주려고하니, 배경색에서도 또..

오늘도 화이팅! TIL 일반 redux 를 redux-toolkit 으로 리팩토링 보통 현업에서 일반 리덕스는 쓸일은 없다고 한다~ 어제 설치만 적어놓은 글에 리팩토링 방법을 왕창 추가하였다. 이제 과제에 적용만 하면 된다. [react] Redux Toolkit 사용하기 redux Toolkit redux를 개량하여 코드를 더 적게, 편하게 사용할 수 있게 해주는 툴킷이다. ducks 패턴의 자동화! (ducks 패턴, 나중 정리) redux Toolkit설치 프로젝트 생성 후 yarn 을 이용해 패키지 설치하기 developer.happymunzi.com TODO 튜터님 베이스 코드로 과제 다하기 강의 다듣기 숙련주차 개인과제 코드 리팩토링 / 내 코드로 과제 다시하기

TIL에서 두가지 이상을 쓸때 찾아보기가 어려워서, 내가 찾아보기 편하기 위해, 따로 페이지로 정리하기로 했다~! TIL redux tool-kit 아직 패키지 다운로드 밖에 안썼지만 강의 한번 더 듣고 정리하기.. [react] redux Toolkit redux Toolkit redux를 개량하여 코드를 더 적게, 편하게 사용할 수 있게 해주는 툴킷이다. ducks 패턴의 자동화! (ducks 패턴, 나중 정리) redux Toolkit설치 프로젝트 생성 후 yarn 을 이용해 패키지 설치하기 developer.happymunzi.com 객체 state 관리에서 중요한 불변성 확인 사이트 불변성이 중요한 이유 : state가 불변성을 유지해야 (원본배열을 수정하지말라) 리액트에서 변경점을 확인해서 리..

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 페이지로 구성 ..

TIL / 한 일 standard 반 수업 - react 입문 수업 개념정리 - 부분렌더링 부분렌더링 변수 state에 따라 보이고 안보이고 구현 하기 1) 해당 값의 변화에 따라 렌더링이 좌우 되니까, state로구현한다. const [isTodoShown, setIsTodoShown] = useState(true); const [isDoneShown, setIsDoneShown] = useState(true); 2) 버튼 보이고 안보이고 선택해주는 버튼을 누르면 상황에 따라 setState 해줌. onClick 이벤트 핸들러는 인라인 함수로 구현했다. { setIsTodoShown(true); setIsDoneShown(true); }}>전체 { setIsTodoShown(true); setIsDon..