codeStates front-end/React
-
[React] styled-components - card , dummydata 사용하여 로컬에 데이터 넣기codeStates front-end/React 2023. 5. 16. 00:32
📌 dummydata 구현 DummyData.js export const campgrounds = { data: [ { productId: 2, productName: "캠핑장2", address: "한강 어딘가2", location: "서울2", content: "캠핑장 빌려드립니다.2", capacity: 10, cancellationDeadline: "2023-05-03T10:00:00", productPrice: 30000, productPhone: "010-1234-1111", latitude: null, longitude: null, deleted: false, createdAt: "2023-05-10T09:24:02.995997", createdBy: "name", modifiedAt: "2..
-
[React] React와 TDDcodeStates front-end/React 2023. 3. 29. 17:13
HTML 삽입 미리보기할 수 없는 소스 📌 React 와 TDD 📍 TDD(Test-driven Development) 코드를 작성하기 전에 테스트를 쓰는 소프트웨어 개발 방법론 개발자가 자신이 바람직하다고 생각하는 코드의 결과를 미리 정의하고, 이것을 바탕으로 코드를 작성하는 법 작은 단위의 테스트 케이스를 작성하고, 이를 통과하는 코드를 작성라는 과정을 반복하는 것을 의미 🔗 TDD를 사용하는 이유 테스트코드를 먼저 작성해야 하기 때문에 시간이 오래 걸리는 것처럼 느껴지지만, 오히려 예상하지 못했던 버그를 줄여 소요 시간을 줄일 수 있기 때문이다. 🔗 TDD를 작성하는 방법 console.log escribe, it, assert, expect 등의 다양한 키워드들 : JavaScript 내장 기능이..
-
[React] 코드 분할codeStates front-end/React 2023. 3. 23. 18:41
HTML 삽입 미리보기할 수 없는 소스 📌 React 심화 📍 코드 분할(Code Spliting) React는 HTML 웹 페이지에 JS를 추가해야 하기 때문에 번들링을 진행한다. 그러나 JS코드가 점점 무거워지기 때문에 실행 속도가 느려지게 된다. 이를 방지하기 위해 해결방법은 번들을 물리적으로 나누는 것이다. 번들 분할 혹은 줄이는 법 번들링이 진행되면 npm을 통해 서드파티 라이브러리가 포함하게 된다. 🤷🏼 서드파티(Third Party) 라이브러리란? 개인 개발자나 프로젝트 팀, 혹은 업체등에서 개발하는 라이브러리, 즉 제 3자 라이브러리 그러나 번들링 시 이 라이브러리는 많은 공간을 차지하기 때문에, 따로 따로 불러서 사용할 수 있어야 한다. /* 이렇게 lodash 라이브러리를 전체를 불러와..
-
[React] Virtual DOM, React Diffing AlgorithmcodeStates front-end/React 2023. 3. 22. 19:04
HTML 삽입 미리보기할 수 없는 소스 📌 리액트 심화 📍Virtual DOM React는 UI의 상태를 추적하고 변화가 일어난 요소들을 빠르게 업데이트 할 수 있도록 가상의 DOM 객체를 활용한다. Real DOM (Document Object Model) DOM은 문서 객체 모델은 의미, 문서 객체란? 브라우저가 JS와 같은 스크링팅 언어가 html 태그들에 접근하고 조작할 수 있도록 문서를 트리 구조로 객체화 한 것을 의미한다. 즉, DOM은 브라우저가 HYML 문서를 조작할 수 있도록 트리 구조화한 객체 모델이다. DOM의 조작 속도가 느려지는 이유 트리는 "저장된 데이터를 더 효과적으로 검색"을 위해 사용, 그러므로 트리구조 된 DOM은 탐색속도는 빠르다. 그러나 DOM이 변경되고 업데이트 된다..
-
[React] 번들링과 웹팩codeStates front-end/React 2023. 3. 20. 17:20
HTML 삽입 미리보기할 수 없는 소스 📌 번들링과 웹팩 📍번들링 "사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음" 사용자가 브라우저를 열고 주소를 입력하면, 해당 주소에서 프론트엔드 개발자가 번들링한 여러 파일을 받고, 이 파일을 브라우저가 실행하여 멋진 웹 애플리케이션을 사용자에게 제공 🔗 번들링의 필요성 변수 간의 충돌 인터넷 속도가 느린 국가의 모바일 환경에서 사용자의 불편 호소 떨어지는 가독성 배포 코드의 쉬움으로 인한 보안 문제 📍Webpack "프론트엔드 애플리케이션 배포를 위해 가장 많이 사용하는 번들러" 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러를 의미한다. 웹팩은 주요 구성 요소인 로더(loader)를 통해 다양한 파일도 번들링이 가능하다. 빌드와 번들링 💁♂️ 빌드..
-
[React]Cmarket ReduxcodeStates front-end/React 2023. 2. 27. 16:29
HTML 삽입 미리보기할 수 없는 소스 📌 My Agora states server 📖 학습 목표 pass한 순서대로 문제 해결 Action 생성 actions - index.js // action types export const ADD_TO_CART = "ADD_TO_CART"; export const REMOVE_FROM_CART = "REMOVE_FROM_CART"; export const SET_QUANTITY = "SET_QUANTITY"; export const NOTIFY = "NOTIFY"; export const ENQUEUE_NOTIFICATION = "ENQUEUE_NOTIFICATION"; export const DEQUEUE_NOTIFICATION = "DEQUEUE_NOTIFI..
-
[React] ReduxcodeStates front-end/React 2023. 2. 24. 18:20
HTML 삽입 미리보기할 수 없는 소스 📌 Redux 📍Redux 개요 보통 리액트에서 최상위 컴포넌트 -> 부모 컴포넌트 -> 자식 컴포넌트가 일반적이지만, 다소 비효율적이라고 느낄 수 있다. 1. 해당 상태를 직접 사용하지 않는 최상위 컴포넌트, 컴포넌트1, 컴포넌트2도 상태 데이터를 가짐 2. 상태 끌어올리기, Props 내려주기를 여러 번 거쳐야 함 3. 애플리케이션이 복잡해질수록 데이터 흐름도 복잡해짐 4. 컴포넌트 구조가 바뀐다면, 지금의 데이터 흐름을 완전히 바꿔야 할 수도 있음 허나 Redux는 전역 상태를 관리할 수 있는 저장소인 Store를 제공함으로써 이 문제들을 해결 📍Redux 구조 🔗 Redux 상태 관리 Action → Dispatch → Reducer → Store 순서 상태..
-
[React] Storybook, useRefcodeStates front-end/React 2023. 2. 20. 18:18
HTML 삽입 미리보기할 수 없는 소스 📌 Storybook, useRef 📍Strorybook이란? UI개발 즉, Component Driven Development를 하기 위한 도구 개발 모드에서 앱과 함께 실행 스토리북은 비즈니스 로직과 맥락으로부터 분리된 UI 컴포넌트를 만들 수 있도록 한다 🤔 왜 사용하나요? 기본적으로 독립적인 개발 환경에서 실행 개발자는 애플리케이션의 다양한 상황에 구애받지 않고 UI 컴포넌트를 집중적으로 개발할 수 있다 주요기능 UI 컴포넌트들을 카탈로그화하기 컴포넌트 변화를 Stories로 저장하기 핫 모듈 재 로딩과 같은 개발 툴 경험을 제공하기 리액트를 포함한 다양한 뷰 레이어 지원하기 🔗 Storybook 설치 리액트 앱 설치 후 npx storybook init s..