욕심도 참 많아

클로저(Closure) 란 1. 함수와 그 함수가 선언된 렉시컬 환경의 조합2. 다른 곳으로 넘긴 함수 내에서 외부 변수를 사용하는 경우 , 해당 변수는 어딘가에 접근해야 하므로 js에서는 함수를 프로그램 내 어디에서 실행했는지와는 상관없이 함수를 정의할 때 결정된 스코프를 유지하는 것 이 클로저의 특징은 함수가 자신이 생성될 때의 렉시컬 환경을 "기억한다" 는 함수라는 것이다.그러므로 외부 함수가 종료된 후에도 외부 함수의 변수에 접근 할 수 있다. 주로 비동기 처리 , 데이터 캡슐화 , 고차 함수 콜백등의 상황에서 사용된다. function createGreeting(greeting) { return function(name) { console.log(greeti..

스코프(Scope) 란변수나 함수같은 식별자가 유효한 범위를 의미한다.크게 Global Scope / Local Scope로 분류된다.JS엔진 입장에서 오류가 발생하는걸 알수 잇는 방법은 오류가 발생한 문이 실행 되기전 에 프로그램 내 스코프와 변수 관계 전부를 사전 파악하는 것이다.프로그램이 컴파일 되는 이 시점에 스코프는 결정이 된다. (== 런타임 환경에는 영향을 받지 않는다.)이렇게 컴파일 타임에 결정되는 스코프를 렉시컬 스코프라고 한다.컴파일 도중에 프로그램 실행에 필요한 모든 렉시컬 스코프가 들어간 지도가 만들어지고, 실제 각 스코프를 실행해야만 하는 런타임 전까지 스코프가 생성되지 않는다(렉시컬 : 컴파일 단계 중 첫 단계인 렉싱(파싱) 을 의미) 사실 프로그램이 실행 되는 동안 js ..

Babel은 JS 트랜스파일러 입니다. 트랜스 파일러 : 특정 언어로 작성된 코드를 비슷한 다른 언어로 변환해주는 얘 Babel은 주로 최신 JS (ES6 이상)을 구형 브라우저에서도 동작할 수 있도록 ES5 같은 이전 버전의 JS로 변환하는 데 사용됩니다. 또한, React의 JSX같은 문법도 JS로 변환해 줍니다. const add = (a, b) => a + b; ES6 에서 도입된 화살표 함수 이기에 Babel을 사용하면 var add = function(a, b) { return a + b; }; 이렇게 변환 된다. const element = Hello, world!; 같은 JSX는 const element = React.createElement('h1', null, 'Hello, world!..

Javascript => 객체 지향 프로그래밍 언어 클래스가 없어서 객체지향이 아니라고 생각하는 사람들도 있으나 프로토타입 기반의 객체지향 언어다. 객체의 특징 - 다양한 타입의 값을 하나의 단위로 구성 - 변경 가능 - 0개 이상의 프로퍼티로 구성 / 프로퍼티는 key : value 로 구성 - function도 프로퍼티의 값으로 설정 가능 : 이때 일반 함수와 구분하기 위해 method 라 칭한다. (프로퍼티 : 객체의 상태를 나타내는 값) 자바스크립트는 클래스 개념이 없고 별도의 객체 생성 방법이 존재한다. => ES6 부터는 클래스도 지원한다! 객체 리터럴 object 생성자 함수 생성자 함수 Object.create 메서드 클래스(ES6) 여기서 객체 리터럴 이란? 객체를 표현할 때 , 중괄호 ..

저번 글에 이어서, 오늘은 react-hook-form을 사용할때 놓칠수 있는 점들과, 여러가지 팁에 대해서 다뤄보겠습니다. watch / useWatch 1. watch watch는 useForm 훅에서 반환되는 함수 중 하나로, 지정된 폼 필드의 현재 값을 반환하여 줍니다. 폼 필드의 값 변화를 실시간으로 관찰 할 수 있으며, 특정 필드 또는 전체 폼의 값을 얻을 수 있습니다. => 주로 폼 컴포넌트 내에서 사용되며, 해당 컴포넌트의 리렌더링 범위에 영향을 줍니다. 즉, watch를 사용하는 컴포넌트는 관찰하는 필드 값이 변경 될 때마다 리렌더링 됩니다. 2. useWatch useWatch는 리훅폼에서 제공하는 별도의 훅으로, watch와 유사하게 폼 필드의 값 변화를 관찰합니다. 하지만 useWa..

근 1년만에 기술 블로그 업로드 입니다!.! 오늘은 사용자로부터 데이터를 수집하는데에 큰 도움을 주는 라이브러리인 react-hook-form 에 대한 글을 작성해 보았습니다. react-hook-form(이하 리훅폼이라 칭하겠습니다!)이 없다면, 저희는 간단한 회원가입을 구현함에 있어서도 하나하나 state를 선언하고, state를 validate하기위한 함수들, 에러를 위한 state등 너무 많은 기능들을 직접 구현해야 합니다. 또한, 귀찮은 것과 별개로 모든 값이 state로 연결되어 있기에 하나의 값이 변할때 마다 여러 자식 컴포넌트 들에서 리렌더링이 계속해서 발생하게 됩니다. 리훅폼을 공식 docs에 나와있는 여러개의 단어-문장으로 표현하자면 DX 폼을 구축할 때 개발자들에게 완벽한 경험을 제공..

https://school.programmers.co.kr/learn/courses/30/lessons/161989 from collections import deque def solution(n, m , section): answer = 0 sectionDeque = deque(section) while sectionDeque: start = sectionDeque.popleft() while sectionDeque and start + m > sectionDeque[0]: sectionDeque.popleft() answer += 1 return answer

env 파일이란?? db 관련 데이터 , api key등 외부에 노출되면 안되는 값들을 관리하기 위하여 관련 변수들을 저장해두는 파일이다. 이때 dotenv패키지가 필요하다. 프로젝트의 최상위 루트에 파일을 만들게 된다. CRA (Create React App) 에서의 환경 변수 사용법 cra 에서는 내부적으로 dotenv를 지원해 줌으로써, node js 환경처럼 설치를 따로 안해줘도 된다. 사용 방식은 프로젝트 루트 디렉토리에서 .env 파일을 생성. .env 파일에 변수를 추가해준다. 예를 들어, REACT_APP_API_KEY=abcdefg와 같이 작성한다. 변수 이름은 REACT_APP_으로 시작해야 합니다.(필수!!!!!!) 프로젝트에서 변수를 사용할 파일에서 process.env.REACT_..

Vite란?? Vite는 프론트엔드 프레인워크로, ES 모듈을 기반으로한 개발서버와 빌드 도구를 제공한다. 경량화된 개발 도구로, CRA 같이 React 프로젝트를 생성하고 구성하는데 사용된다. (기존 webpack, rollup, parcel 과 같은 bundler 이다) 기존의 Webpack Webpack은 모든 모듈을 번들링하여 하나의 파일로 만들고, 이 파일을 로딩할때까지 브라우저에서 지연시간이 발생한다. 반면 vite는 es 모듈 시스템을 통하여 필요모듈만 빌드하고, 빌드된 모듈은 브라우저에 바로 로딩된다. Why Use Vite?? CRA대신 Vite를 쓰는 이유는 다음과 같다. 빠른 빌드 시간: Vite는 빠른 빌드 시간을 제공합니다. 이는 Vite가 빠르게 재구성되는 ESM(ES Modul..

import axios from "axios"; const api = axios.create({ baseURL: "어쩌구저쩌구백엔드url", timeout: 3000, headers: { "Content-Type": "application/json", }, }); export default api; 기존 코드이다. Axios 로 baseURL을 이용해서 그냥 요청을 보내면 network 탭에서 그대로 URL이 노출 되기 때문에 rewrite 기능을 사용하였다!! /** @type {import('next').NextConfig} */ const nextConfig = { async rewrites() { return [ { source: "/api", destination: "어쩌구저쩌구백엔드url", ..