오늘은 useState를 다룰때 미세한 차이지만 좋은 코드 작성에 도움이 되는 것들을 알아보겠습니다. 1. The Functional Updater import { useState } from "react"; const [count, setCount] = useState(0) // 🚨 다음 값을 계산할 때 현재 값에 의존하게 됩니다. setCount(count + 1)}>Increment // ✅ previousCount를 사용해서 다음 값을 계산합니다. setCount(previousCount => previousCount + 1)}>Increment 새로운 값을 setter(setCount)에 전달하지 않고 대신 함수를 전달하는 방법이 있습니다. 리액트는 우리가 함수를 호출한다면 이전 값(previo..
React로 개발을 하다보면 useState hook을 가장 많이 사용하게 됩니다. 오늘은 컴포넌트가 props를 받아와서 state(상태)를 초기화 할때 쉽게 함정에 빠지는 경우를 소개하려합니다. 먼저 오늘의 핵심 코드를 보고 시작하겠습니다. 핵심 코드 import { useState } from "react"; interface IDetailViewProps { initialColor: string; } const fruits = [ { id: 1, name: "banana", color: "yellow", }, { id: 2, name: "apple", color: "red", }, ]; const Pratice: React.FunctionComponent = () => { const [select..
전편의 Next.js 쿠키와 JWT 토큰으로 로그인 구현에서 이어집니다. Next.js 쿠키와 JWT 토큰으로 로그인 구현 Next.js로 웹 앱의 인증 기능을 구현하면서 MongoDB, Next API Routes와 Next Auth라는 Hooks로 인증 상태관리가 편리한 라이브러리를 사용했습니다. 하지만 이것만으로는 모든 상황의 인증 로직 구현을 이해 ekard.tistory.com 요즘 웹 사이트나 앱, 게임에서 로그인을 하면 대부분 구글, 애플, 카카오톡, 네이버 같은 편리한 소셜 로그인이 있습니다. 개발자들은 이런 편리한 로그인들을 OAuth 2.0으로 구현한다는 것을 얼핏 들어보신 적이 있을겁니다. 오늘은 OAuth 2.0에 대한 핵심 개념만 짚어보고 저번 글에서 구현한 Next.js 웹 앱에..
Next.js로 웹 앱의 인증 기능을 구현하면서 MongoDB, Next API Routes와 Next Auth라는 Hooks로 인증 상태관리가 편리한 라이브러리를 사용했습니다. 하지만 이것만으로는 모든 상황의 인증 로직 구현을 이해했다 보기 어려워 jwt 토큰과 쿠키를 쓰는 코드를 따로 구현해보았습니다. 쿠키를 도입한 이유는 local storage,session storage가 취약한 csrf 공격은 프론트엔드 개발자 입장에서 막기 힘들지만 xss 공격에 취약한 쿠키는 httpOnly: true 옵션과 access token, refresh token 활용으로 보안상의 이점을 더 누릴 수 있다는 의견이 커뮤니티에서 더 많아 사용하게 되었습니다. 이 글에서는 access token, refresh to..
요즘 핫한 CSS 프레임워크가 뭘까요? 라는 질문을 주시면 저는 당연히 Tailwind CSS라고 말씀드릴 것 같습니다. (2022/08/24 기준, 위에 사진에서 Tailwind CSS 그래프가 붉은색입니다) Tailwind CSS란? Tailwind CSS가 강조하는 개발 방식은 HTML에 벗어나지 않고 한 화면에서 모든 스타일을 구현하는 것입니다. ... 위는 Tailwind CSS, 아래는 styled-components를 사용할 때 쓰는 방식의 코드입니다. ... const HamMenu = styled.div` display: inline-block; position: relative; width: 32px; height: 24px; `; 흔히 styled-components를 사용하여 개발할..
#1.참조변수의 형변환 int,long,double,float 등.. 기본형 변수들은 형변환이 가능하다는 것을 배우셨을겁니다. ex) (int)d // double d = 30.0;그렇다면 클래스가 타입에 오는 참조변수도 형변환이 될까요?정답은 물론 됩니다. 하지만 서로 상속관계에 있어야만 가능하기때문에 자손타입의 참조변수를 조 상타입의 참조변수로,조상타입의 참조변수를 자손타입의 참조변수로만형변환이 가능합니다. 이 특징을 응용해보면 모든 클래스의 상속관계를 거슬러올라가면 언젠가 Object클래스가 모든 클래스의 조상이라는 것을 알 수가 있는데요. 이 Object클래스 타입으로 모든 참조변수가 형변환이 가능합니다!응용에서 벗어나서 다시 본론으로 돌아오면기본형 변수의 형변환에서 작은 자료형에서 큰 자료형의 ..
#1.다형성오늘은 다형성에 관하여 글을 써보겠습니다. 다형성은 extends로 사용하는 상속과 더불어 객체지향에서 가장 중요한 특징입니다.(다형성을 이해하기 위해서는 상속에 대한 개념이 필수적입니다!) 다형성은 여러 가지의 형태를 가질 수 있는 능력이라 하며, 한 타입의 참조변수로 여러 타입의 객체를 참조할 수 있도록 한다는 개념이라 볼 수 있습니다. 더 나아간다면 조상클래스 타입의 참조변수로 자손클래스의 인스턴스를 참조할 수있도록 한다는 것입니다.예를 들자면, 1234 pencilcase pc = new pencil(); /* class pencil이 class pencilcase를 . 상속받아서 class pencil extends pencilcase 상태이다 */cs감이 오시나요? 부모인 penci..
#1. 생성자의 접근 제어자 생성자에 접근 제어자를 사용하면서 인스턴스의 생성을 제한할 수 있습니다. 보통 생성자의 접근 제어자는 클래스의 접근제어자와 같습니다만 다르게도 지정할 수도 있습니다.생성자의 접근 제어자를 private으로 지정한다면 외부에서 생성자에 접근할수 없게 // *private은 같은 클래스에서만 접근이 가능. 되므로 인스턴스를 생성할 수 없게 됩니다. 그래도 private의 특성상 클래스 내부에서는 인스턴스의 생성이 가능합니다. ex)1234567class Singleton{ private Singleton(){ // } // ...} cs위의 이미지는 클래스 Singleton의 생성자를 private 제어자를 붙임으로써 외부의 접근을 차단하여줍니다. private으로 외부의 접근을..
