Fall in IT.

간혹, CRA로 만든 프로젝트를 여러개 실행해야할때가 있습니다. package.json 파일 수정없이 1회만 변경하여 실행하고 싶은 경우 아래와 같이 사용하시면 됩니다. # create-react-app 프로젝트에서 실행시 PORT 변경하는 방법 $ PORT=8888 yarn start

React HoC(Higher-order Component)란? 리액트 컴포넌트를 인자로 받아서 다른 리액트 컴포넌트를 반환하는 함수를 고차함수라고 한다. 조금 더 자세히 설명하면, HoC의 원리는 파라미터로 컴포넌트를 받고, 함수 내부에서 새 컴포넌트를 만든 다음에 해당 컴포넌트 안에서 파라미터로 받아온 컴포넌트를 렌더링 하는 것이다. React HoC는 언제 사용할까? 리액트 컴포넌트를 작성하게 될 때 반복될 수 있는 코드들을 HoC를 만들어서 해결할 수 있다. 코드 예를들어, 중복되는 HTTP 요청 코드가 존재할때 HoC를 사용하여 중복되는 코드를 제거할 수 있다. Github에 전체코드를 확인해보세요. NewPost.tsx import React from 'react'; import withReq..

function main() { console.log("main start"); console.time("sumFunction"); sum(1, 1000000); console.timeEnd("sumFunction"); /** * OUTPUT * - PC의 상태에 따라 차이가 있을 수 있습니다. * * $ main start * $ sumFunction: 4.050ms */ } /** * 정수 a부터 b까지 더한값을 리턴하는 함수 * @param {*} a * @param {*} b */ function sum(a, b) { let sum = 0; for (let i = a; i < b; i++) { sum += i; } return sum } main();

안녕하세요. 오늘은 Mac OS의 SSH Client인 Termius를 사용하여 AWS EC2에 접속하는 방법에 대해서 알아보도록 하겠습니다. Terminal이나 iTerm을 사용하여 원격 서버에 접속하는 것도 가능하지만, Termius와 같은 전용 SSH Client 프로그램을 사용할 경우 관리가 필요한 여러개의 서버를 손쉽게 접속할 수 있습니다. 사용방법 Termius 다운로드 회원가입 좌측 상단의 메뉴 아이콘을 누르고 Keychain 버튼을 클릭합니다. Label을 입력하고 File 버튼을 클릭하고, Key file(pem 파일)을 등록합니다. 좌측의 Hosts 탭을 선택 Label, Address, Username, Password 혹은 Keys를 클릭하고 조금 전 등록한 Key 파일을 추가합니다..

안녕하세요. 오늘은 배열 안에 Object 형태의 원소가 담겨 있을때 특정 값이 배열 안에 있는지 확인하는 방법에 대해서 알아보도록 하겠습니다. 코드 /** * Array의 Object 형태의 Elements 사이에 원하는 Element 찾는 방법 */ function main(studyClass: IStudyClass): void { /** * 학급에 `동백이`라는 학생이 있는지 확인하는 방법 * array의 내장객체인 map을 사용한다. */ // includes로 확인할 경우 boolean let flag: boolean = studyClass.students .map((student: IStudent) => student.name) .includes("동백이"); // expected output..

문제 설명 숫자 야구 게임이란 2명이 서로가 생각한 숫자를 맞추는 게임입니다. 게임해보기 각자 서로 다른 1~9까지 3자리 임의의 숫자를 정한 뒤 서로에게 3자리의 숫자를 불러서 결과를 확인합니다. 그리고 그 결과를 토대로 상대가 정한 숫자를 예상한 뒤 맞힙니다. * 숫자는 맞지만, 위치가 틀렸을 때는 볼 * 숫자와 위치가 모두 맞을 때는 스트라이크 * 숫자와 위치가 모두 틀렸을 때는 아웃 예를 들어, 아래의 경우가 있으면 A : 123 B : 1스트라이크 1볼. A : 356 B : 1스트라이크 0볼. A : 327 B : 2스트라이크 0볼. A : 489 B : 0스트라이크 1볼. 이때 가능한 답은 324와 328 두 가지입니다. 질문한 세 자리의 수, 스트라이크의 수, 볼의 수를 담은 2차원 배열 ..

뉴스 클러스터링 여러 언론사에서 쏟아지는 뉴스, 특히 속보성 뉴스를 보면 비슷비슷한 제목의 기사가 많아 정작 필요한 기사를 찾기가 어렵다. Daum 뉴스의 개발 업무를 맡게 된 신입사원 튜브는 사용자들이 편리하게 다양한 뉴스를 찾아볼 수 있도록 문제점을 개선하는 업무를 맡게 되었다. 개발의 방향을 잡기 위해 튜브는 우선 최근 화제가 되고 있는 카카오 신입 개발자 공채 관련 기사를 검색해보았다. 카카오 첫 공채..'블라인드' 방식 채용 카카오, 합병 후 첫 공채.. 블라인드 전형으로 개발자 채용 카카오, 블라인드 전형으로 신입 개발자 공채 카카오 공채, 신입 개발자 코딩 능력만 본다 카카오, 신입 공채.. 코딩 실력만 본다 카카오 코딩 능력만으로 2018 신입 개발자 뽑는다 기사의 제목을 기준으로 블라인드..

문제 설명 여러 개의 쇠막대기를 레이저로 절단하려고 합니다. 효율적인 작업을 위해서 쇠막대기를 아래에서 위로 겹쳐 놓고, 레이저를 위에서 수직으로 발사하여 쇠막대기들을 자릅니다. 쇠막대기와 레이저의 배치는 다음 조건을 만족합니다. - 쇠막대기는 자신보다 긴 쇠막대기 위에만 놓일 수 있습니다. - 쇠막대기를 다른 쇠막대기 위에 놓는 경우 완전히 포함되도록 놓되, 끝점은 겹치지 않도록 놓습니다. - 각 쇠막대기를 자르는 레이저는 적어도 하나 존재합니다. - 레이저는 어떤 쇠막대기의 양 끝점과도 겹치지 않습니다. 아래 그림은 위 조건을 만족하는 예를 보여줍니다. 수평으로 그려진 굵은 실선은 쇠막대기이고, 점은 레이저의 위치, 수직으로 그려진 점선 화살표는 레이저의 발사 방향입니다. 이러한 레이저와 쇠막대기의 ..

안녕하세요. 오늘은 자바스크립트의 Array 객체의 내장함수 sort()에 대해서 알아보겠습니다. sort() 내장함수에는 파라미터가 Optional하게 들어갑니다. 구체적인 비교가 필요할 경우 compareFunction을 작성하여 넣어주면 됩니다. 코드 (TypeScript) /** * 자바스크립트 Array 객체의 내장 함수 sort() * * sort() 내장함수에는 파라미터가 Optional(compareFunction)하게 들어간다. * 구체적인 비교가 필요할 경우 compareFunction을 작성하여 넣어주면 된다. * * compareFunction(a, b) * - 리턴값이 0보다 작은 경우 a를 b보다 앞으로 정렬 * - 리턴값이 0보다 큰 경우 b를 a보다 앞으로 정렬 * - 리턴값..

안녕하세요. 오늘은 Javascript에서 객체를 복사하는 방법에 대해서 알아보겠습니다. 객체를 복사하는 방법에는 얕은 복사 방법이있고 깊은 복사 방법이 있습니다. 얕은 복사와 깊은 복사 얕은 복사란, 객체의 첫 번째 부분만 복사하는 것을 의미합니다. Object의 내장객체인 assign() 함수를 사용하여 구현합니다. 깊은 복사란, nested한 객체의 모든 하위 객체까지 복사하는 것을 말합니다. JSON.parse()와 JSON.stringify() 함수를 사용하여 구현합니다. 코드 /** * 얕은 복사 * * @param {*} obj */ function shallowObjectCopy(obj) { let copyObj = {}; Object.assign(copyObj, obj) return co..