일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- JS
- 딥다이브
- BOJ
- 완전탐색
- sort
- 기술면접
- JavaScript
- CSS
- 코테
- hash
- state
- 합병 정렬
- Node
- react
- 코딩테스트
- useState
- 리액트
- 정규표현식
- 연결리스트
- 백준
- 자료구조
- 정렬
- 병합 정렬
- 프로그래머스
- 브루트포스
- 해시
- 최소공배수
- 알고리즘
- node.js
- 자바스크립트
- Today
- Total
목록Programming (20)
가치투자자
State와 Props * 기술면접 질문은 맨 아래에 적혀 있습니다 웹 브라우저에서 데이터가 변경되었을 때 어떻게 반영될까? 자바스크립트에서는 DOM에 직접 접근하여 데이터 변경사항을 반영한다. 아래의 예시 코드를 보면, 버튼을 클릭해 카운트가 증가할 때마다 아이디가 count-text인 DOM 요소에 접근해 텍스트를 변경해준다. let count = 0; function handleClick() { count = count +1; rerendering(); } function rerendering() { const cntText = document.querySelector('#count-text'); cntText.innerText = `Count : ${count}`; } 그러나 count 데이터가 ..
React란? * 기술면접 질문은 맨 아래에 적혀 있습니다 JavaScript만으로 큰 어플리케이션을 만들 수 있게 되면서 프론트엔드 사이드에서 돌아가는 어플리케이션 구조를 관리하기 위해 다양한 프레임워크들이 등장했다. 이 프레임워크들은 주로 모델(Model)과 뷰(View)로 구성된 아키텍처를 사용한다. 예를 들어, AngularJS의 경우에는 MVW(Model-View-Whatever) 아키텍처로 어플리케이션을 구조화했다. 여기서 모델은 앱에서 사용하는 데이터를 관리하는 영역이고, 뷰는 사용자에게 보여지는 부분이다. 따라서 데이터가 변경되면 데이터가 반영되는 부분을 찾아 수정해야 한다. 그러나 어플리케이션의 규모가 커지고 구조가 복잡해질수록 이 과정이 결코 쉽지 않다. 그래서 페이스북에서는 오직 뷰(..
position 속성 1. position이란? position 은 레이아웃에서 요소를 어떻게 위치시킬지 결정해주는 프로퍼티(속성)다. 좌표 프로퍼티(top, bottom, left, right)와 함께 사용하여 위치를 정해줄 수 있다. position 속성을 사용하기 위한 문법은 다음과 같다. position: 속성값; 이제 position 속성에서 사용할 수 있는 속성값에 대해 살펴보자. 2-1. static (기본 위치) static 은 position의 기본 속성값으로, position 속성을 사용하지 않았을 때와 같다. html 코드의 순서대로 위에서 아래로, 왼쪽에서 오른쪽 순으로 배치가 된다. 이 속성값은 이미 설정된 position을 무력화히기 위해 사용될 수 있다. 좌표 프로퍼티(top,..
display 속성 브라우저에서 각 요소들을 어떻게 배치할지에 따라 디자인뿐만 아니라 사용성도 달라진다. 사용자들이 자주 찾는 기능들이 눈에 잘 띄는 곳에 깔끔하게 배치되어 있어야 편리하다고 느끼고 그 서비스를 더 자주 쓸 것이기 때문이다. 이와 관련하여 대표적으로 사용되는 css 속성인 display에 대해 살펴보고자 한다. 1. display란? display 는 레이아웃에서 요소들을 어떻게 보여줄지 결정해주는 프로퍼티(속성)다. display 속성을 사용하기 위한 문법은 다음과 같다. display: 속성값; 모든 요소는 기본적으로 display 속성을 가지고 있으며, 각 요소들이 가진 기본 속성값에 따라 배치가 된다. display의 대표적 속성값에는 다음과 같은 것이 있다. block : blo..
동기 vs 비동기 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택 을 가지고 있다. 이는 창구가 하나 뿐이라 한 번에 하나의 함수만 실행할 수 있다는 것을 의미한다. 즉, 자바스크립트 엔진은 한 번에 하나의 태스크(task)만 실행할 수 있는 싱글 스레드(single thread) 방식 으로 동작하므로, 이미 어떤 태스크를 실행 중일 때 다른 일은 블로킹(blocking, 작업 중단)이 된다. 이러한 환경에서 코드를 어떤 방식으로 실행할 지 결정하는 것은 중요하다. 이와 관련된 개념인 동기와 비동기에 대해 살펴보자. * 기술면접 질문은 맨 아래에 적혀 있습니다 1. 동기식 처리 모델 동기식 처리 모델 은 태스크를 순차적으로 실행하는 방식으로, 현재 실행 중인 태스크가 종료될 때까지 다음에 실행될 태스크..
* 기술면접 질문은 맨 아래에 적혀 있습니다 타이머 1. 호출 스케쥴링 일정 시간이 지난 이후에 함수를 호출하도록 하고 싶다. 이때 사용하는 함수가 타이머 함수 이며, 함수를 명시적으로 호출하지 않고 일정 시간이 지난 후에 호출하도록 함수 호출을 예약하는 것을 호출 스케쥴링 (scheduling a call) 이라 한다. 이러한 호출 스케쥴링을 구현하는 타이머 함수에는 setTimeout과 setInterval이 있다. 2. 타이머 함수 1) setTimeout / clearTimeout 먼저, setTimeout 함수 는 특정 시간(delay)이 지난 후에 콜백함수 func를 1번 실행한다. 이때 특정 시간은 ms(1/1000초) 단위로 적어줘야 하며, 적지 않을 경우 기본값으로 0이 할당된다. del..