우주먼지 개발 log

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

css 관련 지식은, 남보다 더 정리를 잘 할 필요도, 자신이 없으므로 펌 모드~~ 찾은 것 중에 제일 잘되있는 걸로! 나중에 다시 찾아보기 위함 CSS / border-radius / 테두리 둥글게 만드는 속성 border-radius border-radius는 테두리를 둥글게 만드는 속성입니다. CSS3에서 정의되었으며, IE는 버전 9부터 지원합니다.(IE8에서 사용하는 방법) 8개의 속성 값을 넣어야 하지만, 값이 같다면 짧게 쓸 수 www.codingfactory.net 그래서 내가 하고싶었던 것은 두구두...구... 몰라 나름 귀엽다~ 글자 위아래를 가운데로 정렬하기 위해 line-height 를 박스의 크기와 같게 해줌. const StLi = styled.li` width: 80px; he..

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

그냥 나중에 가져다 쓰려고 저장~ 검색해서 찾아서 써도 되지만... reset.css 파일 만들기 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, arti..

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