Closure 클로저는 함수가 선언된 렉시컬 환경을 '기억'하여, 해당 함수가 선언된 범위 바깥에서 호출되더라도 그 환경에 있는 변수를 접근하고 조작할 수 있게 하는 프로그래밍 패턴이다. 함수는 보통 호출되고 나면 실행이 끝나고, 그 안에서 선언한 모든 변수는 메모리에서 해제된다. 이렇게 되면 일반적으로 해당 함수의 변수에는 접근할 수 없게 된다. 그런데, 클로저가 있는 경우에는 얘기가 달라진다. 클로저가 있으면 외부 함수가 종료되어도, 내부 함수가 외부 함수의 지역 변수에 계속해서 접근할 수 있다. (외부 함수의 변수를 기억하고 계속 사용할 수 있게 된다.) 우선 함수 내부에 함수가 있는 유형을 먼저 만들어보자. 외부함수 aaa의 지역변수에 내부함수인 bbb가 접근할 수 있다. apple이 외부함수에 ..

Throttling 특정 시간 이내, 추가 입력이 있어도, 처음 1회만 실행한다. 먼저 1회 실행시키고, 지정한 기간 동안에는 추가 입력이 있어도 실행하지 않는다. 마지막 호출이 발생한 후 일정 시간이 지날 때까지 추가 입력이 없으면 그때 실행된다. 무한스크롤에 주로 사용한다. 무한 스크롤은 스크롤을 내리면 추가 데이터를 refetch 해야한다. 스크롤은 한번 내리면 엄청나게 많이 내려가기 때문에, refetch가 엄청나게 많이 일어나게 된다. 그래서 한번 내리게 되면 해당 시간 동안은 더이상 refetch가 일어나지 않도록 Throttling을 사용해야 한다. Debouncing 특정 시간 이내, 추가 입력이 없으면, 마지막 1회만 실행한다. 어떤 작업이 있을 때, 특정 시간 내에 다시 그 작업이 반복..

1. 초기화 yarn init 2. TypeScript 설치 1) 명령어 입력 yarn add typescript --dev 2) tsconfig.json 생성 Next.js를 사용하는 프론트엔드 프로젝트에서는 Next.js가 자동으로 만들어주지만, 지금은 Next.js 환경이 아니기 때문에 Docs를 참고해서 직접 작성해줘야 한다. tsconfig.json 파일을 만들고 아래 내용을 채워준다. { "compilerOptions": { "target": "ES2015", "module": "commonjs", "strict": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true }, "$s..

SOP: Same-Origin Policy 동일 출처 정책 하나의 출처(Origin)에서 로드된 자원(문서나 스크립트)이 호스트나 프로토콜, 포트번호가 일치하지 않는 자원과 상호작용 하지 못하도록 요청 발생을 제한하고, 동일 출처(Same Origin)에서만 접근이 가능한 정책이다. 기존에는 이 구조였다. But! 웹이 확장됨에 따라서 더 확장 가능한 서비스가 필요했다. 이 정책으로 인해 다른 곳에서 제공해주는 API를 활용할 수 없었는데, 이를 해결하기 위해 나온 것이 CORS! 무작정 풀어주면 보안상의 문제가 있기 때문에, 규칙을 정해놓고 허용될 때만 접근 가능하게 해준다. CORS: Cross-Origin Resource Sharing Origin이 달라도 요청을 보낼 수 있게 설정할 수 있는 정책..

Class 컴포넌트의 구동 방식 설명을 위해 간소화한 예시로, 실제 구동방식과는 차이가 있다. // Class를 정의합니다. class ClassCounterPage { count = 10; onClickCountUp() { console.log("button의 count: ", this.count); } // render 안의 태그들이 실제로 화면에 그려지는 방식입니다. (설명을 위해 간소화한 예시로, 실제 구동방식과 차이가 있습니다.) render() { // button 태그를 생성합니다. const button = document.createElement("button"); button.innerText = "카운트 Up"; // onClick 함수는 EventListener에 연결해줍니다. bu..

태그가 중첩되어 있을 때, onClick 이벤트를 이용해 태그를 받아오는 방법을 아라보자 1. 이벤트 버블링 1-1. 개념 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때, 해당 이벤트가 더 상위의 화면 요소들로 전달되는 특성이다. 브라우저는 특정 화면 요소에서 이벤트가 발생했을 때 그 이벤트를 최상위에 있는 화면 요소까지 전파시킨다. 💡 이벤트 캡처링 이벤트 버블링과 반대로 이벤트가 부모 요소에서 자식 요소로 전달되는 것이다. 캡처링은 따로 옵션을 줘야 발생한다. 1-2. 그림으로 아라보자 위 사진처럼 빨간색 부모 태그 위에 파란색 자식 태그가 있는 경우 파란색 태그를 누르면 빨간색 태그까지 함께 눌리게 되어, 파란색 태그에 지정된 onClick 이벤트와 빨간색 태그에 지정된 onClick 이..

Utility type 유틸리티 타입 기존에 있는 타입을 조작해서 쓸 때 사용한다. 예시에 사용할 타입 interface IProfile { name: string; age: number; school: string; hobby?: string; } 1. Partial type 모든 타입이 선택값이 된다. type IPartialProfile = Partial; 2. Required type 모든 타입이 필수가 된다. type IRequiredProfile = Required; 3. Pick type 사용할 타입을 지정한다. type IPickProfile = Pick; 4. Omit type 지정한 타입을 제외한 타입으로만 이루어진다. type IOmitProfile = Omit; 5. Record t..

Ajax Asynchronous JavaScript and XML 비동기적인 웹 애플리케이션의 제작에 쓰이는 웹 개발 기법 jQuery를 import해야 사용할 수 있다. 🚨 jQuery가 import 되어있지 않은 경우 에러 Uncaught TypeError: $.ajax is not a function 사용 방법 $.ajax({ type: "요청 방식", url: "요청할 URL", data: { POST 요청 시 전달할 데이터 }, // GET 요청 시엔 비워둔다. success: function(결과) { // 서버에서 받은 결과 console.log(결과); } }) 💡 GET 요청 시 데이터 전달 방법 GET 요청 시에는 전달할 데이터를 url 뒤에 붙여서 보낸다. (POST 요청 시에는 da..

jQuery HTML 요소들을 조작하는 JavaScript 라이브러리 미리 작성된 JavaScript 코드를 모아둔 것 사용법 import 태그 안에 아래 script 태그를 붙여넣는다. 값을 가져오기를 원하는 태그에 id 부여 Methods 로딩되자마자 실행하기 $(document).ready(function(){ alert('페이지가 로딩되었습니다.') });값 가져오기 [val, text] $('#아이디').val(); (input box) $('#아이디').text(); (input 외) 새 값 넣기 [val, text] $('#아이디').val("새 값"); (input box) $('#아이디').text("새 값"); (i..

임시 URL을 생성하는 두 가지 방법을 알아보자! 1. createObjectURL createObjectURL로 생성한 이미지는 가짜 URL이다. 👉🏻 다른 브라우저에서는 접근이 불가능하다. // 1. 임시 URL 생성 (가짜 URL - 내 브라우저에서만 접근 가능하다.) const result = URL.createObjectURL(file); console.log(result); 아래와 같은 형태의 url이 생성된다. // 결과 blob:http://localhost:3000/f327a5c9-e636-4c7b-9f32-0322062b8a69 2. FileReader FileReader로 생성한 이미지 URL은 진짜 URL이다! 👉🏻 다른 브라우저에서도 접근이 가능하다. const fileReader..

1. 변수의 생명 주기 1-1. 전역 변수 전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같다. 전역 변수의 선언문은 선언문이 어디에 있는 상관 없이 가장 먼저 실행된다. (코드가 한 줄씩 순차적으로 실행되는 시점인 런타임이 아닌 런타임 이전 단계에서 JS 엔진에 의해 먼저 실행된다.) 전역 코드는 함수 호출과 같이 전역 코드를 실행하는 특별한 진입점이 없고, 코드가 로드되자마자 곧바로 해석되고 실행된다. 전역 코드에는 반환문을 사용할 수 없으므로 마지막 문이 실행되어 더 이상 실행할 문이 없을 때 종료한다. 전역 객체 전역 객체는 코드가 실행되기 이전 단계에 JS 엔진에 의해 어떤 객체보다도 먼저 생성되는 특수한 객체다. 전역 객체는 클라이언트 사이드 환경(브라우저)에서는 window, 서버 사이..

typeScript에서 event.target.id를 사용할 때 종종 아래와 같은 에러 메세지를 볼 수 있다. 'EventTarget' 형식에 'id' 속성이 없습니다. 이 에러가 발생하는 이유와 해결 방법을 알아보자! 1. event 타입으로 MouseEvent가 지정된 경우 MouseEvent에는 event.target.value가 미리 지정되어 있지 않아서, 미리보기에도 안 뜬다! 타입을 지정해주면 위 사진처럼 들어올 수 있는 값들을 볼 수 있어서 개발할 때 편하다! ChangeEvent(Input 태그)에는 event.target.value가 있기 때문에 value가 있는 것이고, Id도 있다. MouseEvent에는 이상한 함수들밖에 안 뜨고 속성이 없다고 타입 에러가 난다.. 그 이유는, 브라..

router 경로가 잘못 설정되었거나 폴더명 오류(dynamic route parameters) 등으로 router 경로가 undefined일 수 있다. 위 경우는 boardId에 undefined가 들어갈 수 없어서 발생하는 에러이다. (router.query에 boardId가 없는 경우 undefined를 반환한다.) 따라서 미리 undefined일 경우에 대한 처리를 해줘야 한다. 방법 1 : String으로 타입 변환 이 방법은, undefined인 경우 "undefined"로 그대로 변환된다는 문제점이 있다. String(router.query.boardId) 방법 2 : 타입 확인 후 분기 처리 undefined인 경우에 대한 처리를 미리 할 수 있다. if(typeof router.query..

JS가 제공하는 7가지 데이터 타입은 크게 원시 타입 객체 타입으로 구분된다. 원시 타입과 객체의 차이점 세가지를 알아보자! 1. 값 변경 가능 여부 1-1. 원시 값 : 변경 불가능(불변성) 원시 타입(primitive type)의 값은 변경 불가능한 값(immutable value)이다. 💡 변수 값을 변경할 수 없다는 것이 아니라, 원시 값 자체를 변경할 수 없다는 것이다! 헷갈 ㄴㄴ 변수는 재할당을 통해 변수 값을 변경(교체) 할 수 있다. 그래서 이름도 변수.. 이러한 원시 값의 특성은 데이터의 신뢰성을 보장한다. 원시 값을 할당한 변수는 재할당 이외에 변수 값을 변경할 수 있는 방법이 없다. 원시 값을 할당한 변수에 새로운 원시 값을 재할당하면 변수가 참조하던 메모리 공간의 주소가 바뀐다. 재..

1. 객체 JS는 객체 기반의 프로그래밍 언어이다. JS를 구성하는 거의 모든 것이 객체이다. 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체이다. 객체 타입은 다양한 타입의 값(원시 값 또는 다른 객체)를 하나의 단위로 구성한 복합적인 자료구조이다. (원시 타입은 단 하나의 값만 나타낸다.) 객체는 변경 가능한 값이다. (원시 값은 변경 불가능한 값이다.) 2. 객체 리터럴로 객체 생성하기 객체 리터럴은 객체를 생성하기 위한 표기법이다. 객체 리터럴은 중괄호({...}) 내에 0개 이상의 프로퍼티를 정의한다. 변수에 할당되는 시점에 객체 리터럴을 해석해 객체가 생성된다. 객체 리터럴은 값으로 평가되는 표현식으로, 중괄호 뒤에 세미콜론을 붙인다! (객체 리터럴의 중괄호는 코드 블..

단축 평가 short-circuit evaluation 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 단축 평가라고 한다. 논리곱(&&) 연산자와 논리합(||) 연산자는 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환한다. 1. 논리곱 연산자 ( && ) 논리곱 연산자는 두 개의 피연산자가 모두 true로 평가될 때 true를 반환한다. 1) 좌항의 피연산자가 Truthy 값인 경우! 'Cat' && 'Dog' 우항의 피연산자를 평가해 보아야 표현식을 평가할 수 있다. 논리곱 연산자는 좌항에서 우항으로 평가가 진행된다. 즉, 우항의 피연산자가 논리곱 연산자 표현식의 평가 결과를 결정한다. 👉🏻 논리 연산의 결과를 결정하는 우항의 피연산자를 문자..

1. 암묵적 타입 변환 implicit coercion / 타입 강제 변환 type coercion JS 엔진은 표현식을 평가할 때 개발자의 의도와는 상관없이 코드의 문맥을 고려해 암묵적으로 데이터 타입을 강제 변환할 때가 있다. 표현식을 평가할 때 코드의 문맥에 부합하지 않는 경우, 프로그래밍 언어에 따라 에러를 발생시키기도 하지만 JS는 가급적 에러를 발생시키지 않도록 암묵적 타입 변환을 통해 표현식을 평가한다. 피연산자가 모두 문자열 타입이어야 하는 문맥 '10' + 2 // '102' 1-1. 문자열 타입으로 변환 + 문자열 연결 연산자 + 연산자의 피연산자 중 하나 이상이 문자열인 경우, 문자열 연결 연산자로 동작한다. 1-2. 숫자 타입으로 변환 산술 연산자 산술 연산자의 모든 피연산자는 숫자..

제어문 control flow statement 조건에 따라 코드 블록을 실행하거나 반복 실행할 때 사용한다. 코드의 실행 흐름을 인위적으로 제어할 수 있다. 1. 블록문 block statement / compound statement 0개 이상의 문을 중괄호로 묶은 것으로, 코드 블록 도는 블록이라고 부르기도 한다. 자바스크립트는 블록문을 하나의 실행 단위로 취급한다. 단독으로 사용할 수도 있지만, 일반적으로 제어문이나 함수를 정의할 때 사용한다. 블록문은 언제나 문의 종료를 의미하는 자체 종결성을 갖기 때문에 블록문의 끝에는 세미콜론을 붙이지 않는다. 2. switch문 주어진 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case문으로 실행 흐름을 옮긴다. 폴스루 fall through 일치하..

연산자 연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만든다. 피연산자와 연산자의 조합으로 이뤄진 연산자 표현식도 값으로 평가될 수 있는 표현식이다. 피연산자는 연산의 대상으로, 값으로 평가될 수 있는 표현식이다. 1. 산술 연산자 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다. 산술 연산이 불가능한 경우, NaN을 반환한다. 1-1. 단항 산술 연산자 전위 증가/감소 연산자 prefix increment/decrement operator 먼저 피연산자의 값을 증가/감소시킨 후, 다른 연산을 수행한다. 후위 증가/감소 연산자 postfix increment/decrement operator 먼저 다른 연산을 수행한 후 피..