전체 글 42

타입스크립트의 객체

⛳️ 객체란? JavaScript에서의 객체는 속성과 메서드로 구성되어 있는 데이터 구조입니다. 중괄호 {}를 사용해서 만들며, 속성과 메서드는 각각 '키: 값' 쌍으로 표현됩니다. 아래 코드가 객체를 생성하고 사용하는 아주 간단한 예시입니다! // 객체 생성 let person = { name: "Ho", age: 32, sayHello: function() { console.log("Hello, my name is " + this.name); } }; // 객체 속성 접근 console.log(person.name); // 출력: John console.log(person.age); // 출력: 30 // 객체 메서드 호출 person.sayHello(); 그렇다면 타입스크립트에서는 객체에 어떻게 접..

TIL/TypeScript 2023.12.07

유니온과 리터럴 (Union & Literal)

🏔️ 유니언 (Union) 유니언은 결합, 연합과 같은 뜻을 가지고 있으며 타입스크립트에서의 유니언은 둘 이상의 타입을 허용하는 것을 의미합니다. `|` 기호를 사용해서 여러 타입을 하나로 결합할 수 있습니다. 아래 예시와 같이 'number | string' 타입을 가질 수 있는 변수를 정의하면, 이 변수는 숫자와 문자 모두를 할당할 수 있게 됩니다. let physicist : number | string; physicist = "Marie Curie"; physicist = 86; 값이 유니언 타입일 때 타입스크립트는 유니언으로 선언한 타입에 존재하는 멤버의 속성에만 접근할 수 있습니다. 그 외의 타입에 접근하려고 하면 타입 검사 오류가 발생합니다. physicist는 number | string ..

TIL/TypeScript 2023.12.01

타입 시스템 (Type System)

💡 타입스크립트란? 타입스크립트는 아시다시피(?) 정적 타입을 명시해줄 수 있는 특징을 가지고 있습니다. 변수, 매개변수 및 함수의 타입을 명시적으로 선언할 수 있기 때문에 개발자가 의도한 목적을 더욱 명확하게 전달할 수 있다는 장점이 있습니다. 그렇다면 타입스크립트에서 다루는 '타입'의 종류에는 어떤것들이 있을까요? 💡 타입의 종류 타입 스크립트의 가장 기본적인 타입은 자바스크립트의 일곱 가지 기본 원시타입과 동일합니다. null, undefined, boolean, string, number, bigint, symbol 타입스크립트는 초깃값을 갖고 있는 변수의 타입을 유추할 수 있습니다. 따라서 아래와 같은 변수 선언에는 굳이 타입을 지정해주지 않아도, 타입스크립트가 타입을 string으로 추론하고 ..

TIL/TypeScript 2023.12.01

Browser Rendering Process (브라우저 렌더링 원리)

💟 브라우저 렌더링이란? 우리가 주소창에 https://www.google.com 또는 https://www.naver.com 등 다양한 URL을 검색하면 해당 웹페이지로 접속하는 것이 브라우저 렌더링 입니다. 즉, 브라우저라는 것은 우리가 흔히 이용하는 웹페이지/웹사이트들이고, 실시간으로 웹 브라우저를 화면에 그려내는 과정을 렌더링이라고 합니다. 💟 렌더링 엔진 대부분의 웹 브라우저들을 들여다보면 두 개의 엔진이 있는데, 하나는 렌더링 엔진으로 사용자가 보는 화면을 그려내는 역할을 하고, 하나는자바스크립트 엔진으로 자바스크립트 코드를 읽어서 기능을 작동시키는 역할을 합니다. 이러한 렌더링 엔진들은 브라우저마다 다른데, 우리가 흔히 사용하는 크롬은 블링크 엔진을 사용합니다. 렌더링 엔진은 웹 사이트의 소..

TIL/For Interview 2023.10.22

실행 컨텍스트(execution context)란 무엇인가요?

💟 실행 컨텍스트(Excution Context)란? 실행 컨텍스트는 자바스크립트 코드가 실행되는 환경을 나타내며, 코드가 실행되기 위해 필요한 정보들을 가진 범위를 객체형태로 나타낸 것을 말합니다. 또한 변수와 함수의 접근 가능성, 스코프체인, 'this'값 등을 관리합니다. 함수가 실행되면 함수 실행에 해당되는 '실행 컨텍스트'가 생성되고, 자바스크립트 엔진에 있는 콜스택에 차곡차곡 쌓이게 됩니다. 그리고 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드를 실행하면서(LIFO), 전체 코드의 환경과 순서를 보장하게 됩니다. 💟 꼬리질문 🙋🏻‍♀️ 렉시컬 환경에 대해 설명해주세요 📝 렉시컬 환경은(lexical environment) 자바스크립트에서 변수와 함수가 어디에서 정의되었는지를 기억하는 공간입니다..

TIL/For Interview 2023.08.29

호이스팅(Hoisting)이란?

📍호이스팅(Hoisting)이란? 호이스팅이란 스코프 안에 존재하는 모든 선언들을 해당 스코프의 최상단으로 끌어 올리는 것을 말합니다. 'Hoisting' 단어를 검색해 보면 그 뜻도 '끌어 올리기, 들어 올려 나르기'로 나오듯 호이스팅은 무언가를 끌어 올리는 행위입니다. 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수 값들을 모두 모아서 유효 범위의 최상단에 선언합니다. 즉, 함수 내에서 아래 쪽에 존재하는 내용 중 필요한 겂들을 끌어 올리는 것입니다. 모든 선언은 (fuction, var, let, const, class) 호이스팅 됩니다. var는 선언과 동시에 초기화가 이루어져서 undefined로 할당 되지만, let 및 const 선언은 선언만 될 뿐, 메모리 할당이 아직 되지 않은 ..

TIL/For Interview 2023.08.21

[LMS 프로젝트] 1주차 회고록

📍1주차 드디어 프로젝트 1주차 우리 팀원들은 모두 가까이 살아서 프로젝트 첫째날부터 스터디룸에서 함께 모여 이것저것을 했다(?) 1주차에는 거의 피그마 시안을 습득하고, 협업 툴등에 대해 논의하고, 초기 셋팅을 진행했다. 생각보다 많은 인원들이 함께하게 되어 규모가 커져 버려서 엄청 긴장도 되고, 인프피인 내가(?) 많은 팀원 분들과 잘 어우러져서 잘 해낼 수 있을까 걱정을 많이 했는데 1주차는 나름 순탄하게 흘러간것 같다. 📍 협업툴 결정 및 초기셋팅 처음 프로젝트 시작 때부터 next.js를 쓴다고 하셨기 때문에 미리 공부를 조금 했다. 라우터가 자동으로 되는 부분에서 오...'-' 해볼만한걸요? 라고 생각했지만 뒤로 갈수록 많이 어렵고 어려웠답니다.. 그리고 Git hooks library인 hu..

회고록 2023.07.20

[MongoDB] bad auth: Authentication failed

📍bad auth: Authentication failed Next.js 강의를 듣다가 MongoDB 를 처음 접해 보았다. 모든 것을 강의 그대로 따라 썼을 뿐인데.. 에러를 마주하였다. 왜 때문일까 MongoServerError: bad auth : authentication failed at MessageStream.emit (node:events:513:28) 이런 에러가 떴는데 보시다시피(?) 몽고DB의 에러이고, 지피티에게 물어보니 친절하게 몽고DB에 대한 인증이 실패해서라고 알려주었다. 이 오류는 주로 잘못된 사용자 이름, 비밀번호 또는 인증 데이터베이스를 사용하여 연결하려고 할 때 발생한다고 한다. 사용자 이름과 비밀번호를 확인해야하고, 인증 데이터베이스를 확인해야하고, 몽고DB 버전 확인..

트러블슈팅 2023.07.14

[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - momentum 만들기2

🧚🏻‍♀️ vanilla JS로 momentum 만들기를 완성했다. 새로 추가한 기능은 아래 세가지이다. 날씨 API 가져와서 추가하기 할 일 목록 추가하기 할 일 목록 지우기 🧚🏻‍♀️ 날씨 API 추가하기 open API로 날씨 정보를 가져와서 추가해 주었다. API는 공식문서만 잘 따라하면 가지고 올 수 있는데, 공식문서 따라하는게 어렵다(나만 그런걸까..?) VS code의 live server로 작동 시켰는데, 내 위치 정보를 가지고 오지 못해서 구글링을 해보았다. 서버가 실행되지 않을 경우에 VScode Live Server settings에서 Use Local Ip as host를 체크로 변경하면 된다! 설정을 변경하니 날씨도 화면에 제대로 구현되었다. 😝 🧚🏻‍♀️ 할 일 목록 추가하기 이..

[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - momentum 만들기

🎒 vanilla JS로 momentum 만들기! 이번주 과제였다. 랜덤으로 이미지를 변경 시켜주고, 실시간 시계를 띄워준다.(초단위로 시간이 변경되도록 구현할 것) 그리고 내 이름을 입력하면 'Hello, ㅇㅇㅇ!' 이렇게 입력된 이름 값을 가져와서 인사를 시키는 것(?) 전체적인 디자인은 시중에 나와있는(?) momentum과 흡사하게 구사했다. 추후 하단에 todo list를 추가해야 하고, 날씨 api도 불러와야 한다. 🎒 배경화면 랜덤 변경/ 시간 띄우는 것은 어렵지 않게 했는데, 이름을 입력 받고, 그 값을 인사와 함께 화면에 띄워줄 때 오류가 생겼다. 제대로 뜨긴 하는데 약 1~2초 후에 초기화가 되고 사라진다는 것.. 왜때문일까? 배경을 랜덤으로 변경할 때 setInterval 함수를 사용..