개발 여행 개발 여행

Front-end

• [React] Context API + useReducer 조합 살펴보기 feat. Typescript

  Front-end/React 2021. 12. 2. 00:55

  리액트 개발을 할 때 상태관리 라이브러리를 사용하지 않으면 무수히 많은 props들과 싸우며 개발을 하게 됩니다.. 😨 그러한 문제를 해결하기 위해 많은 라이브러리(Redux, Recoil, Mobx 등)들이 등장했습니다. 그래서 이번 기회에 간단한 Todo를 구현하며 Context API와 useReducer 조합을 통해 번거로운 prop drilling 없이 상태관리를 할 수 있는 방법에 대해 알아보겠습니다. ❗️ 이 글은 개인적으로 학습한 정보와 지식으로 작성된 글입니다. 혹시 잘못된 부분이 있거나 수정사항이 있다면 말씀해주시면 반영하겠습니다. 🙏 Context API 먼저 Context API 의 개념에 대해 알아보겠습니다! 일단, 결론부터 말씀드리면 Context API는 상태관리를 하는 목적이..

• [Effective Typescript] 타입스크립트 알아보기

  Front-end/Typescript 2021. 10. 5. 02:07

  이 글은 이펙티브 타입스크립트 책을 보며 스터디한 내용입니다. 타입스크립트의 독특함 타입스크립트는 사용 방식 면에서 독특한 특징을 가집니다. 인터프리터로 실행되는 것도 아니고, 저수준 언어로 컴파일 되는 것도 아닙니다. 🤔 또 다른 고수준언어인 자바스크립트로 컴파일 되며, 실행 또한 자바스크립트로 이루어지게 됩니다. 😲 타입스크립트는 자바스크립트의 상위 호환 타입스크립트에 대해 알아볼 때 자바스크립트의 상위 호환이라는 말을 굉장히 많이 들어보셨을텐데요 이유는 다음과 같습니다. 문법의 상위집합 문법적으로 상위에 있다는 말은 자바스크립트에서 가지고 있지 않은 부분을 타입스크립트는 가지고 있기 때문입니다. // typescipt function greet(who: string) { console.log(who..

• [React] 리액트로 클립보드 복사 기능 만들어보기 (feat. Custom Hook)

  Front-end/React 2021. 8. 16. 01:29

  클립보드 클립보드는 개발자 뿐만 아니라 일반 웹 사용자들도 아주 잘 알고있는 용어일겁니다! 😲 특정 문구를 복사하고 싶은 욕구가 있을 때, 복사할 컨텐츠를 드래그 후 Ctrl + C 하는 방법도 있지만 그걸 더 편리하게 하기 위해 개발자들은 클립보드 복사 라는 버튼형태를 만들어 조금 더 유저에게 사용성이 높은 서비스를 제공하고 있습니다. 현재까지도 자주 사용되고 있고 실제로 많은 서비스에 적용이 되어있죠 예전부터 클립보드에 관련된 기능을 개발할 땐 document 객체에 있는 execCommand() 라는 함수를 통해 개발하였습니다. 하지만 현재는.. 보시는 바와 같이 Deprecated되어 현재 개발하는 기능에는 당연히 사용하지 말아야할 뿐더러 이전에 개발했던 기능들도 새롭게 대응을 해주어야 합니다. ..

• [Typescript + React] 사용자 정의 타입 가드로 컴포넌트 props 다루기

  Front-end/Typescript 2021. 7. 29. 23:23

  타입 가드(Type Guards)가 뭐예요..? 🤔 타입 가드는 단어에서 유추가 가능하듯이 타입을 방어해준다는 의미입니다. 예를 들어, 어떤 UNION 타입의 인자가 있을 때 그 타입 중 어떤 타입을 선택하여 함수를 이룰지 결정하는 부분이 됩니다. function typeGuard(type: OneType | TwoType) { // do something.. } 위와 같은 예시가 될텐데요! 여기서 타입가드를 사용하지 않는다면 두 타입이 구분이 되지 않아 원치 않는 결과가 발생할 확률이 높아집니다. 하지만 여기서 타입 가드를 사용하여 특정 타입에 대한 조건을 만족시키면 개발자가 원하는 결과를 얻도록 도와주게 되고, 이 때 가장 중요한 점은 런타임 단계가 아닌 컴파일 단계에서 일명 빨간줄로 알려주기 때문에..

• [Next] Next.js 에서 환경변수 사용해보기 (feat. Vercel)

  Front-end/Next 2021. 3. 1. 00:05

  Next.js에서의 환경 변수 프론트엔드 생태계에서 정말 많이 사용하는 React.js 라는 라이브러리가 있습니다. React.js를 통해서 한 번 개발해보셨던 개발자분들은 아시겠지만 환경 변수를 추가하기 위해서 .env 로 시작되는 파일을 만들어 선언하고, 그 파일 안에 특정 정해진 네이밍 규칙을 통해 환경 변수를 선언합니다. 그리고 그걸 사용하죠 Next.js도 크게 다르지는 않습니다. 하지만 Next.js는 서버사이드에서 동작하는 특성을 가지기 때문에 이를 고려하지 않고 아무 네이밍을 통해 환경 변수를 선언하면 전혀 반응하지 않게 됩니다. 또한 Next.js는 자체적으로 환경 변수 접근이 가능하기 때문에 dotenv 와 같은 라이브러리를 설치할 필요가 없습니다. (설치하면 아마 정상적으로 동작이 되..

• [React] CRA Typescript 환경에서 Module Alias 설정하기

  Front-end/React 2021. 1. 26. 02:06

  Module Alias React 개발을 하면서 정말 많은 모듈들, 컴포넌트들을 import, export하게 됩니다. 규모가 작은 프로젝트면 크게 번거롭지 않지만, 규모가 크거나 지속적으로 늘어나는 모듈과 컴포넌트들 때문에 정말 헷갈리고 관리하기 번거롭습니다. 그래서 특정 디렉토리의 별칭을 정해주어서 해당 디렉토리에 바로 접근할 수 있도록 해주는 방법을 통해 이 문제를 해결하기도 합니다. CRA의 말썽 위에 설명을 보고 당장 구글링을 하고 CRA로 TS환경의 프로젝트를 생성하고 세팅을 하다보면 큰 충격에 빠지게 됩니다. 바로 npm을 실행시키는 순간 기껏 세팅해놓은 tsconfig.json이 처음의 설정으로 리셋 되버립니다. 저는 처음에 제 눈을 의심했습니다. 그래서 다시 한 번 설정을 하고 npm을 ..

• [React] Context로 언제 어디서든 상태 관리 해보기

  Front-end/React 2021. 1. 1. 21:35

  상태 관리 React의 영원한 과제 상태 관리.. 이 상태관리를 위해 정말 많은 라이브러리가 탄생했습니다. 대표적으로 가장 많이 사용하는 Redux도 있고, Mobx, Recoil 등이 있습니다. 컴포넌트는 생성 될 때부터 끝날 때까지 가지고 있는 상태를 책임지게 되는데요, 즉 이말은 컴포넌트 내에서 생성된 상태는 외부에서 침범할 수 없다는 것을 의미합니다. 그렇다면 어떻게 해야 이 상태를 외부에서도 사용 및 관리를 할 수 있을까요? 첫 번째로는 상위 컴포넌트에서 상태를 관리하여 props로 내려주는 방법이 있습니다. 상위 컴포넌트에서 상태를 만들고 필요한 컴포넌트까지 prop으로 넘겨주는 것은 마치 축구 경기시 공격수가 공을 필요로 할 때 골키퍼 -> 수비수 -> 미드필더 -> 공격수까지 순서를 거치며..

• [React] styled-components로 스타일 적용해보기

  Front-end/React 2020. 11. 30. 12:52

  styled-components styled-component는 CSS in JS의 개념을 가지고 있는데요, 말 그대로 JS 안에 CSS를 넣는다는 의미입니다. 예전부터 웹에 스타일을 적용하기 위해서 일반적으로 전역에 CSS 파일을 두어 하나의 파일에서 관리하는 방식을 지속적으로 사용되어 왔고, 현재까지도 이용되고 있습니다. 하지만 이 방식의 경우 CSS 파일이 전역에 존재하기 때문에 클래스 명이 의도치 않게 겹치게 되거나, 같아야 하는 경우를 관리 하는 것이 쉽지 않았습니다. 그래서 최근에는 모듈화를 통해 각 컴포넌트 별로 묶어 Scope를 관리하는 방식도 존재합니다. styled-component는 이런 고민을 해결함과 동시에 편리함을 제공하게 되는데요, 말 그대로 스타일을 컴포넌트처럼 관리하고 사용..