WoohyunKing의 개발 성장일지

원시 자료형(Primitive Type)과 참조 자료형(Reference Type) 자바스크립트에는 타입(Type)이라는 개념이 존재하는데, 변수에는 다양한 타입이 존재한다. 데이터에는 '원시 자료형'과 '참조 자료형'이라는 2가지 타입이 존재하는데, 원시 자료형이 할당될 때에는 변수에 값 자체(Value)가 담기고 참조 자료형이 할당될 때는 주소(Reference)가 담긴다. 원시 자료형(Primitive Data Type, 원시 타입) 단일한 값을 하나씩 담을 수 있는 단일 데이터인 원시(primitive) 타입 객체가 아니면서 method를 가지지 않는 6가지의 타입이 있다. 원시 자료형은 모두 “하나”의 정보, 즉, 데이터를 담고 있다. string, number, bigint, boolean,..

1) slice() 함수 slice() 함수는 배열로 부터 특정 범위를 복사한 값들을 담고 있는 새로운 배열을 만드는데 사용합니다. 첫번째 인자로 시작 인덱스(index), 두번째 인자로 종료 인덱스를 받으며, 시작 인덱스부터 종료 인덱스까지 값을 복사하여 반환합니다. 여기서 주의할 점은 첫번째 인자로 넘어온 시작 인덱스가 가리키는 값은 포함하지만, 두번째 인자로 넘어온 종료 인덱스가 가리키는 값은 포함하지 않는다는 것입니다. 첫번째 인자도 넘기지 않으면, 배열의 처음 값부터 마지막 값까지 전체를 복제해버리는 효과를 낼 수 있습니다. 두번째 인자를 넘기지 않으면, 시작 인덱스가 가리키는 값부터 배열의 마지막 값까지 모두 복사해줍니다. slice() 함수는 밑에서 다룰 splice() 함수와 달리 아무리 ..

import axios, { AxiosRequestConfig } from 'axios'; const axiosConfig: AxiosRequestConfig = { baseURL: 'BASE_URL' } const client = axios.create(axiosConfig); // client: AxiosInstance const response = await client.get('/user'); const response = await client.post('/user/add', { id: 'mo', name: 'mocci' }); 통신모듈로 axios를 사용할 때 baseURL이나 interceptor, headers 등 공통으로 설정을 적용하고 싶은 경우 config를 적용한 instance를 ..

40.5) 이벤트 객체 이벤트가 발생하면 이벤트에 관련된 다양한 정보를 담고 있는 '이벤트 객체'가 동적으로 생성된다. 생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달된다. 클릭하세요. 클릭한 곳의 좌표가 표시됩니다. 위 예제에서는 클릭 이벤트에 의해 생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달되어 매개변수 e에 암묵적으로 할당됨을 알 수 있다. (이는 브라우저가 이벤트 핸들러를 호출할 때 이벤트 객체를 인수로 전달받기 때문이다.) 따라서 이벤트 객체를 전달받으려면 이벤트 핸들러를 정의할 때 이벤트 객체를 전달받을 매개변수를 명시적으로 선언해야 한다. ⭐️ 이벤트 핸들러 어트리뷰트 방식으로 이벤트 핸들러를 등록했다면 다음과 같이 event를 통해 이벤트 객체를 전달받을 수 있다...

40.1) Event Driven Programming 브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 특정한 타입의 이벤트를 발생시킨다. ex) 클릭, 키보드 입력, 마우스 이동 등 만약에 애플리케이션이 특정 타입의 이벤트에 대해 반응하여 어떤 일을 하고 싶다면 해당하는 타입의 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려서 호출을 위임하는데, 이때 '이벤트가 발생했을 때 호출될 함수'를 이벤트 핸들러(Event Handler)라고 하고, 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라고 한다. 즉, 함수를 언제 호출할지 알 수 없으므로 개발자가 명시적으로 함수를 호출하는 것이 아니라 브라우저에게 함수 호출을 위임하는 것이다. Window..

39.0) DOM(Document Object Model) 이란 ? DOM(Document Object Model): 브라우저의 HTML 문서 파싱의 결과물이자, HTML 문서의 ‘계층적 구조’와 ‘정보’를 표현하며 이를 제어할 수 있는 “DOM API”를 제공하는 Tree 자료구조. 39.1) 노드 39.1.1 HTML 요소와 노드 객체 HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미한다. HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다. 이때 HTML 요소의 어트리뷰트는 어튜리뷰트 노드로, 텍스트 콘텐츠는 텍스트 노드로 변환된다. HTML 문서는 HTML 요소들의 집합으로 이루어지며, 이들은 중첩 관계를 가지고 이로 인해 부자 관계가 형성된다. ..

38.0) 서론 구글의 V8 자바스크립트 엔진으로 빌드된 JS 런타임 환경인 ‘Node.js’의 등장으로 자바스크립트는 웹 브라우저를 벗어나 서버 사이드 애플리케이션에서도 사용할 수 있는 범용 개발 언어가 되었다. 하지만 JS가 가장 많이 사용되는 분야는 웹 브라우저 환경에서 동작하는 웹 페이지/애플리케이션의 클라이언트 사이드이다. 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 따라서 브라우저 환경을 고려할 때 더 효율적인 클라이언트 사이드 JS 프로그래밍이 가능하다. 이를 위해서 브라우저가 HTML, CSS, JS로 작성된 텍스트 문서를 어떻게 해석(Parsing)하여 브라우저에 렌더링하는지 살펴보자 ! 💡 파싱(Parsing) : 작성된 텍스트 문서를 읽어서 실행하기 위해 텍스트 문서..

1) Typescript의 'enum' type이란 ? enum Auth { admin = 0, // 관리자를 0으로 표현 user = 1, // 회원은 1로 표현 guest = 2 // 게스트는 2로 표현 } Typescript 는 JS의 기본 타입 외에도 몇 개의 타입을 더 제공하는데, 그 중 하나가 열거형이라고 불리는 enum 이다. enum은 말 그대로, 여러 값들에 미리 이름을 정의하여 열거해 두고 사용하는 타입이다. 2) enum을 사용하는 이유 2-1) 분야 별로 종류를 정의하여 명확하게 사용하기 위함 여러 값들을 분야 별로 정의할 수 있기 때문에, 의미를 명확하게 파악하고 사용할 수 있으며 코드의 가독성을 높일 수 있다. 2-2) 하드코딩의 실수를 줄이기 위함 하드코딩을 막고, 자동완성 기..

이번 포스팅부터는 이전에 모각소(모여서 각자 소프트웨어) 활동에서 Notion에 정리해두었던 HTML/CSS/JS 내용을 복습할 겸 포스팅을 해보려고 합니다 :) 1) HTML 이란 ? HTML (HyperText Markup Language)은 웹페이지를 기술하기 위한 마크업 언어(태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지) 조금 더 자세히 말하면 웹페이지의 내용(content)과 구조(structure)를 담당하는 언어로써 HTML 태그를 통해 정보를 구조화할 수 있습니다. 💡 메타 데이터(Meta Data)란 ? 데이터에 관한 구조화된 데이터로, 다른 데이터를 설명해 주는 데이터 HTML5 문서는 반드시 으로 시작하여 문서 형식(document type)을 HTML5로 지정..

1) Typescript란 ? 타입스크립트는 자바스크립트에 타입(Type)을 부여한 언어, 즉 JavaScript로 컴파일 되는 트랜스파일러입니다. 자바스크립트의 확장된 언어라고 볼 수 있습니다. TypeScript 파일(ts)은 웹 브라우저에서 바로 해석될 수 없습니다. 브라우저에서 해석 가능한 언어인 JavaScript로 변환되어야 브라우저는 이를 인식하고 해석할 수 있습니다. 즉, TypeScript를 JavaScript로 변환해야 웹 브라우저에서 실행이 가능합니다. 그래서 TypeScript가 JavaScript로 출력 되기에 컴파일러가 아닌, 트렌스파일러(Transpiler)로 불립니다. 그리고 이러한 언어를 메타 언어(Meta Language)라고 부릅니다. 2) 타입스크립트를 사용하는 이유 ..