'항해 중/3주차 리액트 기초반' 카테고리의 글 목록 (2 Page)
본문 바로가기

항해 중/3주차 리액트 기초반16

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

티스토리툴바