Dev Diary 💻

이 글은 모던 자바스크립트 Deep Dive 바탕으로 정리한 내용입니다. 4.1 변수란 무엇인가? 왜 필요한가? 컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억한다. 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말합니다. 4.2 식별자 변수 이름을 식별자라고도 합니다. 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말합니다. 식별자는 값이 아니라 메모리 주소를 기억하고 있습니다. 즉 메로이 주소에 붙인 이름이라고 할 수 있습니다. 따라서 변수, 함수, 틀래스 등의 이름은 모두 식별자입니다. 4.3 변수 선언 변수를 사용하려면 반드시 선언이 필요합니다. 선언 시에는 var, let, c..

이 글은 모던 자바스크립트 Deep Dive 바탕으로 정리한 내용입니다. 3.1 자바스크립트 실행 환경 자바스크립트를 브라우저 환경에서 실행하는 방법과 Node.js 환경, 그리고 VSCode를 활용해 브라우저나 Node.js 에서 실행하는 방법을 살펴봅시다. 3.2 웹 브라우저 여기서는 크롬 브라우저를 사용하도록 합니다. 3.2.1. 개발자 도구 개발자 도구는 웹 개발에 유용한 다양한 기능을 제공한다. - Elements : 로딩된 웹페이지의 DOM과 CSS를 편집해서 렌더링된 뷰를 확인해 볼 수 있음 - Console : 로딩된 웹 페이지의 에러를 확인하거나 console.log 메서드의 실행 결과 등을 확인할 수 있음 - Sources : 로딩된 웹 페이지의 js 코드를 디버깅 할 수 있음 - Ne..

이 글은 모던 자바스크립트 Deep Dive 바탕으로 정리한 내용입니다. 2.1 자바스크립트의 탄생 자바스크립트는 1996년 3월 넷스케이프 웹 브라우저에 탑재되었고, 이름이 바뀌어 최종적으로 자바스크립트가 되었습니다. 2.2 자바스크립트의 표준화 경쟁으로 인해 브라우저에 따라 웹 페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생하기 시작하면서, 웹패이지를 개발하기 매우 어려워졌습니다. 따라서 표준화된 자바스크립트의 필요성이 대두되고 표준화된 자바스크립트로 선택되었습니다. 2.3 자바스크립트 상징의 역사 렌더링이란? HTML, CSS, JS로 작성된 문서를 해석해서 브라우저에 시각적으로 출력하는 것을 말합니다. 서버에서 데이터를 HTML로 변환해서 브라우저에게 전달하는 과정 (SSR: Ser..

이 글은 모던 자바스크립트 Deep Dive 바탕으로 정리한 내용입니다. 1.1 프로그래밍이란? - 프로그래밍이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션입니다. - 요구사항을 명확히 이해하는 것이 우선되어야 하며 복잡함을 단순하게 분해하고 자료를 정리하고 구분해야 합니다. - 컴퓨팅 사고가 중요합니다. - 수치화 해서 정의하는 능력이 필요합니다. 1.2 프로그래밍 언어 프로그래밍은 프로그래밍 언어를 사용해 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다. 프로그래밍 언어는 구문과 의미의 조합으로 표현됩니다. 1.3 구문과 의미 문법(Syntax)에 맞는 문장을 구성하는 것은 물론 의미(semantics)를 가지고 있어야 언어의 역할을 충실히 수행할 수 있습니다.

Intro 안녕하세요. 이번시간에는 코틀린의 lateinit 에 대해 알아보도록 하겠습니다. lateinit 코틀린에서 "lateinit"는 말 그대로 late + init이 합쳐진 뜻으로 나중 초기화를 의미합니다. 즉 지연 초기화 기능을 제공합니다. Use 일반적으로 클래스나 객체의 프로퍼티를 선언할 때 사용됩니다. 해당 키워드를 사용하면 변수 선언 시 즉시 초기화되지 않고, 나중에 초기화 할 수 있습니다. Condition 변수는 클래스의 멤버 변수일 때만 lateinit를 사용할 수 있습니다. 변수는 non-null 타입이어야 하며, primitive type이나 String 등의 클래스 타입 등이 될 수 있습니다. 변수를 선언할 때 즉시 초기화하지 않아야 합니다. 변수는 초기화되기 전에 사용하면 ..

Intro 안녕하세요. 이번 시간에는 npm과 npx의 차이점에 대해 알아보도록 하겠습니다. next.js 프레임워크에서 이것저것 테스트 해보면서 아래의 명령어를 사용했는데요, npm과 npx의 차이점이 궁금해지더라고요. npx create-next-app@latest --typescript NPM, NPX npm과 npx는 모두 Node.js 패키지 매니저 (NPM)에서 제공하는 도구입니다. NPM npm은 Node.js 패키지를 설치, 관리 및 공유하기 위한 도구입니다. npm을 사용하여 패키지를 설치하고 관리할 수 있습니다. 패키지는 Node.js 애플리케이션 및 라이브러리를 개발하기 위한 모듈들입니다. NPX(execute npm package binaries) npm 패키지를 실행하기 위한 도구..

Intro 안녕하세요. 타입스크립트 사용 중 다음의 에러가 발생했습니다. Error: Redundant double negation. no-extra-boolean-cast {text} Why 위 에러는 ESLint의 no-extra-boolean-cast 규칙으로, 불필요한 불리언 캐스트(불린 값을 강제로 캐스팅하는 것)를 방지하기 위한 규칙입니다. 현재 !!visible와 같은 형태로 불린 값을 강제로 캐스팅하고 하고 있습니다. 이미 불리언 값이 존재하기 때문에 이중 부정 연산자를 사용하여 불리언 값이 될 필요가 없습니다. How to solve 따라서 아래와 같이 이중 부정 연산자를 제거하면 ESLint 에러가 사라집니다. visible 자체를 사용해도 동일한 결과를 얻을 수 있습니다. {text}

Intro 안녕하세요. 타입스크립트 사용 중 다음의 에러가 발생했습니다. Could not find a declaration file for module Why? 이 오류 메시지는 연결된 declaration file 이 없는 타입스크립트 코드 안에 모듈이나 라이브러리를 사용할 때 발생하는 전형적인 오류입니다. declaration file(.d.ts)는 모듈이나 라이브러리의 types, functions 및 기타 속성을 설명하고 타입스크립트가 코드에서 이들을 사용하는 방법을 이해할 수 있도록 합니다. 따라서 설치된 특정 모듈/라이브러리에 대한 type 정의가 없어 타입스크립트에서 이해할 수 없으므로 다음의 오류가 발생한 것입니다. How to solve the problem 이 오류를 해결하기 위해서는..

Intro 안녕하세요. 코틀린 스트링을 코틀린 날짜로 변환하던 도중 아래와 같은 에러가 발생했습니다. import java.math.BigDecimal import java.math.RoundingMode import java.time.LocalDate import java.time.LocalDateTime import java.time.format.DateTimeFormatter import java.util.* fun main(args: Array) { val input = "2301" val formatter = DateTimeFormatter.ofPattern("yyMM", Locale.KOREA) val date = LocalDate.parse(input, formatter).minusYears..

Intro 안녕하세요. 이번 시간에는 CSS에서 긴단어 처리 시 줄바꿈 단어 기준을 정하는 방법에 대해 알아보겠습니다. How to solve the problem 아래의 html이 있다고 가정해봅시다. {item.desc} 처음에 제가 적용한 CSS는 다음과 같습니다. 단어 뒤에 elispsis 처리는 되었지만, 줄바꿈 처리가 제대로 안되고 있었습니다. > p { margin-bottom: 8rem; font-size: 10rem; line-height: 1.3; overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; } 따라서 저는 word-break라는 속성을 이용하여 break-all 로 지정해줬습니..