개발/프론트엔드 검색 결과

해당 글 23건

리액트의 라이프 사이클

이번 글에서는 리액트의 라이프 사이클(생명 주기)에 대해서 알아보도록 하겠다. 컴포넌트는 총 세종류의 라이프 사이클을 가지는데, 이때 각 사이클마다 호출되는 메서드가 다르기 때문에 메서드의 특성에 대해 알고 있어야 상황에 맞는 코드를 작성할 수가 있다. 그림으로 표현한 라이프 사이클은 다음과 같다. 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

웹팩(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

[Vue] Mixin으로 반복되는 메소드 모듈화시키기

Mixin을 사용해야만 하는 상황과 장점과 단점(종속성을 가지는 메소드의 경우 사용이 어렵다, 같은 구조의 데이터여야만 간섭 가능하다 등) 이번글에서는 Vue.js에서 제공되는 기능중 하나인 Mixin(믹스인)에 대해서 써보자 한다. mixin의 기능을 요약하자면 재사용가능한 메소드의 집합이다. 복수의 컴포넌트, 페이지에서 필요로 하는 기능이 있을때마다 코드를 작성하는것이 아닌 하나의 메소드를 작성하고 이를 재사용할 수 있도록 모듈화시켜 중앙통제형으로 분리하는것이 목적이다. 다른 객체지향 프로그래밍 언어에서의 모듈과 같은 역할이라고 생각하면 된다. 그런데 mixin에는 단순히 모듈화의 기능만을 지원하는것이 아니다. mixin파일의 구조는 일반적인 컴포넌트나 페이지와 비슷한 구조를 띄고 있는데, 다른점은 ..
개발/프론트엔드 2021. 4. 14. 14:28

Webpack/Babel이란?

Webpack SPA 프레임워크에 있는 다양한 자바스크립트 파일을 의존성을 분석해 하나의 html로 묶어주는 방식을 모듈 번들링이라고 하는데 이 작업 빌드(build)라는 과정을 거쳐 해주는것이 webpack이다. 최신 자바스크립트 프레임워크들은 SPA방식을 채택하고 있기 때문에 하나의 html파일에서 페이지 이동이 이루어진다. Babel babel은 코드 변환기로 간단히 설명하자면 es6이상의 문법으로 작성된 코드를 es5로 다운그레이드 시켜주는 역할을 한다. 이러한 다운그레이드 필요한 이유는 크로스 브라우징을 지원하기 위해서이다. 아직 es6를 지원하는 브라우저는 크롬정도인데 크롬이아닌 브라우저(Internet Explore등)을 사용하는 사람은 아직 많은편이다. 이때문에 es6 이상만을 지원하는 최..
개발/프론트엔드 2021. 4. 11. 14:27