1. Presentational & Container 디자인 패턴이란?로직을 수행하는 컴포넌트와, markup을 통해 ui를 보여주는 컴포넌트가 분리된 패턴입니다.그에 따라 앱의 기능과 ui에 대한 구분이 쉬워집니다.같은 state를 다른 container에게 props 내림으로 상태를 공유 할 수 있습니다.로직수행, markUp이 다른 컴포넌트에서 하기 때문에 유지보수가 쉽고, 재사용성이 뛰어납니다. 특히, markup 변경에 매우 유연합니다.동일한 마크업, 컨테이너 레이아웃 (header, footer)는 반복해서 작성하지 않아도 this.props.children 구현 할 수 있습니다.리액트를 사용하고 redux, recoil과 같은 상태관리 라이브러리를 같이 사용하다보면 필연적으로 마주하는 디자인..
develop
CSS-in-JS의 장점과 단점CSS-in-JS란?CSS-in-JS는 JavaScript 안에서 CSS 스타일을 작성하고 조작하는 방법을 의미합니다. 이 방식은 주로 컴포넌트 기반의 JavaScript 라이브러리나 프레임워크 (예: React, Vue.js 등)에서 많이 사용됩니다.Styled ComponentStyled Component란? 자바스크립트 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 라이브러리로 리액트 개발에서 주로 사용되는 라이브러리 입니다.장단점장점으로는 CSS파일을 외부로 분리하는 방법이 아닌 Styled Component를 사용하여 CSS-in-JS 기술로 자바스크립트 파일 안에 CSS를 삽입하여 컴포넌트마다 고유한 클래스를 가지며 변수를 선언하거나 연산자들을 통하여 자유..
웹 브라우저 렌더링 방식에는 여러가지 방법들이 존재합니다.오늘은 그 중 대표적인 방법들 몇가지에 대해서만 알아보겠습니다.1. 클라이언트 사이드 렌더링 (Client Side Rendering)1-1. CSR 이란?클라이언트가 웹 화면을 그리는 주체가 된다.모바일의 수요와 환경이 폭발적으로 증가함에 따라 모바일 웹브라우저에 대한 접근과 니즈가 증가하였고,
PC보다 사양이 부족한 모바일 환경에 맞추어 기존과는 다른 접근방식으로 등장한 SPA가 등장하게 되었다.관련 프레임워크 ex) React.js, Angular.js, Vue.js1-2. CSR 방식의 렌더링 과정페이지를 처음 로딩할때 서버는 index.html 파일을 클라이언트에 전달전달받은 index.html파일 안에는 어플리케이션에 필요한 자바스크립..
해당글은 React의 함수형 컴포넌트 생명주기(lifeCycle)에 대하여 설명하고 있습니다.생명주기리액트는 컴포넌트단위로 생성되는데, 이 컴포넌트들은 생명주기를 갖고있다. 생성부터 시작하여 업데이트, 소멸 되는 과정을 라이프사이클 이라고 한다.생명주기의 단계는생성(mounting) - 업데이트(updating) - 제거(unmounting)각각의 생명주기마다 이벤트 발생 횟수가 다르다. (생성, 제거 한번, 업데이트 여러번 실행) 으로 구성되어 있으며, 각 단계마다 특정한 이벤트가 발생하며 그 때마다 사용되는 메서드가 존재합니다.[출처] https://wavez.github.io/react-hooks-lifecycle/전체적인 과정을 살펴보자면컴포넌트 내부 Mounting컴포넌트가 호출 되었을 때, 가..
React에서 배열을 렌더링할 때 key를 입력해야 하는 이유React로 웹페이지를 구성하다 보면 Creola Katherine Johnson: mathematician Mario José Molina-Pasquel Henríquez: chemist Mohammad Abdus Salam: physicist Percy Lavon Julian: chemist Subrahmanyan Chandrasekhar: astrophysicist이런식으로 같은 태그들이 반복될 경우가 있거나 배열안에 많은 데이터를 페이지에 구성을 해야될 때가 있다. 이럴때에는 이러한 데이터를 일일히 입력하는것이 아닌 JavaScript 객체와 배열에 데이터를 저장하고 map()또는 filter() 같은 메소드를 사용하여 컴포넌트..
DOMDOM이란 Document Object Model의 약자로, 한국어로는 문서 객체 모델입니다. 간단하게 표현하면 웹 페이지에 나타나는 HTML 문서 전체를 객체로 표현한 것으로 생각하면 됩니다. 이때 각 객체를 노드(Node)라는 용어로 표현하고, 태그는 요소 노드, 문자는 텍스트 노드로 구분됩니다.DOM 트리HTML의 계층 구조는 DOM에서도 반영되는데 이러한 계층구조를 나무에 비유해서 DOM 트리라고 부릅니다. 각 노드 간의 관계는 부모, 자식, 형제라는 용어로 표현합니다.Virtual DOMVirtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다. 이 과정을 재조정(..
자바스크립트의 특징자바스크립트는 싱글 스레드 기반의 언어입니다. 여기서 스레드란 작은 단위의 실행 흐름을 말합니다. 자바스크립트 엔진을 간단히 살펴보면 위와 같이 Memory Heap과 Call Stack(자료구조에서 배우게 될 stack처럼 구현된 저장소)으로 구성되어 있는데요. 하나의 스레드에서 하나의 Call Stack으로 현재 어떤 함수가 동작하고 있는지, 그 함수 내에서 어떤 함수가 동작하고, 다음에 어떤 함수가 호출되어야 하는지 등을 제어합니다.런타임 (브라우저 또는 Node.js)환경위에서 확인한 것처럼 자바스크립트 엔진은 단일 Call Stack으로 요청이 들어온 순서대로 한 가지 일만을 수행합니다. 그러면 setTimeout 과 같이 타이머가 완료된 뒤 callback 함수를 실행하는 비..
개발 공부를 시작한게 엊그제같은데 어느덧 한달이 훌쩍 지나가버렸다.한달동안 HTML / CSS 그리고 javascript에 대하여 배웠는데 다른 사람들보다 알고있는게 많이 없다보니, 매일 아침 8시에 일어나 저녁 12시까지 학습하다 보면 일주일이 어느새 훌쩍 지나가버린다. 나에게 개발공부는 시간도둑 간장게장같은 존재라고 할까?그래도 내가 만들고 직접 함수도 짜보고 연구도 해보고 새롭게 접근도 해보는 이러한 일련의 과정들이 지치기보다는 오히려 재밌게 느껴진다. 그래서 개발 공부를 시작한 부분이기도 하니까그리고 일주일에 30문제를 풀어나가던 알고리즘 스터디도 이제 0단계를 모두 풀기 전까지 매일 10문제씩 풀어보기로 스터디원들과 이야기 했다. 목표는 5월까지 2단계 절반이상을 풀어보는 것인데, 0단계를 빠르..
