분류 전체보기

[알고리즘 테스트 대비] 사분면 고르기

문제 두줄의 입값 각 X, Y 값을 구분해 어느 사분면에 속하는지 출력한다. 단 입력값이(5,12)일시 제 1사분면에 속한다. 그러므로 1을 출력한다. 풀이법 먼저 X값이 음인지 양수인지 구분한 뒤 Y값이 음수인지 양수인지를 판단하여 해당 사분면을 출력한다. 코드 // readline 모듈 const readline = require('readline'); const rl = readline.createInterface({ input: process.stdin, output: process.stdout }); let input = []; rl.on('line', function (line) { input.push(parseInt(line)); }).on('close', function () { const..

[React] Virtual DOM 이란?

Virtual DOM이란? Virtual DOM은 말 그대로 가상 돔이다. 그런데, 가상 돔이 필요한 이유는 무엇일까? 이를 이해하기 위해서는 브라우저의 작동 방식에 대해 알아볼 필요가 있다. 브라우저 작동 방식 "브라우저 엔진" 과 "렌더링 엔진"은 무었일까? 그림에서 알 수 있듯이 브라우저 엔진은 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어해주는 엔진이다. 렌더링 엔진은 HTML documents와 웹 페이지의 리소스들을 브라우저에 시각적으로 출력해준다. 브라우저가 화면에 그리는 과정 요청과 응답 만약 브라우저에서 어떠한 링크를 누르거나 URL에 주소를 입력하고 엔터를 누르면 그 페이지 안에서 HTML요청이 이루어지고 해당 서버에서 HTML document를 응답으로 준다. HTML 파싱과 D..

[Javscript] 구조분해할당 활용하기

자바스크립트에서 가장 유용하고 많이 쓰이는 문법이라 하면 구조 분해할당을 뺴놓을 수 없다. 구조 분해 할당은 문법은 배열혹은 객체에서 각각 값(value) 이나 프로퍼티(property) 를 분해해 손쉽게 별도에 변수에 담을 수 있도록 해준다. 배열(array) 에서의 구조 분해 할당 let [a,b] = [10,20]; console.log(a); // 10 console.log(b); // 20 구조 분해 할당이라고 해서 특별한 문법적 형태가 다른것이 아닌, 할당받을 변수를 왼쪽에, 분할할 대상을 오른쪽에 해서 대입하는 형식으로 작성하면 된다. 배열 [10,20] 이 분해되어 각각 a,b에 담긴 것이다. 물론 아래와 같이 미리 저장해둔 배열로 부터 구조 분해 할당을 하는 형태도 당연히 가능하다. le..

[웹개념] 웹 브라우적의 작동원리

주소창에 https://www.naver.com 혹은 https://www.youtube.com등 다양한 URL을 검색하여 해당 웹 페이지에 접속한 경험이 있을 것이다. 그렇다면 어떤 동작 원리로 우리가 입력한 웹 페이지로 접속이 가능한 것 일까? 이번 포스팅에서는 주소 창에 URL 혹은 도메인을 입력했을 때 어떤 과정을 거쳐서 웹 페이지가 보이는 가를 알아보자. 1.브라우저란? 웹 브라우저는 동기(Synchronous) 적으로 HTML+CSS+Javascript 언어를 해석하여 내용을 화면에 보여주는 응용 소프트웨어 이다. 동기 적인 이유는 ? script 태그를 body 태그 하단에 위치시키는 아이디어에서 찾을 수 있다. HTML 요소들이 script 로딩 지연으로 인해 렌더링에 지장 받는 일이 발생..

[HTTP] HTTP 상태코드

HTTP 상태코드란? HTTP 상태코드는 클라이언트가 보낸 HTTP(Hypertext Transfer Protocol) 요청에 대한 서버의 응답 코드로, 상태 코드에 따라 요청의 성공/실패 여부를 판단한다. HTTP 상태 코드의 분류 상태 코드의 첫 번째 숫자에 따라 크게 5가지로 분류된다. 1xx : Informational 2xx : Success 3xx : Redirection 4xx : Client Error 5xx : Server Error HTTP 상태 코드 상세 자주 사용되는 HTTP 상태 코드를 정리해보았다 HTTP 상태코드는 크게보면 100 ~ 599 까지 다양한 상태코드가 존재한다. 여기서 중요할 만한 상태코드를 짜집어서 소개해 보겠다. 1XX : 조건부 응답 Request receiv..

[Javascript] Scope(스코프) 란?

스코프(Scope) 란? 스코프는 참조 대상 식별자(identifier: 변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분해 식별할 수 있는 유일한 이름) 을 찾아내기 위한 규칙이다. 자바스크립트는 이 규칙대로 식별자를 찾는다. 기본적으로 프로그래밍에서는 변수를 선언하고 값을 할당하며 변수를 참조할 수 있는 기능을 제공하게 되고 이를 토대로 프로그램의 상태를 관리할 수 있다. 전역 변수 혹은 코드 블록 (if, while, for, try/catch 등) 함수 내에 선언하여 변수는 중첩될 수 있고, 자신이 어느곳에서 선언되었는지에 따라서 코드가 자신을 참조할 수 있는 범위를 갖게 된다. 스코프(Scope)의 구분 자바스크립트에서는 총 2가지로 나누어져 있다. 전역 스코프 (Global Scope)..

[Javascript] 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy) 차이

깊은 복사와 얕은 복사에 대해 알아보자. 얕은 복사 (shallow copy) 얕은 복사는 참조(주소)값의 복사를 나타낸다. const obj = { value: 1 } const newobj = obj; newObj.value = 2; console.log(obj.value); //2 console.log(obj === newObj); // true obj객체를 새로운 newObj 객체에 할당하였으며 이를 참조 할당이라 불른다. 복사 후 newObj객체에 value값을 변경하니 기존의 obj.value 값도 같이 변경된 것을 알 수 있다. 두 객체를 모두 비교해도 true로 나온다. 이렇게 자바스크립트의 참조 타입은 얕은 복사가 된다고 볼 수 있으며, 이는 데이터가 그대로 생성되는 것이 아닌 해당 데이..

[Javascript] 호이스팅 이란?

호이스팅 이란? 호이스팅은 코드를 실행하기전 변수선언/함수선언을 해당 스코프의 최상단으로 끌어올리는 것이 아닙니다. 호이스팅은 코드를 실행하기전 변수선언/함수선언을 해당 스코프의 최상단으로 끌어올려진 것 같은 현상을 말합니다. 자바스크립트 엔진은 코드를 실행하기 전 실행 가능한 코드를 형상화 하고 구분하는 과정(실행 전 컨텍스트를 위한 과정)을 거친다. 자바스크립트 엔진은 코드를 실행하기 전 실행 컨텍스트를 위한 모든 선언(var,int,const,function,class)를 스코프에 등록한다. 코드실행 전 이미 변수선언/함수선언이 저장되어 있기에 선언문보다 참조/호출이 먼저 나와도 오류없이 작동한다. 실행 컨텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경을 의미하고 실행되기전 이러한 실행 컨텍..

[Javscript] 원시 자료형, 참조 자료형

원시 자료형과 참조 자료형 1.원시 자료형 원시자료형은 고정된 저장 공간을 차지하는 데이터를 모두 원시 타입(primitive type) 데이터라고 한다. 원시 타입 테이터 객체가 아니면서 method를 가지지 않는 6가지 타입(string, number, bigint, boolean, undefined, symbol,null) 원시 자료현 모두 하나의 데이터만을 담고 있다. 예시 const num = 123 const arr = [1,2,3,4,5]; let bye = "good bye!" 위 예시를 보면, 데이터의 크기와 관계 없이 하나의 변수에는 하나의 데이터만을 담을 수 있다. 원시 자료형은 값 자체에 대한 변경이 불가능(immutable)하지만, 변수에 다른 데이터를 할당할 수는 있다. 2.참조..

[React] React 조건부 렌더링

React 조건부 렌더링 이란? 조건부 렌더링은, 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 의미한다. React에서 원하는 동작을 수행하는 캡슐화된 별개의 컴포넌트를 생성할 수 있다. 또한 State에 의존하여 그 중 일부만 렌더링 시키는 것도 가능하다. 크게 3가지 방법으로 나눠 소개할 수 있다. if-else 조건문 논리 연산자 && 조건부 연산자 1. if - else 조건문 사용자가 로그인 하는 여부에 따라서 또는 컴포넌트를 표현하는 예시이다. function Gretting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { // 로그인 상태라면 return ; } return ; } ReactDOM.render( // Tr..

[Javscript] Tagged Template Literal

1. Template Literal 이란? 템플릿 리터럴은 ' ` '(grave accent)로 감싸진 문자열 리터럴로서 여러 줄로 이뤄진 문자열과 문자 보간 기능을 표현할 수 있다. 일반적으로 JS에서 스트링을 표현하고자 한다면 주로 (') 문자나 (") 문자를 사용한다. 이것을 Single/Double quotation (싱글 쿼테이션 / 더블 쿼테이션) 이라고 부른다. 하지만 템플릿 리터럴은 똑같은 스트링을 표현하지만 grave accent(억음 부호) 라고 부르는 ( ` ) 문자로 감싸진 String을 사용한다. 그럼 이 둘 중에 어떤 것이 차이가 날까? 1-1. 줄 바꿈 표현 첫번째 로 줄 바꿈을 조금 더 편하게 표현해 줄 수 있다. 일반적으로 String에서 줄 바꿈을 표현할 때 이런식으로 '..

[Javascript] 모듈 export, import

리액트를 사용하다보면 import & export는 가장 필수적으로 알아야할 문법이다. 하지만 이런 문법들을 처음사용해보면 많이 어색할 수 있어 내용을 정리해보았다. 1.모듈이란? 모듈은 마치 레고의 한조각이다. 리액트가 제일 최적화된 프로그램으로 인식되는 것이 바로 컴포넌트를 하나하나 각각 관리할 수 있기 때문이다. 과거 Vanila Javascript(바닐라 자바스크립트)로 처음 자바스크립트를 접했을때를 생각해보면, script.js하나로 수 많은 html 파일의 스크립트 로직을 짯던 기억이 있을 텐데 어떻게 연결 돼어 있는지 읽기조차 힘든 긴 script.js하나로 여러개 모듈로 연결해 쪼개고, 해당 스크립트에 적용하는 jsx도 따로 분리해 가독성도 유지보수도 편리해진 것이다. js파 하나하나가 모..