박유상의 개발블로그

[WEB] REST API 기본

박유상의 개발블로그 — Sun, 15 Jan 2023 00:02:35 +0900

HTTP

클라이언트와 서버 사이에 이루어지는 요청 및 응답 프로토콜이다. URL을 통해 정보를 요청하면 요청한 정보를 다시 전달해준다.
주로 웹 환경에서 사용 되는 프로토콜로, IOT 등에는 적합하지 않다.

API (Application Programming Interface)

다른 애플리케이션에서 사용할 수 있도록, 특정 환경의 기능을 제어할 수 있게 만든 인터페이스이다. 우리가 흔히 접하는 구글지도API 등은 구글지도의 기능을 다른 애플리케이션에서 제어할 수 있게 만든 인터페이스라고 쉽게 생각할 수 있다.

REST API (Representational State Transfer)

HTTP의 장점을 최대한 활용하기 위해 고안된 REST 아키텍쳐 스타일을 따르는 API이다. 클라이언트와 서버를 명확하게 구분할 수 있으며 서버에서 특별한 상태를 저장할 필요가 없다. 즉, 서버에서는 들어오는 요청을 단순히 처리하면 되고 클라이언트에서는 정해진 규격에 따라 요청만 하면 된다. 또, HTTP에서 사용하는 Cache를 사용하여 응답을 저장해 불필요한 재 요청을 방지할 수 있다.

REST API와 HTTP API (즉, 웹 API)는 거의 같은 의미로 사용되고 있지만 실제로는 아래의 4가지 원칙이 지켜져야한다.

자원의 식별
메세지를 통한 리소스 조작
자기 서술적 메시지
애플리케이션 상태에 대한 엔진으로서 하이퍼미디어(HATEOAS)

Method

크게 아래의 4가지 method가 있다.

GET (데이터 요청)
POST (새로운 데이터 생성)
PUT (데이터 update)
DELETE (데이터 삭제)

추가로 Patch를 Put 대신 사용하기도 하는데, Put은 데이터가 존재하지 않으면 데이터를 생성하고, Patch는 데이터를 업데이트 하기만 한다. 따라서, Put은 데이터의 모든 요소를 클라이언트가 전송해야하며 Patch는 수정할 요소와 index만 클라이언트가 가지고 있으면 된다.

다시 말해 Patch는 데이터를 부분적으로 변경하고, Put은 데이터 전체를 변경한다. 그러나 하나의 규약일 뿐이지 꼭 지킬 필요는 없다.

Convention

1. URL Router에는 Action(or State)에 대한 정의는 들어가서는 안되며, Resoure는 명사로 표현한다.

GET /user/get/:id (X)

GET /user/:id (O)

2. 특정 Resource의 하위에 존재하는 요소

/Resource/ID/Element
GET /user/:id/files

/Resource/Sub/Element
GET /user/:id/favorite/artists

3. 밑줄 대신 하이픈(_)을 주로 사용하고 소문자를 사용한다.

Request

API를 제어하기 위해 Request 객체에 보다 상세한 정보를 담는다.

Param (Router에서 :id의 형태로 표현되는 부분)

GET /user/:id/info

localhost:3021/user/3412/info

Query (주로 GET에서 자세한 요청을 전송할 때 사용)

GET /artist/list

localhost:3021/artist/list?genre=rock&country=kr

Body (JSON 형태로 Query와 다르게 URL에는 보이지 않음)

POST /user/signup

localhost:3021/user/signup

Request payload
{
	id : pitterpark
    pw : 1234
}

일반적으로는 Get, Delete에는 Body를 넘겨주는 것 자체가 불가능하다.

[React] 파일 경로를 깔끔하게 정리하기

박유상의 개발블로그 — Mon, 29 Aug 2022 07:43:59 +0900

프로젝트의 규모가 커지다보면 가장 먼저 드는 생각이 파일들의 효율적인 정리이다.

정리할 수 있는 유용하지만 간단한 방법을 알아보자.

부모 폴더가 같은 Components

import { SignInModalBox } from "./SignPage/SignInModal";
import { SignUpModalBox } from "./SignPage/SignUpModal";

import { useTable } from "./Hooks/useTable";
import { useConfiguration } from "./Hooks/useConfiguration";

이 처럼 부모 폴더가 같은 컴포넌트를 사용할 때, 컴포넌트 하나 당 import 구문이 한 줄씩 추가된다.

이를 정리하기 위해 index.js(ts) 파일을 해당 폴더에 생성해 하위 파일들을 모두 import 및 export 해준다.

import useTable from './useTable';
import useConfiguration from './useConfiguration';

export {
	useTable,
    useConfiguration
};

특정 경로 단순화 하기

앞서 hooks 폴더의 하위 파일들을 Index로 묶어주었다. 이번에는 hooks 폴더의 경로를 단순화 해보자.

import { useDataTable, usePagination, useConfigurations } from '@hooks';

configuration을 적용하면 위와 같이 특정 폴더나 파일의 경로를 패키지처럼 단순화 시킬 수 있다.

jsconfig.json 혹은 tsconfig.json를 생성하거나 수정하여 적용할 수 있다.

{
    "compilerOptions": {
	...
    ...
    ..
    "paths": {
    "@utils/*": ["common/utils/*"],
    "@hooks": ["common/hooks/index.ts"],
    "@resources": ["common/constants/resources.ts"],
    "@types": ["common/types/index.js"],
    }
    },
}

특정 폴더나 파일을 경로를 단순화 할 수 있다.

쓰로틀링(throttling)과 디바운싱(debouncing)

박유상의 개발블로그 — Mon, 6 Jun 2022 22:42:32 +0900

디바운싱(debouncing)

새로운 이벤트가 호출 되었을 때, timer가 동작 중이라면 제거하고 새롭게 추가하는 방식이다.

검색어를 검색 창에 입력할 때, 실시간으로 결과가 호출되게 하는 경우 모든 입력이 끝났을 경우에만 API를 호출하는 스킬이다.

네트워크 비용을 크게 절약하고 효율적으로 프로그램이 동작할 수 있다.

let timer = null;
inputText.onkeydonw = (event) => {
	if(timer) //이전에 이벤트가 발생했다면
    	clearTimeout(timer); //이전 이벤트를 지운다.
   	if(event.target.value){
    	timer = setTimeout(() => {
        //추천 검색어 API 호출
        }, 200);
    }
}

쓰로틀링(throttling)

마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 스킬이다.

스크롤 시, 요청 버튼을 클릭한 경우 주로 사용하며 중복 요청이 발생하지 않도록 한다.

let timer = null;
body.onscroll = (event) => {
	if(!timer){
    	timer = setTimeout(() => {
        	timer = null;
            //data load
        }, 200);
    }
}

[JavaScript] 비동기 처리

박유상의 개발블로그 — Mon, 6 Jun 2022 21:45:30 +0900

비동기 처리

프로그래밍 언어는 동기 적으로 동작한다. '동기적 처리'의 사전적 의미로는 '작업의 요청과 결과가 같은 시간에 발생한다'로 작업이 시작되면 작업이 끝날 때까지 해당 작업의 결과를 기다리는 것을 의미한다. 아래의 그림처럼 먼저 시작된 A가 반환된 이후 B가 실행되는 것이다. A의 수행이 오래 걸린다면 B의 시작도 늦어진다.

출처 : 엘리스 SW엔지니어 트랙

비동기적 처리

예를 들어 서버에서 데이터를 받아오는 등의 오래 걸리는 작업을 수행한다면 프로그램이 멈춘 것 처럼 보일 것이다. 비동기적 처리로 메인 스레드가 서버로부터 데이터를 받아올 때까지 기다리지 않고 먼저 함수 를 반환하고 그 다음 작업을 수행한다. 서버에서 데이터가 수신되면 이를 처리하는 Callback이 비동기 환경에서 별도로 실행된다.

//비동기로 동작하는 함수
async function requestLogin(id, pw){
	return await Fetch('http://server/login'); //서버로 로그인 요청
}

function login(inputId, inputPw){
	requestLogin(inputId, inputPw).then(response=>console.log(response));
    
    return '로그인이 요청되었습니다.';
}

function main(){
	console.log(login('코딩으로세계정복', '123123'));
 	history.push('/home');
    console.log('메인 화면으로 이동');
}

main();

//console ====================
//로그인이 요청되었습니다.
//메인 화면으로 이동
//User('코딩으로세계정복')

다음의 예시를 살펴보자. login 함수는 requestLogin 이라는 비동기 함수를 호출하고 '로그인이 요청되었습니다'를 반환한다.

main 함수는 login 함수의 반환 값을 받고 메인 화면으로 이동한다. 이 동안, requestLogin 함수는 서버로 로그인을 요청 후 기다리고 있었다. 그리고 서버로부터 로그인이 완료된 유저 데이터를 받아 반환한다. 그러면 login에서 호출한 requestLogin 뒤에 있는 then()가 비동기 함수의 응답 처리를 하게 된다.

자바스크립트의 비동기

자바스크립트는 단일 스레드로 동작하며, 비동기 환경이 별도로 존재한다. 비동기 환경은 엔진 외부에 위치하며 Event Loop, Task Queue, Job Queue 등으로 구성된다. setTimeout, Fetch 등 기본으로 제공되는 API 함수나 Promise, Async로 비동기를 사용할 수 있다.

비동기 처리는 우선순위가 가장 높은 JobQueue에서 작동하며, 요청 처리 후 TaskQueue에 비동기 응답을 처리하는 Callback 함수를 넣는다.
자바스크립트 엔진은 메인스레드의 CallStack이 비워지면 TaskQueue 내의 Callback 함수를 메인스레드에서 실행한다.
비동기 처리를 받지 않더라도, 모든 Callback 함수는 비동기 환경의 TaskQueue에 넣어졌다가, CallStack이 비워지면 CallStack으로 이동되어 처리된다.

Promise

const promise = new Promise((resolve, reject) => {
  setTimeout( function() {
    if(Math.random() > 0.5){ 
    	resolve("성공") //랜덤 값이 0.5이상인 경우 성공
    }else{
    	reject("실패") //아니라면 실패
    }
  }, 250)
})

promise.then((message) => { //Then으로 성공의 경우를 응답 처리
  console.log("0.5 이상이므로" + successMessage);
}).catch((message) => { //catch로 실패의 경우를 응답 처리
  console.log("0.5 이하이므로" + successMessage);
}).finally() => {
  console.log("Promise 종료");
};
//Promise chaining이라고 한다.

비동기 함수는 Promise를 반환한다. Promise는 비동기 작업을 진행, 성공, 실패의 상태로 표현하는 자바스크립트 객체이다. API를 개발하는 경우 주로 사용하며 함수 내부에서 resolve, reject로 비동기 동작의 상태를 값과 함께 반환할 수 있다. 함수 밖에서는 then, catch, finally로 비동기의 상태에 따른 처리를 Callback 함수와 함께 할 수 있다.

function isNotNull(value){
  if(value) return Promise.resolve(true);
  return Promise.reject(false);
}

isNotNull(null).then((e)=>console.log('true')).catch((e)=>console.log('false'))
//false

위와 같이 사용할 수도 있다.

Promise all

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});

모든 Promise가 해결될 때까지 기다리고, 하나라도 실패 시 가장 먼저 실패한 Promise의 실패 이유를 반환한다.

Async, Await

async function requestLogin(){
	try{
        const data = await fetch(...); //서버에 요청하는 부분
        return data;
    }catch(e){
    	throw new Error('test');
    }
}

requestLogin().then((e)=>{...}).catch((e)=>{...});

다른 비동기 함수를 함수 내부에서 사용하는 경우 위와 같이 Async-Await을 사용해 동기 코드처럼 순차적으로 표현할 수 있다. Promise를 사용하는 경우와 다른 점은 return이 resolve의 역할을 한다는 것이고 일반적으로 try-catch를 reject 대신 사용을 한다는 점이다.

마찬가지로 Promise를 반환하기 때문에 then, catch, finally로 반환 값을 처리할 수 있다.

[JavaScript] This 포인터 이해하기

박유상의 개발블로그 — Thu, 2 Jun 2022 23:05:49 +0900

This 포인터

앞서 This 포인터가 포함된 실행 Context와 Scope에 대해 알아보았다. This로 특정 위치를 참조 할 수 있다. 클래스 내부를 참조할 때 this를 함께 사용함을 본적이 있을 것이다. 또, 일반 함수형과 화살표 함수의 큰 차이점이 바로 이 this 포인터이다.

function myFunc(){
	console.log("myFunc called");
}

myFunc(); //함수 직접 호출

const o ={
    name : 'Daniel',
    printName : function(){
   		console.log(this.name)}
}

o.printName(); //객체릐 메서드를 호출

function Person(name){
    this.name = name
    this.printName = function() {
    console.log(this.name)}
}

const p = new Person('Daniel') //생성자 호출

setTimeout(p.printName.bind(p), 1000)

일반함수에서 this는 호출한 곳을 가리키며 default(일반적인 사용)는 window(global)이다.

객체가 가진 함수를 호출하는 경우에는 객체 자체가 this가 되며(왼쪽 코드 참고), setTimeout과 같은 글로벌 함수 내부에서 호출하는 경우에는 this가 글로벌 스코프가 기본으로 가리키는 window를 가리킨다. 하지만 bind, call, apply를 사용하면 this가 객체를 가리키도록 동적 바인딩 할 수 있다.(오른쪽 코드 참고)

Bind 사

위의 예제에서 글로벌 함수에서 객체의 내부 함수를 호출 했을 때, bind를 하지않는 경우 변수를 찾지 못해 undefined를 출력함을 볼 수 있다.

화살표 함수와 일반 함수의 this

화살표 함수의 This는 함수가 선언되는 곳의 부모 컨텍스트를 가리킨다. 또한, bind와 같은 동적 바인딩이 불가능 하다. 위의 예제를 통해 화살표 함수와 일반 함수의 차이를 이해할 수 있을 것이다. 화살표 함수 f1은 let o의 내부에 선언이 되어있고, let o의 부모 컨텍스트는 global이고 this가 가리키는 것이 된다. 반면 일반함수 f2는 호출하는 곳에 따라 this가 달라지며, 객체를 통해 호출 했기때문에 this는 객체 o 그 자체가 된다.

조금 다른 예제로 다시 설명하자면, 화살표 함수 f2는 method()내에 선언되어 있고 이 것의 부모 컨텍스트는 const o이다. 따라서 f2의 this는 const o를 가리킨다. 반면, f1()과 같은 일반적인 호출에서는 바인딩된 컨텍스트가 없으므로 default 값인 global을 가리킨다.

객체 내부의 this

const Something = function(element) {
  this.name = 'Something Good';
  this.handleEvent = function(event) {
    console.log(this.name); // 'Something Good'
    switch(event.type) {
      case 'click':
		...
        break;
      case 'dblclick':
		...
        break;
    }
  };

  element.addEventListener('click', this, false);
  element.addEventListener('dblclick', this, false);
  
  element.removeEventListener('click', this, false);
  element.removeEventListener('dblclick', this, false);
}
const s = new Something(document.body);

Class 혹은 객체에서 this를 addEventListener의 callback으로 주게되면 class내부의 handleEvent 함수를 실행하게 된다.

혹은 객체명["onclick"]() 과 같이 호출할 수도 있다. this.handleEvent로 호출하지 않도록 하자.

[React] 다국어 변환 라이브러리 i18n

박유상의 개발블로그 — Thu, 2 Jun 2022 20:34:29 +0900

웹 사이트에서 글로벌 서비스를 위해 여러 국가의 언어를 지원할 수 있도록 되도록 i18n 라이브러리를 사용해보자!

자동 번역이 되는 것은 아니고, 번역된 데이터가 담긴 JSON 파일을 프로젝트에 삽입 후, 국가 코드를 변경할 때마다 각 국가에 해당하는 JSON 파일을 읽어와 화면에 출력 해준다.

설치

npm install react-i18next i18next --save

yarn add react-i18next i18next

언어 파일

translation_ko.json

프로젝트 내에 다음과 같은 JSON 파일을 생성한다. JSX내에서 Key를 text로서 사용하면 국가 코드에 따라 Value를 출력한다.

i18n 설정

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

//JSON 파일 import
import translationKo from "./translation.ko.json";
import translationEn from "./translation.en.json";

const resource = {
//국가 코드와 JSON 파일 match
  ko: {
    translation: translationKo,
  },
  en: {
    translation: translationEn,
  },
};

i18n.use(initReactI18next).init({
  resources: resource,
  lng: "en", //default 국가 코드
  debug: true,
  keySeparator: false,
  interpolation: { escapeValue: false },
});

//브라우저 DB에 기록된 언어가 있으면 해당 언어를 불러온다.
let language = localStorage.getItem("language");
if(language!==null)
i18n.changeLanguage(language);

//국가 코드를 변경하는 함수
export function changeLanguage() {
  i18n.changeLanguage(i18n.language === "ko" ? "en" : "ko");
  //브라우저 DB에 기록
  localStorage.setItem("language", i18n.language);
}

export default i18n;

기본적인 설정과 국가 코드를 변경하는 함수를 담은 파일을 생성한다.

최상위에서 호출

import "./Service/Translation/i18n";

최상위에서 해당 파일을 import 한다. import시 파일이 Read 되어진다.

useTranslation

const { t, i18n } = useTranslation();

useTranslation을 다음과 같이 선언한다.

현재 국가 코드 반환

i18n.language

다국어 지원 텍스트 출력

`${t('Blog')}` //JSON에 따라 '블로그'로 출력

ICT 글로벌 인턴십 실리콘밸리 합격 후기

박유상의 개발블로그 — Wed, 25 May 2022 22:26:12 +0900

합격

나는 ICT 학점연계 프로젝트 글로벌 인턴십 프로그램을 통해 오는 7월부터 12월까지 실리콘밸리 음악 빅데이터 스타트업 Chartmertic에서 인턴 생활을 하게 되었다.

해당 프로그램을 지원하고자 하는 분들을 위해 경험과 함께 글을 남긴다.

ICT 학점연계 프로젝트 인턴십 글로벌 과정

본 과정은 정부에서 국내외의 기업과 컴퓨터 관련 계열 학생의 인턴 매칭을 지원해주는 프로그램이다. 매 학기마다 열리며, 글로벌 과정의 경우 학교에서 추천받은 학생만 지원 자격이 부여된다. 관심 있다면 학교에 먼저 문의해야 한다!

선발된 학생은 상반기는 3월부터 8월까지, 하반기는 7월부터 12월까지 미국의 실리콘밸리에서 인턴십을 진행하게 된다.

정부에서 항공료, 비자, 의료보험 등과 매월 150만 원을 지원해주며, 기업에서는 $1,700 이상 매월 지원해준다. ~~세전인데 어떻게 월세 내지..~~

(이번에는 가장 많이 지원해주는 회사가 $2,000이었지만, 작년에는 $2,700도 있었다.)

지원 과정

우선 학교에서 추천 학생으로 선발되어야 한다. 각 학교마다 기준이 천차만별이다. 본인 학교의 경우는 지난 기수 까지는 학생 경력 점수를 반영해 추천 인원 제한인 3명만 선발해 추천해주었지만, 이번 기수부터 ICT 인턴십 측에서 각 학교당 추천 인원이 사라져 본인 학교에서는 원하는 모든 인원을 추천해주었다. 학생 경력 점수가 높지 않았던 나는 이번 기수에 바뀐 규정 덕에 지원할 수 있었다.

이후, 추천 학생 대상으로 기업 리스트가 주어진다. 약 5개에서 8개 정도의 회사가 리스트에 올라오게 된다. 인공지능/데이터, 웹, 모바일 포지션 순서대로 많이 요구하는 듯하다. 총 3개의 원하는 기업을 고른 후, 자기소개서와 포트폴리오를 영문으로 작성 후 제출한다. 약 1주일 정도가 주어진다. 본인은 미리 포트폴리오를 만들어 두어서 1주일 동안 자기소개서에 집중할 수 있었다. 무조건 포트폴리오 먼저 만들기!

코딩 테스트

서류 합격 결과 발표 전 HackerRank에서 코딩 테스트가 진행된다. 문제는 총 5문제로 3일 내에 연달아 6시간을 응시할 수 있다. 백준 기준 실버~골드 5 정도의 문제였던 것 같다. 사실, 코딩 테스트 결과는 절반 이상만 푼다면 서류 단계에서 큰 영향을 미치지는 않는 듯했고 면접에서 풀었던 코딩 테스트에 대해서는 전혀 물어보지 않았다. 부담 갖지 말고 하자!

서류 합격 후

약 1주일 정도의 면접 준비 기간이 주어진다. 면접은 스카이프로 진행되며 지난 후기들을 찾아보며 예상 질문을 추려냈었고, 일부 기업에서는 한국어와 영어를 혼용, 한 기업에서는 라이브 코딩 테스트를 진행 함을 알고 준비했다.

면접

면접은 스카이프로 진행되며 4일 동안 오전 시간을 이용해 면접을 보게 된다. 이하는 내가 면접을 봤던 회사들의 간략한 면접 내용이다.

시간은 각 면접 당 45분이며, 모든 회사가 45분을 꽉 채워서 면접을 봐주셨다.. ^^... 끝나고 바로 하루 종일 앓아누웠다.

E____ (교육 회사)

한국인 CEO 한 분과 한국인 기술 파트 한 분이 면접으로 참여하셨다. 면접 날짜의 첫 면접 타임이라 나의 교육 스타트업 경력을 좋게 봐주셨음이 틀림없다는 생각이 들었다. 편하게 임하려고 했지만 인생 첫 채용 면접이다 보니 많이 긴장해서 동문서답하고 영어를 많이 뚝딱거렸던 기억이 난다. 꼬리 질문을 많이 날리셔서 당황했던 기억이 남는다,,,

아래는 영어로 진행된 면접

간단한 자기소개
몇 학점이 남았는지? (인턴십 이후 정규직 채용을 고려하는 듯하였다.)
왜 우리 회사에 지원했는지?
자신이 좋아하는 것이 무엇인지?
자신이 싫어하는 것이 무엇인지?
어떤 과목을 가장 싫어하는지? (수학을 가장 싫어한다고 답했다. 그리고 E사의 수학 앱이 어릴 때 있었더라면 수포자가 되지 않았을 거라고 말씀드리니 너무 좋아하셨던 모습이 기억에 남는다)
몰타에는 뭐하러 갔나요..?? (아무래도 영어를 뚝딱거리니 물어보셨던 것 같다... 흑흑)

여기부터는 한국어로 해도 된다고 하셨다.

가장 좋아하는 프로젝트는?
프로젝트의 구조를 간단히 설명해보아라 (웹 포지션으로 지원했었기 때문에 웹 프로젝트를 설명했지만, 나의 교육 스타트 업 경험 때문에 서류를 통과해주신 거라고, 여기에 대해 설명해달라고 하셨다.)
9개월 만에 30만 유저는 어떻게 달성한 것인지?
어떤 계기로 교육에 흥미를 갖고 스타트 업을 시작하게 된 것인지?

그리고, 자기 PR을 할 수 있는 시간을 주셨고, 준비했던 마무리 멘트를 했다.

질문 시간에는 해당 회사에서 무엇을 배울 수 있는지, 어떤 일을 하게 될지, 웹 분야 말고도 일을 해볼 수 있는지 등을 여쭈어 보았다.

마지막에는 이메일을 주시면서 궁금한 게 있으면 나중에 연락 달라고 하셨다.

Chartmertic (음악 빅 데이터)

내가 최종 합격해서 6개월 간 인턴을 하게 될 회사이다. 외국인 면접관 한 분께서 참여하셨다. 들어오셔서 영어로 회사에 대해 소개해주셨는데 리스닝이 약해서 모두 알아듣진 못했다.. 매우 매우 걱정된다. 해당 기업 인터뷰는 개인적인 질문 약간, 프로젝트에서 사용된 기술에 대한 질문, 그리고 사용하게 될 기술에 대한 질문이었다.

아래는 면접 내용

간단한 자기소개
왜 우리를 선택했는지?
Lingory(교육 스타트업)에서 어떤 기술을 사용했는지 기재가 안되어 있는데 기술에 대해 설명해달라.
왜 ReactNative 대신에 Flutter를 채택했는지?
본인이 생각하기에 ReactNative와 Flutter의 전망은? (구글 트렌드를 예로 들며 Flutter의 인기 상승률이 높다고 답했다)
다른 기술들은 어떤 것을 할 줄 아는지? 회사에서 요구하는 기술들을 잘 알고 있는지? (Express, React 등)
React로 진행했던 프로젝트(Bitfolio)에 대해 설명해달라.
React의 상태 관리의 종류에 대해 설명해달라.
Firebase로 NoSQL은 알고 있는 듯 하나, SQL에 대해 알고 있는지?
SQL의 Join에 대해 설명해달라. (자세히는 모르고 종류만 알고 있다고 말씀드리니, 직접 영어로 답변해주셨다. ~~리스닝 공부하자..~~)

기술적인 질문 공세에 정신이 혼미했었다. 다행히 얼마 전 프로그래머스 코딩 테스트를 준비하면서 SQL을 풀어본 덕에 Join의 종류라도 답할 수 있었고, 이후 면접관님의 표정이 좋아지시면서 나중에 회사에 들어오면 천천히 배우면 된다고 격려해주셨다.

이후, 마찬가지로 질문 시간이 주어졌다. 시간이 꽤 많이 남아 별 질문을 다했다. 내가 현재 출시된 프로덕트의 모바일 버전이 무엇으로 개발되었는지 물어보았는데 ReactNative라고 하셨다. 왜 Flutter를 사용하지 않았는지 물어보니 날카로운 질문이라고 흐뭇한 표정을 지으시며 React 개발자들이 있기 때문이라고 대답해주셨다. 그리고 내가 근무하면서 Flutter로 개발하고 싶다고 말씀드리니 열정을 보여줘서 감사하다고 말씀하셨다.

B_ R_____ (인공지능 로봇)

매 회 해당 인턴십에 참가하는 기업으로, 가장 많은 인원을 뽑고 면접이 라이브 코딩 테스트로 진행한다는 사실.

역시 외국인 면접관 한 분께서 참여하셨고 간단한 자기소개 및 장점 질문 이후 나도 동일하게 라이브 코딩 테스트로 면접을 진행했다.

링크를 보내주시고 라이브 코딩 플랫폼에서 진행되었다.

간단한 BFS 문제로 난이도는 백준 기준 실버 2 정도의 문제였다.

라이브 코딩 테스트 팁들을 많이 찾아보았는데, 다음과 같다.

모호한 질문의 경우는 반드시 되물어보아라.
로직을 우선 설명 후, 코드를 작성 함과 동시에 어떤 역할을 하는 코드인지 설명하라.

문제는 예전에 풀어본 것과 똑같은 문제로 술술 풀어나갈 수 있었지만 영어 설명을 굉장히 뚝딱거린 탓인지,

문제를 모두 풀고 난 후 다시 한번 정리 설명하겠습니다!라고 했더니 문제 풀면서 충분히 설명해서 이해했다고 하셨다 ^^... (정말 충분했던 걸까 뚝딱거리는 영어를 듣기 힘드셨던 걸까..) 중간에 변수 명과 비교 연산자의 방향을 잘못 쓴 탓에 한참 잘못된 결과가 나왔었는데 적극적으로 힌트를 주시고 도와주셔서 문제를 해결할 수 있었다. 약 15분 정도의 시간이 남았고, 마찬가지로 질문 시간을 가졌다.

최근에 라이브 코딩 테스트가 면접인 기업들이 꽤 많은데, 많이 연습하고 다듬어야겠다고 생각했다.

추가로, 해당 기업은 React를 사용한다는 말이 없지만, 면접에서 실제 프로덕트는 React로 개발되어 로봇의 크롬 OS 환경에 탑재되어 메인 프로그램으로 동작한다고 하셨다.

선택

원래 결과 발표가 24일이었다. 참가 학생은 면접을 본 기업을 우선순위를 매겨 제출하고 우선순위로 합격한 기업 한 곳만 알려주게 되어있다. 감사하게도 첫 번째로 면접을 보았던 교육 기업 E____에서 이메일로 먼저 연락을 주셨다.

면접도 너무 즐거웠었기 때문에 이메일을 이렇게 보내주심이 더 감동적이었다. 이 기업의 프로덕트를 사용해보면서 교육에 대한 진심이 느껴져서 눈물을 흘린 적도 있었다.(정말로..) 그리고 함께 일해보고 싶다는 생각으로 최선을 다했다.

모든 면접을 마치고 그리고, 위의 이메일을 받고 정말 많은 고민을 했다.

교육 스타트업을 하며 에듀 테크에 대한 꿈이 있었고, 4차 산업혁명의 기반이 될 수 있는 빅데이터를 배워보고 싶은 욕구도 있었다.

E사 이외에는 합격 이메일을 받은 게 없었지만, 우선순위를 매길 수 있었기 때문에 빅데이터를 배우고 싶은 욕구를 더 우선순위로 두기로 했다. 그리고 락밴드를 하며 음악에 푹 빠져 지냈던 때가 있었기에 음악을 더 가까이하고 싶기도 했다.

가장 중요한 이유는 확실하게 웹 개발을 하는 직무를 맡고 싶었었다.

그리고 Chartmetric에 합격했다!

[Express] Node.JS Express 시작하기

박유상의 개발블로그 — Sat, 7 May 2022 01:21:16 +0900

Node.JS와 Express는 항상 함께 언급되며, NodeJS는 React를 사용할 때에도 출현한다. 도대체 무엇일까?

Node.JS

Node.JS는 웹의 발전에 따라 등장했는데, 단 방향 통신 위주였던 웹 1.0에서 사용자와 상호작용을 하는 웹 2.0이 등장했다. 이에 따라 구글에서는 고성능의 자바스크립트 동작을 위해 크롬 웹 브라우저를 위한 V8이라는 자바스크립트 엔진을 개발했다. 오픈소스인 V8를 활용해 자바스크립트를 웹뿐만 아니라 어느 환경에서나 사용할 수 있도록 개발된 실행기가 Node.JS이다.

Node.JS의 등장에 따라 자바스크립트로 다양한 역할을 할 수 있게 되었다.

크로스 플랫폼 실행
제한 없는 동작
다양한 어플리케이션 실행 가능
Front-End(React), Back-End(Express), Mobile(ReactNative), Desktop(Electron), MachineLearning(Brain)

흔히 알고 있는 RN 뿐만 아니라 Slack과 Discord에 사용된 Electron, 심지어는 머신러닝까지 가능하게 해주는 런타임 실행기이다.

추가로, Babel이라는 컴파일러 도구를 내장하고 있어 React에서 사용하는 JSX 문법을 사용할 수 있게 해 주고 구 웹브라우저를 지원해주며, 내장된 Webpack 도구는 SPA(Single Page Application)의 개발에서 생산되는 정적 파일들을 번들링 하게 도와준다.

Node.JS 특징

Node.JS 특징은 3가지로 간단하게 설명할 수 있다.

싱글 쓰레드

쓰레드란 명령을 실행하는 단위로, 한 번에 하나의 동작만 수행 가능하다. 리소스 관리에 효율적이지만 작업의 효율이 떨어진다.

비동기

동작을 실행한 후 완료까지 기다리지 않고 다른 동작이 실행된다. 싱글 쓰레드의 작업 효율이 떨어지는 단점을 수동적으로 보완할 수 있다.

이벤트 기반

비동기 동작의 완료를 처리하는 방법으로, 비동기 동작의 완료 시 미리 등록된 함수를 실행한다. 쉽게 말해 then과 같은 함수를 의미한다.

Express

Express는 웹 애플리케이션을 구축하는 NodeJS 기반 프레임워크이다. API 통신을 지원하며 간단하게 백엔드 서버를 구축할 수 있다. 자유도가 높지만 기본적으로 제공되는 CRUD 이외에 데이터베이스나 심지어 관리자 페이지까지도 직접 개발해야 한다. 커뮤니티가 크고 이미 많은 서비스에서 사용되고 검증된 프레임워크이기 때문에 사실 간편하게 입맛에 맞는 라이브러리를 찾을 수 있다.

Express 구축

간단하게 TypeScript Express를 구축해보고 API 서버를 로컬로 열어보자.

패키지 설치

//터미널에 입력한다. TypeScript용으로 설치한다.
//cors 패키지는 외부 접근을 차단하는 cors 에러를 해제하기 위해 설치한다.
npm i @types/express @types/cors express cors ts-node typescript nodemon

Heroku에 배포하기 위해 npm으로 설치해주자!

기본 설정 파일 생성

//프로젝트의 기본 이름, 설명 등을 입력받게 한다.
npm init -y

//TypeScript config 파일을 생성한다.
tsc --init

//Ts 파일을 생성한다. index.js와 같은 역할이다.
touch server.ts

//package.json에 다음을 추가한다.

  "scripts": {
    "start": "ts-node server.ts", //JavaScript는 'node server.js'
    "dev": "nodemon -x ts-node server.ts"
  },
  "engines": {
    "node": "v14.16.1",
    "npm": "6.14.12"
  },

package.json에 다음과 같이 설정해주면 'npm start'를 입력했을 때 자동으로 'ts-node server.ts'로 변경되어 서버가 실행된다.

백엔드 구축하기

.gitignore로 모듈을 제외해주자

설정을 모두 완료하면 다음과 같은 파일 구성이 된다. server.ts가 메인 코드를 실행하는 파일이 되며 내부에 다음과 같은 코드를 삽입해보자.

//express를 import 한다. JavaScript에서는 'const express = require('express')'가 일반적이다.
import express, { Request, Response } from "express";
const app = express();

//외부 접근시 발생하는 cors를 해제하기 위한 라이브러리이다.
const cors = require("cors");

//서버에 사용될 port 번호이다. 현재는 환경 변수 파일이 없으므로 3001이 된다.
const PORT = process.env.PORT || 3001;

//express에 cors 라이브러리를 삽입한다.
app.use(cors());



//GET API를 정의한다.
app.get("/", (req: Request, res: Response) => {
  res.send("Server is running");
});

app.get("/user/1", (req: Request, res: Response) => {
  res.json({
    id: 1,
    name: "yusang",
    major: "computer",
  });
});



//서버 가동 시 실행하는 동작이다.
app.listen(PORT, () => console.log("server running.."));

실행

npm start

localhost:3001에서 서버를 확인할 수 있다

GET으로 전달된 user/1 데이터이다.

이처럼 Express는 간단하게 Restful API를 생성할 수 있고, fetch, axios 등으로 간단하게 프런트엔드와 통신할 수 있는 HTTP를 제공한다. 앞서 말한 것처럼 데이터베이스 등을 별도로 연결해야 하지만 필요에 맞게 NoSQL을 사용할 수도 있는 자유도가 있다.

[JavaScript] 호이스팅과 클로저

박유상의 개발블로그 — Fri, 6 May 2022 02:11:50 +0900

클로저

자바스크립트에서 함수는 일급 객체(First Class Object)로 취급된다.

일급 객체란? 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 변수에 할당할 수 있으며, 다른 함수를 인자로 전달받는다. 또, 다른 함수의 결과로 return 될 수 있다.

출처 엘리스SW트랙

클로저는 Factory 함수가 저장되는 공간이라고 할 수 있으며 일급 객체 성질을 이용한다. 선언된 createCard()를 객체 처럼 다룰 수 있다.

여러 클로저를 생성시에 각각의 스코프가 생성되어, 내부 변수는 공유되지 않는다.

Factory 함수란? 함수들을 객체의 형태로 return 하는 함수. 위의 코드의 createCard()도 Factory 함수이다.
Class를 return 생성, return하는 경우도 있다.

호이스팅

var 변수와 function의 선언이 코드의 맨 위로 끌어올려지는 현상이다.

자바스크립트에는 크게 var와 let 타입의 변수가 존재한다. var 타입이 영향을 받는 호이스팅이라는 개념이 일반적인 상황에서는 실수를 야기할 수 있는데, 이에 대한 대안으로 let 타입의 변수가 등장 하게 되었다. 대부분의 경우에서는 var보다 let 사용이 권장된다.

console.log(a); //undefined
console.log(b); //Uncaught ReferenceError : Cannot access 'b' before initialization

var a = "안녕하세요";
let b = "반갑습니다";

console.log(a); //"안녕하세요"
console.log(b); //"반갑습니다"

위의 예제 코드처럼 var 타입은 선언부가 최상단으로 끌어올려지며 초기화가 이루어져 참조가 가능하지만 undefined을 가지고, let은 초기화가 발생하지 않아 참조가 불가능하다. 정의된 부분 아래에서는 모두 참조가 가능하다.

console.log(plus(10, 15))	// 25

function plus(a, b) {
	return a + b
}

console.log(minus(15, 5)) // Cannot access 'minus' before initialization

const minus = (a, b) => {
	return a - b;
}

Function 함수는 호이스팅이 일어남과 함께 생성 단계에서 함수 전체가 저장 되므로, 호출이 가능하다. 반면 화살표 함수는 호이스팅이 발생하지 않으며, const 타입도 마찬가지로 호이스팅이 발생하지 않는다. 따라서, 위의 예제처럼 초기화되지 않아 참조할 수 없다는 에러를 확인할 수 있다.

[JavaScript] 실행 Context와 Scope

박유상의 개발블로그 — Fri, 6 May 2022 00:48:33 +0900

자바스크립트 엔진이 어떻게 동작 하는지 알아보자.

실행 컨텍스트 (Execution Context)

실행 컨텍스트 스택 (call stack) (출처 엘리스SW트랙)

자바스크립트 엔진은 실행 컨텍스트 스택의 흐름에 따라 동작한다.

실행 컨텍스트란? 코드의 흐름과 변수 따위 등 함수 동작에 필요한 환경 정보가 담긴 객체를 지칭한다.

실행 컨텍스트 (출처 엘리스SW트랙)

This

this는 기본적으로 window를 가리키고, console.log와 같은 함수는 window에 포함되어 있다. 프로그래밍에서 의도한 위치의 변수나 함수를 사용하기 위해 this를 적절하게 사용해야한다.

[JavaScript] This 포인터 이해하기

This 포인터 클래스 내에서 this.변수명 형식으로 변수를 참조하는 것을 보았을 것이다. 앞서 실행 컨텍스트에 this가 포함된 것을 볼 수 있다. this는 스코프 마다 달라질 수 있는데, 크게 일반 함수

muhly.tistory.com

Variable Object

스코프(실행되는 환경 혹은 범위)에 있는 변수들을 담고 있다. 스코프가 존재하지 않는다면 변수 명이 같은 변수가 2개 이상 존재할 때 충돌을 일으킬 수 있다.

Scope Chain

다음에 연속적으로 실행되어야 할 동작을 담고 있다.

동작 흐름

실행 컨텍스트 스택이 만들어지고 실행되는 과정은 다음과 같다.

자바스크립트 엔진이 코드의 유무와 관련 없이 전역 실행 컨텍스트를 생성한다.
함수가 호출되게 될 때, 함수의 환경 정보들을 모아 실행 컨텍스트를 생성, 스택에 Push한다.
맨 마지막으로 실행된 print 함수(예시 참고)의 실행 컨텍스트는 변수 v를 가지고 있고, 해당 실행 컨텍스트에서만 사용된다.
print 함수가 생성할 다음 실행 컨텍스트가 없으므로 print 함수를 실행하고, 끝나면 스택에서 Pop한다.
스코프 체인을 따라 스택이 순차 실행된다. 모두 실행이 완료되면 실행 컨텍스트로 돌아온다.

실행 컨텍스트 생성 과정

생성 단계에서 엔진이 변수 선언을 읽는다. 함수 선언문, 함수 표현식, 변수 등을 읽어 실행 컨텍스트에 저장한다. 변수는 실행 컨텍스트의 렉시컬 환경 Lexical Environment을 구성하고 함수 전체가 기록되며 이외의 값은 기록되지 않는다.
실행 단계에서 변수 값을 할당한다. 변수에 값을 할당하는 구문을 만나면 실행 컨텍스트에 값을 저장한다.

Lexical Environment

렉시컬 환경은 스코프의 변수와 함수를 매개변수로 저장하는 객체이다. 코드가 실행 되면서 참조가 필요한 변수 값이 있을 때, 이 객체에서 식별자 이름을 Key로 찾는다. 함수의 고유한 영역을 구성하는 환경이라고 할 수 있다.

function print(v) {
	let id = 'a5vf32s';
    console.log(`${id} is running : ${v}`);
}

print()

//Lexical Environment's record
{v: undefined, a: 'a5vf32s' };

Lexical Scope

자바스크립트는 렉시컬 스코프를 따르는데 함수 스코프를 생성될 때 어디서 호출 되었는지에 따르는 것이 아닌, 어디서 생성 되었는지를 따르는 것이다. 정적 스코프(Static scope)라고도 부른다. 렉시컬 환경이 함수의 고유한 영역을 구성하고, 이러한 특성을 따르는 것이다.

var value = 5;

function first() {
  var value = 10;
  second();
}

function second() {
  console.log(value);
}

first(); // 5
second(); // 5

위의 코드는 first() 내에 선언된 value는 second() 스코프의 value가 되지 않음을 보여주고 있다.

박유상의 개발블로그

[WEB] REST API 기본

HTTP

API (Application Programming Interface)

REST API (Representational State Transfer)

Method

Convention

Request

[React] 파일 경로를 깔끔하게 정리하기

부모 폴더가 같은 Components

특정 경로 단순화 하기

쓰로틀링(throttling)과 디바운싱(debouncing)

디바운싱(debouncing)

쓰로틀링(throttling)

[JavaScript] 비동기 처리

비동기 처리

비동기적 처리

자바스크립트의 비동기

Promise

Promise all

Async, Await

[JavaScript] This 포인터 이해하기

This 포인터

객체 내부의 this

[React] 다국어 변환 라이브러리 i18n

설치

언어 파일

i18n 설정

최상위에서 호출

useTranslation

현재 국가 코드 반환

다국어 지원 텍스트 출력

ICT 글로벌 인턴십 실리콘밸리 합격 후기

합격

ICT 학점연계 프로젝트 인턴십 글로벌 과정

지원 과정

코딩 테스트

서류 합격 후

면접

E____ (교육 회사)

Chartmertic (음악 빅 데이터)

B___ R_______ (인공지능 로봇)

선택

[Express] Node.JS Express 시작하기

Node.JS

Node.JS 특징

싱글 쓰레드

비동기

이벤트 기반

Express

Express 구축

패키지 설치

기본 설정 파일 생성

백엔드 구축하기

실행

[JavaScript] 호이스팅과 클로저

클로저

호이스팅

[JavaScript] 실행 Context와 Scope

실행 컨텍스트 (Execution Context)

This

Variable Object

Scope Chain

동작 흐름

실행 컨텍스트 생성 과정

Lexical Environment

Lexical Scope

B_ R_____ (인공지능 로봇)