Save 블로그

vscode-petshttps://marketplace.visualstudio.com/items?itemName=tonybaloney.vscode-pets vscode-pets - Visual Studio MarketplaceExtension for Visual Studio Code - Pets for your VS Codemarketplace.visualstudio.comVScode에서 코딩할 때 귀여운 펫과 함께 있을 수 있게추가해주는 익스텐션추가 기능으로는 "귀여움"이 추가된다ㅋㅋㅋㅋ  ㅋㅋㅋㅋㅋㅋ 커엽다귀여워!!

function Cart() { const food = [과자, 음료, 디저트, 과일] return ( {food.map(item, index) => {...}} )}JSX 문법에서는 명령형인 for, if 등을 사용할 수 없다그래서 반복문을 구현할 때 map을 주로 사용한다 map은 2개의 파라미터를 가져올 수 있다map(item, index)를 보면 알 수 있다item = 배열의 값을 가져옴index = 0,1,2... index 값을 가져옴 아래는 예시다function Cart() { const food = [과자, 음료, 디저트, 과일] return ( {food.map(item, inde..

React 기반의 프론트와 백엔드 동시 개발이 가능한 풀스택 웹 애플리케이션 구축을 위한 프레임워크라우팅, 렌더링, 최적화... 등등을 제공함으로써개발자가 애플리케이션 구축에 집중할 수 있도록 도와준다 next.js는 SPA와 MPA를 섞음으로써초기 화면을 만들어진 html를 MPA로 불러오고 => SPA 초기로딩 단점을 잡아줌MPA 위에 SPA의 동적을 사용할 수 있게 한다 => MPA의 정적, 플로커현상 잡아줌 SPA와 MPA의 장점을 가져오고 잘 버무려서서로의 단점이 보완되는 Next.js를 안 쓸 이유가 없다 npx create-next-app@latest//이후 작명, 라이브러리 선택... layout.js?page.js는 layout.js 안에 포함된다어떤 페이지에서든 page.js 위에 보여..

API 관리에 좋은 axios 라이브러리 설치하기npm i axiosi는 install의 약자   axios를 이용한 코드useEffect(() => { const fetchData = async () => { const response = await axios.get(`API 주소`); console.log(respnse.Data) }; fetchData();}, []);await를 쓰기 위해 async를 만들어준다 여기서 API 주소를 가져오기 위해 API 읽는법을 배워야할 거 같다가져오고 나서는 문제가 없지만 가져오는 게 문제다어떤게 내가 필요로하는 데이터인지 아직까지 구분이 안된다 ㅠ

번들링 (Bunding)CSS나 JS파일 등 여러개의 파일을 하나의 파일로 합치는 것으로큰 덩어리로 요청을 보내 효율적인 파일 로딩을 할 수 있다 번들링효과로는http 요청 수를 줄여 속도 향상코드를 압축해 파일크기 축소사용되지 않는 코드 제거해 최적화 npm run buildvite의 경우 위 명령어로 번들링할 수 있다   코드스플리팅 (Code Splitting)번들링의 반대개념애플리케이션의 코드를 여러개의 작은 부분으로 나누는 것으로필요한 때에만 해당 파일을 빠르게 로드시킬 수 있다 초기 로딩 속도를 개선불필요한 코드 로드 방지데이터 비용 절감 효과React.lazy와 Suspense를 사용하면, 컴포넌트를 동적으로 로드할 수 있다기본적으로 컴포넌트를 분리하여 필요할 때만 로드하는 방식이다   Re..

시작하기 전 생명주기 꺼내기https://iun-00.tistory.com/8 Update(갱신) -> Unmount(제거) 클래스 컴포넌트로 화면에 표시될 인스턴스를 생성하게 되면클래스형에" data-og-host="iun-00.tistory.com" data-og-source-url="https://iun-00.tistory.com/8" data-og-url="https://iun-00.tistory.com/8" data-og-image="https://scrap.kakaocdn.net/dn/cANJVs/hyX0y4ZWlf/hWtYla3jo8jgJz8zDUYseK/img.png?width=800&height=800&face=0_0_800_800,https://scrap.kakaocdn.net/dn/s..

Redux?외부 라이브러리 중 인기있고 근본인 전역상태관리 라이브러리다리덕스를 시작하기에 앞서, redux, react-redux 모듈이 필요하다npm install redux react-redux    FLUX 패턴의 데이터 흐름리덕스가 어떤 구성요소들로 구성되어 있는지구성요소들 사이에서 데이터들이 어떻게 흐르는지 중요하다 UI에서 상태변화가 필요한 이벤트가 발생하면 상태를 어떻게 변화시킬 것인지 정보를 담은 Action객체를 만들어내고 Action객체는 Dispatch를 통해 Reducer로 전달된다 Reducer에서 Action객체를 해석하고 그 값에 따라서 Store에 들어있는 전역상태를 변경시킨다상태가 변경되면은 UI도 변경된 상태에 맞춰 리렌더링 되는 식으로 이런 형태를 flux 패턴이라 한다..

Context API?React에서 제공하는 Hook 중 하나로, 전역적으로 사용할 데이터를 관리하는 메커니즘이다덕분에 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다   사용방법 createContext 전역 상태 만들기 전역 상태를 만들기 전 전역 상태들을 모아 둘 폴더를 따로 만들어두는 걸 권장한다전역 상태 저장소인만큼 여기저기 사용해야하는데특정 컴포넌트 안에 넣어 만들어두는 것보다 따로 두는 게 더 효율이 좋기 때문이다// 상태저장소 만들기// src/context/counterContext.jsxconst counterContext = createContext()  Provider 전역 상태 연결 // 연결하기// src/context/counterCo..

React는 대표적인 SPA 라이브러리다React에서 SPA를 구현하는 방법은상태를 변경시키고, 변경된 상태에 맞춰 리렌더링 하는 것이다 상태에 따라 리렌더링되는 만큼상태를 잘 관리하는 것이 매우매우 중요하다  Props Drilling?useState만 사용해서 상태를 관리했을 때 발생하는 상태로최상위 컴포넌트에서 관리하는 상태를 자식 컴포넌트로 props 해주면서 거쳐 지나가는 컴포넌트들이 생기는 상태를 props Drilling이라고 한다위는 제일 간단하고 기초적인 컴포넌트 구조 상태다 상태를 관리하고 있는 최상위 컴포넌트인 App에서그 상태를 필요로 하는 자식 컴포넌트 Child1에 props를 해주면목적지에 도달하면서 거쳐온 중간 컴포넌트가 없이App -> Child1 로 바로 왔기 때문에 그냥..

TailwindCSS?가장 대표적인 Utility-First CSS 프레임워크다이미 작성된 css 코드를 클래스명으로 가져다 쓸 수 있다  Utility-First? SASS나 styled-component 등 css보다 좋지만 css코드를 직접 작성해야한다는 건 변함이 없다하지만 tailwindcss는 css코드가 이미 다 작성이 되어 있어서css코드 작성없이 클래스명으로만으로 사용할 수 있기때문에Utility란 이름에 맞게 css 코드 작성을 빠르게 처리가 가능하다  설치 방법 // 설치npm install tailwindcss postcss autoprefixer// 설정 파일 생성npx tailwindcss init -p// 설정파일에서 설정...content: [ "./index.html"..