전체 글

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

웹 사이트에서 글로벌 서비스를 위해 여러 국가의 언어를 지원할 수 있도록 되도록 i18n 라이브러리를 사용해보자! 자동 번역이 되는 것은 아니고, 번역된 데이터가 담긴 JSON 파일을 프로젝트에 삽입 후, 국가 코드를 변경할 때마다 각 국가에 해당하는 JSON 파일을 읽어와 화면에 출력 해준다. 설치 npm install react-i18next i18next --save yarn add react-i18next i18next 언어 파일 프로젝트 내에 다음과 같은 JSON 파일을 생성한다. JSX내에서 Key를 text로서 사용하면 국가 코드에 따라 Value를 출력한다. i18n 설정 import i18n from "i18next"; import { initReactI18next } from "reac..

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

합격 나는 ICT 학점연계 프로젝트 글로벌 인턴십 프로그램을 통해 오는 7월부터 12월까지 실리콘밸리 음악 빅데이터 스타트업 Chartmertic에서 인턴 생활을 하게 되었다. 해당 프로그램을 지원하고자 하는 분들을 위해 경험과 함께 글을 남긴다. ICT 학점연계 프로젝트 인턴십 글로벌 과정 본 과정은 정부에서 국내외의 기업과 컴퓨터 관련 계열 학생의 인턴 매칭을 지원해주는 프로그램이다. 매 학기마다 열리며, 글로벌 과정의 경우 학교에서 추천받은 학생만 지원 자격이 부여된다. 관심 있다면 학교에 먼저 문의해야 한다! 선발된 학생은 상반기는 3월부터 8월까지, 하반기는 7월부터 12월까지 미국의 실리콘밸리에서 인턴십을 진행하게 된다. 정부에서 항공료, 비자, 의료보험 등과 매월 150만 원을 지원해주며, ..

[Express] Node.JS Express 시작하기

Node.JS와 Express는 항상 함께 언급되며, NodeJS는 React를 사용할 때에도 출현한다. 도대체 무엇일까? Node.JS Node.JS는 웹의 발전에 따라 등장했는데, 단 방향 통신 위주였던 웹 1.0에서 사용자와 상호작용을 하는 웹 2.0이 등장했다. 이에 따라 구글에서는 고성능의 자바스크립트 동작을 위해 크롬 웹 브라우저를 위한 V8이라는 자바스크립트 엔진을 개발했다. 오픈소스인 V8를 활용해 자바스크립트를 웹뿐만 아니라 어느 환경에서나 사용할 수 있도록 개발된 실행기가 Node.JS이다. Node.JS의 등장에 따라 자바스크립트로 다양한 역할을 할 수 있게 되었다. 크로스 플랫폼 실행 제한 없는 동작 다양한 어플리케이션 실행 가능 Front-End(React), Back-End(Ex..

[JavaScript] 호이스팅과 클로저

클로저 자바스크립트에서 함수는 일급 객체(First Class Object)로 취급된다. 일급 객체란? 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 변수에 할당할 수 있으며, 다른 함수를 인자로 전달받는다. 또, 다른 함수의 결과로 return 될 수 있다. 클로저는 Factory 함수가 저장되는 공간이라고 할 수 있으며 일급 객체 성질을 이용한다. 선언된 createCard()를 객체 처럼 다룰 수 있다. 여러 클로저를 생성시에 각각의 스코프가 생성되어, 내부 변수는 공유되지 않는다. Factory 함수란? 함수들을 객체의 형태로 return 하는 함수. 위의 코드의 createCard()도 Factory 함수이다. Class를 return 생성, return하는 경우도..

[JavaScript] 실행 Context와 Scope

자바스크립트 엔진이 어떻게 동작 하는지 알아보자. 실행 컨텍스트 (Execution Context) 자바스크립트 엔진은 실행 컨텍스트 스택의 흐름에 따라 동작한다. 실행 컨텍스트란? 코드의 흐름과 변수 따위 등 함수 동작에 필요한 환경 정보가 담긴 객체를 지칭한다. This this는 기본적으로 window를 가리키고, console.log와 같은 함수는 window에 포함되어 있다. 프로그래밍에서 의도한 위치의 변수나 함수를 사용하기 위해 this를 적절하게 사용해야한다. [JavaScript] This 포인터 이해하기 This 포인터 클래스 내에서 this.변수명 형식으로 변수를 참조하는 것을 보았을 것이다. 앞서 실행 컨텍스트에 this가 포함된 것을 볼 수 있다. this는 스코프 마다 달라질 수..