분류 전체보기 (51) 썸네일형 리스트형 20240130 TIL #27 [1] TIL 1. DOM (1) DOM : Document Object Model 1) document object를 홍보하기위한 수단 2) 여러 컴포넌트로 구성된 웹페이지 : 문서(document) 3) 그 페이지를 이루는 컴포넌트 : element 4) DOM은 element를 tree 형태로 표현한 것 : DOM tree (2) 리액트, 뷰 => 가상 DOM 채택 1) 가상 DOM으로 렌더링 : 효율적인 알고리즘을 이용하여 속도가 엄청 빠름 2) API : html 요소에 접근해서 수정할 수 있는 함수 2. Virtual DOM (1) 실제 DOM의 tree 형태를 그대로 가져온 것이 virtual DOM 1) 실제 DOM을 복사한 것 2) virtual DOM은 실제 DOM은 아니지만, 객체 .. 20240129 TIL #26 [1] TIL 1. git과 github (1) git clone 1) git clone은 소스 코드를 download 2) 네이버에서 public에게 공개된 이미지를 button을 눌러서 다운로드 받은 것과 마찬가지 3) local git과 원격 git이 연결되었는가? - git clone만으로는 연결된 것이 아님. (2) git remote add origin https://~ github 주소 1) 이 명령어를 입력해야 원격 git인 github과 연결되는 것 2) origin : 변수명 -> https 이하를 지칭하는 변수 - github 주소가 길어서 매번 치기 귀찮으니까 변수명을 지정해준 것임 - 임의의 변수명으로 바꿔도 동일함. 3) remote : local 폴더와 연결 4) git rem.. 20240126 TIL #25 [1] TIL (1) React stadard반 3차시 수업 1) 어려웠던 점 a. git clone을 해온 뒤 node_modules 를 받아오는 과정이 안 됨. - git clone을 해오고 터미널에 npm i를 입력하면 module을 가져옴 b. 기본적으로 ex1 ~ ex4 branch가 생성되고 하나씩 넘어가야 하는 상황 - ex1을 다 작성하고 저장 후 git add . -> git commit -m "message" or git stash를 한 후에 다음 브랜치로 넘어갈 수 있었음. - git checkout ex2 ~ ex4 c. npm start를 입력한 뒤 뜨는 react 창을 보면서 코드 작성 후 반영된 점이나 오류를 확인하며 과제를 진행했어야 하는데, 처음부터 안 되다보니 당황스러웠음.. 20240125 TIL #24 [1] TIL (1) React 개인과제 - TodoList 피드백 1) README 파일에 스크린샷 추가하는 방법 : 스크린샷을 바로 보여줄 수 있는 방법을 몰라서 링크를 넣어줬음. => 마크 다운 문법을 사용하면 이미지가 보이도록 할 수 있음.  + 스크린샷들을 screenshots or assets 폴더에 따로 관리하기. 2) 폴더 구조 및 컴포넌트 개선하기 : styles 폴더에 컴포넌트 별 css 파일을 만들었는데, 떨어져 있다보니 폴더 구조를 보면 직관적으로 보이지 않음. => a. 아예 src/styles 경로로 폴더를 옮기는 방법 b. 각 컴포넌트마다 새로 폴더를 만들어 컴포넌트와 스타일이 같은 경로에 있게 만들기 3) 아이템의 id : id 값을 array.. 20240124 TIL #23 [1] TIL 1. React Hooks (1) useState 가장 기본적인 hook 함수형 컴포넌트 내에서 가변적인 상태를 갖게 함 const [state, setState] = useState(초기값); (2) useEffect 1) useEffect : 렌더링 될 때, 특정한 작업을 수행해야할 때 설정하는 훅 a. 어떤 컴포넌트가 화면에 보여졌을 때, 무엇을 실행하고 싶다 b. 어떤 컴포넌트가 화면에서 사라졌을 때, 무엇을 실행하고 싶다 (return) 2) 과정 a. input에 값을 입력 b. value, 즉 state가 변경 c. state가 바뀌었기 때문에 => App 컴포넌트가 리렌더링 d. 리렌더링 => useEffect() e. a ~ d 반복 3) dependency array : .. 20240123 TIL #22 [1] TIL (1) React TodoList 피드백 1) 추가해야 할 부분 a. 유효성 검사 - 제목, 내용 입력하지 않고 추가하기 버튼을 눌러도 카드가 생성됨 - 삭제 시 잘못 누른 것을 고려하여 confirm message b. 추가하기 부분을 누를 때, 마우스 포인터로 변경 2) 수정해야 할 부분 a. className이 component 이름과 같으면 나중에 겹칠 수도 있음. => Header component, class header - class는 고유한 속성을 만들어놓고 적용시키도록 - UI 적 요소를 targeting하여 만들지 말 것 - working-todo-list, done-todo-list css가 동일함 => 동일한 class 부여 b. Inputbox componenet에.. 20240122 TIL #21 1. TIL (1) JSX 문법 JSX 문법은 JavaScript와 XML의 합성어로, JavaScript를 확장하여 JavaScript와 HTML의 요소를 모두 사용할 수 있는 문법이다. React에서는 JSX 문법으로 component를 만들어 component 단위로 화면에 rendering한다. (2) State useState 훅으로 state를 만들어 입력값, 제목 등의 상태를 관리했다. (3) children props, children을 이용해 서로 다른 component 사이에서 state 값들을 공유했다. (4) 불변성 유지가 필요한 부분 todoList의 초기값을 빈 배열로 설정하고, 새로운 값을 입력했을 때 useSate로 그 state를 바꿔줘야 react가 인식해서 re-rede.. 20240119_TIL #20 [1] TIL 1. React 개념 정리 (1) 불변성 1) React 생명주기 - component의 생명주기와 동일 - Mount, update, unmount : 태어나고 갱신되며 죽음 - rendering을 통해서 이루어지는 과정 2) rendering - component가 화면에 그려지는 것이 rendering - Rendering 조건 : state가 바뀌면 됨. state가 변함 -> 화면을 rendering state가 바뀌지 않음 -> rendering x - react는 화면을 redering할 지를 state의 변화에 따라 결정함. 단순 변수는 무시 3) state가 변경되었는지 알려면? : state 변화 전, 후의 메모리 주소를 비교 - 원시데이터는 값이 변할 경우 메모리의 주.. 이전 1 2 3 4 5 6 7 다음