[Javascript] Generator
Generator제너레이터 는 여러 개의 값을 필요에 따라 하나씩 반환(yield)할 수 있는 함수이다. 일반 함수는 하나 또는 0개의 값만을 반환할 수 있다는 것이 둘의 차이점이다. 실행되는 순서에 따라 동적으로 값을 반환한다는 것이 핵심이다. 사용법제너레이터 함수 생성하기제너레이터 함수는 * 키워드를 사용해 생성한다. 12345function* gen() { yield 1; yield 2; yield 3;} 일반적인 함수와 굉장히 유사하게 생겼지만 동작 방식은 매우 다르다. 제너레이터 함수를 호출하면 제너레이터 함수 내부 코드가 실행되는 것이 아니라, 제너레이터 객체가 반환된다. 12345678function* gen() { yield 1; yield 2; yield 3;}let generator = gen();console.log(generator); // Object [Generator]...
ES6 문법
ES6ES5에서 ES6로 넘어오면서 표준안이 생기게 되었고 많은 문법상 변화가 생겼다. 편리한 기능이 많이 추가되었고 최근에 나오는 많은 JS 문서의 코드들이 ES6 문법으로 쓰여진 경우를 많이 봤다. 기업에서도 ES6사용을 선호하고 있기 때문에 달라진 문법들을 잘 알아두는 것이 좋겠다.W3C ES6? ES6 = ECMAScript 6ECMAScript란 Ecma International의 기술 규격에 정의된 표준화된 Script Programming 언어이다. JS를 표준화하기 위해 만들어졌다. 표준안이 새로 만들어질 때 마다 버젼 정보가 뒤에 숫자로 붙는데, 2009년에 만들어진 ES5가 가장 보편적이다. 그리고 2015년 ES6가 나오게 되는데 이때 코드의 효율성을 높여줄 신기술이 굉장히 많이 도입되었다. 문법을 제대로 공부하지 않으면 코드를 읽을 수 없을 정도이다. 오래된 브라우저들은 최신 문법을 지원하지 않는 경우도 있는데, 이럴 경우 babel 같은 사이트를...
[BOJ] 16234. 인구이동
문제 링크 문제N×N크기의 땅이 있고, 땅은 1×1개의 칸으로 나누어져 있다. 각각의 땅에는 나라가 하나씩 존재하며, r행 c열에 있는 나라에는 A[r][c]명이 살고 있다. 인접한 나라 사이에는 국경선이 존재한다. 모든 나라는 1×1 크기이기 때문에, 모든 국경선은 정사각형 형태이다. 오늘부터 인구 이동이 시작되는 날이다. 인구 이동은 다음과 같이 진행되고, 더 이상 아래 방법에 의해 인구 이동이 없을 때까지 지속된다. 국경선을 공유하는 두 나라의 인구 차이가 L명 이상, R명 이하라면, 두 나라가 공유하는 국경선을 오늘 하루동안 연다. 위의 조건에 의해 열어야하는 국경선이 모두 열렸다면, 인구 이동을 시작한다. 국경선이 열려있어 인접한 칸만을 이용해 이동할 수 있으면, 그 나라를 오늘 하루 동안은 연합이라고 한다. 연합을 이루고 있는 각 칸의 인구수는 (연합의 인구수) / (연합을 이루고 있는 칸의 개수)가 된다. 편의상 소수점은 버린다. 연합을 해체하고, 모든 국경선을...
[BOJ] 14888. 연산자 끼워넣기
문제 링크 문제N개의 수로 이루어진 수열 A1, A2, …, AN이 주어진다. 또, 수와 수 사이에 끼워넣을 수 있는 N-1개의 연산자가 주어진다. 연산자는 덧셈(+), 뺄셈(-), 곱셈(×), 나눗셈(÷)으로만 이루어져 있다. 우리는 수와 수 사이에 연산자를 하나씩 넣어서, 수식을 하나 만들 수 있다. 이때, 주어진 수의 순서를 바꾸면 안 된다. 예를 들어, 6개의 수로 이루어진 수열이 1, 2, 3, 4, 5, 6이고, 주어진 연산자가 덧셈(+) 2개, 뺄셈(-) 1개, 곱셈(×) 1개, 나눗셈(÷) 1개인 경우에는 총 60가지의 식을 만들 수 있다. 예를 들어, 아래와 같은 식을 만들 수 있다. 1+2+3-4×5÷6 1÷2+3+4-5×6 1+2÷3×4-5+6 1÷2×3-4+5+6 식의 계산은 연산자 우선 순위를 무시하고 앞에서부터 진행해야 한다. 또, 나눗셈은 정수 나눗셈으로 몫만 취한다. 음수를 양수로 나눌 때는 C++14의 기준을 따른다. 즉, 양수로 바꾼 뒤...
[Node.js] EventLoop
Node.js 동작 방식Node.js를 창시한 라이언 달이 노드를 만든 이유로 꼽은 것은, 기존에 많이 사용되고 있는 WAS라고 불리는 Apache, Tomcat 같은 서버들은 오래걸리는 blocking 작업에서 원활한 사용에 문제가 생겨 동시성 프로그래밍을 위해 Node.js를 만들었다고 한다. Node를 사용하는 이유 중 가장 큰 특징을 뽑아보면, 처리 속도가 빠르다. 모든 동작이 비동기 기반이다. Event driven 이다. 이렇게 두가지가 있다.처리 속도가 빠른 이유는 Node의 동작 방식에서 찾아볼 수 있다. Node.js 는Event Loop 중심으로 동작한다. 구글에서 여러 구조 사진을 볼 수 있지만 대부분의 사진이 틀린 정보라고 한다. 이런 구조가 굉장히 보편적이었는데, 이 구조는 틀린 구조라고 한다. 이 구조가 더 Node.js 개발자가 밝힌 내용과 부합한 내용이라고 한다. Event Loop메인 스레드 겸 싱글 스레드로서 비즈니스 로직을 수행한다....
Promise
PromisePromise는 비동기 로직을 구현할 때 유용하게 사용되는 기능이다. ES6부터 도입된 기능으로 JS의 다양한 비동기 함수들을 쉽게 컨트롤 할 수 있게 되었는데, Node.js 등에서 Promise를 사용하지 않으면 callback 지옥에 빠지게 된다. 123456789101112131415doSomething(function (result) { doSomethingElse( result, function (newResult) { doThirdThing( newResult, function (finalResult) { console.log("Got the final result: " + finalResult); }, failureCallback ); }, failureCallback ...
Hoisting
HoistingHoisting이란 선언되기 전에 호출한 변수나 함수를 사용하더라도 JS 특성상 사용이 가능한 특징이다. 123a = "HEY";console.log(a);var a; 출력 1HEY 선언되기도 전에 사용한 변수가 정상적으로 불러와짐으로 인해서 개발자에게 혼란을 가져왔는데, 주로 var 키워드를 사용할 때 이러한 문제들이 발생했다. 이런 문제점들은 let을 사용하면 해결할 수 있다. let 키워드는 선언된 후에만 사용할 수 있기 때문에 사용하려고 하면 문법적 오류가 발생해 로직 오류를 방지할 수 있다. 123a = "HEY";console.log(a);let a; 출력 121.js:1 Uncaught ReferenceError: Cannot access 'a' before initialization at 1.js:1
Git 명령어 정리
Git 명령어git은 CLI 버젼과 GUI 버젼 두 개의 버젼이 있다. 자신에게 편한 것으로 사용하면 될것 같다. git init : git으로 버젼관리를 시작하는 명령어다. 명령어를 입력하면 프로젝트 폴더 내부에 .git 이라는 숨은 폴더가 생성된다. git add file : 버젼 관리에 추가될 파일들을 선택할 수 있다. file 이름을 작성해도 되고 폴더 내부의 모든 파일을 선택하고 싶다면 . 만 붙여줘도 된다. git commit -m "message" : 버젼관리 덩어리라고 생각하면 된다. 메세지를 입력해 어떤 부분을 작성한 코드인지 명시해주면 좋다. 예를 들어, 로그인 기능을 구현했다면 수정된 파일들을 add한 뒤에 commit 메세지로는 Add login feature 라고 작성할 수 있겠다. add . 로 모든 변경 사항을 추가하면 편리하긴 하지만 이후에 나, 혹은 다른 팀원이 어떤 기능을 구현하는데 어떤 코드가 수정되었는지 확인이...
[css] @media을 사용하는 반응형 웹
반응형 웹 페이지 css 속성에서 자주 보던 속성이다. 태블릿이나 휴대폰 등 다양한 크기의 디바이스에서 웹에 접속하는 트렌드에 맞게, 웹페이지 또한 어느 기기에서나 올바르게 출력될 수 있도록 설정해두는 것이 중요하다. @media다양한 미디어 유형이나 장치에 따라 서로 다른 스타일 규칙을 적용시킨다. 문법123@media 미디어타입 and (미디어 특성){ css 작성} 예시 12345@media screen and (max-width: 1200px) { body { color: red; }} media type 종류 all : 모든 미디어 타입에 적용 (default) screen : 컴퓨터 화면, 타블렛, 스마트폰 등 print : 인쇄전용 생략이 가능하다. media 특성 width : 뷰포트 가로 너비 max-width : 뷰포트 최대 가로 너비(이하) min-width : 뷰포트 최소 가로...
[BOJ] 14502. 연구소
연구소문제 링크 문제인체에 치명적인 바이러스를 연구하던 연구소에서 바이러스가 유출되었다. 다행히 바이러스는 아직 퍼지지 않았고, 바이러스의 확산을 막기 위해서 연구소에 벽을 세우려고 한다. 연구소는 크기가 N×M인 직사각형으로 나타낼 수 있으며, 직사각형은 1×1 크기의 정사각형으로 나누어져 있다. 연구소는 빈 칸, 벽으로 이루어져 있으며, 벽은 칸 하나를 가득 차지한다. 일부 칸은 바이러스가 존재하며, 이 바이러스는 상하좌우로 인접한 빈 칸으로 모두 퍼져나갈 수 있다. 새로 세울 수 있는 벽의 개수는 3개이며, 꼭 3개를 세워야 한다. 입력첫째 줄에 지도의 세로 크기 N과 가로 크기 M이 주어진다. (3 ≤ N, M ≤ 8) 둘째 줄부터 N개의 줄에 지도의 모양이 주어진다. 0은 빈 칸, 1은 벽, 2는 바이러스가 있는 위치이다. 2의 개수는 2보다 크거나 같고, 10보다 작거나 같은 자연수이다. 빈 칸의 개수는 3개 이상이다. 출력첫째 줄에 얻을 수 있는 안전 영역의 최대...