So tired
필자는 여태까지 계속 React만 써오다가 인턴을 하게 되면서 처음으로 Vue와 Nuxt를 접하게 되었다. 기존 회사의 서비스가 Vue2 + Nuxt2로 작성되어 있어서 Vue3 + Nuxt3로 마이그레이션을 하는 일을 받게 되었는데, Vue에 대한 개념도 없어서 삽질을 많이 했다. 그래서 나처럼 모종의 이유로 React에서 Vue3나 Nuxt3를 처음 사용하게 될 사람들을 위해 도움이 될법한 글을 써보려고 한다. 공식문서 읽어보기 우선 Vue와 Nuxt를 다루게 된다면, 모르는 것이 생길때 마다 구글링해서 블로그를 찾아보는 것 보단 공식문서 내에서 찾아보고 정독해보는 것을 추천한다. 왜냐하면 대부분이 Nuxt2와 같이 이전의 문법으로 적힌 문서들이 많았고 Vue는 Options API와 Composit..
2023년 전반기에 Poom이라는 서비스를 개발하면서 이것저것 프론트엔드 개발을 편리하게 해주는 기술들을 써 보았는데, 그중에 Storybook을 써본 경험담을 작성해 보려고 한다. 이번 경험을 통해 프론트 개발 전, 디자인 시스템을 구축하는 것이 효과적인 개발을 할 수 있게 해준다는 것을 깨달은 것 같다. 그렇다고는 해도 아직 프론트 업계에 물들지 않은 초심자가 간단하게 만져보고 쓰는 글이다. 우선 Storybook 이란? 컴포넌트 단위의 UI 개발환경을 지원하는 도구이다. 여러 컴포넌트 UI 들을 문서화하여 여러 정보들을 보기 편하게 만들어 준다. 다양한 프론트엔드 웹 프레임워크(React, Vue, Angular 등등)에서 지원한다. Storybook 사용법 내가 작성해두는 것보다 여러 참고하기 ..
다음 경로의 이미지를 src 파일에 있는 다른 파일이, styled-components를 이용해 background-image 속성을 사용한다고 한다면.. 일단 import를 해와야 한다. import Bg from './img/Bg.jpg'; 라고 한 다음. styled-components에서 export const Outbox = styled.div` background: url(${Bg}); ` 다음과 같이 작성하면 된다. 사실 엄청 간단한건데.. 왜 안되는지 해메고 있었다. 아니 css는 자동으로 주소 읽어와 주던뎅..
소개 Redux는 상태(state) 관리 라이브러리이다. Redux는 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 효율적으로 상태를 관리할 수 있다. 특히, 컴포넌트끼리 상태를 공유해야 할 때, 기존의 여러 컴포넌트를 거쳐 전달해야 하는 방식과는 달리 Store를 통해 쉽게 상태 값을 전달할 수 있다. Redux는 React 외에도 jQuery 혹은 Angular를 사용하는 애플리케이션에서도 사용할 수 있지만, 이 글에서는 React 기반으로 서술할 것이다. Redux는 글로벌 상태 관리에 효과적이다. 굳이 '글로벌 상태 관리'라는 말을 하는 이유는 굳이 Redux를 사용할 필요는 없기 때문이다. 간단한 애플리케이션이라면, Redux를 사용하지 않더라도 상태를 관리하는데 큰 어려움 겪지 않을..
Flux란? Flux는 Facebook에서 클라이언트-사이드 웹 어플리케이션을 만들기 위해 사용하는 어플리케이션 아키텍쳐이다. 또는 애플리케이션에서 데이터를 다루기 위한 패턴이라고 할 수 있다. Flux 이전 방식(MVC)의 문제점 Facebook에서 React를 사용할 때, Flux이전에는 다음과 같은 방식으로 데이터를 처리하였다. 어떠한 Action이 입력되면 Controller는 Model이 지니고 있는 데이터를 조회하거나 업데이트 하며, 이 변화는 View에 반영된다. 사용자와의 상호작용(UI)이 뷰를 통해서 일어나기 때문에, 사용자의 입력(input)에 따라 뷰가 가끔씩 모델을 업데이트 할 수도 있다. 이러한 디자인 패턴은 작은 어플리케이션에는 큰 문제없이 작동한다. 하지만, Model과 Vie..
[번역] React ES6 — Class constructor에서의 super() 본 글은 http://cheng.logdown.com/posts/2016/03/26/683329를 한국어로 번역한 글입니다. medium.com
변경 이유 초기 렌더링을 제어하는 방법이 많아져서 혼란이 됨. 오류 처리 인터럽트 동작시에 메모리 누수 발생할 수 있음. React 커뮤니티에서도 가장 혼란을 야기하는 라이프 사이클 React v16.3 이후에 변경된 부분 componentWillMount, componentWillReceiveProps, componentWillUpdate를 v17 부터 사용불가 componentWillReceiveProps 대체 메서드 추가 getDerivedStateFromProps componentWillUpdate 대체 메서드 추가 getSnapshotBeforeUpdate componentDidCatch 컴포넌트 에러 핸들링 API 추가 리액트 교과서 - 컴포넌트와 라이프사이클 이벤트 React 컴포넌트와 라이..
업데이트(갱신, Update) 이벤트 컴포넌트 내부의 state나 props가 변경이 되면 업데이트 이벤트가 발생하며 리렌더링 된다. 컴포넌트가 업데이트 될 때, 다음과 같은 메서드가 실행된다. new Props / setState() / forceUpdate() getDerivedStateFromProps shouldComponentUpdate render getSnapshotBeforeUpdate componentDidUpdate New Props 상위 컴포넌트로부터 갱신된 props를 받는 경우가 있다. 이 때, 갱신된 props를 받은 컴포넌트들은 다시 렌더링되며, update cycle을 진행하게 된다. setState 컴포넌트들은 공통적으로 setState() api를 제공한다. 현재 자신이 ..