분류 전체보기

[React/TypeScript] Input의 event.target.value을 string이 아닌 특정 타입으로 명시할 수 있을까?

안녕하세요. 캡스톤 프로젝트 중 경험한 Trouble Shooting을 공유해보고자 글을 작성하게 되었습니다! 다들 구글 폼, 네이버 폼과 같은 서비스를 많이 이용해보셨을까요?현재 진행 중인 캡스톤 프로젝트에서 학생들에게 행사 참여 신청를 받기 위한 폼 (설문) 서비스를 제공하기 위해, 폼 생성 페이지를 직접 만들게 되었는데요.폼 생성 페이지에서는 많은 이벤트들(추가, 삭제, 수정 등)이 이루어지므로, 이에 따라 여러 Input 컴포넌트들의 상태를 업데이트해줘야 해서 신경 쓸 부분이 많은 페이지라 볼 수 있습니다. 타입스크립트까지 이용한다면 Type Guard까지 신경써줘야 하는데요🥲    폼 생성 페이지에서는 useState로 관리되는 questionList를 맵핑하여 질문 박스 컴포넌트들을 렌더링합..

[CS/네트워크] 주소창에 www.naver.com을 쳤을 때 무슨 일이 일어날까?

IT 개발자 필수 상식인 주소창에 www.naver.com을 쳤을 때 무슨 일이 일어나는지에 대하여 정리해보겠습니다.  과정1. 리다이렉트 →  2. 캐싱  →  3. DNS  →  4. IP 라우팅  →  5. TCP 연결 구축  →  6. TTFB (Time to First Byte) 시작  →  7. 컨텐츠 다운로드  →  8. 브라우저 렌더링  →  9. 네이버 화면 표시 🥳 단계별 설명1. 리다이렉트먼저 리다이렉트가 있다면 리다이렉트를 진행하고 없다면 그대로 해당 요청에 대한 과정이 진행됩니다.2. 캐싱캐싱 단계에서는 해당 요청의 캐싱 가능 여부를 파악합니다.캐싱이 이미 된 요청이라면 캐싱된 값을 반환하며, 캐싱이 되지 않은 새로운 요청이라면 그 다음 단계로 넘어갑니다.캐싱: 요청된 값의 결과..

[JS Deep Dive] 16. 프로퍼티 어트리뷰트

16장 프로퍼티 어트리뷰트 (1) 내부 슬롯과 내부 메서드 프로퍼티 어트리뷰트 이해하기 위해 필요한 개념 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMA 사양에서 사용하느 의사 프로퍼티와 의사 메서드 ECMAScript 사양에 등장하는 이중 대괄호로 감싼 이름들 [[ . . . ]] ECMAScript 사양에 정의된 대로 구현 → 자바스크립트 엔진에서 실제로 동작 🔔 개발자가 직접 접근할 수 있도록 공개된 객체의 프로퍼티 ❌ 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 내부 로직 ⇒ 원칙적으로 직접 접근 · 호출 방법 제공 ❌ 일부 내부 슬롯과 내부 메서드에 한하여 간접적 접근 수단 제공 (ex) 모든 객체는 [[Prototype]]이라는 내부 슬롯 가짐 내부 슬롯은 자바스크립트 엔진의 내부..

[JS Deep Dive] 15. let, const 키워드와 블록 레벨 스코프

var 키워드로 선언한 변수의 문제점(1) 변수 중복 선언 허용var 키워드로 선언한 변수는 중복 선언 가능초기화문 유무에 따라 다르게 동작초기화문 有: 자바스크립 엔진에 의해 var 키워드 없는 것처럼 동작 (var x = 10;)초기화문 無: 무시됨 (var x;)(2) 함수 레벨 스코프var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정⇒ 함수 외부에서 var 키워드로 선언한 변수 → 코드 블록 내에서 선언해도 모두 전역 변수var x = 1; if (true) { // 코드 블록 안이지만 함수 외부이므로 전역변수 x 중복 선언 var x = 10; } console.log(x); //10(3) 변수 호이스팅var 키워드로 변수 선언 → 변수 선언문이 스코프의 선두로 끌어올..

[JS Deep Dive] 14. 전역 변수의 문제점

무분별한 전역변수 사용 지양해야 함 (1) 변수의 생명 주기 선언에 의해 생성 → 할당을 통해 값 가짐 → 소멸 자신이 선언된 위치에서 생성되고 소멸함 전역 변수의 생명 주기= 애플리케이션의 생명 주기 함수 내부에서 선언된 지역변수= 함수 호출시 생성 → 함수 종료시 소멸 = 함수의 생명주기와 같음 💡 전역 변수 변수 선언은 선언문이 어디에 있든 상관없이 가장 먼저 실행됨 변수 선언은 런타임 이전 단계에서 자바스크립트 엔진에 의해 먼저 실행됨 함수 내부에서 선언한 변수 함수가 호출된 직후에 함수 몸체의 코드가 한 줄씩 순차적으로 실행되기 이전에 자바스크립트 엔진에 의해 먼저 실행됨 (변수 먼저 선언되어 undefined로 초기화된 후 함수 몸체를 구성하는 문들이 순차적으로 실행되기 시작할 때 변수 할당문..

[JS Deep Dive] 13. 스코프

스코프 (유효범위)자바스크립트를 포함한 모든 프로그래밍 언어의 기본적이며 중요한 개념✅모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정됨 스코프 = 식별자가 유효한 범위 = 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙 (어떤 변수를 참조할지 결정) 💡자바스크립트 엔진은 코드 실행시 코드의 문맥 고려 코드의 문맥은 렉시컬 환경으로 이루어짐 이를 구현한 것이 실행 컨텍스트 모든 코드는 실행 컨텍스트에서 평가되고 실행됨 렉시컬환경 코드가 어디서 실행되며 주변에 어떤코드가 있는지 프로그래밍 언어에서는 스코프를 통해 식별자인 변수 이름의 충돌을 방지하여 같은 이름의 변수를 사용할 수 있게 함스코프 내에서 식별자는 유일해야 함다른 스코프에는 같은 이름의 ..

[JS Deep Dive] 12. 함수

함수일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것매개변수함수 내부로 입력을 전달받는 변수인수입력반환값출력함수호출인수를 매개변수를 통해 함수에 전달하면서 함수의 실행을 명시적으로 지시함수 호출시 코드 블록에 담긴 문들 일괄적 실행 후 반환값 반환 함수 리터럴자바스크립트의 함수 = 객체 타입의 값함수도 함수 리터럴로 생성 가능function 키워드, 함수이름, 매개변수, 함수 몸체로 구성함수 리터럴은 평가되어 값(객체) 생성함수는 객체지만 일반 객체와 달리 호출 가지며 함수 객체만의 고유한 프로퍼티 가짐함수가 객체라는 것은 다른 언어와 구별되는 중요한 특징 함수 정의함수는 함수 이름으로 호출하는 것이 아니라 함수 객체를 가리키는 식별자로 호출됨함수 표현식아래의 경우 자바스..

[JS Deep Dive] 11. 원시 값과 객체의 비교

원시타입 vs 객체타입 원시값 → 변경불가능한 값 / 객체(참조) 타입의 값 (객체) → 변경가능한 값 변수 할당 원시값 변수(확보된 메모리 공간)에 할당 → 실제 값이 저장됨 객체를 변수에 할당 → 참조 값이 저장됨 변수를 다른 변수에 할당 원시 값을 갖는 변수 → 다른 변수에 할당 ⇒ 원본의 원시 값이 복사되어 전달 = 값에 의한 전달 객체를 가리키는 변수를 다른 변수에 할당 ⇒ 원본의 참조 값이 복사되어 전달 = 참조에 의한 전달 원시값 변경 불가능한 값, 읽기 전용 값 변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 값: 변수에 저장된 데이터로서 표현식이 평가되어 생성된 결과 원시 값 자체를 변경할 수 없다는 것 ! 변수는 언제든지 재할..

[Algorithm/BOJ] 04673 : 셀프넘버.js

문제 셀프 넘버는 1949년 인도 수학자 D.R. Kaprekar가 이름 붙였다. 양의 정수 n에 대해서 d(n)을 n과 n의 각 자리수를 더하는 함수라고 정의하자. 예를 들어, d(75) = 75+7+5 = 87이다. 양의 정수 n이 주어졌을 때, 이 수를 시작해서 n, d(n), d(d(n)), d(d(d(n))), ...과 같은 무한 수열을 만들 수 있다. 예를 들어, 33으로 시작한다면 다음 수는 33 + 3 + 3 = 39이고, 그 다음 수는 39 + 3 + 9 = 51, 다음 수는 51 + 5 + 1 = 57이다. 이런식으로 다음과 같은 수열을 만들 수 있다. 33, 39, 51, 57, 69, 84, 96, 111, 114, 120, 123, 129, 141, ... n을 d(n)의 생성자라..

[JS Deep Dive] 10. 객체 리터럴

자바스크립트 객체 기반의 프로그래밍 언어 구성 요소 대부분이 객체 원시 값 제외한 나머지 값 = 모두 객체 함수, 배열, 정규 표현식 원시 타입 vs 객체 타입 원시 타입 단 하나의 값만 나타냄 객체 타입 (object/reference type) 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조 원시 값 또는 다른 객체 원시 값 (원시 타입의 값) 변경 불가능한 값 객체 타입의 값 (객체) 변경 가능한 값 객체 0개 이상의 프로퍼티로 구성된 집합 프로퍼티 구성 요소 키(key) 값(value) 자바스크립트에서 사용할 수 있는 모든 값이 들어갈 수 있음 함수는 일급 객체이므로 가능 프로퍼티 값이 함수일 경우 메서드라 부름 객체는 프로퍼티와 메서드로 구성된 집합체 프로퍼티: 객체의 상태를 나타내는..