Dev Diary 💻

이 글은 udemy의 The Web Developer Bootcamp 2024 강좌를 바탕으로 정리한 내용입니다. 19. 섹션주제skip 20. HTML 개요HTML은 웹 페이지의 명사 같은 것으로 콘텐츠의 구조를 규정하는 것입니다.It’s just about marking up a documentHTML은 웹 펭이지라는 문서에 마크업을 하기 위한 언어 또는 구문입니다.  21. 우리의 첫 HTML Pageskip 22. Tip 모질라 개발자 네트워크 https://developer.mozilla.org/ko/docs/Web/HTMLMDN Web Docs(Mozilla Developer Network Web Docs)는 웹 개발자들이 HTML, CSS, JavaScript 및 웹 기술과 관련된 정보를 얻..

이 글은 udemy의 The Web Developer Bootcamp 2024 강좌를 바탕으로 정리한 내용입니다.11. 섹션 주제skip 12. 5분 뒤의 인터넷인터넷은 네트워크의 네트워크입니다. 서로 통신할 수 있는 수많은 기기들이며, 인터넷은 모든 것을 가능하게 하는 인프라입니다. 인터넷이 연결된 컴퓨터들의 묶음 13.웹이란? 웹은 인터넷을 통해 리소스를 공유하게 하는 정보 시스템입니다. 웹의 실제 작동 방식으로 정보 전송 방식에는 HTTP (Hypertext Transfer Protocol)이 사용됩니다. 웹이 작동하는 방식 커뮤니케이션 방식 리소스나 웹 페이지를 요청하고 공유하는 방식의 기반입니다. TCP, IP 등 다른 프로토콜도 있습니다. 14.요청/응답 주기skip 15. 프런트 엔드(Fro..

이 글은 udemy의 The Web Developer Bootcamp 2024 강좌를 바탕으로 정리한 내용입니다 1. 환영 인사skip 2. 커뮤니티 채팅 및 그룹 참여 방법skip 3. 커리큘럼 소개skip 4. 최종 업데이트 일자에 관하여 skip 5. 코스 업데이트 내역https://plum-poppy-0ea.notion.site/Web-Developer-Bootcamp-ChangeLog-45e3eab6be724c5f9a4b83c01044e126 6. 제가 개발자가 될 수 있을까요? skip 7. 코드와 슬라이드skip 8. 대화영 코딩 연습 및 관련팁skip 9. 코드스 코딩 실습 솔루션skip 10. 구버전 강의 구독자들이 새 강의를 보는 법skip

Problem Description 영어 대소문자로 이루어진 문자열 my_string이 매개변수로 주어질 때, my_string을 모두 소문자로 바꾸고 알파벳 순서대로 정렬한 문자열을 return 하도록 solution 함수를 완성해보세요. Restrictions. 0

Problem Description 머쓱이는 직육면체 모양의 상자를 하나 가지고 있는데 이 상자에 정육면체 모양의 주사위를 최대한 많이 채우고 싶습니다. 상자의 가로, 세로, 높이가 저장되어있는 배열 box와 주사위 모서리의 길이 정수 n이 매개변수로 주어졌을 때, 상자에 들어갈 수 있는 주사위의 최대 개수를 return 하도록 solution 함수를 완성해주세요. Restrictions. box의 길이는 3입니다. box[0] = 상자의 가로 길이 box[1] = 상자의 세로 길이 box[2] = 상자의 높이 길이 Input/Output Example 입출력 예 #1 상자의 크기가 가로 1, 세로 1, 높이 1이므로 모서리의 길이가 1인 주사위는 1개 들어갈 수 있습니다. 입출력 예 #2 상자의 크기가..

Problem Description 각에서 0도 초과 90도 미만은 예각, 90도는 직각, 90도 초과 180도 미만은 둔각 180도는 평각으로 분류합니다. 각 angle이 매개변수로 주어질 때 예각일 때 1, 직각일 때 2, 둔각일 때 3, 평각일 때 4를 return하도록 solution 함수를 완성해주세요. Restrictions 0 angle이 0보다 크고 90보다 작은 경우에 조건이 참이 됨 Another solutions function solution(angle) { return [0, 90, 91, 180].filter(x => angle>=x).length; } function solution(angle) { return angle < 90 ? 1 : angle === 90 ? 2 : a..

Intro 안녕하세요. 이번 시간에는 Chart.js에서 Y축 최대값을 동적으로 설정하는 방법에 대해 알아보도록 하겠습니다. Case 우선 Chart 컴포넌트를 활용하는 부분은 아래와 같습니다. option에 따라 표시하는 데이터를 다르게 retrun 하고 있습니다. 데이터가 동적으로 달라지다 보니 y축 범위 최대값도 해당 datasets에 맞게 다르게 표시해야 했습니다. const getData = (option: string): ChartData['datasets'] => { if (option === 'hourly') { return [ { fill: false, ..., data: [0, 150, 180, 270, 210, 160, 160, 202, 265, 210, 270, 255, 290, 3..

16.1 내부 슬롯과 내부 메서드 내부 슬롯 (internal slot)과 내부 메서드 (internal method)는 JS 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티 pseudo property와 의사 메서드 pseudo method 입니다. 모든 객체는 [[Prototype]] 이라는 내부 슬롯을 갖습니다. 내부 슬롯은 JS 엔진의 내부 로직이므로 원칙적으로 직접 접근할 수 없지만 __proto__를 통해 간접 접근이 가능합니다. 16.2 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 Js 엔진은 프로퍼티를 생성할 때 프로퍼티의 어트리뷰트를 기본값으로 자동 정의합니다. 프로퍼티의 상태란 값 (value), 값의 갱신 가능 여부 (writable), 열거..

14.1 변수의 생명주기 14.1.1 지역 변수의 생명주기 지역 변수의 생명 주기는 함수의 생명 주기와 일치합니다. function foo() { var x = 'local' // 변수 x 생성, 변수 x에 값 할당 console.loog(x) return x // 변수 소멸 } foo(); console.log(x); // x is not defined 호이스팅은 스코프를 단위로 동작합니다. 호이스팅은 변수 선언이 스코프이 선두로 끌어 올려진 것처럼 동작하는 JS 고유의 특징을 말합니다. 14.1.2 전역 변수의 생명 주기 함수와 달리 전역 코드는 명시적인 호출 없이 실행됩니다. var 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 됩니다. 이는 전역 변수의 생명 주기가 전역 객체의 생명 주기와 ..

Intro 안녕하세요. 모바일 네비게이션 메뉴에서 스크롤 이동을 표현해야 했습니다. 여러 방법이 있겠지만 저는 특정 요소 위치로 스크롤 이동할 수 있는 scrollIntoView 함수를 사용했습니다. Syntax scrollIntoView() scrollIntoView(alignToTop) scrollIntoView(scrollIntoViewOptions) alignToTop - true : aligned to the top 상단 기준 스크롤 이동 | scrollIntoViewOptions: {block: "start", inline: "nearest"} - false : aligned to the bottom 하단 기준 스크롤 이동 | scrollIntoViewOptions: {block: "end",..