front (11) 썸네일형 리스트형 React 19 톺아보기 - use 스터디의 두 번째 주제로 정한 hook은 use였다.이번 주는 갓생 살기로 다짐해서 나름 열심히 공부해 봤다. 1. Useconst value = use(resource); Promise나 Context와 같은 데이터를 참조하는 hook. 다른 React hook과 달리 use는 조건문과 반복문 내부에서 호출이 가능하다.다만, 컴포넌트 또는 훅 안에서만 호출해야 한다. resource : 참조 데이터. Promise나 Context일 수 있다.Promise나 Context에서 참조한 값을 반환한다. 1) Context 참조import { createContext, useState } from "react";import ThemeDisplay from "../components/ThemeDisplay".. React 19 톺아보기 - useTrasition 항해 플러스 부트캠프가 완료되고, 항해 사람들끼리 비대면 스터디를 진행하기로 했다.주제는 React19 톺아보기로 한 달 동안 진행하기로 했다! 신규 메서드 혹은 hook을 살펴보고,실무에 도입할만한 메서드가 있는지, 기존 코드를 어떻게 효율적으로 개선할 수 있을지 고민하는 것이 목표이다. 첫 주자차에는 hook을 살펴보며 어떤 변화가 있었는지 이야기하는 시간을 가졌다.대체로 "굳이 왜 사용해야 하는지 모르겠다"는 의견이 강했다.그래서 그 중 메서드들을 몇 개 꼽아서 실제로 구현해 보기로 했다.사용해 보면 다를 수도 있으니까! 처음 선택한 메서드는 useTransition이다. 1. UseTransitionconst [isPending, startTransition] = useTransition() u.. [React] React Hooks 항해 플러스 과제를 진행하기 전 React Hooks에 대해서 미리 공부하려 한다.이미 알고 있었고 많이 사용해 본 것들이지만, 공부하면서 새롭게 알게 된 사실들도 있어서 포스팅까지 하게 되었다. 특히 아무 생각 없이 사용했던 방식들을 "왜" 이렇게 써야만 하는지 알 수 있었다! 1. React HooksReact 16.8에 도입된 기능으로, 함수형 컴포넌트에서 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있게 해주는 함수들을 말한다.Hooks을 사용하면 클래스 컴포넌트를 작성하지 않고도 React의 다양한 기능을 활용할 수 있다. 1) 등장배경React Hooks는 클래스 컴포넌트에서 발생하던 여러 문제를 해결하기 위해 등장했다. 컴포넌트 간 상태 로직 재사용의 어려움복잡한 컴.. [Javascript] 자바스크립트 디자인 패턴 항해 플러스 과제를 실행하는데 디자인 패턴이 나왔다. 들어만 봤지 실제로 해본 적은 없어서 헷갈리기도 했다.그래서 디자인패턴은 무엇인지, 왜 사용하는지 이번 기회에 한 번 정리해보려 한다. 1. Desing Pattern(디자인 패턴)디자인 패턴은 소프트웨어 개발 과정에서 자주 발생하는 문제들을 해결하기 위한 일반적이고 재사용 가능한 해결책을 말한다. 자바스크립트에서 주로 사용하는 디자인 패턴에는 Module Pattern(모듈 패턴), Observer Pattern(옵저버 패턴), Factory Pattern(팩토리 패턴), Singleton Pattern(싱글톤 패턴), Facade Pattern(퍼사드 패턴), Proxy Pattern(프록시 패턴) 등이 있다. 해당 포스팅에서는 모듈 패턴, .. [React] VirtualDOM 1. VirtualDOM이 생겨난 배경웹 개발에서 DOM(Document Object Model)은 HTML 문서를 개체로 표현한 구조를 말한다.전통적인 방식으로는 웹 페이지 내용이 변경될 때마다 실제 DOM에 접근해 직접적으로 업데이트를 진행한다.하지만, 이 과정에서 DOM 조작은 성능상의 부담을 줄 수 있다. 이러한 문제를 해결하기 위해 나온 것이 Virtual DOM(가상돔)이다. 1) 렌더링 과정에서의 성능 저하이는 브라우저 렌더링 과정을 알면 이해하기가 편하다.브라우저 렌더링은 DOM 트리 생성 > CSSOM 생성 > 렌더 트리 생성 > 레이아웃 > 페인트 과정을 거치게 된다.DOM을 조작하게 되면, 위의 렌더링 과정이 다시 시작될 수 있다. 즉, 해당 돔의 속성을 다시 그려야 할 수 있는 .. [자바스크립트] 실행 컨텍스트, 스코프와 클로저, 호이스팅, this 항해 플러스 과제를 진행하기 전 알아야하는 필수 지식을 미리 공부하려고 한다.이번 주제는 Exeution Context(실행 컨텍스트)이다.취준 시절 공부했던 내용이지만 3년이 지나면서 다 까먹어버려서 다시 공부한다ㅠ 1. Exeution Context(실행 컨텍스트) 란?실행 컨텍스트는 함수를 호출했을 때 실행될 수 있는 환경과 그 결과를 저장하는 영역을 말한다. 실행컨텍스트는 실행 가능한 코드를 만났을 때 생성되며, 실행 가능한 코드에는 함수코드, 글로벌 코드, eval 코드가 해당된다. 실행컨텍스트에는 위와 같이 구성되어 있는데 여기서 중요한 것은"Lexical Environment(렉시컬 환경)", "Declaration Binding Instantiation(This 바인딩)" 이다. 렉시.. [Next.js] next-themes로 Nextjs에서 간단히 다크모드 구현하기 (feat. tailwind) 1. next-themesnext-themes는 next.js에서 쉽게 다크 모드 및 기타 테마를 구현할 수 있도록 도와주는 라이브러리이다.해당 라이브러리를 사용하면 정말 간단하게 다크 모드를 구현할 수 있다. 아래 사용방법은 nextjs + tailwind에서 다크모드를 구현하는 방법이다. 2. 사용방법1) 설치npm install next-themesyarn add next-themes npm을 통해 next-themes를 설치해 준다. 2) tailwind css와 연동// tailwind.config.jsmodule.exports = { darkMode: 'class', // 다크 모드를 클래스 기반으로 설정 content: [ './app/**/*.{js,ts,jsx,tsx}',.. [Next.js] Next-auth 사용방법 & 구글 연결하기 1. Next-auth란? Next-auth는 Next.js에서 주로 사용하는 오픈 소스 인증 라이브러리이다. 소셜 로그인을 간단하게 구현할 수 있도록 도와주는 역할을 한다고 생각하면 된다. google, kakao, facebook, instagram, naver 등 다양한 소셜 로그인을 지원한다. 2. 사용방법(구글 로그인 연결) next-auth를 통해 구글 로그인 연결하는 방법을 알아보자. 1) 구글 key 발급 우선, 구글 로그인을 연결하기 위해선 OAuth ID와 비밀번호가 필요하다. 우선, 구글 API로 들어간 후, Oauth 동의 화면으로 들어간다. 위 사진을 클릭하면 해당 페이지로 이동된다. 그 후, 앱 이름, 지원 메일을 적고 저장 버튼을 클릭한다. 총 4페이지가 나오는데 * 표시되어 .. 이전 1 2 다음
