본문 바로가기

분류 전체보기

 (114)
this This ? this는 객체 자신의 프로퍼티나 메서드를 참조하기 위한 자기참조변수 이다. this가 가르키는 값은 함수호출방식에 따라 동적으로 결정된다. 문단 일반 함수로서 호출 = 전역객체 function foo() { console.log(this); } foo(); // window // 전역객체는 브라우저 환경에서는 window, node.js환경에서는 global을 가르킨다. 메서드로서의 호출 = 메서드를 호출한 객체(마침표 앞의 객체) const obj = {foo}; //obj 생성자 함수로서 호출 = 생성자 함수가 (미래에)생성할 인스턴스 const inst = new foo(); // inst
스코프 스코프란? 모든 식별자(변수이름, 함수이름, 클래스이름)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효범위가 결정된다. 이를 스코프라 한다. 즉, 스코프는 식별자가 유효한 범위를 말한다. 함수레벨 스코프 vs 블록레벨 스코프 함수레벨 스코프 코드블록이 아닌 함수에 의해서만 지역스코프가 생성된다. var키워드로 선언된 변수는 오로지 코드블록(함수 몸체)만을 지역스코프로 인정한다. 블록레벨 스코프 C나 JAVA등 대부분의 프로그래밍언어는 함수몸체만이 아니라 모든 코드블록(if,for,while, try/catch)등에서 지역스코프를 만든다. let, const는 블록레벨스코프를 지원한다.
[react] 다국어 적용하기 - 3편 (다국어에 변수 넣기) 전 포스트에 이어서 작성하는 내용이므로 설치 및 다국어 적용이 안되신 분은 앞의 포스트를 보고 와 주세요! [react] 다국어 적용하기 - 2편 (언어 변경 버튼 만들기) 전 포스트에 이어서 작성하는 내용이므로 설치 및 다국어 적용이 안되신 분은 앞의 포스트를 보고 와 주세요! react 에서 다국어 적용하기 (feat.react-i18next) 1. i18next 와 react-i18next 를 설치한다. npm in code00.tistory.com 1. {t("testText", {넣을 변수명})} 으로 데이터를 넣는다. src/Test.js import i18n from "languages/i18n"; import { useTranslation } from "react-i18next"; cons..
[react] 다국어 적용하기 - 2편 (언어 변경 버튼 만들기) 전 포스트에 이어서 작성하는 내용이므로 설치 및 다국어 적용이 안되신 분은 앞의 포스트를 보고 와 주세요! react 에서 다국어 적용하기 (feat.react-i18next) 1. i18next 와 react-i18next 를 설치한다. npm install i18next react-i18next 2. src 폴더 아래에 language 폴더를 생성하고 i18n.js 파일을 작성한다. src/language/i18n.js import i18n from "i18next"; impor.. code00.tistory.com 1. 사용할 컴포넌트에서 i18n 불러오기 src/Test.js import i18n from "languages/i18n"; import { useTranslation } from "r..
[react] 다국어 적용하기 - 1편 (feat.react-i18next) 1. i18next 와 react-i18next 를 설치한다. npm install i18next react-i18next 2. src 폴더 아래에 language 폴더를 생성하고 i18n.js 파일을 작성한다. src/language/i18n.js import i18n from "i18next"; import { initReactI18next } from "react-i18next"; import en from "languages/en.json"; import ko from "languages/ko.json"; i18n .use(initReactI18next) .init({ resources: { en: { translation: en, }, ko: { translation: ko, }, }, lng:..
순수함수와 비순수함수 순수함수 어떤 외부 상태에 의존하지도 않고 변경하지도 않는, 즉 부수효과가 없는 함수. 동일한 인수가 전달되면 언제나 동일한 값을 반환하는 함수. 오직 매개변수를 통해 함수 내부로 전달된 인수에게만 의존해 값을 생성해 반환한다. 만약 외부 상태에는 의존하지 않고 함수 내부상태에만 의존한다 해도 그 내부 상태가 호출될 때마다 변화하는 값(ex:현재시간)이라면 순수함수가 아니다. let count = 0; //현재 카운트를 나타내는 상태 //순수함수 increase는 동일한 인수가 전달되면 언제나 동일한 값을 반환한다. function increase(n){ return ++n; }; //순수함수가 반환한 결과값을 변수에 재할당해서 상태를 변경. count = increase(count); console.l..
콜백함수 콜백함수 //외부에서 전달받은 f를 n만큼 반복 호출하기. function repeat(n,f) { for(let i = 0; i < n; i++){ f(i); // i를 전달하면서 f를 호출한다. } }; let logAll = function(i){ console.log(i); }; //반복호출 할 함수를 인수로 전달한다. repeat(5, logAll); // 0 1 2 3 4 let logOdds = function(i){ if(i%2) console.log(i); }; //반복 호출 할 함수를 인수로 전달한다. repeat(5,logOdds); // 1 3 위 repeat함수는 경우에 따라 변경되는 일을 함수 f로 추상화했고 이를 외부에서 전달받는다. repeat함수는 더 이상 내부로직에 의존하..
중첩함수 중첩 함수 함수 내부에 정의된 함수를 중첩함수 또는 내부함수라 한다. 그리고 중첩함수를 포함하는 함수는 외부함수라 부른다. 중첩함수는 외부함수 내부에서만 호출할 수 있다. 일반적으로 중첩 함수는 자신을 포함하는 외부함수를 돕는 헬퍼 함수의 역할을한다. fuction outer(){ let x= 1; //중첩함수 function inner(){ let y = 2; // 외부함수의 변수를 참조할 수 있다. console.log(x+y); // 3 } inner(); } outer(); 출처 모던 자바스크립트 Deep Dive: 자바스크립트의 기본 개념과 동작 원리 269개의 그림과 원리를 파헤치는 설명으로 ‘자바스크립트의 기본 개념과 동작 원리’를 이해하자! 웹페이지의 단순한 보조 기능을 처리하기 위한 제한..

티스토리툴바