우주먼지 개발 log

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

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

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

🍁 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..

한 일 - redux 강의 다 듣기 - 알고리즘 스터디 : 프로그래머스 4문제 풀기 TIL Redux ? 전역 상태(Global state) 관리 라이브러리 기존 useState 불편 해소 - 컴포넌트 간에 상태(state)를 공유 하려면 부모자식 관계여야 하고, 조부모와 손자 사이에 낀 부모 컴포넌트들은 props 를 사용하지 않아도 전달해야 함. 중앙 state 관리소에서 Global state를 생성하고 관리하면 컴포넌트들은 어디서든지 state를 불러와 사용할 수 있다. Redux 설치 yarn add redux react-redux 폴더구조 src/redux : 리덕스 관련 코드 모음 src/redux/config : 리덕스 설정 파일 모음 src/redux/config/configStore.j..

🧡 한 일 [javascript 문법 강의] - DOM 기본개념 - Class기초 ( getters, setters) [알고리즘 연습] 조건에 맞게 수열 변환 하기 3문제 풀기 1. 전통적인 for문을 벗어나고 싶어서 for in 문과 for of 를 사용해 봄 https://school.programmers.co.kr/learn/courses/30/lessons/181882 2. 오늘의 난관 : 배열 비교하기 부분 https://school.programmers.co.kr/learn/courses/30/lessons/181881 3. map 함수 사용해봄 https://school.programmers.co.kr/learn/courses/30/lessons/181835 💛 할일 / 부족한 점 숙제를 시..

23/10/09~13 : 한 일 1) javascript 강의 1주차 - 큰일났네 진도가 안나감^^;, 혼자 강의 들을려니 피곤해죽겠다. - 1주차 숙제 문제 너무 어렵다. - 배열부분이 어렵다. mothod를 많이 알아두는게 도움이 되긴 할 것 같다. -입력받기? 갑자기 난관, C언어 기준 scanf 같은거는 안배우지 않았나? 하는 혼란이었다..ㅋㅋ 굳이 비슷한 걸 찾아보니 #readline 이라는 모듈을 만들어 쓸 수 는 있다. - 지금은 연습이 중요하니, 터미널 입력 받지 않고, programmers 문제 풀때 처럼, 함수로 구현까지만 하는걸로 하자~ 동작 확인은 함수 인자로 input 넘겨서 확인하기. 2) notion / gather 뒤적거려봄 (*) 공부하기 싫어서 ^^; 공부 시작하라니까 쓸..

스파르타 내일배움캠프 React 3기 반 1주차 TIL (Today I learned) 쓸 정신이 없었다. 주차별로 밀린일기 작성 중. 23/10/04~05 : 웹개발 A to Z 기초 강의 5주차 과정을 이틀만에 수강 완료; - 늦은 합류로 다른분들은 미니 프로젝트를 하고, 우리조는 밀린 강의를 들었다. 첫 이틀이 가장 빡셌다고한다. 전에 스파르타 웹개발 기초강의 수강한 적 있어서 들을만 했다. 거의 비슷하고 오히려 축소된 강의였음. 23/10/06 : 웹퍼블리싱 강의 2주차 수강완료 - 강의가 코드를 보고 설명하는 위주여서, 엄청 졸림. 듣는데 고생함. 역시 코딩 강의는 따라하면서 보는 게 맛... 딸각좌가 최고. - 그리고 수준이 갑자기 높아져서 힘들었다! - 네이버 카피하기. 나중에 해보자.. 나..