jyoon dev log

React Hooks 1. react.lazy(), suspense 를 사용해서 동적으로 리소스 받아오기 react.lazy()와 suspense 는 같이 사용해야 한다. (앱의 볼륨이 작으면 속도감이 안 올 수 있다, 대형 프로젝트에서는 빠른 속도 체감할 수 있다.) 동적 import를 사용해서 받아오고, 받아온 것들을 suspens 컴포넌트 안에서 실행시킨다. App.js /* react 메소드 사용할 때 import React, { Suspense } from "react" 불러오기*/ import React, { Suspense } from "react"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import useFetc..

📌 Component Driven Development (CDD) : 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 CDD 방법을 활용하여 UI 를 구축하는 사이트 1) UN 2) BBC Storybook latest--5d28eb5ee163f6002046d6fb.chromatic.com 📌 CSS 전처리기(CSS Preprocessor) : CSS가 구조적으로 작성될 수 있게 도움을 주는 도구 SASS (Syntactically Awesome Style Sheet) CSS를 확장해 주는 스크립팅 언어 자바스크립트처럼 특정 속성(ex. color, margin, width 등)의 값(ex. #ffffff, 25rem, 100px 등)을 변수로 선언하여 필요한 곳에 선언된 변수를 적용 복되는 코드를 한 ..

JSX 문법 1. html에 class 넣을 때는 className JSX는 일종의 자바스크립트라서 자바스크립트에서 사용하는 예약어인 class라는 키워드를 사용할 수 없다. 그래서 class=" " 넣고 싶으면 className이라고 쓴다. 2. 변수를 html에 넣을 때는 {중괄호} 중괄호 안에 데이터바인딩하고 싶은 변수명만 담으면 된다. *데이터바인딩: 변수에 있던걸 html에 꽂아넣는 작업 3. html에 style속성 넣고싶으면 { 속성명 : '속성값' } 글씨 font-size 처럼 속성명에 대쉬기호를 쓸 수 없다. 대쉬기호 대신 모든 단어를 붙여써야한다. 붙여쓸 땐 앞글자를 대문자로 치환하여 카멜 케이스로 작성한다.

React를 쓰는 이유 💡 instagram 웹사이트로 들어가면 페이지 전환을 했을 때 새로고침 없이 부드럽게 동작한다. 이런 페이지를 Single Page Application라고한다. 1. html을 함수, array, object에 보관하고 재사용할 수 있어서 큰 프로젝트일 수록 html 관리 편리해짐 2. React Native를 쓰면 같은 리액트 문법으로 모바일 앱개발도 가능함 💡 Single Page Application html 파일을 1개만 쓰고 다른 페이지를 보여주고 싶을 때 html 부분만 바꿔서 보여준다. 그래서 부드럽게 동작한다.