React51 [React] Build 후에 CSS 사라짐 현상? 이번 주 가벼운 마음으로 개인 프로젝트를 진행하다가 배포 업데이트를 하려고 build를 하고 build 된 어플을 실행시켜 보았다. 그런데 이게 뭔 일인지.... 스타일이 몽땅 사라져 있는 것이었다. 이전에 똑같은 방식으로 build 해서 배포할 때는 아무런 문제가 없었는데 갑자기 지금에 와서야 이러는 이유를 모르겠다. 거기다 로컬에서 돌렸을 때는 스타일이 모두 잘 적용되어서 돌아가고 있었다. 무엇이 문제인지 한참을 헤메다가 원인을 찾게 되었다. 원인은 styled-components의 GlobalStyles 컴포넌트 때문이었다. 지금까지 index.js에 컴포넌트보다 상위의 위치에 컴포넌트를 위치시켰는데, 문서를 살펴본 결과 컴포넌트와 같은 위치 혹은 더 아래의 위치에 를 위치시켜야 한다고 한다. im.. 2022. 8. 14. [React] 리엑트 컴포넌트가 두 번 렌더링 되는 이유? 이번 스프린트를 마치기 전 데모를 해보다가 화면상 표시되는 데이터가 실제 데이터와 다르다는 사실을 발견했다. 원인을 찾아보니 동료 개발자가 의도치 않게 자료형에 Mutation을 일으켜 잘못된 데이터가 표시된 것이었다. 그리고 Mutation이 발생한 이유는 2회 컴포넌트가 렌더링 되면서 함수가 두 번 실행되었기 때문이라는 사실도 알게 되었다. 사실 이전 부터 궁금하긴 했었다. useState 혹은 useEffect를 사용한 컴포넌트에서 콘솔을 찍으면 항상 두 번 프린트되었기 때문이다. 그래서 오늘은 관련해서 왜 그런지 찾아보았고 재밌는 글을 발견해 번역해 옮겨 본다. My React components render twice and drive me crazy 모던 리엑트를 사용하는 수 많은 프론트엔드 .. 2022. 7. 29. [React] 리엑트 디자인 패턴: Return Component From Hooks React Design Patterns: Return Component From Hooks "Partical Application"으로 부터 영감을 받은 새로운 형식의 패턴: Material-UI와 타입스크립트를 이용한 예제와 함께 훅이 리엑트 커뮤니티에 소개된 지 수년이 흘렀고, 이로 인해 코딩 패턴에 많은 변화가 생겼다. 이번 글에서는, 'partial application'에서 영감을 받은 새로운 패턴에 대해 공유해보고자 한다. 필자는 이를 'Return Component From Hooks'라고 부른다. 간단한 예제로 시작해보자: 팝업 메뉴를 여는 버튼을 추가하자 메뉴를 열고 닫는 상태 관리 메뉴 아이템 클릭 핸들러 import React from "react"; import Button from.. 2022. 6. 30. [React] 2022 리엑트 컴포넌트 디자인 패턴 많은 스타트업에서 그러하듯 초기 프로토타입 플랫폼은 인하우스가 아닌 외주 업체를 통해 제작하는 경우가 많다. 현재 필자가 개발자로 근무하는 회사의 플랫폼도 외주 업체에 의해 제작된 애플리케이션이다. 다행히 꼼꼼하고 실력 있는 개발자께서 만들어 주셔서 유지 보수에 문제가 있는 것은 아니지만, 몇몇 부분에서 코드를 읽고 이해하기 난해한 부분들이 있다. 특히, 디자인 패턴에 있어서는 일관성 문제로 코드를 이해하는데 시간을 많이 잡아먹는 문제가 발생하고 있다. 파일명 혹은 클래스명을 토대로 이해하기로는 container - presenter 패턴을 이용한 것으로 생각되나, container와 presenter의 구분이 모호해지는 회색 영역이 코드의 대부분을 차지하며 props drilling 지옥이 필자를 괴롭.. 2022. 6. 30. [React] Controlled vs Uncontrolled component 리엑트를 이용해 어플을 제작하다 보면 심심찮게 아래와 같은 에러 코드를 만날 수 있다. Elements should not switch from uncontrolled to controlled (or vice versa). 이 에러 코드는 Input Textarea Selct 등과 같이 몇몇 태그를 사용할 때 빈번히 나타난다. 관련해서 잘 설명된 글이 있어 번역해 옮겨본다. To Be or Not to Be 리엑트에서 controlled와 uncontrolled 컴포넌트 선택하기 Controlled와 uncontrolled 컴포넌트는 리엑트에서 중요한 개념이다. 어떠한 경우에 어울리는지와 그 차이점을 아는 것은 매우 중요하다. 리엑트에서 controlled와 uncontrolled란 무엇일까? contr.. 2022. 6. 21. Presentational and Container Components 리엑트 애플리케이션을 제작할 때 아주 유용한 간단한 디자인 패턴이 있다. 오랫동안 리엑트를 사용해 본 사람이라면, 이미 알고 있을 것이다. 해당 포스팅에서 아주 잘 설명하고 있긴 하지만 몇가지 좀 더 설명하고자 한다. 컴포넌트를 두개의 카테고리로 나눈다면 컴포넌트를 재사용하고 이해하는 데에 아주 쉬워진다는 사실을 알 것이다. 필자는 이를 Container-Presentational이라고 부르는데 Fat-Skinny, Smart-Dumb, Stateful-Pure, Screens-Components라고도 불리기도 한다. 정확히 같은 개념은 아니지만 비슷한 개념을 공유하는 말이다. 필자가 정의하는 presentational 컴포넌트란: 어떻게 보일지를 관여한다. presentational과 container.. 2022. 6. 21. [React] 웹 개발에서 리엑트를 사용하는 이유 개발 면접을 보면 높은 확률로 프레임워크에 대한 질문이 나온다. 대부분 왜 사용하나요? 가 주를 이루는데, 필자의 지극히 개인적인 생각으론 굉장히 현실과 동떨어진 면접 질문이라고 생각한다. 대충 다른 프레임워크와의 차이점과 비교 분석 등을 이야기하면 간단하게 넘길 수 있는 질문이지만, 과연 초보 개발자중에 각종 프레임워크 튜토리얼을 진행하고 비교 분석 후 '아! 나는 이러한 이유로 이 프레임워크를 써야겠어!'라고 생각하는 개발자가 몇이나 있을까. 결국 면접자에게 거짓말을 강요하는 셈이다. 필자도 거짓말을 했던 사람 중에 한 명이었고 이런 질문을 받을 때마다 거짓말을 해야 한다는 점이 썩 기분이 좋지는 않았다. 그러다 현업에서 프론트엔드 개발자로 업무를 하게 되면서, 코드에 대한 이해도가 아~~주 약간 쬐.. 2022. 6. 3. [React] 외부 클릭 시 메뉴창 닫기 오늘 토이 프로젝트를 진행하면서 메뉴 버튼 밖을 클릭했을 때 메뉴 컴포넌트가 닫히는 UI를 구현하고 싶었다. 방법에 대해 한참을 고민하다 보니... 최상의 컴포넌트에서 props drilling을 통해 메뉴를 닫는 기능을 구현할까... 하는 생각이 들었지만 어엿한 프론트엔드 개발자를 꿈꾸는 나에게 이것은 올바른 해결법이 아니라는 판단이 들었다. 그래서 구글링을 해보니 해당 방법을 Effect 훅과 Ref 훅을 이용해 해결하는 방법에 대해 참고할 수 있었다. 전체 코드는 이러한데 한번 부분 부분 살펴보자. const Deck = ({data}: Props) => { const [openInnerMenu, SetOpenInnerMenu] = useState(false); const InnerMenuHandl.. 2022. 4. 8. [React] dotenv 사용시 주의할 점 React의 경우 dotenv를 사용할 때 조금 주의할 점이 있다. 1. import dotenv???? 많은 기술 블로그에서 dotenv를 import 해야 한다고 나와있는데 사실 React는 그런 거 필요 없다. 오히려 import 하면 아래와 같은 에러를 만날 것이다. ERROR in ./node_modules/dotenv/lib/main.js 1:11-24 없이도 그냥 process.env로 접근 가능하다. 2. REACT_APP_ 으로 env 설정하기 필자는 이부분에서 시간을 많이 낭비했다. express에서 env 설정하던 기억이 남아 REACT_APP_없이 env를 설정했는데, React에서는 자체 변수와의 충돌을 피하기 위해서 REACT_APP_이 있어야 인식이 가능하다. 아래와 같이 .e.. 2022. 4. 5. [React] React는 MVC 패턴일까 Flux 패턴일까? MVC 패턴에 대해 공부하다 문득 드는 생각이... React는 그럼 어떤 패턴이지...?? 정답은, React는 MVC가 될 수도 있고 Flux가 될 수도 있다. 다시 한번 짚고 넘어가야 할 부분은 React는 프레임워크가 아닌 라이브러리라는 점이다. 그리고 React는 오로지 View에 집중한 라이브러리다. 즉 나머지 부분을 어떻게 개발자가 만드느냐에 따라 MVC가 될 수도 있고 Flux가 될 수도 있다는 것이다. 하지만 React의 경우 Redux를 사용해 대부분 Flux 패턴을 따라 작성된다. (하지만 주의해야 할 점은 Redux는 Flux 패턴을 유사하게 따라 하는 라이브러리이지 완벽하게 Flux 패턴을 구현하지 않았다. 실제로 Redux에는 Dispatcher에 대한 개념이 없다.) Flux의.. 2022. 3. 29. [React] State vs Props 리엑트에서 데이터를 다룰 때 크게 State와 Props이라는 개념을 이용한다. 이번 포스팅에서는 이 둘이 뜻하는 바와 차이점에 대해 알아보자. State란? The state is a built-in React object that is used to contain data or information about the component. state는 컴포넌트에 대한 데이터나 정보를 담는 리엑트 내장 객체다. Props란? Props stand for "Properties." They are read-only components. It is an object which stores the value of attributes of a tag and work similar to the HTML attribu.. 2022. 3. 28. [React] Hooks 완벽정리 React Hooks 리엑트 훅이란 리엑트 16.8 버전에서 새롭게 소개된 기능이다. 훅을 이용하면 클래스를 작성할 필요 없이 리엑트의 기능들을 사용할 수 있게 된다. 훅이란 함수 컴포넌트가 리엑트 상태나 라이프사이클 기능으로 '걸려들어가는' 함수들을 말한다. 클래스 안에서는 작동하지 않는다. 훅은 backward-compatible이라서 기존의 기능을 파괴하지 않는다. 여기서 backward-compatible이란 이전의 시스템과 상호작용하는데 문제가 없는 특성을 가르킨다. 또한 기존의 리엑트 개념과도 다르지 않다. React Rules 훅은 리엑트 함수의 최상단에서 호출되어야 한다. 훅은 리엑트 함수에서만 호출 가능하다. (일반 자바스크립트의 함수로 훅을 호출하는 것은 안되나, 커스텀 훅을 이용한 호.. 2022. 3. 28. 이전 1 2 3 4 5 다음
