전체 아티클23 React의 Virtual DOM 목차 · DOM(Document Object Model) · React Virtual DOM · Virtual DOM을 사용하는 이유 DOM (Document Object Model) 웹 페이지나 웹 앱에 있는 HTML 요소들을 구조적으로 표현한 것이다. DOM은 어플리케이션의 전체 UI를 나타내며, 트리 데이터 구조로 표현된다. 여기에는 Web Document에 있는 각 UI 요소에 대한 노드가 포함된다. 웹 개발자가 JavaScript를 통해 콘텐츠를 수정할 수 있기 때문에 매우 유용하다. 또한, 구조화된 형식으로 되어있어 특정 대상을 선택할 수 있고, 모든 코드 작업이 훨씬 쉬워지기 때문에 많은 도움이 된다. React Virtual DOM React에서는 가상 DOM을 사용한다. 이 가상 DOM은.. 2023. 2. 24. 함수 선언식과 함수 표현식의 차이 함수 선언식 (Function Declartion) 함수 명이 정의되어 있고, 별도의 할당 명령이 없는 것 function sum(a, b) { return a + b; } 함수 표현식 (Function Expression) 정의한 function을 별도의 변수에 할당하는 것 const sum = function(a, b) { return a + b; } 함수 선언식과 함수 표현식의 차이 주요 차이점은 호이스팅에서 양상을 나타내는데, 함수 선언식은 함수 전체를 호이스팅 시키고, 정의된 범위의 맨 위로 호이스팅되어 함수 선언 전에 함수를 함수를 사용할 수 있다는 것이다. 함수 표현식은 별도의 변수에 할당을 하게 되는데, 변수는 선언부와 할당부를 나누어 호이스팅 하게 된다. 여기서, 선언부만 호이스팅 하게 .. 2023. 2. 13. 자바스크립트의 클로져(Closure) 개념 클로저란? 클로저란, 자바스크립트의 고유 개념이 아니라 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다. 클로저는 반환된 내부함수가 자신이 선언되었을 때 환경(렉시컬 환경) 스코프를 기억하여, 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수를 뜻한다. 렉시컬 환경 : 내부 함수가 선언되었을 때의 스코프 함수와 함수가 선언된 어휘적(Lexical) 환경의 조합 클로저는 함수를 지칭하고 또 그 함수가 선언된 환경과의 관계라는 개념이 합쳐진 것이다. 클로저의 핵심은 스코프를 이용하여, 변수의 접근 범위를 폐쇄하는 것에 있다. 외부함수 스코프에서 내부함수 스코프로 접근 불가능하다. 내부함수에서는 외부함수 스코프에서 선언된 변수에 접근 가능하다. 따라서 내부 함수.. 2023. 2. 12. 자바스크립트가 유동적인 언어인 이유 정적 언어 컴파일 시점에 타입이 결정되는 언어 타입(자료형)을 컴파일 시에 결정하는 언어 C, C++, Java 등은 대표적인 정적 언어 정적 언어는 변수에 들어갈 값의 형태에 따라 자료형을 지정해주어야한다. 컴파일 시에 자료형이 맞지 않는 값이 들어있을 경우 컴파일 에러가 발생한다. 컴파일 시간에 변수의 타입을 체크하므로, 사소한 버그들을 쉽게 체크할 수 있는 장점이 있다. 타입 에러로 인한 문제점을 초기에 발견할 수 있어 타입의 안정성이 올라간다. 동적 언어 런타임 시점에 타입이 결정되는 언어 소스가 빌드될 때 자료형을 결정하는 것이 아니라 실행 시에 결정이 된다. 매번 타입을 써줄 필요가 없기 때문에, 프로그래머가 빠르게 코드를 작성할 수 있다. JavaScript, Ruby, Python 등은 대.. 2023. 2. 12. Promise를 사용한 비동기 통신, Async · Await 비동기 통신의 차이점 Promise와 Async · Await의 차이점 에러 핸들링 측면 Promise를 활용할 시에는 .catch() 문을 통해 에러 핸들링이 가능하다. Async · Await은 에러 핸들링 할 수 있는 기능이 없어 try-catch() 문을 활용해야한다. 코드 가독성 Promise의 .then() 지옥 가능성 (아래 내용에서 예시로 확인이 가능하다) 코드가 길어지면 길어질수록, Async · Await 을 활용한 코드가 가독성이 좋다. Async · Await 은 비동기 코드가 동기 코드처럼 읽히도록 가독성이 좋고, 흐름을 이해하기 쉽게 해준다. 자바스크립트에서 비동기 처리는 왜 필요할까? 자바스크립트는 동기적인 언어이다. 즉, 코드 하나하나가 처리되면서 지연시간이 발생하면 이후의 태스크들은 무아지경으로.. 2023. 2. 12. 취업에 있어 우리가 길잡이로 가져야 할 태도 - 인풋(일일커밋, 블로그, 강연, 컨퍼런스 등등)보단 아웃풋을 보여줘라 (00강의를 들었다 -> 뭘 위해서 이걸 들었고 어디에 이렇게 사용해서 결과가 나왔다.) (00책을 읽었다 -> 읽고나서 어떤 변화가 있었다.) - 회사는 공부잘하는 학생을 뽑는 것이 아니기 때문에 얼마나 노력했다보다 노력의 결과물이 이렇다는 것을 보여주기 - 깃허브, 블로그 등 코드를 보여줄 수 있는 부분을 첨부를 해줘야한다. - 이력서 글에서 나오는 사람의 느낌을 본다.(자기소개, 지원동기 등) - 혼자만의 실력을 보여줄 수 있는 프로젝트 하나는 있으면 좋음. - 태도, 로열티(회사, 팀원, 서비스에 대한 애정…)가 채용에 큰 영향을 끼친다. 2023. 2. 10. 이전 1 2 3 4 다음
