코드노트

현재 회사 서비스에서는 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 인스턴스를 생성하게 되..

더보기 Given an integer array nums and an integer k, return the kth largest element in the array. Note that it is the kth largest element in the sorted order, not the kth distinct element. Can you solve it without sorting? 정수 배열 수와 정수 k가 주어지면 배열에서 k번째로 큰 원소를 반환합니다. 정렬된 순서에서 k번째로 큰 원소이지 k번째로 구별되는 원소는 아닙니다. 정렬하지 않고 해결 문제 설명 - 정렬하지 않고 k번째의 높은수를 출력하면 되는 문제이다. 힙 활용 python class Solution(object): def fin..

더보기 You are given an array of logs. Each log is a space-delimited string of words, where the first word is the identifier. There are two types of logs: Letter-logs: All words (except the identifier) consist of lowercase English letters. Digit-logs: All words (except the identifier) consist of digits. Reorder these logs so that: The letter-logs come before all digit-logs. The letter-logs are sort..

더보기 A phrase is a palindrome if, after converting all uppercase letters into lowercase letters and removing all non-alphanumeric characters, it reads the same forward and backward. Alphanumeric characters include letters and numbers. Given a string s, return true if it is a palindrome, or false otherwise. 모든 대문자를 소문자로 바꾸고 영숫자가 아닌 모든 문자를 제거한 후에 앞과 뒤로 같은 글자를 읽는 경우 구는 회문입니다. 영숫자는 문자와 숫자를 포함합니다. 문자열..

RN을 공부하면서 처음부터 막혔던게 CLI환경 구축이였던것 같다. 예전 강의들을 보면서 공부를 하다보니 버전문제로 계속 에러들이 발생했다.. React-Native CLI 환경을 구축하면서 만났던 에러들과 해결방법들을 정리해보려고 한다. [React Native] Mac에서 React Native CLI 환경 구축부터 실행까지 2021.09.24 - [React-native] - [React Native] Windows에서 React native 환경 구축부터 실행까지 1. Homebrew 설치 Homebrew는 Mac용 패키지 관리자이다. 사용하면 간단하게 명령어로 필요한 패키지를 설치할 수 있다. Ho myung-ho.tistory.com 이 블로그를 참고하여 실행 순서에맞게 작성하였다. 순서 1. ..