코딩공부/React(29)
-
웹 프론트엔드 아키텍쳐(MVC/MVVM/FLUX)
처음 개발 할 때에는 규칙없이 그냥 코드를 만들다 보면, 덩치가 커지는 순간 불편함이 생기고 정리가 안 되는 시점이 생깁니다. 그러니 처음부터 특정한 규칙을 만들어서 개발을 하는게 좋다는 것을 알게 되고, 규칙을 하나씩 만들어가며 개발을 하다보면 이것이 반복이 되어 하나의 특정 패턴이 만들어집니다. 이러한 패턴들을 모두가 이해하고 따를 수 있도록 하는 구조를 아키텍쳐라고 부릅니다. 그러므로 아키텍처란 좋은 구조를 만드는 것을 뜻하는데 좋은 구조의 첫번째 조건은 좋은 분류입니다. MVC 아키텍처 Model, View, Controller라는 영역으로 나누는 고전적인 방식입니다. View(화면): 최종적으로 HTML과 CSS로 만들어지는 결과물 Model(데이터): 데이터를 주관하는 영역 Controller..
2022.04.26 -
[네트워크] get과 post의 차이
GET 이란? GET 은 클라이언트에서 서버로 어떠한 리소스로 부터 정보를 요청하기 위해 사용되는 메서드이다. 예를들면 게시판의 게시물을 조회할 때 쓸 수 있다. GET을 통한 요청은 URL 주소 끝에 파라미터로 포함되어 전송되며, 이 부분을 쿼리 스트링 (query string) 이라고 부른다. 방식은 URL 끝에 " ? " 를 붙이고 그다음 변수명1=값1&변수명2=값2... 형식으로 이어 붙이면 된다. 예를들어 다음과 같은 방식이다. www.example.com/show?name1=value1&name2=value2 서버에서는 name1 과 name2 라는 파라미터 명으로 각각 value1 과 value2 의 파라미터 값을 전달 받을 수 있다. GET의 특징 GET 요청은 캐시가 가능하다. : GET..
2022.04.13 -
code splitting / 번들링
Code Splitting Dynamic Imports Code Splitting in React The Async Component HOC React.lazy & Suspend 예제 Issue with React Router Loadable Components 예제 Lodable vs React.lazy 그 외의 Lodable 기능 정리 Library Spitting Dynamic Full Import (import(./${value}) Suspense React.Suspense lodable option props Preload Code Splitting 적용 전과 후 비교 적용 전 적용 후 webpack을 이용하여 좀 더 번들링된 파일 최적화 하기 Setting ouput filename Magic..
2022.04.13 -
REDUX란?
리덕스(Redux) 리덕스는 자바스크립트를 위한 상태 관리 프레임워크다. 컴포넌트 코드로부터 상태 관리 코드를 분리 할 수 있다. 서버 렌더링 시 데이터 전달이 간편하다. 로컬 스토리지에 데이터를 저장하고 불러오는 코드를 쉽게 작성할 수 있다. 같은 상태 값을 다수의 컴포넌트에서 필요로 할 때 좋다. 부모 컴포넌트에서 깊은 곳에 있는 자식 컴포넌트에 상태 값을 전달할 때 좋다. 알림창과 같은 전역 컴포넌트의 상태 값을 관리할 때 좋다. 페이지가 전환되어도 데이터는 살아 있어야 할 때 좋다. 세 가지 원칙 리덕스 사용 시 따라야할 세 가지 원칙이있다. 전체 상태 값을 하나의 객체에 저장한다. 상태 값은 불변 객체이다. 상태 값은 순수 함수에 의해서만 변경되어야 한다. 부수 효과: 외부의 상태를 변경하는 것..
2022.04.13 -
Styled-components Pseudo selectors 2
${styled-component명} {} import React from 'react'; import styled from 'styled-components'; import { keyframes } from 'styled-components'; ... // ${styled-component명} {} // 이런식으로 스타일 컴포넌트 안에서 셀렉해주면 // 그 컴포넌트가 어떤 태그이든 상관없이 css를 줄 수 있다. const Emoji = styled.span` font-size: 36px; `; const Box = styled.div` height: 200px; width: 200px; background-color: tomato; display: flex; justify-content: center..
2022.03.29 -
왜 Styled-components를 쓰는가?
react에서 styled components를 안쓰고 css 적용하는 세가지 방법 1. inline css js code를 써서 별로 hover도 못씀 2. 전역 css e.g)index.css 코드가 전역에 적용되어 세부 조정하기가 힘듦 3. 파일이름.module.css 모듈 방식 계속 className을 복붙해줘야함 styled-components의 장점 이해하기 쉽고 쓰기도 용이함 css 파일을 확인하지 않아도 해당 div가 어떤역할을 하는지 알 수 있다 - 스타일링된 컴포넌트를 쓸 수 있는데 컴포넌트 함수 안에 스타일을 써줄 필요가 없음 - 알아보기 더 쉬운 컴포넌트 이름을 정할 수 있음 - 같은 스타일 컴포넌트를 한가지 스타일 value만 바꿔서 여러번 쓸 때 props를 인자로 받아서 해당 ..
2022.03.29