Jun's TID

타입 스크립트 좋더라, 타입 스크립트 쓰세요. 런타임 에러가 확 줄어요..!라는 말을 종종 들으면서도 현재 회사에서 잡고 있는 프로젝트가 전부 JS로 되어 있는 것도 그렇고, 뭔가 JS도 잘 쓰고 있는 마당에 굳이...?라는 생각이 들어서 따로 쳐다보지를 않고 있었다. 이젠 리엑트로 프로젝트도 하고 있고, 조만간 RN으로도 하나 진행할 거 같아서 더는 미루지 말고 한번 사용이나 해보자! 라는 생각이 들어서 다뤄보려고 한다. 기본적인 내용부터 차근차근 공부해보자. - 그래서 타입 스크립트가 뭐야? 타입스크립트(TypeScript)는 자바스크립트(JavaScript)를 기반으로 하는 언어로, 자바스크립트의 모든 기능을 포함하면서 타입 시스템을 추가해 준다는 것이 기본 콘셉트이다. 이로 인해 큰 규모의 애플리..

JavaScript의 reduce 함수는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다. 이 함수는 배열을 순회하면서 각 요소에 대해 실행되는데, 이 때 누적된 결과값과 현재 요소를 함수의 인자로 받아 처리한다. reduce 함수는 배열의 요소를 하나씩 처리하면서 최종적으로 단일 값(예를 들어, 합계, 평균, 객체 등)을 생성하는 데 사용된다. 바로 한번 알아보자. 우선, reduce 함수의 기본 구조는 다음과 같다. array.reduce(function(accumulator, currentValue, currentIndex, array) { // 로직 실행 }, initialValue); 여기서 accumulator는 누적값을 의미하며, current..

async와 await은 JavaScript의 비동기 프로그래밍을 위해 ES2017에 도입된 키워드이다. async 함수는 항상 Promise를 반환하며, 함수 내부에서 await 키워드를 사용하여 Promise의 결과를 동기적인 방식으로 처리할 수 있다. await 키워드는 async 함수 내에서만 사용할 수 있다. async 함수: 이 키워드를 사용하여 함수를 선언하면, 함수는 자동으로 Promise를 반환한다. 함수 내부에서 return 문을 사용하면, 이 값은 Promise가 이행(fulfilled)될 때의 값이 된다. await 키워드: Promise가 처리될 때까지 함수 실행을 일시 정지시키고, Promise가 이행되면 결과값을 반환한다. 오류가 발생하면 예외를 발생시킨다. // 1 + 1을 ..

Promise는 JavaScript에서 비동기 작업을 표현하고 다루는 데 사용되는 객체이다. 이는 비동기 작업의 최종 완료(또는 실패) 및 그 결과값을 나타낸다. Promise 객체는 세 가지 상태 중 하나를 가진다. 대기(pending): 초기 상태, 이행 또는 거부되지 않음. 이행(fulfilled): 연산이 성공적으로 완료됨. 거부(rejected): 연산이 실패함. Promise는 then, catch, finally 메소드를 제공하여, 이행 또는 거부 상태가 되었을 때 실행할 콜백 함수들을 연결할 수 있다. 비동기로 1 + 1을 계산하는 예제 코드와 함께 확인해보자. // 1 + 1을 수행하는 비동기 함수 const asyncAddition = new Promise((resolve, reject..

JavaScript의 비구조화 할당은 객체나 배열로부터 속성이나 요소를 변수에 쉽게 할당할 수 있도록 하는 표현식이다. 이 기능은 ES6(ECMAScript 2015)에서 도입되었으며, 코드의 간결성과 가독성을 향상시키는 데 도움이 된다. 객체 비구조화 할당 객체의 비구조화 할당을 사용하면 객체의 속성을 직접 변수로 할당할 수 있다. const obj = { a: 1, b: 2, c: 3 }; // 전통적인 방식 const a = obj.a; const b = obj.b; const c = obj.c; // 비구조화 할당 const { a, b, c } = obj; 추가 기능: 기본값 할당: 객체에 해당 속성이 없을 경우, 기본값을 할당할 수 있다. const { a, b, c, d = 4 } = obj..

Node.js 에서 JWT를 사용하여 토큰 기반 인증 시스템을 구축할 수 있다. 세션 기반이나 쿠키와 같은 개념은 생략하고, 어떻게 JWT를 사용하여 토큰을 생성하고 이를 검증하는 지만 확인해보려고 한다. 예제는 직전에 DB연동을 하면서 진행했던 코드를 그대로 가지고 진행한다. 바로 한번 확인해보자. 우선, User라는 모델을 하나 만들고 DB에도 users 테이블을 하나 생성하자. ◎models/User.js module.exports = (sequelize, DataTypes) => ( sequelize.define( "User", { id: { type: DataTypes.INTEGER, autoIncrement: true, primaryKey: true }, name: { type: DataTyp..

직전에 다뤘던 Node.js 런타임에 연장선으로 이번엔 DB를 연동해보려고 한다. 원래대로라면 책에 나온대로 MongoDB와 mongoose를 사용하여 Back-end 서버에 연동하려고 했는데, MongoDB가 유료가 된지 꽤 지나서... 그냥 mySql과 많이들 사용한다는 Node.js ORM 도구인 Sequelize를 사용하여 DB를 연동하고, 간단한 CRUD를 구현해보려고 한다. 바로 시작해보자. Sequelize에 대한 내용은 공식문서인 여기를 참조했으며, 직전 포스팅에서 구현했던 간단한 백엔드 서버를 가지고 실습을 진행하려고 한다. 우선, 아래와 같이 squelize와 mysql 연동을 위한 드라이버, sequelize 커멘드 라인을 위한 cli 까지 설치해주자. npm install seque..

자바스크립트 엔진을 기반으로 웹 브라우저뿐만 아니라 서버에서도 자바스크립트를 사용할 수 있는 런타임이 바로 지금까지 사용했던 node.js 이다. Node.js 환경에서 웹 서버를 구축할 때는 보통 Express, Hapi, Koa 등의 웹 프레임워크를 사용하지만, 이번 포스팅에서는 책에 나와 있는 그대로 Koa를 사용하여 백엔드 서버를 구축하려고 한다. Koa는 Express의 기존 개발 팀이 개발한 프레임워크이며, 미들웨어, 라우팅, 템플릿, 파일 호스팅 등과 같은 다양한 기능이 자체적으로 내장되어 있는 Express와는 달리 미들웨어 기능만 갖추고 있으며 나머지는 다른 라이브러리를 적용하여 사용한다. Koa는 또한 async/await 문법을 정식으로 지원하기 때문에 비동기 작업을 더 편하게 관리할..

SSR(서버 사이드 렌더링)과 같이 React 에서 웹팩 설정을 커스터마이징 해야할 때가 있는데, Create React App 으로 만들 프로젝트에서는 웹팩 관련 설정 파일이 기본적으로 보이지 않는다. 그렇기 때문에 아래와 같이 eject 기능을 실행하여, 해당 파일들을 자유롭게 Config 할 수 있게 해야 한다. 사용법은 매우 간단하다. npn run eject 명령어를 프로젝트 파일이 있는 경로에서 실행해주기만 하면 되는데, 숨겨져 있던 파일들을 불러오는 작업이기 때문에 git에 연동된 프로젝트라면 반드시 이전에 커밋을 하고 실행해야 한다. git add . get commit -m 'commit before eject' npm run eject 를 실행하고 나면, 아래와 같이 웹팩 Config ..

프로젝트를 배포하기 위해서는 반드시 빌드를 해야한다. 이 빌드 작업은 Webpack이라는 도구가 처리하는데, 웹팩에서 별도의 설정을 하지 않으면 프로젝트에서 사용 중인 모든 자바스크립트 파일을 하나의 파일로 합쳐지고, 모든 CSS 파일도 하나의 파일로 합쳐진다. 리액트에서는 이 빌드 과정에서 화면에 보여지지 않거나 당장 사용하지 않는 기능이 들어간 파일들을 미리 빌드하지 않고, 필요한 시점에 동적으로 불러와서 사용할 수 있게끔 해주는 기능을 구현할 수 있다. 이를 코드 스플리팅이라고 하며, 바로 한번 알아보도록 하자. 자바스크립트 함수 비동기 로딩 컴포넌트 코드를 스플리팅하기에 앞서 일반 자바스크립트 함수를 스플리팅 해보면서 어떤 개념인지 익혀보자. 우선, 아래와 같은 코드가 있을 때 ◎notify.js..