useEffect와 useLayoutEffect는 둘 다 React에서 사이드 이펙트(Side Effect)를 처리하기 위한 Hook이지만, 그 동작 시점과 목적이 조금 다르다. 이때 사이드 이펙트(Side Effect)란 리액트 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 말한다. 대표적인 예시로, 어떤 데이터를 가져오기 위해 외부 API를 호출하는 경우, 화면에 렌더링할 수 있는 것은 먼저 렌더링하고 실제 데이터는 비동기로 가져오는 것이 권장된다. 요청 즉시 먼저 렌더링을 하면서 API 응답이 늦어지거나 없을 경우에도 영향을 최소화할 수 있다. useEffect와 useLayoutEffect 두 Hook의 차이점을 이해하기 위해서는 렌더링 과정에서 언제 실행되는지와 그..
React를 사용해 프로젝트를 진행하다 보면, 사용자의 입력을 받아 UI에 반영하는 작업이 필수적이다. 특히 폼(form) 요소와 같이 input 필드의 값을 어떻게 관리할지에 대한 고민을 자주 하게 된다. 이때 주로 사용하는 두 가지 Hook이 바로 useState와 useRef이다. 두 Hook은 상태를 관리하는 방식과 리렌더링에 대한 차이점이 있기 때문에 상황에 따라 적절히 선택해야 한다.리액트를 처음 시작하는 사람들은 useState로 모든 값을 관리하려는 경향이 있지만, 경우에 따라서는 useRef가 더 적합한 선택일 수 있다. 이번 포스팅에서는 useState와 useRef의 차이점과 각 훅을 언제 사용하는 것이 더 효율적인지에 대해 알아보고, 특정 상황에서 어떤 기준으로 선택할지에 대해 다뤄..
자바스크립트에서의 this는 일반 함수 표현식과 화살표 함수 표현식에서 다르게 동작한다.일반 함수 표현식 : 동적 바인딩 - 함수 호출 방식에 따라 this가 달라짐화살표 함수 표현식 : 정적 바인딩 - 화살표 함수가 정의된 상위 컨텍스트를 따름this는 위와 같이 일반 함수 표현식 / 화살표 함수 표현식에서 다르게 동작하지만, 일반 함수 표현식에서의 this는 함수가 어떻게 호출되는지에 따라 또 달라진다. 일반 함수가 함수로 사용되었는지, 메서드로 사용되었는지에 따라 다르게 동작한다. 01. 일반 함수 표현식에서 this일반 함수에서의 this는 동적 바인딩을 따른다.즉, 함수가 어떻게 호출되었는지에 따라 this가 결정된다. #1. 함수 내에서 호출하는 this기본적으로 함수가 독립적으로 호출되면,..
01. Callback콜백 함수는 함수의 실행 권한을 다른 함수에 넘기는 것을 의미한다.비동기 함수와 콜백은 별개의 개념이지만, 비동기 작업이 완료된 후 실행되어야 하는 로직을 처리할 때 자주 사용된다.예를 들어, 서버에 데이터를 요청하는 등의 상황에서 작업이 완료된 후 특정 동작을 해야 할 때 사용된다.콜백 함수의 역할은 작업이 완료된 후 어떤 작업을 해야 할 지 정의하는 것이며, 이를 통해 자바스크립트는 효율적인 비동기 처리를 할 수 있다.function callback(param1, param2) { console.log(param1 + " and " + param2);}function caller(callback) { setTimeout(() => { callback("hello", "g..
자바스크립트에서 모듈 시스템은 코드의 재사용성을 높이고, 의존성 관리, 성능 최적화를 위해 필수적인 개념이다. 과거에는 HTML에 defer 속성은 스크립트를 비동기적으로 로드하지만, HTML 파싱이 끝난 후 실행한다.스크립트는 HTML 파싱과 동시에 다운로드되지만, 파싱이 끝난 후에 실행되는 것이다.HTML 문서가 전부 파싱된 후 DOM 트리가 완성된 상태에서 스크립트가 실행되므로 DOM에 안전하게 접근할 수 있다.장점 : HTML 파싱과 스크립트 로드가 병렬로 진행되어 로딩 속도가 향상. DOM 트리가 완성된 상태에서 스크립트가 실행되므로 안정적단점 : 모든 스크립트가 파싱 순서대로 실행 ◼︎ async 속성은 스크립트를 비동기적으로 로드하고, 로드가 완료되는 즉시 실행한다.HTML 파싱을 중단하지 ..
01. 객체 = 필드 + 메서드 (프로퍼티의 집합)let person = { name: "guswjd", // 필드 (프로퍼티) age: 25, // 필드 (프로퍼티) // 메서드 (객체가 수행하는 동작) greet() { console.log(`Hello, my name is ${this.name}`); }};person.greet(); // "Hello, my name is guswjd"자바스크립트에서 객체는 필드와 메서드로 구성된 데이터 구조이다. 필드 : 객체가 가지고 있는 데이터로, 객체의 상태를 나타냄. 프로퍼티라고도 불리며, 숫자, 문자열, 배열, 또 다른 객체와 같은 값을 가질 수 있음메서드 : 객체가 수행할 수 있는 동작. 객체..
자바스크립트는 ECMA Script(ES)를 기반으로 표준화되었으며, 시간이 흐르면서 프로그래밍 패러다임의 변화에 맞춰 발전해왔다.ES6이전에는 함수를 선언문과 표현식으로 정의할 수 있었으나, ES6부터는 함수형 프로그래밍 패러다임을 반영해 화살표 함수라는 새로운 방식의 함수 선언이 도입되었다. 이번 포스팅에서는 자바스크립트에서 함수를 작성하는 방법과 이들의 차이점을 알아보고자 한다. 01. 함수 선언문function func_name(){ ...}function func_name( ) { } 처럼 함수를 선언하고 함수 이름을 호출하는 방법이다.함수 선언문은 호이스팅이 발생한다. 함수 호이스팅, 변수 호이스팅 등 호이스팅과 관련된 내용은 아래 포스팅 링크를 참고하면 된다.https://itguswjd...
자바스크립트 엔진의 파일 구동 방식은 자바스크립트 함수 구동 방식과 동일하게 처리한다.변수는 선언과 할당, 함수는 선언과 실행이라는 두 가지 주요 작업을 처리한다.자바스크립트 엔진의 자바스크립트 함수 구동 방식은 아래 2개의 단계로 나누어 진행된다.Creation(Pre-parsing) Phase : 코드 실행에 앞서 변수와 함수가 어떻게 정의되어 있는지 분석. 변수 선언과 함수 선인이 등록되지만 초기화는 되지 않음Execution Phase : 코드가 실제로 실행되면서 변수에 값이 할당되고, 함수가 실행. 이 단계에서 선언된 변수들이 초기화되고, 코드 로직이 순차적으로 실행이 두 단계는 자바스크립트 엔진이 자바스크립트 코드를 처리하는 기본 방식이며, 함수의 실행과 파일의 실행 모두 동일한 원리로 작동한..
01. JS 변수 선언 방법 : var / let / const자바스크립트에서 사용되는 변수 선언 방식에는 var, let, const 3가지가 있다.var는 ES6이전인 비교적 오래전부터 사용되었지만, ES6 등장 이후 현재는 잘 사용되지 않는 변수 선언 방법이다.현재는 거의 let, const를 사용하며, var, let, const의 차이점은 아래와 같다. 재선언재할당스코프호이스팅varO (재선언시 덮어쓰기)O함수 스코프호이스팅 발생 with InitializationletXO (가변 변수)블록 스코프호이스팅 발생 without Initialization (Reference Error)constXX (불변 변수)블록 스코프호이스팅 발생 without Initialization (Reference E..
01. 일급 함수 : 함수 변수 + 함수 파라미터 + 함수 반환#1. 일급 객체: 다른 객체에 일반적으로 적용 가능한 연산을 모두 지원하는 객체: 함수에 인자로 넘기기, 수정하기, 변수에 대입하기와 같은 연산을 지원 💡 일급 객체 특성- 변수에 담을 수 있다.const hello = function() { return "HelloWorld";}console.log(hello()); - 파라미터로 전달할 수 있다.const array = [1, 2, 3, 4]const parameter = (element) => { return element * 10}const calcarray = array.map(parameter)console.log(calcarray) - 함수의 반환값으로 사용할 수 있다.f..
ASAC/Front-End 2024. 9. 22. 22:06
useEffect와 useLayoutEffect는 둘 다 React에서 사이드 이펙트(Side Effect)를 처리하기 위한 Hook이지만, 그 동작 시점과 목적이 조금 다르다. 이때 사이드 이펙트(Side Effect)란 리액트 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 말한다. 대표적인 예시로, 어떤 데이터를 가져오기 위해 외부 API를 호출하는 경우, 화면에 렌더링할 수 있는 것은 먼저 렌더링하고 실제 데이터는 비동기로 가져오는 것이 권장된다. 요청 즉시 먼저 렌더링을 하면서 API 응답이 늦어지거나 없을 경우에도 영향을 최소화할 수 있다. useEffect와 useLayoutEffect 두 Hook의 차이점을 이해하기 위해서는 렌더링 과정에서 언제 실행되는지와 그..
ASAC/Front-End 2024. 9. 18. 17:37
React를 사용해 프로젝트를 진행하다 보면, 사용자의 입력을 받아 UI에 반영하는 작업이 필수적이다. 특히 폼(form) 요소와 같이 input 필드의 값을 어떻게 관리할지에 대한 고민을 자주 하게 된다. 이때 주로 사용하는 두 가지 Hook이 바로 useState와 useRef이다. 두 Hook은 상태를 관리하는 방식과 리렌더링에 대한 차이점이 있기 때문에 상황에 따라 적절히 선택해야 한다.리액트를 처음 시작하는 사람들은 useState로 모든 값을 관리하려는 경향이 있지만, 경우에 따라서는 useRef가 더 적합한 선택일 수 있다. 이번 포스팅에서는 useState와 useRef의 차이점과 각 훅을 언제 사용하는 것이 더 효율적인지에 대해 알아보고, 특정 상황에서 어떤 기준으로 선택할지에 대해 다뤄..
ASAC/Front-End 2024. 9. 11. 11:35
자바스크립트에서의 this는 일반 함수 표현식과 화살표 함수 표현식에서 다르게 동작한다.일반 함수 표현식 : 동적 바인딩 - 함수 호출 방식에 따라 this가 달라짐화살표 함수 표현식 : 정적 바인딩 - 화살표 함수가 정의된 상위 컨텍스트를 따름this는 위와 같이 일반 함수 표현식 / 화살표 함수 표현식에서 다르게 동작하지만, 일반 함수 표현식에서의 this는 함수가 어떻게 호출되는지에 따라 또 달라진다. 일반 함수가 함수로 사용되었는지, 메서드로 사용되었는지에 따라 다르게 동작한다. 01. 일반 함수 표현식에서 this일반 함수에서의 this는 동적 바인딩을 따른다.즉, 함수가 어떻게 호출되었는지에 따라 this가 결정된다. #1. 함수 내에서 호출하는 this기본적으로 함수가 독립적으로 호출되면,..
ASAC/Front-End 2024. 9. 8. 21:01
01. Callback콜백 함수는 함수의 실행 권한을 다른 함수에 넘기는 것을 의미한다.비동기 함수와 콜백은 별개의 개념이지만, 비동기 작업이 완료된 후 실행되어야 하는 로직을 처리할 때 자주 사용된다.예를 들어, 서버에 데이터를 요청하는 등의 상황에서 작업이 완료된 후 특정 동작을 해야 할 때 사용된다.콜백 함수의 역할은 작업이 완료된 후 어떤 작업을 해야 할 지 정의하는 것이며, 이를 통해 자바스크립트는 효율적인 비동기 처리를 할 수 있다.function callback(param1, param2) { console.log(param1 + " and " + param2);}function caller(callback) { setTimeout(() => { callback("hello", "g..
ASAC/Front-End 2024. 9. 6. 23:32
자바스크립트에서 모듈 시스템은 코드의 재사용성을 높이고, 의존성 관리, 성능 최적화를 위해 필수적인 개념이다. 과거에는 HTML에 defer 속성은 스크립트를 비동기적으로 로드하지만, HTML 파싱이 끝난 후 실행한다.스크립트는 HTML 파싱과 동시에 다운로드되지만, 파싱이 끝난 후에 실행되는 것이다.HTML 문서가 전부 파싱된 후 DOM 트리가 완성된 상태에서 스크립트가 실행되므로 DOM에 안전하게 접근할 수 있다.장점 : HTML 파싱과 스크립트 로드가 병렬로 진행되어 로딩 속도가 향상. DOM 트리가 완성된 상태에서 스크립트가 실행되므로 안정적단점 : 모든 스크립트가 파싱 순서대로 실행 ◼︎ async 속성은 스크립트를 비동기적으로 로드하고, 로드가 완료되는 즉시 실행한다.HTML 파싱을 중단하지 ..
ASAC/Front-End 2024. 9. 6. 16:14
01. 객체 = 필드 + 메서드 (프로퍼티의 집합)let person = { name: "guswjd", // 필드 (프로퍼티) age: 25, // 필드 (프로퍼티) // 메서드 (객체가 수행하는 동작) greet() { console.log(`Hello, my name is ${this.name}`); }};person.greet(); // "Hello, my name is guswjd"자바스크립트에서 객체는 필드와 메서드로 구성된 데이터 구조이다. 필드 : 객체가 가지고 있는 데이터로, 객체의 상태를 나타냄. 프로퍼티라고도 불리며, 숫자, 문자열, 배열, 또 다른 객체와 같은 값을 가질 수 있음메서드 : 객체가 수행할 수 있는 동작. 객체..
ASAC/Front-End 2024. 9. 6. 11:45
자바스크립트는 ECMA Script(ES)를 기반으로 표준화되었으며, 시간이 흐르면서 프로그래밍 패러다임의 변화에 맞춰 발전해왔다.ES6이전에는 함수를 선언문과 표현식으로 정의할 수 있었으나, ES6부터는 함수형 프로그래밍 패러다임을 반영해 화살표 함수라는 새로운 방식의 함수 선언이 도입되었다. 이번 포스팅에서는 자바스크립트에서 함수를 작성하는 방법과 이들의 차이점을 알아보고자 한다. 01. 함수 선언문function func_name(){ ...}function func_name( ) { } 처럼 함수를 선언하고 함수 이름을 호출하는 방법이다.함수 선언문은 호이스팅이 발생한다. 함수 호이스팅, 변수 호이스팅 등 호이스팅과 관련된 내용은 아래 포스팅 링크를 참고하면 된다.https://itguswjd...
ASAC/Front-End 2024. 9. 4. 17:33
자바스크립트 엔진의 파일 구동 방식은 자바스크립트 함수 구동 방식과 동일하게 처리한다.변수는 선언과 할당, 함수는 선언과 실행이라는 두 가지 주요 작업을 처리한다.자바스크립트 엔진의 자바스크립트 함수 구동 방식은 아래 2개의 단계로 나누어 진행된다.Creation(Pre-parsing) Phase : 코드 실행에 앞서 변수와 함수가 어떻게 정의되어 있는지 분석. 변수 선언과 함수 선인이 등록되지만 초기화는 되지 않음Execution Phase : 코드가 실제로 실행되면서 변수에 값이 할당되고, 함수가 실행. 이 단계에서 선언된 변수들이 초기화되고, 코드 로직이 순차적으로 실행이 두 단계는 자바스크립트 엔진이 자바스크립트 코드를 처리하는 기본 방식이며, 함수의 실행과 파일의 실행 모두 동일한 원리로 작동한..
ASAC/Front-End 2024. 9. 3. 17:03
01. JS 변수 선언 방법 : var / let / const자바스크립트에서 사용되는 변수 선언 방식에는 var, let, const 3가지가 있다.var는 ES6이전인 비교적 오래전부터 사용되었지만, ES6 등장 이후 현재는 잘 사용되지 않는 변수 선언 방법이다.현재는 거의 let, const를 사용하며, var, let, const의 차이점은 아래와 같다. 재선언재할당스코프호이스팅varO (재선언시 덮어쓰기)O함수 스코프호이스팅 발생 with InitializationletXO (가변 변수)블록 스코프호이스팅 발생 without Initialization (Reference Error)constXX (불변 변수)블록 스코프호이스팅 발생 without Initialization (Reference E..
ASAC/Front-End 2024. 9. 3. 15:07
01. 일급 함수 : 함수 변수 + 함수 파라미터 + 함수 반환#1. 일급 객체: 다른 객체에 일반적으로 적용 가능한 연산을 모두 지원하는 객체: 함수에 인자로 넘기기, 수정하기, 변수에 대입하기와 같은 연산을 지원 💡 일급 객체 특성- 변수에 담을 수 있다.const hello = function() { return "HelloWorld";}console.log(hello()); - 파라미터로 전달할 수 있다.const array = [1, 2, 3, 4]const parameter = (element) => { return element * 10}const calcarray = array.map(parameter)console.log(calcarray) - 함수의 반환값으로 사용할 수 있다.f..