'항해 중' 카테고리의 글 목록 (20 Page)
본문 바로가기

항해 중267

2주차 - Ref(리액트에서 돔요소를 가져오는 방법) Ref 만약에, 내가 어떤 인풋박스(input)에서 텍스트를 가져오고 싶으면 어떻게 접근해야할까요? DOM에서 다루는 방법은 1주차에 배웠는데, 리액트에선 어떻게 하면 좋을까요? (render()가 끝나고 가져오면 될까요? 아니면 mount가 끝나고? 아니, 그 전에 가상돔에서 가져오나? 아니면 DOM에서? 😖) → 답은, 리액트 요소에서 가져온다! 1) React 요소를 가지고 오는 방법 1 -> React.createRef() React.useRef() { const my_lists = list; const my_wrap = React.useRef(null); // null로 초깃값을 설정 해줌 console.log(my_wrap); // 콘솔로 확인해봐요! window.setTimeout(() =>.. 2021. 11. 15.
2주차 - CSS 1) CSS in React src폴더에 style.css 파일을 만들고 그 안에 스타일을 정의하고, 그 파일을 불러다 사용하는 방법이 있습니다. 2) styled-components 적용하기 - 패키지 설치하기 (프로젝트 경로 꼭 확인하고 설치 해야 함) yarn add styled-components - styled-components란? : 컴포넌트 스타일링 기법 중, 선생님이 가장 좋아하는 방식입니다! 왜 좋아하냐구요? 많은 이유가 있지만, 두 개만 꼽아볼게요. - class 이름 짓기에서 해방됩니다! - 컴포넌트에 스타일을 적기 때문에, 간단하고 직관적입니다! import styled from 'styled-components'; import React from "react"; import Bu.. 2021. 11. 15.
2주차 - Component Component 1 - 클래스형 Component -> state, props Component는 클래스형과 함수형이 있습니다. 이제 클래스형 컴포넌트는 잘 쓰지 않지만, 우리는 두 가지를 모두 살펴볼거예요. → 왜냐하면 이미 개발된 프로젝트들(아마 여러분이 가야할 회사에서도...!)은 클래스형 컴포넌트를 사용 중일수도 있거든요. 최소한 코드를 알아보고 고칠 수 있을 정도는 알아두는 편이 좋습니다. 1) Component란? : 리액트는 레고이고, 컴포넌트는 블록입니다! - 웹 사이트를 조각내자! 컴포넌트를 이해하고 잘 써먹으려면 웹 사이트를 잘 조각낼 줄 알아야 합니다. 가령 우리가 아래와 같은 웹 사이트를 만든다고 생각해봅시다! ... ... ... ... 즉, 이 웹 사이트는, 크게 , , 세 개.. 2021. 11. 15.
2주차 - 가상돔, 라이프 사이클, 클래스 컴포넌트 1) 가상돔이란? -> 바뀐 부분만 진짜 DOM에 반영하는 것 -> 메모리에 올라가 있는 눈에 보이지 않는 가짜 DOM에 변경 사항을 전부 넣어서 바뀐 부분이 있는 확인하고 나면 마지막에 가상돔에서 진짜 돔으로 반영 되는 과정을 거친다.(진짜 DOM에는 한번만 반영된다.) : DOM은 html 단위(요소) 하나하나를 객체로 생각하는 모델입니다 예를 들면, 'div'라는 객체는 텍스트 노드, 자식 노드 등등, 하위의 어떤 값을 가지고 있겠죠? 이런 구조를 트리 구조라고 합니다. DOM이 트리구조란 소리입니다. DOM 트리 중 하나가 수정될 때마다 모든 DOM을 뒤지고, 수정할 걸 찾고, 싹 수정을 한다면? → 필요없는 연산이 너무 많이 일어난다! → 그래서 등장한 게 가상돔! 가상돔은 메모리 상에서 돌아가.. 2021. 11. 15.
1주차 - 숙제 오늘 할 일 추가하기 독서하기 완료 독서하기 완료 2021. 11. 15.
1주차 - 첫 React 프로젝트 만들기 React는 Node(런타임) 위에서 동작하는 자바스크립트 라이브러리 입니다! + NVM이란? : Node.js의 버전 관리자입니다. 우리 컴퓨터에 node를 설치하는 툴인데 수많은 버전을 마음대로 골라 설치할 수 있게 해주는 멋진 친구입니다. 시스템(우리 컴퓨터)에 Node.js를 직접 설치하다보면 다른 버전을 설치하게 되는 경우가 많은데, 여러 버전의 Node.js를 관리하는 건 굉장히 귀찮은 일이죠. nvm을 설치하고 설치한 nvm을 통해 node를 설치하면 나중에 생길 귀찮음을 방지할 수 있습니다! CRA(Create React App)이란? React는 레고 같은 친구입니다. 어린이들이 레고로 성을 만드는 것처럼 우리는 React로 웹사이트를 만들 거예요. 마트에서 레고를 보신 분들은 아시겠지만.. 2021. 11. 15.
1주차 - HTML, CSS, JS HTML 1) 오늘의 TODO 리스트 만들기 Q. 안녕, 하세요, 확인 ... 등등!을, 뭐라고 부르는 지 알고 있나요? → A. Tag? 비슷해요! 하지만, 땡! 틀렸습니다. 이 친구들은 요소(elements)라고 불러요. 2) DOM(문서객체모델) : DOM은 HTML 단위 하나하나를 객체로 생각하는 모델입니다. 예를 들면, 'div'라는 객체는 텍스트 노드, 자식 노드 등등, 하위의 어떤 값을 가지고 있겠죠? 이런 구조를 트리 구조라고 합니다. 즉, DOM이 트리구조라는 얘기 입니다. - DOM 트리 확인하기 : 브라우저의 개발자 도구에서 확인 해보겠습니다. // 현재 dom 트리를 볼 수 있어요. document // dom 트리 중, body의 내용을 확인합니다. document.body // .. 2021. 11. 15.
1주차 - 프론트엔드 기초 지식 프론트엔드 기초 지식 1) 서버와 클라이언트 - 웹의 동작 개념(HTML만 받는 경우) 우리가 보는 웹페이지는 모두 서버에서 미리 준비해두었던 것을 "받아서", "그려주는" 것입니다. 즉, 브라우저가 하는 일은 1) 요청을 보내고, 2) 받은 HTML 파일을 그려주는 일 뿐이죠. 근데, 1)은 어디에 요청을 보내냐구요? 서버가 만들어 놓은 "API"라는 창구에 미리 정해진 약속대로 요청을 보내는 것이랍니다. 예) https://naver.com/ → 이것은 "naver.com"이라는 이름의 서버에 있는, "/" 창구에 요청을 보낸 것! 클라이언트가 서버에 요청을 보내면 서버에서는 Data와 동적 자원(HTML, CSS, JS)을 담아서 응답합니다. - 웹의 동작 개념(데이터만 받는 경우) 그럼 항상 이렇.. 2021. 11. 15.
[WIL] 2주차 → ES란?, ES5 & ES6의 차이점 2주차에는 주특기 시작하기 전에 주특기 언어에 익숙 해지기 위해서 알고리즘 문제를 풀었다. 처음에는 문제를 어떻게 접근 해야 할 지 몰라서 고민이 많았는 데 하나씩 풀어 나가다 보니 자신감이 많이 붙은 것 같다!! 다음주에도 하루에 1,2문제씩은 풀어볼 생각이다. 2주차 키워드에 맞춰 중요하다고 생각 되는 부분을 정리하면서 한 주를 마무리 할 예정이다!! 1. JavaScript의 ES란? 👉 자바스크립트는 1990년대 Netscape 회사의 Brendan Eich 라는 사람에 의해 최초 개발되었습니다. 자바스크립트가 잘 되자, MS에서 Jscript라는 언어를 개발해 IE에 탑재하였는데, 이 두 스크립트(JavaScript, Jscript)가 너무 제각각이라, 표준이 필요하게 되었습니다. 표준을 위해 .. 2021. 11. 14.
728x90

티스토리툴바