전체 글

React Native에서 node 내장 라이브러리 사용하기 (rn-nodeify)

노드에는 기본적으로 crypto, path, url, assert 등의 라이브러리가 내장으로 제공된다.리액트에서도 이를 사용하기 위해서 웹팩 설정을 변경하는 등의 추가적인 설정이 필요했는데, 리액트 네이티브에서도 그렇다.이를 간단하게 설정할 수 있게 해주는 라이브러리가 있는데, rn-nodeify이다.이번엔 rn-nodeify의 사용법에 대해서 기록하고자 한다.npm i rn-nodeify설치가 끝나면, package.json의 script에 postinstall을 작성한다."postinstall": "rn-nodeify --install fs,crypto,url,assert --hack"위의 명령어를 통해서 자동으로 기입된 라이브러리를 설치할 수 있다.위에서는 crypto, url, assert만 사용..

간단하게 노드 서버에서 로그 기록하기 (morgan 사용하기)

노드를 사용한 서버에서 요청에 대한 로그를 남기기 위해서 미들웨어를 작성할 수 있다. 좀 더 편리한 방법으로 morgan이라는 라이브러리를 설치하여 사용할 수 있다. 난 express 환경에서 morgan을 사용해 보았다. const express = require("express"); const morgan = require("morgan"); const app = express(); app.use(morgan("dev")); 위와 같이 morgan을 사용하여 로그를 남길 수 있다. 인자로 설정을 넣을 수 있는데, 나는 dev설정을 사용하였다. combined, common, dev등의 설정이 있는데 앞의 두 개는 표준 Apache 로그에 관한 설정이고 dev는 개발용으로, 요청에 따라서 색상이 다른 ..

Typescript Generics와 Keyof, Mapped Types 사용해보기

타입스크립트에서 제네릭, Mapped Types을 사용해보고, keyof 키워드는 어느 상황에서 사용할 수 있을지 사용해보았다. interface dynamic { [key: number] : string, } const keys: dynamic = {1: 'one', 2: 'two'}; 타입스크립트에서는 위처럼 동일한 타입의 key-value값들을 갖는 객체를 정의할 수 있다. 다만, 이 경우 value의 타입은 맨 처음의 선언한 것에서 바뀔 수 없는 단점이 있다. 제네릭을 사용하여 더 확장성있게 코드를 작성할 수 있다. interface dynamic { [key: number] : T, } const str: dynamic = {1: 'one', 2: 'two'}; const num: dynamic..

개발한 서비스 (클라이언트 & 서버)의 배포전략에 대해서

로컬 환경에서 개발한 서비스가 이제 많은 사용자들에게 공개될 때가 왔다. 그렇다면, 어떻게 사용자들이 우리의 서비스를 원활히 이용하도록 잘 배포할 수 있을까? 크게 클라이언트 앱, 서버, 데이터베이스를 어떻게 사용자에게 제공할지 고민이 필요하다. 클라이언트 배포 클라이언트 앱을 통해서 사용자는 배포한 서비스를 이용할 수 있다. 사용자가 요청한 정보나 데이터가 클라이언트 앱을 통해서 화면에 그려진다. 만약 클라이언트를 배포하고자 한다면, AWS에서 제공하는 S3 서비스를 이용할 수 있다. (Netlify, Vercel같은 선택지도 있다.) 클라이언트 배포에 EC2를 사용하는 것은 어떠할까? 🫓 클라이언트 앱은 정적 파일로 빌드하여 배포해야 하기에 EC2는 적합하지 않다. S3를 이용하도록 하자. 클라이언트..

Emmet으로 HMTL, CSS 더 빠르게 작성하기 (VS Code)

Emmet이란 간단한 키워드로 많이 작성되는 HTML을 더 빠르고 손쉽게 작성할 수 있게 도와주는 것으로, 반복적으로 사용되는 Emmet을 정리, 요약하기로 하였다. 해당 키워드를 입력함으로써 VS Code에서 빠르게 HTML을 작성할 수 있다. html:5 .class이름 (ex - .test-div) 아무런 태그 이름을 적지 않고 .클래스 이름만 적는다면, 해당 클래스 이름을 가지는 div가 생성된다. tag이름.class이름 (ex - p.test-phrase) 만약 클래스 이름을 적지 않고 p만 입력하면, 클래스 이름이 없는 단순 p태그가 생성된다. 🥡 만약 .대신 #을 이용하여 태그를 생성하면, class가 아니라 id로 해당 값을 가지는 태그가 생성된다. ex - p#test-phrase lo..

프로그래머스 코딩테스트 연습 - 혼자서 하는 틱택토 JavaScript

틱택토라고 하였지만, 내 생각엔 영락없는 빙고였다. 만약 3x3으로 제한되지 않았다면 더 어려운 문제가 되었을 것 같았다. 여러 조건을 파악하고 반례를 찾는 게 핵심인 문제였다고 생각한다. const check = (board, char) => { let count = 0; for(let i = 0; i < 3; i++) { if(board[i][0] === char && board[i][1] === char && board[i][2] === char) { count++; } } for(let i = 0; i < 3; i++) { if(board[0][i] === char && board[1][i] === char && board[2][i] === char) { count++; } } // cross i..

tailwind css 사용하기 (CRA, Next.js)

설치 cra의 경우 tailwindcss의 설치만 하면 된다. develop 옵션을 주어 설치해준다. npm install -D tailwindcss npx tailwindcss init next.js의 경우 추가적인 라이브러리의 설치가 더 필요하다. npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p npx tailwindcss init -p를 통해서 tailwind.config.js 파일이 최상단에 자동으로 만들어지게 된다. tailwind.config.js 작성하기 cra의 경우 /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./src/..

자바스크립트에서 싱글톤 패턴

싱글톤패턴은 프로세스 내부에서 클래스가 단 하나의 인스턴스만 생성될 수 있도록 구현된 것을 의미한다. 기본적으로 static 영역에 인스턴스를 생성하고, 생성자가 실행되었을 때 기존에 생성된 인스턴스가 있으면 다시 인스턴스를 생성하지 않고 기존의 것을 반환하는 방식으로 구현된다. 자바스크립트에서는 클래스 문법으로 이를 구현할 수도 있지만, 함수형 프로그래밍으로 클로저 문법을 이용하여 이를 구현할 수도 있다. Class 문법으로 구현 class Key { static #_instance; constructor() { if(!Key.#_instance) { Key.#_instance = this } return Key.#_instance; } static getInstance() { return Key.#_..