nika-blog

개발하다보면, 옵션널 체이닝을 사용할 일이 종종 생깁니다. 어느날, 함께 일하는 시니어 개발자분이 아래와 같은 질문을 했습니다.아래 코드 line 10 에서 왜 lint 에러가 안 생기나요? type Price = { localizedPrice: number;};type Subscription = { data: Price;};const targetPlan: Subscription | null = { data: { localizedPrice: 100 } };const price = targetPlan?.data.localizedPrice; // 100 저는 자연스럽게 필수값 뒤에 옵션널 체인닝을 사용하지 않고 있었는데, 이 질문을 통해 누군가에게는 이 부분이 물음표일 수 있겠다고 생각했습니다. 대표적으..

createDocumentFragment template tag element 와 node 의 차이점 children과 childrenNodes의 차이점 offsetTop offsetWidth HTML과 DOM 차이 효율적 DOM 제어 : createDocumentFragment 개념 : DocumentFragment는 기본적으로 DOM과 동일하게 동작하지만, HTML의 DOM 트리에는 영향을 주지 않으며, 메모리에서만 정의됩니다. 왜 필요한가? 예를 들어, 여러개의 li 태그를 가지고 있는 ul 태그를 조건에 따라 추가해야 한다면 기존에는 div 태그등을 만들어서 그 안에 ul 및 li 태그들을 생성, 추가 한두에 조건에 따라 추가해 주었습니다. 이 경우 브라우저에는 보이지 않지만 DOM 트리에 연결되..

이번 포스팅에서는 Canvas에 대해서 대략적인 내용을 공부하고 이를 통해 사각형을 만들어 볼 예정입니다. canvas란? HTML 의 태그로, JS를 이용해서 다양한 그래픽 요소를 만들 수 있다. 사용법? 1. DOM 조작이 필요함으로 id 작성이 필요하다. 2. 크기와 높이 설정 -> 설정하지 않으면 기본 300px*150px 태그 속성 이용 (픽셀만 가능) DOM 설정 (유동적 값 가능) canvas.width = 50vw; canvas.height = 40vh; // 50vw * 40vh 로 설정됩니다. canvas.width = innerWidth; canvas.height = innerHeight; // 화면 크기에 맞춰서 설정해줄 수도 있습니다. 3. 캔버스에 그래픽 작업을 할 수 있는 속성..

DOM의 개념 document 객체의 생성, 조회, 변경 document 객체의 제거 + removeChild 와 remove 비교 + 여러개의 자식 element 지우기 document 객체의 추가 + 이미 존재하는 노드를 추가하면 어떻게 될까? innerHTML과 textContent의 차이 **참고** 대분류 제목 색상 소분류 제목 색상 DOM이란? Document Object Model의 약자로, HTML 요소를 Object처럼 조작할 수 있는 Model 입니다. document 객체 CRUD(Create, Read, Update and Delete) **DOM 에는 HTML에 적용(APPEND) 하는 메소드가 따로 있음 Create : createElement element 생성 웹 페이지 상에..

안녕하세요. 오늘은 프로미스(Promise)에 관한 포스팅 입니다.   콜백지옥을 탈출하기 위해 가장 좋은 방법이죠!먼저 개념을 알아보면 아래와 같습니다.  promisePromise 객체는 비동기 작업이의 완료 또는 실패와 그 결과 값을 나타냅니다.https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise Promise - JavaScript | MDNPromise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다.developer.mozilla.org 코드를 한번 살펴보며 다음과 같습니다.  promise.js'use strict';//promise is a JavaScript ..

안녕하세요. 오늘은 동기와 비동기 코드 작성에 대한 포스팅을 하려고 합니다.  백엔드에서 사용자 데이터 등을 받아올 때, 비동기적 프로그래밍은 꼭 필요한데요 개념부터 살펴볼까요?  1. 동기와 비동기 개념동기 방식 : A작업이 모두 진행 될때까지 B작업은 대기해야한다.비동기 방식 : A작업이 시작하면 동시에 B작업이 실행된다. A작업은 결과값이 나오는대로 출력된다.자바스크립트는 동기적으로 작동합니다. 하지만 비동기적으로 코드를 작성할 수도 있습니다. 바로 콜백함수를 사용하는 것인데요, 여기서는 setTimeOut 함수로 구현할 수 있을 것 같습니다.  setTimeOut.js'use strict';//JavaScript is synchronous.//Execute the code block by orde..

안녕하세요. 오늘은 JSON 에 대해서 포스팅 해보도록 하겠습니다.  프론트엔드와 백엔드가 어떻게 데이터를 주고 받는지에 대한 이야기이기도 합니다.  먼저 필요 개념들을 간략하게 살펴봅시다.  HTTP HTTP는 Hypertext Transfer Protocal의 줄임말으로,W3 상에서 정보를 주고받을 수 있는 프로토콜입니다. 주로 HTML 문서를 주고받는 데에 쓰입니다. https://developer.mozilla.org/ko/docs/Web/HTTP HTTP | MDN하이퍼텍스트 전송 프로토콜(HTTP)은 HTML과 같은 하이퍼미디어 문서를 전송하기위한 애플리케이션 레이어 프로토콜입니다. 웹 브라우저와 웹 서버간의 커뮤니케이션을위해 디자인되었지만, 다developer.mozilla.org AJAXA..

안녕하세요. 오늘은 콘솔에 대한 포스팅을 작성하려고 합니다.    혹시 console.log()외에도 유용한 콘솔이 많다는 것을 알고 계셨나요?모르셨다면 이번 포스팅을 통해 배워나가시면 좋을 것 같습니다.  console.log() 디버깅을 하거나 개발 중 데이터 형태 등을 확인할 때 많이 사용합니다. 하지만 이 밖에도, 다양한 콘솔을 개발 중 유용하게 사용할 수 있습니다.  오류 콘솔 대표적으로 오류의 정도에 따라 다음과 4가지를 사용하면 됩니다.  error.js//log levelconsole.log('log');// 개발 - 출력console.log('info');// 정보console.warn('warn');// 경보console.error('error'); // 주요한 에러위에서부터 오류의 정..

안녕하세요.오늘은 좋은 JS 코드에 대해 고민했던 과정을 포스팅 해 보겠습니다.  첫번째 질문: 조건이 두가지로 주어졌을 때 어떻게 작성해야 할까요? 방법 1 : if ~ else if방법 2 : if ~ else방법 3 : 삼항연산자  정답은 방법 3. 삼항연산자 입니다.  조건이 두가지인 경우, else if 까지 사용할 필요가 없으며if문 대신 삼항 연산자를 쓴다면 더 간결하고 깔끔한 코드가 될 수 있을 것 같습니다.  코드 작성 예시를 들어 보도록 하겠습니다.  ternary-operator.js // Good Codefunction getResult(score) { return scroe > 5 ? good : bad;}두번째 질문 : 변수가 null과 undefined 경우를 어떻게 대비해야 ..

안녕하세요. 오늘은 간단명료한 DOM(Document Object Model) 포스팅입니다.  DOM DOM은 웹 페이지 내 모든 콘텐츠를 객체로 나타낸 것입니다. 간단히 웹페이지 = document 라고 한다면, 이러한 document를 자유자재로 다르기 위해 객채화하여 구체한 개념입니다.  웹 페이지를 객체화한 각 요소는 노드(Node)라고 부르며,  노드 중에서 가장 상위 노드가 document 객체입니다.   Document 객체의 프로퍼티 document 객체를 활용하여 웹페이지의 상태와 모든 HTML 태그에 접근할 수 있으며 웹페이지 정보를 담은 프로퍼티들도 있습니다. 이 포스팅에서는 언급정도만 하고, 필요한 태그는 아래 MDM에서 찾아쓰면 좋을 것 같습니다.  https://developer..