전체 글

전체 글

    [TIL] TDZ
    데브 코스/TIL

    [TIL] TDZ

    TDZ(Temporal Dead Zone): 스코프의 시작 지점부터 초기화 시작 지점까지의 구간. (일시적 사각지대) javascript의 변수는 3가지 단계가 있다. 선 - 초 - 할 선언(Declaration): 변수를 실행 컨텍스트의 변수 객체에 등록하는 단계. 초기화(Initialization): 실행 컨텍스트에 존재 하는 변수 객체에 선언 단계의 변수를 위한 메모리를 만드는 단계. 이 단계에서 할당된 메모리에는 undefined로 초기화 된다. 할당(Assignment): 사용자가 undefined로 초기화된 메모리의 다른 값을 할당하는 단게이다. var 키워드 변수는 변수 선언전에(var 변수명; 을 만나기 전에) 선언 단계와 초기화 단계를 동시에 진행한다. 그래서 변수를 선언하기 전에 호출해..

    화살표 함수
    데브 코스/TIL

    화살표 함수

    ES란, ECMASript의 약자이며 자바스크립트의 표준, 규격을 나타내는 용어이다. ES5는 2009년, ES6는 2015년에 출시 됐다. ES6에서 등장한 화살표 함수에 대해서 알아보자. 함수 표현식을 화살표 함수로 표현할 수도 있다. 화살표 함수가 추가되어 함수를 간결하게 나타낼 수 있게 되어 가독성 및 유지 보수성이 올라갔다. 만약 함수의 본문(body)에 return만 있는 경우 화살표 함수는 return과 {}를 생략할 수 있다. 단, 같이 생략해야한다. return문에서 소괄호는 사용가능하다. 단, 모든 경우에 화살표 함수를 사용할 수 있는것은 아니다. 화살표 함수(함수명 대신 변수명에 함수 코드를 저장하는 구현 방식)는 익명 함수로만 사용할 수 있다. 또는 콜백 함수로 사용할 수 있다. f..

    [React]setInterval
    데브 코스/TIL

    [React]setInterval

    1초마다 1씩 증가하는 autoCounter를 구현해봤다. import { useState, useRef } from "react"; function Counter() { const [count, setCount] = useState(0); const intervalId = useRef(); const handleStart = () => { intervalId.current = setInterval(() => { setCount((count) => count + 1); console.log(count); }, 1000); }; const handleStop = () => { clearInterval(intervalId.current); }; const handleCurrent = () => { conso..

    프로토타입
    데브 코스/TIL

    프로토타입

    자바스크립트는 프로토타입기반 객체지향 언어이다. 클래스 기반 객체지향 언어는 객체 생성 이전에 클래스를 정의하고 이를 통해 객체를 생성한다. 그런 JS는 클래스 없이도 객체를 생성할 수 있다.(ES6에서 클래스가 추가됨.) 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다. 이것은 객체 지향의 상속 개념과 같이 부모의 객체 프로퍼티 또는 메소드를 상속받아 사용할 수 있게한다. 이러한 부모 객체를 프로토타입 객체 || 프로토 타입 이라고 한다. 더보기 자바스크립트의 모든 객체는 [[Prototype]]이라는 인터널 슬롯을 가진다. 이 내부 슬롯 값은 프로토타입의 참조이다. (인터널 슬롯은 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사..

    [회고]노션 클로닝.
    데브 코스/TIL

    [회고]노션 클로닝.

    데브 코스를 진행하면서 첫 번째 개인 프로젝트를 진행하였다. 내용은 notion의 기능들을 비슷하게 구현해 보는 것이었다. 리뷰 반영까지 어느 정도 하고 나서 회고를 작성하고 싶어서 오래 걸린 것 같다. 아 처음엔 쉬울줄 알았지~~ 😁 아예 처음부터 진행하는 것은 아니었고 여태까지 들었던 강의의 내용을 바탕으로 진행할 수 있었다. 강의의 내용을 바탕으로 요구사항들을 구현할 수 있겠다고 판단했기 때문에 프로젝트 시작 전, 계획 단계에서는 프로젝트가 어렵지 않을 것이라고 생각했다. 누구나 그럴싸한 계획을 갖고 있다.. 처맞기 전까지는.. 가장 어려울 것이라고 예상됐던 문제는 화면 좌측에 문서 리스트를 구현하는 것이었다. 태그 안에 태그를 넣는 구조로 만들고 싶었는데 이것을 API fetch를 통해서 내려받은..

    [TIL]선언형 프로그래밍.
    데브 코스/TIL

    [TIL]선언형 프로그래밍.

    배운 내용 명령형 프로그래밍 컴퓨터가 수행할 명령을 순서대로 써 놓은 것이다. "어떻게" 구현하는가를 디테일하게 기술하는 것에 관점이 가있다. 선언형 프로그래밍 "무엇"에 집중하고 나머지는 컴퓨터에게 맡긴다. 무엇을 표현하고 싶은지 알기 편하고 확장성이 좋기 때문에 선언형을 지향하는 측면이 있다. 고차 함수를 사용할 때 단계별로 끊어서 생각해보자. 컴포넌트 기능이나 동작을 한데 묶어서 다른 함수들에 의존하지 않도록 구현해보자. 컴포넌트를 조작할때 컴포넌트의 상태를 정의해서 사용하자. 고차 함수, 컴포넌트를 구성하면서 이들의 파이프 라인에 대해서 익숙해지고 이해도를 높여야 한다. 보충 해야할 내용들 실제로 기능을 구현할 때 컴포넌트 단위로 분리해서 구성하는 연습을 해보자. React처럼 vanilla js..

    [TIL]Day9
    데브 코스/TIL

    [TIL]Day9

    배운 내용 this는 함수를 선언 할 때가 아니라 함수가 실행되는 시점에 결정되는게 일반적이다. new 키워드를 사용하면 this는 새로 생긴 객체를 가리킨다. 빈 객체 생성 및 this 바인딩. 이후 생성자 함수 내에서 사용되는 this는 이 빈 객체를 가리킨다. this를 통한 프로퍼티 생성 생성된 객체 반환 객체 리터럴 방식의 경우, 생성된 객체의 프로토타입 객체는 Object.prototype이다. 생성자 함수 방식의 경우, 생성된 객체의 프로토타입 객체는 객체이름.prototype이다. this외에도 apply, call, bind를 사용할 수 있다. 내부 함수는 일반 함수, 메소드, 콜백함수 어디서 선언되었든 관계없이 this는 전역객체를 바인딩한다. 메소드의 내부의 this는 해당 메소드를 ..

    [JS][프로그래머스]배달
    Algorithm/Programmers

    [JS][프로그래머스]배달

    문제 번호 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 알고리즘 분류 다익스트라 문제 풀이 문제를 읽어보면 1번 마을에서 다른 마을까지의 최소 경로를 알면 문제를 해결 할 수 있다는 것을 알 수 있다. 이것은 '한 정점에서 다른 모든 정점까지의 최소거리'를 구하는 다익스트라 알고리즘을 떠올리게 만든다. 다익스트라 알고리즘으로 1번 마을에서 다른 마을까지의 거리를 구하고 그 거리가 K이하가 되는 마을들을 모두 고르면 된다. 다익스트라를 사용하기 위해서 최소힙을 구현하자 class Node{ constructor(node, dist){ this.node =..

티스토리툴바