코드노트

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. 모든 대문자를 소문자로 바꾸고 영숫자가 아닌 모든 문자를 제거한 후에 앞과 뒤로 같은 글자를 읽는 경우 구는 회문입니다. 영숫자는 문자와 숫자를 포함합니다. 문자열..