front (9) 썸네일형 리스트형 [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페이지가 나오는데 * 표시되어 .. Headless CMS란? (feat. Sanity) 1. CMS란? CMS는 Content Management System의 약자로, 콘텐츠를 관리하는 시스템을 의미한다. 콘텐츠 관리와 프론트엔드 디스플레이를 결합한 통합 시스템이라 생각하면 된다. 사용자가 콘텐츠를 생성, 편집 및 관리할 수 있는 관리자 인터페이스를 제공하고 이를 데이터 베이스에 저장하는 역할을 한다. 관리자용 인터페이스가 제공되기 때문에 개발자가 아니어도 쉽게 콘텐츠를 관리할 수 있다. 단, 컨텐츠와 프론트엔드 화면이 연결되어 잇기 때문에 콘텐츠를 수정했을 때, 화면에 영향이 갈 수도 있다. 2. HeadlessCMS란? HeadlessCMS는 일반적인 CMS와 달리 콘텐츠 관리와 프론트엔드 디스플레이를 분리한 것을 말한다. 콘텐츠 관리는 특정한 백엔드 시스템에서 이루어지고, 해당 콘텐.. [Javascript] 배열 추가, 삭제, 수정 메서드 splice 코딩테스트를 준비하다 보니 메서드에 대해서 제대로 알고 있지 못하다는 생각이 들었다. 해당 메서드가 기존 배열을 수정하는지 안 하는지, 어떤 것을 리턴하는지 등을 정확하게 알고 있어야 코드를 클린 하게 짤 수 있을 거 같다. 따라서 앞으로 코테 문제에 사용했던 메서드들을 정리하려 한다. 첫 스타트는 splice! 1. splice array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) splice는 배열의 기존 요소를 삭제 또는 교체 하거나 새 요소를 추가해서 배열의 내용을 변경하는 메서드이다. splice를 통해 배열을 수정하면, 기존 배열도 같이 변경된다. 1) start 배열 변경의 시작 인덱스를 입력한다. 입력된 인덱스부터 배열이 변경된다. 음수.. 이전 1 2 다음
