코드노트

리액트에서 utils, 컴포넌트, 페이지 들을 작업하면서 모듈로 작업을 했을때 ../../../ 경로를 절대경로로 하는 방법을 알아보자. 먼저 바벨 플러그인을 설치 babel-plugin-module-resolver Module resolver plugin for Babel. Latest version: 5.0.2, last published: 2 days ago. Start using babel-plugin-module-resolver in your project by running `npm i babel-plugin-module-resolver`. There are 1423 other projects in the npm registry using babel-plu www.npmjs.com npm i ..

리액트를 하면서 useRef를 사용하며, 여러개의 Ref를 사용하게 된다면 어떻게 해야할까? 리액트 네이티브를 공부하면서 input을 컴포넌트로 관리하다가 Ref를 사용하여 다음 input으로 넘겨야했다. 하나의 refRef input컴포넌트 내에서 관리중이였고, 외부에서 컴포넌트에 Ref를 또 넘겨주어야했다. Ref를 2개를 사용할 수는? 있다. ForwardedRef를 사용하자. 더군다나 타입스크립트로 작업중이라면 머리가 더 복잡해질 수 있지만 이번에 컴포넌트를 만들면서 어느정도의 개념이 잡힌것 같다. mergeRefs 함수 function mergeRefs(...refs: ForwardedRef[]) { return (node: T) => { refs.forEach(ref => { if (ref &..

현제 사이드프로젝트로 간단한 앱을 만들면서 TextInput으로 회원가입, 로그인을 구현하였다. 기능들이 기존 html input태그와 많이 달랐고 사용할 수 있는 속성들도 많았던거 같다. pwa도 진행을 해봤지만 역시 일반적으로 리액트로 진행하는것보다 네이티브가 좋은것 같다... 리액트 네이티브를 하면서 느낀거지면 모바일에 최적화되어있는것도 있지만 기본적으로 제공하는 속성들만 잘 활용하더라도 간단한 앱에서 사용하는것들은 구현하기가 쉬울것 같은 느낌..! onChangeText: 텍스트가 변경될 때마다 호출되는 함수를 설정 placeholder: 입력 필드에 표시되는 텍스트를 설정 placeholderTextColor: placeholder 텍스트의 색상을 설정 editable: 사용자가 텍스트를 입력..

리액트 네이티브를 공부하고 있는데 svg를 import하여 사용할 수 있게 설정을 하면서 문제가 생겼다. png를 사용하는 경로들을 못찾는 문제.. 다들 리액트 네이티브 svg를 구글에 검색하고 react-native-svg / react-native-svg-transformer 라이브러리를 사용할 것 같다. 나도 그랬고.. GitHub - software-mansion/react-native-svg: SVG library for React Native, React Native Web, and plain React web projects. SVG library for React Native, React Native Web, and plain React web projects. - software-mans..

현재 회사 서비스에서는 CORE 및 UI관련 api 로직 영역을 Npm패키지로 분리하기로 했다. 기존 솔루션에 있어서 내부 회사 코드들이 전부 있다보니 외부 개발자들이나 기타 등등... 문제가 될 수 있어서 인거 같다. 그렇기에 우선 Npm패키지로 등록을 하려했다. Npm 패키지는 간단하게 배포한 경험이 있었다보니 약간의 테스트를 거치고 실행을 하기로 했다. Npm 패키지 등록 방법 NPM 로그인 npm | Home Bring the best of open source to you, your team, and your company Relied upon by more than 17 million developers worldwide, npm is committed to making JavaScript d..

현재 사이드 프로젝트를 진행하면서 SWR을 사용해보자는 생각으로 시작했다. 그렇게 리액트쿼리랑 조금씩 멀어지면서 느낀건 리액트쿼리 만한 라이브러리가 없다는 것... 프로젝트가 끝나가면서 팀원들과 디자인을 새로 변경해보자는 의견이 나왔고.. 새로 디자인 작업을 하면서 지금까지 만든 로직들을 전부 변경해야하는 일이 발생했다. 그렇게 api도 조금씩 수정해나가야했는데 그냥 리액트쿼리로 변경할까요? 라는 의견에 다른 프론트엔드 팀원도 좋다고하여 리액트쿼리로 다시 변경했다. 그렇게 리액트쿼리 공식문서를 모두 읽었다. 내가 모르는것들이 많았다... 이번에 리액트쿼리 v5를 사용하면서 기존에 있었던 것들과 추가된 것들에 있어서 더 편하게 사용할 수 있는 기능들을 정리해보려고 한다. 그리고 알고 넘어가야 하는것들도 같..

프론트엔드를 개발하면서 시간이 드는것들 중 하나가 color, size 값들을 정리하고 디자인 시스템을 구축하는것이라고 생각이 든다. 처음에는 어떻게 보면 color값도 해당 값들마다 지정하기도하지만 시간이 지나서 유지보수 및 디자인, 기획...등이 변경되다보면 수정할때 막막했던 기억이 참 많은것 같다... 스토리북을 통해서 디자인시스템을 컴포넌트단위로 나누어서 작업은 해보면서도 느꼈었는데 편하면서도 재밋게 작업을 할 수 있었다. 이제는 피그마를 통해서 color값부터 한번에 github로 연결하는 방법을 정리해보려고 한다. github에서 우선 토큰을 발급받아야한다. github 토큰 발급 방법 우측 상단 개인 프로필 -> Settings -> Developer settings ->Token(class..

vue를 공부하면서 show, if에 대해서 차이점이 궁금했다. 이름대로 show는 스타일을 통해서 보여지는 부분이 가려진다고 보면 될것 같다. v-if vs v-show - v-if, v-show 는 모두 조건부 렌더링을 처리하는데 사용 v-if - 조건이 참일 때 해당 요소를 렌더링하고, 조건이 거짓이면 요소를 DOM에서 완전히 제거 - v-if는 조건에 따라 요소가 생성되거나 제거된다. - 표시 여부가 자주 변경되면 성능상에 부담이 있을 수 있다. 그러나 DOM에서 완전히 사라지기 때문에 메모리 사용량은 감소한다. - 렌더링 횟수가 많이 변경되는 경우 사용하기 적합 v-show - 조건에 따라 css의 display 속성을 조작하ㅕ 요소를 보이거나 숨긴다. - 요소는 항상 DOM에 존재하며, 단순히..

Next.js 13 OAuth(소셜 로그인) 사용방법 정리, feat.Google/Kakao / Naver 이번 개인프로젝트에서 OAuth 소셜 로그인을 등록하면서 구글, 카카오, 네이버를 모두 연결하였는데 Next.js 에서 사용할 수 있는 방법을 정리해 놓으려고 한다. Next.js 13 버전을 사용하고 있기 때문 codeno-te.tistory.com 이전 포스팅에서 소셜로그인 관련해서 next.js에서 Oauth를 NextAuth를 통해서 구현하는 방법을 정리했었다. 이번 포스팅은 인가코드를 통해서 백엔드로 토큰을 보내고 로그인을 구현하는 방법을 정리하려고 한다. 서버와 함께 인가코드를 사용해서 로그인을 구현하게 되면 단계는 이렇다. 1. SNS(구글, 네이버, 카카오 .. ) 등을 통해 cli..

Vue.js 2, Vue.js 3에서 인스턴스를 생성하기 위한 방법이 다르게 되어있다. Vue에서 인스턴스란? - Vue 인스턴스는 기본적으로 Vue 함수로 생성된 객체를 의미한다. - 이 객체는 Vue.js의 주요기능을 담고 있으며, 웹 애플리케이션을 개발하는데 필요한 메서드와 속성들을 제공하고 있다. * 여기서 리액트와 다른점을 볼 수 있었다. 리액트는 어떻게 보면 컴포넌트를 통해서 인스턴스를 생성하고 초기 상태를 지정하게 된다. 뷰는 Vue.js 2에서는 new Vue, Vue.js 3에서는 createApp()을 통해서 인스턴스를 생성하게 된다. - 애플리케이션의 시작점이며 data, computed, methods, lifeCycle ... 등을 포함하게 된다. - Vue 인스턴스를 생성하게 되..