우주먼지 개발 log

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

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

한 일 - 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..

한 일 1. Styled Componects 사용하기 실습 2. React Hooks 강의 듣기 3. React 공홈가서 읽어보기 https://react.dev/reference/react/useState 는... 잘 못 읽겠따... TIL useState에서 setState 안에 함수를 넣어줄 수 있는데 매개변수로는 state 값을 갖는다. (a에 age가 들어가는 것부터 혼란스러웠는데 그냥 그런거구나 하고 넘어가기로-_-; 핸들러가 event를 매개변수로 갖는 것 처럼..-_- 그런거지 뭐) //const [age, setAge] = useState(42); setAge(age + 1); // vs setAge(a => a + 1); 공홈 자료에서도 그냥 그런거야 하고 자연스럽게 넘어가버리네. 할 ..