전체 글229 [Javascript] 클로저가 무엇인가? 1. 클로저란? 클로저는 외부 변수를 기억하고, 이 외부 변수에 접근할 수 있는 함수를 의미한다. 자신이 생성될 때의 환경을 기억하는 함수인 것이다. 클로저는 함수와 해당 함수가 선언될 때의 렉시컬 환경을 함께 기억한다. 이는 함수가 선언될 당시의 스코프 체인을 기억하고, 이 함수가 실행될 때에도 그 스코프 체인에 접근할 수 있도록 하는 메커니즘이다. 이는 해당 함수 내부에서 선언된 변수들을 포함하여, 함수가 선언된 위치에 대한 정보를 가지고 있다. 이렇게 클로저가 기억하는 렉시컬 환경은 해당 함수가 실행되는 동안에도 유지된다. 이러한 클로저의 특성을 이용하면, 함수가 선언될 때 생성된 렉시컬 환경에 있는 변수를 계속해서 사용할 수 있다. 예를 들어, 함수 내부에서 선언된 변수를 함수 외부에서 사용하려고.. 2024. 2. 15. [Javascript] 호이스팅이란 무엇인가? 1. 호이스팅이란? Javascript 엔진은 코드를 실행하기 전, 컴파일러가 실행되기 전 단계에서 변수와 함수를 위한 공간을 메모리에 확보한다. 이때 변수와 함수의 선언 부분이 끌어올려진(hoisted) 것처럼 보여지는 현상을 호이스팅이라고 한다. Javascript에서 변수를 선언하면, 해당 변수는 스코프 내에서 사용할 수 있게 된다. 하지만 선언과 할당은 다르기 때문에, 변수를 선언하고 초기화하지 않으면 undefined 값으로 할당된다. 호이스팅은 변수나 함수를 선언할 때만 발생하며, 할당은 호이스팅 되지 않는다. 2. 변수 호이스팅 변수가 선언되면, 해당 변수는 스코프의 최상단으로 끌어올려지게 된다. 이렇게 되면 변수를 선언하기 전에 해당 변수를 사용해도 에러가 발생하지 않는다. 또한, let과.. 2024. 2. 14. [React] React에서 다국어 지원 기능 구현하기 회사 웹사이트를 해외에서 접근했을 시 영문으로 보여지게 해야하는 피쳐가 있어서 다국어 지원 기능에 대해 알아보았었다. 1. i18n이란? i18n이란 국제화의 약자로 i와 n사이에 18글자가 있기 때문에 이렇게 표기한다. 쿠버네티스를 k8s로 표현하는 것과 비슷한 표기법이다. SW제품이나 서비스를 여러 언어와 지역화에 대응할 수 있는 프로세스를 말한다. 일반적으로 다음 같은 기능을 포함하는데 문자열 치환, 다국어 지원, 날짜/시간/통화 형식, 텍스트 정렬방식에 대한 대응이 나라나 지역, 언어에 따라 달라질 수 있다. 2. React에서 i18n 라이브러리 사용하는 방법 i18n-next 공식문서 참고 https://react.i18next.com/ npm 또는 yarn으로 i18next, react-i1.. 2024. 2. 13. [React] 함수형 컴포넌트와 클래스형 컴포넌트 방식의 차이 1. 문법과 구조 - 함수형 컴포넌트는 함수 내에서 JSX를 return 하여 컴포넌트의 UI를 정의한다. 예시코드는 아래와 같다. import React, { useState } from 'react'; const CounterComponent = () => { const [count, setCount] = useState(0); const handleClick = () => { setCount(count + 1); }; return ( 횟수: {count} 증가 ); }; export default CounterComponent; - 클래스형 컴포넌트는 Javascript ES6의 클래스로 정의된다. React.Component 클래스를 확장하여 컴포넌트를 만들며, render() 메서드 내에서 JS.. 2024. 2. 8. [React] React에서 상태관리가 필요한 이유 React로 개발할 때 Redux, Recoil, Zustand, jotai 등 여러가지 상태관리 라이브러리에 대해 들어봤을 것이다. 이런 라이브러리들이 처리해주는 것은 무엇이고 왜 사용하는 것일까? 상태관리를 하는 이유는 뭐고 왜 중요한 것일까? 1. 상태란 무엇일까? React에서 상태란 컴포넌트의 데이터를 나타낸다. 어떤 의미를 갖고 있는 값이고 애플리케이션의 동작에 따라 지속적으로 변경할 수도 있는 값이다. 이런 상태가 변경될 때마다 UI가 업데이트 되거나 컴포넌트가 리렌더링된다. 이렇게 변경이 가능하기 때문에 변경된 상태를 감지하고 React에서는 필요한 UI 업데이트를 수행한다. 2. 상태관리가 필요한 이유 기술의 발전에 따라 웹은 단순 지식과 정보를 보여주던 Document에서 점점 그 기능.. 2024. 2. 7. [React] React Router 사용법 SPA에서 라우팅은 웹 애플리케이션의 다양한 뷰 및 컴포넌트 간의 네비게이션을 관리하는 중요한 부분이다. SPA는 페이지를 새로고침하지 않고도 동적으로 콘텐츠를 업데이트하므로, 라우팅이 사용자 경험을 향상시키고 전체적인 애플리케이션의 성능을 최적화하는 데 도움이 된다. 페이지 전환 시 기존의 서버에서 HTML를 생성해서 내려줄 때처럼 깜빡하는 느낌이 없이 매끄러운 느낌을 주기 때문에 어플리케이션과 같은 느낌을 준다. 1. React에 React Router 적용하기 1) 설치 먼저 아래 명령어로 React Router를 설치한다. npm install react-router-dom 2) 기본 구성 React Router를 사용하려면 앱의 최상위 컴포넌트에서 BrowserRouter를 사용하여 감싸야 한다.. 2024. 2. 6. 이전 1 2 3 4 5 6 7 ··· 39 다음
