우주먼지 개발 log

한 일 개인과제 순서대로 안해서 조금 혼란스러워짐 ^.^ 앞에부터 차근차근 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..

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