우주먼지 개발 log

한 일 - 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); 공홈 자료에서도 그냥 그런거야 하고 자연스럽게 넘어가버리네. 할 ..

한 일 스탠다드반 수업에서 한시간동안 개인과제 다시 구현하기 했는데 복붙을 잃으니까 뭔가 잘 안된다 ㅋㅋㅋ 하루종일 복습하고 튜터님 찾아가고 리액트 숙련 강의는 하나밖에 못봤다. TIL React 이벤트 핸들러 매개변수 주기 오늘 튜터님이랑 씨름하고 온 것 ~! 이벤트핸들러는 event를 매개변수로 가질수 있고 안써도 된다. 개발자의 선택. 다른 매개변수를 주고싶을 경우 // 틀린코드 이렇게 써주면 안되는 이유는 저렇게 써주는 순간 함수 호출문이 되어서 함수 호출을 해버리는 것 onClick에는 함수의 주소가 아니라, 함수의 return 값이 들어가 버린다. return 을 명시적으로 안하고 있다면 undefined 가 들어가게 된다. 완전히 이상한 코드. 올바른 코드로 고쳐보면 clickRemoveBu..

TIL / 한 일 잔잔바리 이슈가 너무 많았고 아직 명확히 이해하지 못한 부분이 많다는 걸 깨달았다. 1. state 부분의 이해 (그려지는 data와 원본 data의 혼란, 순수함수? 근데 원본은 어디가? 죽나 - 아직 정리 안됨) 2. 불변성!! (언젠가 정리..) 3. 컴포넌트 임포트 시 {} 없어야한다. ㅋㅋㅋ 습관적인 괄호 지양.. import { useState } from "react"; import './App.css' import TodoBox from "./components/TodoBox.jsx" //컴포넌트 4. 중복 키 방지 - 키값을 length로 단순히 넣었다가는 하나 삭제 후 하나 생성 시 key값이 곂친다구. - 나는 todoList의 마지막 원소의 id +1 로 넣어줬다...

숙제하려고 하니 또 의문이 잔뜩 들어서 강의 앞부분으로 돌아왔다. TIL [jsx 문법] react component의 return 문에는 리액트 엘리먼트 1개만 리턴하도록 되어있는데... // 예시1 : function App() { return 엘리먼트 } //예시2 : 여러줄일 경우 소괄호()를 사용하고 하나의 로 묶어준다. function App() { const jsStr="자바스크립트 문법"; return ( 제목 javascript문법은 : {jsStr} ); } // 제목 // javascript문법은 : 자바스크립트 문법 이 엘리먼트 부분은 jsx 문법으로 쓴다. 변수나, 함수, javascript 문법을 사용하고 싶으면 중괄호{ } 안에 쓰면된다. html의 class는 classNam..

뭔가 제목을 쓰고싶어서 앞에 글머리 [스파르타내배캠] 을 뺐으나 제목을 한정짓기가 어렵군. 한 일 React 입문 강의 다 들음. 스탠다드반 숙제 완료 (css빼고..여전히 뒷전인 css ^.^;) - 리액트 기본 입출력, state 공부는 확실히 되었고 배열 메소드 완벽~ - mdn문서만 있으면 다 할 쑤 있어! 할 일 1) TIL들에서 내용들을 좀 분리할까 고민~ 다른분들 것 좀 참고해야지. 2) javascript 모자랐던 부분 다시듣고 정리 (클로저 등등) 3) TIL 쓰려고 reduce 메소드 써논거.. 정리가 다 안되었다. 내일 내일.. ^.^;; 부족한 점 TIL 강의를 이제 봤는데 거기에서 추천해준 남의 TIL 을 보다가 이전 항해 99 하신분이 쓰신 글 중에 머리를 딱 때리는 부분이 있어..

한 일 1. standard 반 수업 수준 딱이다. 히히 리액트로 만들지만 내용물은 javascript 복습. 최고! 월화수 강의를 듣고있지만 아직 마음속에 정리가 안되서 TIL을 쓸수가없다.🤣 일단 오늘 강의랑 달라서 당황했던 React 프로젝트 생성 명령어부터 ! [Ceate React App] https://create-react-app.dev/docs/getting-started Getting Started | Create React App Create React App is an officially supported way to create single-page React create-react-app.dev [리액트 create 명령어 3가지 : 이 중에 하나만 써준다] //node js 깔면..

🙄 한일 / TIL 😣 [React 입문 강의 듣는 중] 1) React에서 많이 쓰일 javascript 내용 짚고넘어가기 1-1) javascript 깊은 복사 방법 const obj1 = { value1 : 10; }; // 얕은 복사 (obj1의 주소값을 복사) const obj2 = obj1; // 새로운 obj3 생성 : obj1을 문자열로 풀어서 다시 JSON 형식으로 파싱해서 저장 const obj3 = JSON.parse(JSON.stringify(obj1)); //obj2의 value1값을 변경 obj2.value1 = 11; console.log("obj1", obj1); // 11 (obj1도 값이 변경됨) console.log("obj1", obj1); // 11 console.l..

TIL [팀과제 제출] > 주말에 겪은 이상한 일 import / export [문제] 영화 페이지(movie.js)를 만들다가 메인 페이지(index.js) 에서 곂치는 부분이 많아 함수 호출 해서 세줄만 쓰고싶은 거였다. 그래서 index.js의 쓰고싶은 함수를 export 해놓고 movie.js에서 import 해서 가져왔다. //index.js export const makeCards = async (pageNum = 1, media = "movie", group = "top_rated") { ... } //movie.js import { makeCards } from index.js 쓰고싶은 함수에 export를 적어주면 그 함수만 import 해서 가져올 수 있다고 생각했는데 마치 영화 페이지..

😎 한 일 현재 상영작 페이지를 작성하고 있음. 더보기 [ 완료된 상황 ] 1. 드롭다운 클릭 시 쿼리 변경해서 가져옴 2. 더보기 하면 더 가져옴 (5페이지) [ 남은 거 혹은 문제점 ] 1. 개봉일순 소팅 시 소팅쿼리는 최초개봉일(외국기준)만 제공하고 개봉일은 한국으로 지역을 넘겨주면 한국 개봉일을 넘겨줘서 순서 안맞아보이는게 있음 사실 평점(vote average)도 한개 이상하고 인기 점수도 여러개 이상함 쿼리 구림 ~! 2. 동그라미를 동그랗게 하려면 숫자 7 -> 7.0 으로 고쳐야 함 : 동그라미에 크기를 주면 되었겠네ㅠ (24.03) (뇌가 혼란해서 빨리 할 수 없을 것 같아서 안되면 그냥 평점을 인기점수 옆에 찍어주기) [UI 상 부가적인거] 1. sort_by 를 탑에 고정 시키고싶다...