이안의 평일코딩

리액트는 프레임워크가 아닌 라이브러리 리액트는 인터렉션이 많은 웹 앱을 개발하기 위해 주로 사용된다. 다른 Tool인 Vue나 Angular와 많이 비교하지만 가장 큰 차이점은 프레임워크인 두 언어와 달리 React는 라이브러리라는 점이다. 간단하게 보면 프레임워크는 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것이고, 라이브러리는 어떠한 특정 기능을 모듈화 해놓은 것이다. 즉, 프레임워크는 라이브러리를 포함하고 또한 우리가 작성한 소스 코드를 호출한다. 그리고 소스 코드는 어떠한 기능을 구현하기 위해 라이브러리를 호출하게 된다. 프레임워크는 앱을 만드는데 필요한 대부분의 라이브러리를 가지고 있고, 라이브러리들은 특정 기능을 위해 모듈화 되어 있다. 리액트가 라이브러리인 이유는 전적으로 U..

그래프를 탐색하는 방법에는 DFS(Depth First Search: 깊이 우선 탐색)과 BFS(Breadth First Search: 넓이 우선 탐색) 두 가지가 있다. DFS는 루트노드에서 시작해 다음 분기로 넘어가기 전 해당 분기를 완벽하게 탐색하는 방식을 말한다. BFS는 루트노드에서 시작해 인접한 노드를 먼저 탐색하는 방식으로 시작 정점으로부터 가까운 정점을 먼저 방문하고 멀리 떨어져 있는 정점을 나중에 방문하는 순회 방법이다. 모든 노드를 방문하고자 하는 경우에는 DFS를 가까운 노드부터 탐색하기 위해서는 BFS를 사용한다. 검색 속도 자체는 BFS가 빠르지만 DFS가 더 간단하다. 검색 대상 그래프가 크거나 경로의 특징을 저장해둬야 하는 문제는 DFS를, 검색 대상의 규모가 크지 않고 최단거..

문제 게임개발자인 죠르디는 크레인 인형뽑기 기계를 모바일 게임으로 만들려고 합니다. 죠르디는 게임의 재미를 높이기 위해 화면 구성과 규칙을 다음과 같이 게임 로직에 반영하려고 합니다. 게임 화면은 1 x 1 크기의 칸들로 이루어진 N x N 크기의 정사각 격자이며 위쪽에는 크레인이 있고 오른쪽에는 바구니가 있습니다. (위 그림은 5 x 5 크기의 예시입니다). 각 격자 칸에는 다양한 인형이 들어 있으며 인형이 없는 칸은 빈칸입니다. 모든 인형은 1 x 1 크기의 격자 한 칸을 차지하며 격자의 가장 아래 칸부터 차곡차곡 쌓여 있습니다. 게임 사용자는 크레인을 좌우로 움직여서 멈춘 위치에서 가장 위에 있는 인형을 집어 올릴 수 있습니다. 집어 올린 인형은 바구니에 쌓이게 되는 데, 이때 바구니의 가장 아래 ..

* 스터디 방식 0. 알고리즘 문제를 미리 배부한 뒤 각자 풉니다. (예습) 1. ZOOM을 통해 돌아가며 풀이를 발표합니다. (스터디) 2. 정답을 배부합니다. 3. 깃허브에 풀이 또는 오답노트를 정리해서 게시합니다. (복습) 스터디 방식에 수정, 추가할 것이 있으면 스터디 시작 전 같이 결정하겠습니다. * 비용 (조건) 비용은 월 4만원이며, 한 달 8회 기준으로 1일 당 5천원 씩 차감되며 스터디 완료 후 페이백 해드립니다. 중도하차 시에는 전액 돌려받으실 수 없다는 점 꼭 확인 부탁드립니다. 개인 이익을 취할 목적이 아닌, 벌금과 같은 스터디 자극용으로 이용할 계획이며 마지막 주 차에 남은 인원분으로 금액을 나누어 지급합니다. (자바스크립트 다이버스터디에서도 투명하게 3개월 동안 관리한 이력이 있..

async & await 어싱크 어웨이트는 자바스크립트 비동기 처리 패턴의 최신 문법으로 Promise, Callback의 단점을 해결하고 동기적(절차적)으로 코드를 작성할 수 있게 도와준다. async 함수는 함수의 앞에 async를 붙여주고 함수의 내부 로직 중 비동기 처리 로직 앞에 await를 붙여주면 된다. 자바스크립트 비동기 처리 function fetchData() { var user = $.ajax('users/1'); console.log(user); } 위와 같은 코드에서 ajax의 시간 지체로 다음 줄이 실행이 되지 않아 화면이 멈추거나 다른 동작을 할 수 없는 문제점 때문에 데이터를 받아왔을 때 코드를 실행할 수 있게 비동기 처리를 해줘야한다. 예전 비동기 처리 (callback) ..

ES6 이전의 함수 // ES5 - 함수 선언문 function sum(a, b) { return a + b; } // ES5 - 함수 표현식 var sum = function(a, b){ return a + b; } ES6+ 화살표 함수 function을 없애고 =>를 추가해서 코드가 더 간결해졌다. 그리고 간단한 연산 표현식은 { }와 return을 없애서 쓸 수 있다. // ES6+ - 함수 표현식(화살표 함수) var sum = (a, b) => { return a + b; } var sum = (a, b) => a + b; 타입스크립트의 화살표 함수 // TS - 화살표 함수 var sum = (a: number, b: number): number => { return a + b; }

* 스터디 방식 0. 제가 임의로 26일치 일일 스터디 분량을 30페이지 내외로 정해두었습니다. 1. 미리 각자 정해진 분량 1회독 읽기 (예습) 2. 중요하다고 생각하거나 어려운 부분 체크 (예습) 3. 어려운 부분 서로 질문하고 답변 (스터디) 4. 미흡한 부분 검색해서 다음 시간까지 정리해오기 (복습) 5. 개인블로그, 깃허브, 노션 등 자기가 원하는 곳에 정리해서 게시 (복습) 스터디 방식에 수정, 추가할 것이 있으면 스터디 시작 전 같이 결정하면 될 것 같습니다. 그리고 코로나 시국에 장소 협의가 어려운 점과 지방에 사시는 분들도 고려하여 온라인으로 진행할 생각입니다. * 비용 (조건) 비용은 월 4만원이며, 한 달 8회 기준으로 하루 결석 시마다 5천원 씩 차감돼 한달 뒤 페이백 해드립니다. ..

자리수의 합 뒤집은 소수 Math.sqrt()는 제곱근을 찾아준다. Math.sqrt(9); // 3 멘토링 졸업선물 K번째 큰 수