Fall in IT.

안녕하세요. 오늘은 리액트 컴포넌트를 상대경로가 아닌 절대경로로 임포트하는 방법에 대해서 알아보겠습니다. 아래 설명은 CRA 프로젝트를 기준으로 설명합니다 : ) 왜 절대경로인가? 상대경로로 설정할 경우 디렉터리 구조가 깊어질수록 import 하기 어려워진다. import Common from "../../../../utils/common"; 절대경로로 설정할 경우 디렉터리 구조와 관계없이 손쉽게 import를 할 수 있다. import Common from "src/utils/common"; 설정 방법 프로젝트의 루트에 .env 파일을 생성하고 아래의 내용을 붙여넣습니다. NODE_PATH=src/ VSCODE에서도 Path를 잡아줘야하기 때문에 프로젝트의 루트에 jsconfig.json 파일을 생성하..

안녕하세요. 오늘은 lodash의 debounce 메소드에 대해서 알아보도록 하겠습니다. debounce란? 특정 이벤트가 발생할때 작동하는 비즈니스 로직이 과도하게 발생하는 것을 방지하기위해 사용되는 함수이다. input box에서 검색어를 입력할때마다 서버에서 연관된 검색어 정보를 가져와 보여주는 기능을 구현할때 주로 사용한다. 마지막 이벤트가 호출된 이후에 일정시간이 지난 후에 함수를 지연호출 시키는 역할을 한다. Sample Code 샘플 코드는 여기에서 다운로드 받으실 수 있습니다. :) import React from "react"; import "./App.css"; import { debounce } from "lodash"; const somthingFunc = () => { consol..

CRA(create-react-app)을 사용한 프로젝트에서 Moment.js 모듈을 사용할때 Locale이 적용되지 않는 문제가 있습니다. 그 이유는, create-react-app에는 moment locale 설정이 추가되어 있지 않다고 합니다. 자세한 내용은 링크를 참조해주세요 : ) Moment.js의 locale 을 적용하기 위해서는 직접 import 해주면 됩니다. import moment from "moment"; import "moment/locale/ko"; moment.locale("ko"); 참조 https://stackoverflow.com/questions/49788259/moment-js-change-locale-not-working

집의 와이파이는 한번 연결해두면 자동으로 연결되기 때문에 와이파이 비밀번호를 외우지 않아도 편하게 사용할 수 있지만 너무 오래전에 연결해두어서 새로운 장비에 와이파이를 연결하려고 할때 애를 먹는 경우가 간혹 있습니다. 이럴때, 맥북을 통해 연결된 와이파이의 비밀번호를 알아내어 손쉽게 와이파이에 연결할 수 있습니다. 맥북에서 연결된 와이파이 비밀번호 알아보는 방법 Launchpad를 열고 기타 항목에서 키체인 프로그램을 실행 좌측 상단에 시스템을 클릭 종류 컬럼을 클릭하여 AirPort 네트워크 암호를 우선으로 정렬 여기서, 알아보고자 하는 와이파이의 이름을 우클릭하여 정보가져오기를 클릭 암호 보기 체크박스를 선택 컴퓨터의 비밀번호를 입력하고 확인을 눌러주면 연결된 와이파이의 비밀번호를 확인하실 수 있습니..

간혹, 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차원 배열 ..