스코프(Scope)란?MDN에서 정의하는 스코프스코프는 컨텍스트 내에서 값과 표현식이 "표현"되거나 참조 될 수 있는 현재 실행 컨텍스트(Execute Context)를 의미한다.만약 변수 또는 표현식이 "해당 스코프"내에 없으면 사용할 수 없다. 스코프는 또한 계층적인 구조를 가지며, 하위 스코프는 상위 스코프에 접근할 수 있지만 그 반대는 불가하다. 🌿 스코프의 기본 개념- 변수나 함수의 접근 가능한 범위를 의미한다.- 코드의 구조를 이해하는 데 중요한 역할을 하며, 변수의 생명 주기와 유효성을 결정한다.- 모든 변수와 함수는 선언 위치에 의해 스코프를 갖게 된다.// 전역 스코프let globalVar = "I'm global!";function outerFunction() { // 지역 ..

이전에 Git 블로그를 Netlify로 배포한 경험이 있다. Netlify는 Git 계정과 레포지토리를 간단하게 연결하면 자동으로 배포가 진행되는 방식이어서 매우 쉽게 설정할 수 있었다. 이번에는 Next.js 프로젝트를 진행하니 Vercel을 사용해 배포해 보고자 한다.Vercel은 Next.js의 공식 호스팅 플랫폼으로, Next.js 배포에 최적화된 성능을 제공한다. 또한 SSR(서버 사이드 렌더링)과 SSG(정적 사이트 생성)를 원활하게 지원한다. Vercel 배포 순서🌿 Import Git Repository회원가입 및 로그인 후 GitHub 계정과 연동하면 배포할 레파지토리를 선택할 수 있다.🌿 Confiture ProjectBuild Command를 설정할 수 있는데 기본값으로 그대로 사..

지금까지 리액트 프로젝트는 2번 정도 진행 했었는데 상태 관리 라이브러리를 적용해 본 경험이 없어서이번 프로젝트에서는 zustand를 활용하여 상태관리를 해보고자 한다. Zustand란?React 상태 관리 라이브러리hook를 기반으로 한 간결하고 직관적인 API를 제공하며, 전역 상태 관리를 간단하게 구현할 수 있게 해준다.Persist와 같이 사용하기Zustand의 미들웨어 중 하나로, 상태를 브라우저의 저장소에 저장할 수 있게 해준다. 이를 통해 페이지를 새로고침하거나 브라우저를 닫고 다시 열어도 상태가 유지되도록 할 수 있다. Zustand 설치npm install zustand src/store/authStore.ts 파일 생성zustand import인터페이스 정의 : 스토어의 상태와 액션 타..

자바스크립트 복습을 하던 중 클로저가 아직 헷갈려 다시 공부하며 정리해 보고자 한다.클로저를 공부하기 전 스코프에 대한 개념 정리 및 이해가 필요하다. 클로저(Closure)란?JS에서 중요한 개념이지만, JS 고유의 개념이 아닌 함수형 프로그래밍 언어에서도 사용되는 특성이다.MDN에서 정의하는 클로저 클로저란 함수와 함수가 선언된 어휘적 환경 (lexical environment)의 조합이다.즉, 클로저는 내부 함수에서 외부 함수의 범위에 대한 접근을 제공. JavaScript에서 클로저는 함수가 생성될 때마다 생성 🌿 클로저의 기본 개념- 함수와 그 함수가 선언된 렉시컬 환경의 조합으로, 내부 함수가 외부 함수의 변수에 접근할 수 있게 해 준다.- 함수가 자신의 외부 스코프에 있는 변수에 접근할 수..

사이드 프로젝트를 시작해 보려고 우선 Git에 레포지토리 및 프로젝트를 생성했습니다.이 프로젝트의 목적은 Next.js와 TypeScript를 공부하는 것입니다. React도 아직 기초에 불과하지만, 개발을 하면서 하나씩 알아가려 합니다.사이드 프로젝트 GitNext.js 프로젝트 생성npx create-next-app@latest [프로젝트명]cd [프로젝트명]npm run dev 우선 프로젝트가 실행되는 것을 확인했습니다.Next.js의 특징서버 사이드 렌더링(SSR) : 페이지 요청 시 서버에서 렌더링하여 사용자에게HTML 전달. SEO에 유리하고, 초기 로딩 속도가 빨라진다는 장점이 있다.파일 기반 라우팅 : pages 디렉토리 안에 파일을 생성함으로써 자동으로 라우팅을 설정할 수 있다. 각 파일..

호이스팅(Hoisting) 이란?변수와 함수 선언이 코드의 상단으로 끌어올려진 것처럼 동작하는 JS 고유의 특징이는 자바스크립트 엔진이 코드를 실행하기 전에 변수와 함수 선언을 메모리에 미리 저장하는 방식 때문에 발생한다.호이스팅 대상변수 선언(변수 호이스팅)과 함수 선언문(함수 호이스팅)🌿 변수 호이스팅변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 JS 고유의 특징console.log(name); // undefinedvar name = 'hjlee';console.log(name); // hjleevar로 선언된 변수는 선언만 호이스팅되고, 초기화는 호이스팅되지 않아 처음 호출 시 undefined 출력let과 const로 선언된 변수는 호이스팅되지만, TDZ에 영향을 받아 초기화되기 ..

퇴사 후에 이것저것 계획을 세우긴 했지만, 너무 우당탕이어서 일단 프론트엔드 복습부터 해보자항상 프로젝트를 진행하면서 필요한 기능만 검색해서 적용했더니 프론트엔드 이론을 제대로 공부해본 적이 없었다. 그래서 유튜브를 통해 한 번 훑어보고 시작하기로 결정했다.JAVASCRIPT코딩앙마 - 자바스크립트 중급 강좌 : 140분 완성기초지만 잘 안쓰는 것들은 다시 봐도 새로워서 반복이 중요하다는 걸 다시 느꼈다.오늘 일단 중급 강좌 하나만 들어서 차차 복습하는 내용들을 이어서 적을 예정이다. 모던 자바스크립트 Deep Dive마침 책도 있고 유튜브에 스터디 강의가 있길래 1.5배속으로 수강하고 복습해야지 모던 자바스크립트 Deep Dive를 틈틈이 읽으며 사이드 프로젝트를 진행하는 중인데역시나 React에 대한..

계정만 만들어 두었던 티스토리 블로그를 활성 해 보았다.https://hwajin-blog.netlify.app/원래는 netlify에 올려둔 git 블로그를 그대로 사용하려고 했는데이것도 다른 분이 만드신 스킨을 사용한 거라 일단 사용 안 하고 그냥 두는 걸로 결정했다.https://velog.io/@lhjin그리고 이건 원래 기술 블로그가 될 예정으로 최근에 작성하고 있던 벨로그인데..무슨 이유에서인지 구글에서 전혀 검색이 되지 않아 결국 이렇게 티스토리로 이사를 오게 되었다. 아직 어떤걸 포스팅할지 정하지는 않았지만 우선 벨로그에 적던것들을 다 옮기고 다시 생각해 봐야겠다.