TIL 40

타입스크립트의 객체

⛳️ 객체란? 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

[유데미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 함수를 사용..

[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 미디어쿼리란?

🍐 미디어쿼리란? CSS를 공부하다보면 미디어쿼리에 대해 자연스레 알게된다. 미디어 쿼리는 반응형 웹 디자인의 핵심 부분이다. 뷰포트의 크기에 따라 서로 다른 레이아웃을 생성할 수 있기 때문이다. 보통 스크린 사이즈를 조건으로 많이 사용하며, 특정 스타일이 인쇄된 문서 또는 화면 판독기에서만 사용되도록 할 수 도 있다. 🍐 미디어쿼리 기본문법 미디어 쿼리 기본문법은 아래와 같다. css 코드와 함께 작성하며, 사이즈조건 부분에는 'max-width: 1024px'과 같은 조건을 넣어주면 된다. 또한 all / screen / print / speech 네 가지 미디어 유형을 지정해 줄 수 있다. @media screen and (사이즈조건) { body { background-color: green; }..

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

💌 HTML, CSS, JS를 사용해서 프로필 만드는 과제를 부여 받았다. 자기 PR의 시대인데(?) 나는 나에 대해 설명하는게 어렵고, 어필하는건 더 어렵다.. 프로필에 어떤 내용을 써야하지? 고민을 많이 했는데 그럼에도 불구하고 매우 축약 되어 있는 내 프로필..😳 최대한 깔끔한 레이아웃으로 작업하려고 했고, 블로그/ 깃허브도 HTML 태그를 이용해서 연동 시켰다. CSS 효과도 나름 넣으려고 사진을 확대하는 transform/ transition 도 사용하였다. JS는 딱히 어디에 사용할 곳이 없어서 패스함..  추후에는 프로젝트도 추가하고 더 다채로운 나의 프로필이 되기를 바라며.. 본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.