Dev Diary 💻

Intro안녕하세요. 이번 시간에는 타입스크립트 유틸리티 타입인 Omit에 대해 알아보겠습니다. 참고로 유틸리티 타입 (Utility Types)은 TypeScript에서 기존 타입을 변형하거나 확장하여 새로운 타입을 쉽게 생성할 수 있도록 도와주는 내장 타입들입니다. TypeScript는 강력한 타입 시스템을 제공하는 동시에, 복잡한 타입 정의를 단순화하기 위해 여러 가지 유틸리티 타입을 제공합니다. 이 타입들은 특정한 작업(예: 선택적 필드로 변환, 특정 속성 제거 등)을 수행하기 위한 미리 정의된 템플릿처럼 작동합니다. Omit 기본 문법Omit은 TypeScript에서 제공하는 유틸리티 타입 중 하나로, 특정 객체 타입에서 지정된 키를 제거한 새로운 타입을 생성하는 데 사용됩니다. 이 유틸리티 타..

Intro안녕하세요:) 이번 시간에는 코틀린 Mono, Flux 에 대해 알아보도록 하겠습니다. 요즘 다시 코틀린을 하고 있는데 그새 개념을 잊어먹어 다시 공부가 필요할 것 같아요! 😭 코틀린 Mono, Fluxkotlin에서 Mono, Flux는 Reactor 라이브러리에서 제공하는 비동기 스트림을 표현하는 타입입니다. 이들은 비동기 프로그래밍을 지원하기 위해 만들어졌으며, Reactive Streams 표준을 따릅니다. Reactor 라이브러리는 자바 기반의 리액티브 프로그래밍(비동기 스트림 처리)를 위한 라이브러리입니다. Spring WebFlux와 같은 비동기 웹 애플리케이션에서 주로 사용됩니다. Spring WebFlux는 Spring Framework에서 제공하는 비동기 및 논블로킹 웹 애플..

이 글은 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

Intro안녕하세요. select element 에서 dropdown icon 바꾸는 방법에 대해 알아보도록 하겠습니다 :)  How to solve problem Option 1 Option 2 Option 3/* Hide the default dropdown arrow */.custom-select { appearance: none; /* For Firefox */ -webkit-appearance: none; /* For Chrome, Safari, Opera */ -moz-appearance: none; /* For Firefox */ background-image: url('custom-dropdown-icon.png'); /* Custom arrow icon */ backgrou..

이 글은 원글을 참고하여 정리한 내용입니다. Definition TypeScript Generics는 재사용 가능한 구성요소를 생성하는 방법을 제공하는 도구입니다. generics는 프로그램이 장기적으로 확장가능할 뿐만 아니라 유연할 수 있도록 보장해줍니다. Example # Props interface Props { renderItem: (item: T) => React.ReactNode; keyExtractor: (item: T) => string; data: T[]; } data: 제네릭 타입 T를 받을 배열 요소 renderItem: 타입 T의 react 요소를 반환하는 함수 keyExtractor: 키를 추출하는 함수 # Component 정의 const GenericList = ({ data,..

Intro 안녕하세요. 이번 새로 프로젝트를 시작하면서 yarn 에서 yarn berry를 도입하기로 결정했습니다. 이번시간에는 Yarn Berry에 대해 알아보도록 하겠습니다. What is yarn berry? Yarn Berry는 JS 패키지 매니저인 Yarn의 다음 버전입니다. yarn version 2부터 yarn berry라고 부릅니다. What is the difference between yarn and yarn berry? 가장 달라진 점은 Plug'n'Play (PnP) 시스템이라고 할 수 있습니다. PnP 시스템은 node_modules 폴더를 사용하지 않고, 패키지의 종속성을 프로젝트의 단일 디렉토리 트리에 직접 설치합니다. 일반적으로 npm 이나 yarn version 1을 사용할..

이 글은 udemy의 Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS 강좌를 바탕으로 정리한 내용입니다 1. 환영 pass 2. TypeScript란 무엇이며 왜 사용해야 하는가? 타입스크립트는 자바스크립트의 superset 입니다. 새로 만들어진 언어가 아닌 자바스크립트 언어를 사용해 새로운 기능과 장점을 추가하는 언어입니다. 코드를 실행하여 타입스크립트 코드를 JS로 컴파일하는 강력한 컴파일러입니다. 타입을 추가하여 브라우저 런타임에서 에러가 발생하기 전에 코드의 에러를 미리 확인할 수 있습니다. 개발 중 런타임 에러로 발생하는 에러를 초기에 수정할 수 있습니다. 단점) 브라우저와 같은 자바스크립트 환경에서 실행할 수 없습니다. node.js도 마찬가지입니다. 3..

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