hmk run dev

라우팅이란 쉽게말해서 페이지를 돌아다니는 것이다. 일단 패키지를 하나 선택해서 인스톨하자! www.npmjs.com/package/react-router-dom react-router-dom DOM bindings for React Router www.npmjs.com yarn add react-router-dom으로 설치! 아래 코드로 import import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; 아래코드 index.js에 추가 import { BrowserRouter } from "react-router-dom"; 라우트 사용방법 두 가지 Route 사용방법 1: 넘겨줄 props가 없을 때 Route 사용..

먼저 DOM에 대해 알아보자 DOM을 아시나요? DOM은 html 단위 하나하나를 객체로 생각하는 모델입니다. 예를 들면, 'div태그'라는 객체는 텍스트 노드, 자식 노드 등등, 하위의 어떤 값을 가지고 있겠죠? 이런 구조를 트리 구조라고 합니다. 네, 맞습니다! DOM이 트리구조란 소리입니다. DFS BFS 생각이 나네요... DOM 트리 중 하나가 수정될 때 모든 돔을 뒤지는 게 비효율 적이어서 생긴 게 바로 가상 돔이다 가상 돔의 동작 방식은 기존 DOM과 어떤 행동 후 새로 그린 DOM을 비교해서 바뀐 부분만 교체 >> 업데이트 처리가 매우 간결하다 DOM을 그리거나 갈아 끼우는 것은 렌더링, 리렌더링 이라고 한다 라이프 사이클이란? 한마디로 컴포넌트의 인생? 생명주기라고 할 수 있다. 함수형 ..

yarn start 전에 yarn add styled-components 장점 class 이름 짓기에서 해방 컴포넌트에 스타일을 직접 적기 때문에 간단하고 직관적 import logo from './logo.svg'; import styled from 'styled-components' function App() { return ( hello react ); } const MyStyled = styled.div` //스타일드 컴포넌트 작성 방법 width: 50vw; height: 150px; padding: 10px; border-radius: 15px; color: #fff; &:hover: { background-color: #ddd; } background-color: ${(props) => (p..

SCSS란 그냥 CSS를 편하게 쓰도록 도와주는 친구라고 보면 된다 뒤에 .scss 라고 붙인 파일을 붙여저 style.css에 있는 내용을 모두 복사 붙이기 그리고 터미널에서 scss 확장 파일을 인스톨 해줘야한다 # 오류 메시지를 보면서 하나씩 설치하면 너무 느리니, 이번엔 제가 필요 패키지를 싹 가져왔어요! # 그대로 복사해주세요! 아래 코드로 scss 확장 설치 yarn add node-sass open-color sass-loader classnames 기본문법은 css와 유사하다 그러나 nesting이 가능하다 아래처럼 묶어서 ```scss //scss 네스팅 (묶어주기) div { p { color: #888888; font: { // 폰트 속성도 묶어주기 family:sans-serif; ..

리액트는 기본적으로 단방향으로만 데이터 전송?이 가능하다 부모컴포넌트는 자식에게 데이터를 넘겨줄 수 있지만 자식컴포넌트는 부모에게 데이터를 줄 수 없다! 함수형 컴포넌트의 장점 클래스형 컴포넌트보다 선언이 간편하다. function App() ... 클래스형 컴포넌트보다 메모리 자원을 덜 사용한다. 프로젝트 빌드 후 배포할 때 결과물의 파일 크기가 더 작다. (클래스형 컴포넌트와의 성능과 파일 크기 면에선 크게 차이가 없지만 함수형 컴포넌트가 좀 더 작음) 하지만 큰 단점이 하나 있다. 함수형 컴포넌트의 단점 state 와 라이프사이클 API 사용이 불가능하다. 그렇지만 이 단점은 리액트 v16.8 버전 이후 Hooks 라는 기능이 도입 되면서 해결 되었다. 클래스형 컴포넌트와 똑같이 사용할 수 있는 것..

리액트는 레고 컴포넌트는 레고블록 컴포넌트에는 '클래스형'과 '함수형'이 있습니다 웹 사이트는, 크게 , , 세 개의 컴포넌트가 있고, 컴포넌트는, , 컴포넌트로 이루어져 있다 리액트 코딩룰 폴더는 소문자로 시작하는 카멜케이스를 사용 JS파일, 컴포넌트 이름은 대문자로 시작하는 카멜케이스를 사용 폴더나 파일 앞 글자는 대문자로 시작해야한다 버킷리스트 컴포넌트 // 리액트 패키지를 불러옵니다. import React from 'react'; // 함수형 컴포넌트는 이렇게 쓸 수도 있고 // function Bucketlist(props){ // return ( // 버킷 리스트 // ); // } // 이렇게 쓸 수도 있어요. =>가 들어간 함수를 화살표 함수라고 불러요. // 저희는 앞으로 화살표 함수를..

www.notion.so/1-f54ec720d23d4a30be3a0d47bb9573b2#0be6b03eb2e04dbe9670f3ce2de59ad3 [스파르타코딩클럽] 프론트엔드의 꽃, 리액트 - 1주차 매 주차 강의자료 시작에 PDF파일을 올려두었어요! www.notion.so 리액트 환경 셋팅은 위의 링크를 참고하면 된다 리액트는 레고 같은친구다 CRA란?? 여러 블럭을 모아놓은 패키지? 라고 할 수 있다 리액트에선 프로젝트를 앱이라고 부르기도 한다! 리액트의 기본문법 JSX 아래처럼 변수에 html을 저장 할 수있다 앞에서 말했듯이 마치 레고같다..! const start_half = 안녕하세요! 시작이 반이다! ; JSX의 규칙 1. 태그는 꼭 닫아주기 , // 특정 태그는 /하나만 뒤에 달아줘도 ..

웹의 기본 동작방식 웹이 어떻게 우리에게 보여줄까? 웹은 요청과 응답으로 이루어져 있다 클라이언트가 서버에게 우리가 보기위한 어떤 데이터를 만들어 주는 친구 클라이언트 요청 서버는 요청한 정보를 응답 서버에서 클라이언트로 전달해주는 형식 - JSON 키에 대응하는 어떤 값이 키쌍( : )으로 이루어진 데이터 타입 서버리스란? 서버리스란? 서버를 내가 만들필요가 없다는 말 서버는 있다! 이미 누가 잘 만들어 놓은 서버를 빌려다가 쓰는 것 자바스크립트 ES6문법 let과 const는 블록 안에서 유효 (블록 스코프) / {} var는 함수 단위로 유효 / function = =는 할당을 뜻합니다. 어떤 변수에 값을 할당할 때 써요. == ==는 등차입니다. 유형을 비교하지 않는 등차예요. 변수 값을 기반으로..