개발 여행 개발 여행

분류 전체보기

• [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..

• [Algorithm] 세 수의 최소값

  Algorithm 2021. 8. 19. 01:19

  코드 function solution(a, b, c) { let answer; if (a < b) { answer = a; } else { answer = b; } if (c < answer) { answer = c; } return answer; } console.log(solution(9, 1, 5)); // 1 풀이 정렬을 사용하지 않는 방법으로 풀이 1. 3개의 수를 모두 검사할 방법을 생각 2. 먼저 2개를 비교한 다음 결과 값을 마지막 하나와 비교

• [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을 ..

• [GraphQL] Apollo-Server를 이용하여 프로젝트 시작해보기

  Back-end/GraphQL 2021. 1. 24. 03:47

  GraphQL GraphQL(GQL)은 갓 페이스북에서 만들어낸 쿼리 언어(Query Language) 입니다. 백엔드 개발을 알고 계시다면 SQL(Structed Query Language)에 대해서도 알고 계실텐데요, 왠지 단어도 비슷하고 해서 두 언어가 동일하다고 느낄 수 있지만 전혀 그렇지 않습니다. 먼저 기존에 주로 사용하던 SQL의 경우에는 DB에 존재하는 데이터를 효율적으로 가져오는 것에 중점을 두었고 GQL의 경우에는 클라이언트에서 데이터를 서버로부터 효율적으로 가져오는 것이 목적입니다. 그래서 이전에는 주로 백엔드에서 쿼리를 작성해서 클라이언트로 데이터를 전달해주는 역할을 했다면, GQL을 사용하게 되면 클라이언트에서 직접 필요로 하는 데이터를 호출하고, 사용하게 됩니다. 즉, 프론트의 ..