본문 바로가기
반응형

전체 글

 (38)
[React] 프론트엔드 개발에서의 상태 관리 기초 상태란? UI에 동적으로 표현될 데이터 Side Effect란? 함수(또는 컴포넌트)의 입력 외에도 함수의 결과에 영향을 미치는 요인 대표적인 예: 네트워크 요청 (백엔드 API 요청) 상태 두 가지 구분 로컬 상태 전역 상태 특정 컴포넌트 안에서만 관리되는 상태 프로덕트 전체 혹은 여러 컴포넌트에서 관리되는 상태 대부분의 경우 form(input box, select box, radio button 등)을 이용한 상태는 로컬 상태 서로 다른 컴포넌트가 사용하는 상태의 종류가 다르면, 서로 다른 출처(source)가 있어도 상관없지만 서로 다른 컴포넌트가 동일한 상태를 다룰 때에는, 서로 다른 출처로 부터 가져오는 것은 피해야 한다. 전역 상태에서의 데이터 무결성 데이터 무결성이란? 데이터의 정확성을 보..
[React] CSS in JS 방법론 (feat. Styled-Component) 1. CSS 방법론들의 특징 및 장단점 특징 장점 단점 CSS 기본적인 스타일링 방법 - 일관된 패턴을 갖기 어려움, !important의 남용 SASS (preprocessor) 프로그래밍 방법론을 도입하여, 컴파일된 CSS를 만들어내는 전처리기 변수/함수/상속 개념을 활용하여 재사용 가능 CSS의 구조화 전처리 과정이 필요, 디버깅의 어려움이 있음 컴파일한 CSS 파일이 거대해짐 BEM CSS 클래스명 작성에 일관된 패턴을 강제하는 방법론 네이밍으로 문제 해결, 전처리 과정 불필요 선택자의 이름이 장황하고, 클래스 목록이 너무 많아짐 Styled-Component (CSS-in-JS) 컴포넌트 기반으로 CSS를 작성할 수 있게 도와주는 라이브러리 CSS를 컴포넌트 안으로 캡슐화, 네이밍이나 최적화를 ..
[React] 컴포넌트 단위로 개발하기 (feat. CDD & Storybook) 1. Component-Driven Development(CDD) 기획자로부터 하나의 페이지 기획이 도착했고, 디자이너와 개발자가 협력하여 디자인과 개발이 진행되었다. 페이지가 모두 완성되었는데, 다른 페이지에 적용되는 버튼에 대한 추가적인 기획안이 도착했다. 그런데 기획자가 버튼에 대한 기획을 이전에 요청했던 버튼과 똑같이 사용하도록 요청했다. 이럴 때 디자이너와 개발자는 이 부분을 모두 새로 만들어야 하는 걸까? 여러 프로젝트 혹은 여러 팀간에 간은 UI 컴포넌트를 공유한다면 이런 고민을 하지 않아도 된다. 디자인과 개발 단계에서부터 재사용할 수 있는 UI 컴포넌트를 미리 디자인하고 개발하면 이런 고민을 해결하 수 있다. 이 고민을 해결하기 위해 등장한 개발 방법이 바로 Component Driven..
[HTTP] HTTP Messages HTTP는 HyperText Transfer Protocol의 줄임말로, HTML고 같은 문서를 전송하기 위한 Application Layer 프로토콜이다. HTTP는 웹 브라우저와 웹 서버의 소통을 위해 디자인되었다. 전통적인 클라이언트-서버 모델에서 클라이언트가 HTTP Messages 양식에 맞춰 요청을 보내면 서버도 HTTP Message 양식에 맞춰 응답한다. HTTP는 특정 상태를 유지하지 않는 특징이 있다. HTTP의 특징 : Stateless(무상태성) 1. HTTP messages HTTP messages는 클라이언트와 서버 사이에서 데이터가 교환되는 방식이다. HTTP messages에는 두 가지 유형이 있다. 요청(Requests) 응답(Responses) HTTP messages는 ..
[네트워크] 브라우저의 작동 원리 1 (보이지 않는 곳) 1. URL과 URI URL은 Uniform Resource Locator의 줄임말로, 네트워크 상에서 웹 페이지, 이미지, 동영상 등의 파일이 위치한 정보를 나타낸다. URL은 scheme, hosts, url-path로 구분할 수 있다. 가장 먼저 작성하는 scheme은 통신 방식(프로토콜)을 결정한다. 일반적인 웹 브라우저에서는 http(s)를 사용한다. hosts는 웹 서버의 이름이나 도메인, IP를 사용하며 주소를 나타낸다. url-path는 웹 서버에서 지정한 루트 디렉토리부터 시작하여 웹 페이지, 이미지, 동영상 등이 위치한 경로와 파일명을 나타낸다. URI는 Uniform Resource Identifier의 줄임말로, 일반적으로 URL의 기본 요소인 scheme, hosts, url-pa..
[HTTP] 클라이언트-서버 아키텍처 1. 클라이언트-서버 아키텍처 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨 것을 2-Tier 아키텍처, 다른 말로 클라이언트-서버 아키텍처라고 부른다. 보통 서버는 리소스를 전달해 줄 뿐, 리소스를 저장하는 공간은 데이터 베이스라는 창고에 둔다. 이처럼 클라이언트-서버 아키텍처에 데이터 베이스가 추가된 형태를 3-Tier 아키텍처라고 한다. 여기서 프론트엔드 개발과 백엔드 개발이 나오는데 사용자가 눈으로 보고 대면하는 클라이언트 앱을 프론트엔드 영역 사용자 눈에 직접 보이지 않게 뒤에서 작동하는 서버 앱을 백엔드 영역이라고 부른다. 2. HTTP를 이용한 클라이언트-서버 통신과 API 클라이언트와 서버 간의 통신은 요청과 응답으로 구성된다. 여기서 요청이 있어야만 응답이 올 수 있다. 하지만 ..
[JS] 객체지향 JavaScript (feat. class & instance) 1. class와 instance 객체 지향 프로그래밍은 하나의 모델이 되는 청사진(BluePrint)을 만들고 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴이다. 여기서 청사진을 class라 할 수 있고, 객체를 instance라고 할 수 있다. 정확히는 인스턴스 객체(instance object)다. //ES6 class Car { constructor(brand, name, color) { this.brand = brand; this.name = name; this.colr = color; } drive() { console.log(this.name + '이(가) 운전을 시작합니다' } } let stonic = new Car('kia', 'stonic', 'gray') stonic.col..
[JS] 내장 고차함수 이해하기 (Feat. map, filter, reduce) 자바스크립트(JS)에는 기본적으로 내장된 고차 함수(Built-in higher order functions)가 여러가지 있다. 그중에서 배열 메소드들 중 일부가 대표적인 고차 함수에 해당한다. 1. map 배열의 각 요소가 특정 논리(함수)에 의해 다른 요소로 지정(map) 된다. map은 아래와 같이 하나의 데이터를 다른 데이터로 맵핑(mapping)할 때 사용된다. const cartoons = [ { id: 1, bookType: 'cartoon', title: '식객', subtitle: '어머니의 쌀', createdAt: '2003-09-09', genre: '요리', artist: '허영만', averageScore: 9.66, }, { id: 2, // .. 이하 생략 }, // .. 이..
반응형

티스토리툴바