전체 글 검색 결과

해당 글 54건

리액트의 라이프 사이클

이번 글에서는 리액트의 라이프 사이클(생명 주기)에 대해서 알아보도록 하겠다. 컴포넌트는 총 세종류의 라이프 사이클을 가지는데, 이때 각 사이클마다 호출되는 메서드가 다르기 때문에 메서드의 특성에 대해 알고 있어야 상황에 맞는 코드를 작성할 수가 있다. 그림으로 표현한 라이프 사이클은 다음과 같다. Mount(마운트) 1) constructor() 컴포넌트의 생성자 메서드이다. 컴포넌트가 마운트될때 가장 먼저 실행되는 메서드로 this.props와 this.state에 접근이 가능하고 리액트 요소를 반환한다. 해당 메서드에 접근할때는 초기 설정을 하거나 state를 정할때다. 2) getDerivedStateFromProps() props에서 받아온 값을 state에 바인딩할때 사용되는 메서드이다. 다른..
개발/프론트엔드 2023. 3. 14. 00:55

CORS에 대하여

이번 글에서는 프론트엔드를 배우다 보면 쉽게 만나 볼 수 있는 유명한 문제인 CORS 이슈에 대해서 다뤄 볼 것이다. 분명 처음에 개발을 배울때나 프로젝트를 세팅할 때 한번씩 마주쳤던 기억이 있는 이슈인데, 그렇게 깊은 인상이 남았던 기억은 없는걸로 보아서 해결하는데 시간이 오래 걸리지는 않았던것 같다. 그도 그럴게 하도 유명한 이슈라, 온 인터넷에 공략 방법이 적혀있으니 말이다. 초보자 코스에서 만나는 보스몹인데 완전히 패턴 파악이 끝난 경우라고나 할까. 내게 특별한 기억은 없던 이슈이다. 하지만 프론트엔드에서 자원이란 개발할때 떼놓을 수 없는 것이다. CORS 이슈는 이미지나 파일과 같은 자원에 관한 이슈이므로 한번쯤 탐구해볼만한 가치가 있다고 생각한다. 이번 글에서는 CORS 이슈가 정확히 무엇인지..
개발/프론트엔드 2023. 3. 9. 23:23

Atomic Pattern을 적용한 컴포넌트 작성하기

이번 글에서는 프로젝트에서 사용하고 있는 컴포넌트를 만드는 방법에 대해 이야기 해 보겠다. 이전 글에서도 설명하였듯 현재 진행중인 프로젝트에는 아토믹 컴포넌트을 적용하였다. 아토믹 컴포넌트는 단순히 디자인 패턴이기 때문에 컴포넌트 코드를 작성하는 방법까지 설명해주고 있지는 않다. 그래서 이번 글에서는 내가 아토믹 컴포넌트를 어떤 방식으로 구현했는지에 대해서 알아보고자 한다. 폴더 구조 프로젝트에서 사용중인 아토믹 컴포넌트는 세가지 계층으로 간략화 되어 있다. Atom, Molecule, Organism 순으로 컴포넌트를 분리하여 관리하고 있으며 각 계층마다 역할에 따른 컴포넌트를 저장하여 사용하고 있다. 만약 Gnb 컴포넌트를 만든다고 가정했을때 atoms button Button.tsx ButtonSt..
개발/프론트엔드 2023. 2. 25. 23:56

CSR/SSR, SPA/MPA 완전 정복

이번에는 듣기는 자주 들었지만 그 실체는 제대로 알지 못했던 CSR/SSR 렌더링 방식에 대해 알아볼 것이다. 렌더링 방식은 프론트엔드 개발자라면 필수적으로 알아야 하는 것으로, 자신이 구현한 코드가 어떤 방식으로 웹 브라우저가 읽어와서 사용자들이 접근할 수 있는 형태로 뿌려주는지에 대한 것이다. CSR(Client Side Rendering) vs SSR(Server Side Rendering) 먼저 렌더링(Rendering)이라는 용어의 정의부터 짚고 넘어가보자. 렌더링은 웹 브라우저가 코드를 읽어와서 사용할 수 있는 형태로 화면에 뿌려주는 작업을 의미한다. 이 작업은 브라우저에 내포된 렌더링 엔진이 수행하게 된다. 파싱, 변환, dom트리 구축, 렌더트리 구축 등등 여러 과정을 거쳐 화면이 완성되는..
카테고리 없음 2023. 1. 20. 17:21

웹팩(Webpack)이란?

웹팩이란 최신 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러이다. 좀더 알기쉽게 설명하자면 리액트에서 빌드를 수행할때 사용하는 소프트웨어이라고 할 수 있겠다. 모듈 번들러는 웹 애플리케이션을 구성하는 자원(컴포넌트, 이미지, CSS파일 등등)을 모듈 단위로 나누어 필요할때마다 조합하여 하나의 결과물로 산출시키는 역할을 한다. 프론트엔드 업계에서 많이 사용되는 프레임워크인 리액트, 뷰는 프로젝트 파일의 크기가 꽤나 크다. 특히 최근에는 백엔드의 로직을 일부 프론트엔드로 옮겨오는 추세인지라 그 복잡도가 더 증가했다고 할 수 있다. 이런 대규모 소스코드를 브라우저가 그대로 다운받아서 실행할경우, 너무 느리거나 브라우저가 버티지 못하고 다운되어 버릴 것이다. 따라서 웹팩을 사용하여 파일들간의 의존성 ..
개발/프론트엔드 2023. 1. 11. 18:37

화살표 함수 사용하기

화살표 함수는 기존의 함수 선언 방식을 간단하게 바꾼 표현법이다. 이는 흔히 모던 자바스크립트라고도 불리는 es6에서 지원하는 문법으로, 그 간결성을 인정받아 현재는 함수형 프로그래밍을 할때 표준이 될 정도이다. 그렇다면 화살표 함수는 무엇이며, 기존 함수 방식과 비교해서 어떤면에서 더 뛰어날까? 다음은 기존의(es6 이전)의 함수 선언 방식이다. function getName(firstName, lastName) { return firstName + lastName } 이를 화살표 함수로 구현하면 다음과 같은 모습이 된다. const getName = (firstName, lastName) => firstName + lastName; 바뀐 점을 알아보겠는가? 일단 함수를 선언하는데도 불구하고 funct..
개발/프론트엔드 2022. 12. 30. 00:49

아토믹 컴포넌트를 적용하고 느낀 것들

이번에 링크드인 클론 프로젝트를 진행하면서 아토믹 컴포넌트 구조를 적용하게 되었는데, 아토믹 컴포넌트를 사용하면서 실제로 느꼈던 장점과 단점, 그리고 단점과 문제점들을 어떻게 개선했는지에 대해 애기해보고자 한다. 아토믹 컴포넌트(Atomic Component)란? 아토믹 컴포넌트는 brad frost가 고안한 디자인 시스템[1]으로, 화학적 관점에서 영감을 얻어 이를 컴포넌트 구조에 적용한 방식이다. 컴포넌트를 총 5가지 계층으로 나누게 되는데. atom(원자), molecule(분자), organism(유기체) 순으로 나누어진 컴포넌트를 template, page에서 사용하는 방식이다. 이 디자인 시스템의 장점은 매우 명확한데, 버려지는 컴포넌트 없이 모두 재활용할 수 있다는 것이다. 대부분의 서비스에..
개발/프론트엔드 2022. 12. 11. 22:32