개발/Next.js

Next.js, Redux toolkit, next-redux-wrapper 연동하는 방법 feat. typescript

버전 next@^12.0.8 next-redux-wrapper@^7.0.5 @reduxjs/toolkit@^1.7.1 Next.js에서 SSR(Server Side Rendering), SSG(Server Side Generation)를 사용할 때 next-redux-wrapper 라이브러리를 활용해서 redux 스토어를 간편하게 연동할 수 있습니다. next-redux-wrapper 설치 yarn add next-redux-wrapper redux toolkit을 활용해서 스토어를 생성할 때 아래와 같이 next-redux-wrapper로 스토어 생성 함수를 감싸줍니다. import { configureStore, combineReducers, AnyAction } from "@reduxjs/toolk..

개발/트러블슈팅

Typescript 에서 console을 인식하지 못하는 문제

로컬에서 타입스크립트 테스트를 위해 설정을 하는 와중에 console을 찾을 수 없다는 에러를 발견 해당 에러는 기본적인 @types/node가 설치되지 않아서 발생한 에러 [nodemon] starting `ts-node index.ts` /Users/ruden/Desktop/portfolio/2022/learn-types/node_modules/ts-node/src/index.ts:750 return new TSError(diagnosticText, diagnosticCodes); ^ TSError: ⨯ Unable to compile TypeScript: index.ts:1:1 - error TS2584: Cannot find name 'console'. Do you need to change yo..

개발/Javascript

자바스크립트 super 제대로 이해하기

super 키워드는 상위(부모) 객체의 함수를 호출할 때 사용됩니다. 문법 super([arguments]); // 부모 생성자 호출 super.functionOnParent([arguments]); 설명 클래스의 생성자(constructor)에서는 super 키워드 하나만 사용되거나 this 키워드가 사용되기 전에 호출되어야 합니다. 또한 super 키워드는 부모 객체의 함수를 호출하는데 사용될 수 있습니다. 클래스에서 super 사용하는 방법 class Parent { constructor(age) { this.name = "parent"; this.age = age; } sayMyName() { console.log(this.name); } } class Child extends Parent { c..

개발/Vue

Vue emit 사용법 및 간단 예제 (How to Emit Data in Vue)

이번 포스팅에서 Vue.js 자식 컴포넌트에서 이벤트를 내보내는 방법을 다뤄보도록 하겠습니다. emit이란? 이벤트 emit은 하위 컴포넌트에서 상위 컴포넌트로 이벤트를 전달하기 위한 방식입니다. 이벤트를 전달함으로써 상위 컴포넌트는 하위 컴포넌트에서 전달하는 값을 전달받을 수 있습니다. 예시 이벤트 emit 단계는 아래와 같습니다. 부모 컴포넌트는 자식 컴포넌트로 count prop를 전달합니다. 자식 컴포넌트는 increment, decrement 메서드를 통해 수정된 값을 change emit을 통해 부모 컴포넌트로 넘겨줍니다. 부모 컴포넌트는 전달받은 값을 활용해서 count 데이터를 업데이트합니다. 아래 코드는 부모 컴포넌트 예시입니다. 부모 컴포넌트에서 count 데이터를 관리하고 있습니다. ..

개발/트러블슈팅

SSH 로그인 접속 시 퍼미션 문제 (UNPROTECTED PRIVATE KEY FILE)

잘못된 퍼미션으로 SSH 로그인 접속할 경우 아래와 같은 에러가 발생할 수 있습니다. SSH 개인키는 중요한 정보이기 때문에 소유자 외에 다른 사람이 읽을 경우에 발생합니다. (public으로 공개되어 있으면 에러가 발생!) @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: UNPROTECTED PRIVATE KEY FILE! @ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ Permissions 0644 for '/Users/username/.ssh/your-key.pem' are too open. It is required that your private key f..

개발/React Native

리액트 네이티브 초간단 설치방법, 예시(맥, iOS)

리액트 네이티브를 개발하기 위해 맥(Mac OS)에서 iOS 시뮬레이터를 설치하고, 사용하는 방법에 대해 소개하도록 하겠습니다. 의존성 설치 Node & Watchman Homebrew를 사용하여 Node 및 Watchman을 설치하는 것을 추천합니다. Homebrew를 설치한 후 아래 명령어를 통해 패키지를 설치하세요. brew install node brew install watchman 이미 Node를 설치한 경우 Node 12 이상인지 확인해주세요. Watchman은 파일 시스템의 변경 사항을 관찰하기 위한 Facebook의 도구입니다. 더 나은 퍼포먼스를 위해 설치하는 것이 좋습니다. Xcode Xcode를 설치하는 가장 쉬운 방법은 Mac App Store를 활용하는 것입니다. Xcode를 설..

개발/Javascript

[자바스크립트] replace 정규표현식 gi는 무엇을 의미할까?

자바스크립트에서 replace를 활용해서 정규표현식을 적용할 때 gi라는 패턴을 사용하곤 합니다. 아래 예시를 살펴봅시다. hellllo worLd 문자열에서 l을 a로 모두 치환하고 싶을 경우 아래와 같이 정규표현식을 적용하면 되는데요. const str = "hellllo worLd"; console.log(str.replace(/l/gi, 'a')); // heaaaao worad 정규표현식에 사용된 gi의 의미는 아래와 같습니다. 정규표현식 g : 발생할 모든 pattern에 대한 전역 검색 i : 대/소문자 구분 안함 그렇기 때문에 만약 위 예시에서 정규표현식에 사용된 i를 빼게 된다면, 대문자 L은 치환되지 않고, heaaaao worLd 결과를 확인할 수 있습니다. const str = "h..

개발/Javascript

[자바스크립트] 강제로 UA(userAgent) 변경하는 방법 및 간단예시

강제로 UA(userAgent)를 변경하는 방법이 좋은 방법은 아닙니다. 하지만 이러한 방식으로 UA를 조작해볼 수 있다라는 점을 참고하면 좋을 것 같습니다. 예시 const newUA = `${navigator.userAgent} helllllo!`; Object.defineProperty(window.navigator, "userAgent", { get: () => newUA }); // before // Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36 // after // helllllo 값이 추가된 모습 // Mozilla/5.0 ..

개발/Node.js

[Node.js] fs.readFile, fs.readFileSync 사용법과 간단예시 | 파일 읽기

Node.js의 'fs' 모듈을 활용해서 파일 I/O 작업을 구현할 수 있습니다. fs 모듈의 메서드는 동기식일 수도 있고 비동기식일 수도 있습니다. 비동기 함수에는 비동기 함수의 완료를 나타내는 마지막 매개변수로 콜백 함수가 있습니다. readFileSync(동기식), readfile(비동기식)으로 비동기식 메소드가 콜백함수가 존재하는 점을 제외하고는 구현하는 방식은 동일합니다. readFileSync file: 텍스트 파일의 상대 경로를 사용합니다. 경로는 URL 유형일 수 있습니다. 파일은 파일 설명자일 수도 있습니다. 두 파일이 같은 폴더에 있는 경우 파일 이름을 따옴표로 묶습니다. options: 인코딩 및 플래그를 포함하는 선택적 매개변수이며 인코딩에는 데이터 사양이 포함됩니다. 기본값은 원시..

개발/Node.js

[Node.js] Buffer to String 처리방법과 간단예시 | readFileSync encoding

Node.js에서 example.txt 파일을 읽어서 불러오는 방법은 아래와 같습니다. 일반적으로 파일시스템 readFileSync 메소드를 통해 파일을 읽어오면 바이너리 데이터로 받아오게 되는데 Buffer 객체로 나오는 이유가 Binary 데이터를 담을 수 있는 객체가 바로 Buffer 객체이기 때문입니다. const fs = require('fs'); const data = fs.readFileSync('example.txt') console.log(data); // 그렇기 때문에 파일을 읽어올 때 인코딩 타입을 utf-8로 설정하거나, Buffer 객체를 받아온 후 toString 메소드를 활용해 utf-8로 변환해야합니다. Buffer to String 단일 버퍼가 있는 경우 특정 인코딩을 사용..

개발/Node.js

[Node.js] 폴더 안에 모든 파일 삭제하는 방법 (How to remove all files from directory)

Node.js를 활용할 때 종종 폴더 안에 모든 파일들을 한번에 삭제하고 싶은 경우가 생깁니다. 이때 굉장히 간편하게 활용할 수 있는 노드 라이브러리가 존재합니다. fs-extra 폴더 안에 모든 파일을 쉽게 삭제하기 위해 fs-extra 라이브러리를 활용합니다. fs-extra fs-extra contains methods that aren't included in the vanilla Node.js fs package. Such as recursive mkdir, copy, and remove. www.npmjs.com 사용법 emptydirSync 메소드를 사용합니다. emptydirSync는 디렉토리가 비어 있는지 확인합니다. 디렉토리가 비어 있지 않으면 디렉토리 내용을 삭제합니다. 디렉토리가 없..

개발/Node.js

[Node.js] fs.writeFile, fs.writeFileSync 사용법과 간단예시 | 파일 저장

Node.js의 'fs' 모듈을 활용해서 파일 I/O 작업을 구현할 수 있습니다. fs 모듈의 메서드는 동기식일 수도 있고 비동기식일 수도 있습니다. 비동기 함수에는 비동기 함수의 완료를 나타내는 마지막 매개변수로 콜백 함수가 있습니다. writeFileSync(동기식), writeFile(비동기식)으로 비동기식 메소드가 콜백함수가 존재하는 점을 제외하고는 구현하는 방식은 동일합니다. writeFileSync file: 저장할 파일의 경로, 파일명, 확장자명을 기입합니다. data: 파일에 기록될 데이터 양식 options: 3개의 선택적 매개변수가 있습니다. encoding: 파일의 인코딩을 지정하는 문자열 값입니다. 기본값은 'utf8'입니다. mode: 파일 모드를 지정하는 정수 값입니다. 기본값은..

개발/기타

외부에서 로컬호스트(localhost) 접속하는 방법 | localtunnel 사용법

내부망 PC의 로컬호스트(localhost)를 외부 인터넷 망(다른 컴퓨터)에서 접근해야되는 경우가 있습니다. 회사에서 빠르게 다른 유관자들에게 현재 진행상황을 공유해야되거나 PC에서 개발하는 프로젝트를 모바일에서 잠깐 확인해야될 경우가 있을 때 유용하게 사용할 수 있습니다. 이때 일반적으로 사용하는 서비스가 바로 ngrok인데요. 대부분 ngrok을 무료 계정으로 이용할텐데 무료 버전의 경우 실행할 때마다 매번 서브도메인 이름이 랜덤으로 변경되기 때문에 조금 불편할 때가 있습니다. localtunnel? Localtunnel을 사용하면 DNS 및 방화벽 설정을 망치지 않고 로컬 개발 시스템에서 웹 서비스를 쉽게 공유할 수 있습니다. Localtunnel은 모든 요청을 로컬에서 실행 중인 웹 서버에 프록..

개발/React

타입스크립트로 리액트 함수형 컴포넌트 작성하는 방법

시작 전에 함수형 컴포넌트에 대해 알아보기 전에 이 글을 보시는 분들은 사전에 리액트 프로젝트가 설치되었다는 가정하에 진행합니다. 만약 리액트 프로젝트가 설치되지 않았다면 리액트 프로젝트 설치 후 진행해 주세요! # React CRA npx create-react-app my-app --template typescript # or yarn create react-app my-app --template typescript # Next.js npx create-next-app@latest --typescript # or yarn create next-app --typescript 함수형 컴포넌트 만들기 리액트에서 타입스크립트를 사용하지 않고 함수형 컴포넌트를 만드는 방법은 아래와 같습니다. 화살표함수나 일반..

개발/기타

VSCode 자동완성 단축키 초간단 설정방법

맥북에서 VSCode를 사용하다보면 자동완성되는 단축키를 커스터마이징하거나 명령어를 확인하고 싶은 경우가 있습니다. 이번 포스팅에서는 VSCode에서 자동완성 단축키를 간단하게 설정하고, 확인하는 방법에 대해서 소개하도록 하겠습니다. Keyboard Shortcuts 설정방법 VSCode에서 키보드 자동완성(Keyboard Shortcuts)를 확인할 때 상단 Code > Preferences 메뉴를 사용하거나 검색을 통해 Open Keyboard Shortcuts를 통해 Keyboard Shortcuts 설정 페이지로 접근합니다. 아래 Keyboard Shortcuts 페이지에서 사용하고 있는 커맨드를 확인하고, 원하는 단축키로 변경할 수 있습니다. VSCode에서 "Trigger Suggest" 커맨..

개발/Javascript

자바스크립트 insertBefore() 사용법 및 간단 예제

insertBefore? insertBefore() 메소드는 참조된 노드 앞에 특정 부모 노드의 자식 노드를 삽입합니다. 문법(Syntax) let insertedNode = parentNode.insertBefore(newNode, referenceNode); referenceNode가 null 이라면, newNode가 자식 노드의 리스트의 끝에 삽입됩니다. referenceNode는 옵션값이 아닙니다. 명시적으로 Node 나 null 를 전달해야 합니다. insertNode - 삽입되는 노드, 즉 newNode parentNode - 새로 삽입된 노드의 부모입니다. newNode - 삽입할 노드입니다. referenceNode - newNode가 삽입될 때 기준이 되는 노드 (해당 노드 앞에 새로운 ..

개발/React

React Hooks: useState() 사용법 | 예제를 통해 제대로 이해하자 (Examples of the useState Hook)

React Hook은 React 16.8버전에서 새로 추가된 API입니다. Hook은 기존에 리액트 클래스 컴포넌트를 작성하지 않아도 함수형 컴포넌트에서 state 특성을 활용할 수 있습니다. useState Hook? 리액트는 컴포넌트 state를 통해 변경된 데이터를 관리합니다. 리액트 Hook이 등장하기 전에 state를 클래스 컴포넌트(Class Component)에서 사용했습니다. import React, { Component } from "react"; // React 클래스 컴포넌트 예시 export default class Hello extends Component { state = { count: 0 }; render() { return hello, {this.state.count}; }..

개발/Nuxt.js

Nuxt.js에서 깔끔하게 구글 애드센스(Google Adsense) 추가하는 방법

Nuxt.js에서 구글 애드센스(Google Adsense)를 추가할 때 직접 스크립트를 작성해도 되지만 최근에 매우 손쉽게 구글 애드센스를 추가할 수 있게끔 제공하는 라이브러리가 있어 소개하려합니다. 버전 정보 Nuxt.js@2.12.2 vue-google-adsense@1.10.1 vue-script2@2.1.0 설치 vue-google-adsense Vue.js Google Adsense Component with InFeed and InArticle Ads support www.npmjs.com npm install vue-script2 vue-google-adsense --save // or yarn add vue-script2 vue-google-adsense 플러그인 추가 Nuxt 플러그인에..

개발/Nuxt.js

Nuxt.js asyncData, fetch 차이점 및 사용법 | 간단 예제를 통한 비교 (Data Fetching Hook)

라이프사이클 다이어그램 (Nuxt.js Lifecycle Hooks) Nuxt.js asyncData, fetch 동작 방식을 이해하기 전에 해당 메서드가 어디서 실행되는지 Nuxt.js 라이프사이클 다이어그램을 이해하는 것이 필요합니다. Nuxt.js 개발자는 아래 다이어그램을 꼭 인지하고 계실 필요가 있습니다. asyncData 서버사이드(Server)에서 데이터를 가져와서 랜더링을 하고싶은 경우가 있습니다. Nuxt.js는 컴포넌트 데이터를 세팅하기 전에 비동기 처리를 할 수 있도록 하기 위해서 asyncData 메소드를 제공합니다. asyncData는 페이지 컴포넌트가 로드되기 전(route가 변경될 때)에 항상 호출되는 메소드입니다. asyncData에서는 서버측에서 비동기 데이터를 처리할 수 ..

개발/Vue

Vue.js mounted created 차이 | 예제를 통해 쉽게 이해하자 (Difference between the created and mounted lifecycle)

Vue.js를 처음 접하면 Vue의 라이프사이클이 생소하기 때문에 created, mounted가 무엇인지 구별이 안될 수 있습니다. 각 라이프사이클 훅에서 어떤 일이 일어나고, 우리가 어떻게 사용하는지에 대해서 다뤄보도록 하겠습니다. 그리고 Vue.js를 통해 개발하는 개발자라면 아래 첨부한 라이프사이클 다이어그램은 꼭 인지하고 있을 필요가 있습니다. 라이프사이클 훅(Lifecycle hooks)이란? 각 컴포넌트는 생성될 때 일련의 초기화 단계를 거칩니다. 예를들어 데이터 관찰, 템플릿 컴파일, 인스턴스를 DOM에 마운트, 데이터 변경 시 DOM을 업데이트해야합니다. 그 과정에서 라이프사이클 훅이라 불리우는 함수도 실행하여, 사용자가 특정 단계에서 자신의 코드를 추가할 수 있는 기회를 제공합니다. 라..