기본적인 CRUD를 작성해 보겠다.원래라면 DB연동을 해야하지만 DB연동은 다음 포스팅에서 진행하고이번 글에서는 내부 데이터를 사용해 만들어 보겠다.먼저 비즈니스 로직부터 작성해보겠다.nest cli를 통해 service를 생성하고 해당 이름을 todo로 정했다.그럼

NestJS의 기본적인 사용방법을 Todo list를 만들며 정리해보겠다.NestJS는 CLI를 통해 프로젝트 초기 설정 및 기본적인 Controller, Provider, Module를 만들어준다.아래의 명령어를 통해 nestjs cli를 설치하자.그 후 다음과 같은

NestJS의 기본 개념을 알아보자

const time: number = 12와 같은 형식으로 변수 선언 뒤에 :를 붙여 타입을 설정한다.const sum = (x:number, y:number):number => x+y의 형식으로 매개변수와 리턴값의 타입을 정해줄 수 있다.typescript에서는 in

Electron은 여러가지 Builder가 있지만 여기선 electron-builder를 사용하겠다.먼저 패키지를 설치한다.npm install -D electron-builderpackage.json에 다음과 같은 설정을 추가한다.각 OS별 아이콘 타입 등을 설정하고

Electron에서 파일을 입출력하려면 반드시 NodeJS를 통해야 한다. 사용자의 입력은 Renderer Process가 담당하기 때문에 NodeJS를 기반으로 동작하는 Main Porcess와 통신이 필수적인데, 이 때 IPC 통신을 사용한다.

초기 설정 이후 본격적으로 Electron 코드를 작성하기 전에 Electron의 생명주기에 대해 공부해보자.Electron에서 제공하는 app 객체는 Electron의 생명주기를 관리한다.위 코드에서는 whenReady 함수와 app.on 함수에서 구별할 수 있는 b

Electron LogoNodeJS 등장이후 프론트를 만드는 데만 쓰이던 js가 서버, 모바일 앱, 데스크톱 앱에 쓰일 수 있게 되었다. 서버 - NodeJS앱 - React Native데스크톱 앱 - ElectronElectron은 HTML, CSS, JS로 Desk

HTML 파일 안에서 선언된 값이다.ex) 여기서 id 값이 container로 되어있는데, 이 것이 어트리뷰트이다.DOM안에서 가지고 있는 값이다.어트리뷰트의 경우 HTML에 적혀있는 값이라 변경할 수 없지만,프로퍼티는 DOM안의 값이기 때문에 변경할 수 있다.예를들

오랜만에 React가 아닌 Vanilla JS 프로젝트를 하면서기능 구현에만 집중하는 것보다 디자인 패턴에 대해 공부하고 만들어 보는 것을 목표로 삼았다.MVC, MVP, MVVM 등 다양한 패턴이 있는데 글로 적힌 설명을 봐도 잘 와닿지 않았다.그래서 Js를 배울때

Jest를 활용하여 테스트 코드를 작성해보자!

얼마전 VanillaJS로 IE10까지 지원하는 작은 프로젝트를 진행했다.처음에는 웹팩과 바벨이 IE 지원에 대한 모든것을 해결해 줄것이라고 생각했다.그래서 마음 편하게 코드를 짜고 있었는데...작업 중간에 IE 테스트를 해보니 fetch가 동작하지 않았다.분명 bab

모든 블럭을 체크하여 0인 경우 상하좌우 네 방향으로 재귀 함수를 돌려 1 값으로 만든다.이렇게 처리한 후 결과 값을 하나씩 올린다.단 없는 좌표일 경우와 이미 1인 경우 바로 리턴한다.

만약 아래 두 코드의 차이점을 답 할 수 있다면 제대로 useSelector를 사용하고 있는 것이다.코드1코드2코드 1과 2의 차이는 useSelector를 한 번 사용했지 여러번 사용했는지의 차이가 있다.위 코드를 실행시키면 결과는 똑같이 출려된다.그럼 어떠한 차이가

React를 공부할 때 중요하게 배우는 개념 중 하나는 상태관리다.React는 상태를 바탕으로 View를 그리기 때문에 일반 변수로 사용하지 않고 setState로 상태를 할당한다고 배운다.하지만 JavaScript를 공부할 때 처럼 console.log로 상태 변화를

선택 정렬(selection sort)은 배열의 최소값을 검색하여 배열의 왼쪽부터 순차적으로 정렬을 반복하는 정렬 알고리즘이다.배열이 미정렬 상태이므로 최소값 검색에는 이진 검색이 아닌 선형 검색 알고리즘을 사용한다.선택 정렬은 버블 정렬보다 빠르다.시간 복잡도: O(

yarn 전역 설치https://create-react-app.dev/git 초기 설정도 자동으로 해줌단 git 설정이 되어 있는 폴더에서 실행시 깃 설정 안함3000번 포트로 개발 서버를 열고 리엑트 코드를 번들링(최적화) 하기 전에 바로 띄워서 확인 할 수

기존 블로그에 작성한 내용을 velog로 이전한 글입니다HTML 문서를 표현하는 트리 자료구조HTML 구조를 제어할 수 있는 APIHTML을 구성하는 개별적인 요소문서 노드 : document 객체, HTML당 유일함.요소 노드 : HTML 요소를 가리키는 객체.어트리

기존 블로그에 작성한 내용을 velog로 이전한 글입니다Set 객체: 중복되지 않는 유일한 값들의 집합Map 객체: 중복되지 않는 키, 중복 가능한 값의 쌍으로 이루어진 컬렉션다음과 같이 교집합을 구할 수 있다.다음과 같이 합집합을 구현할 수 있다.차집합(A-B)은 집

기존 블로그에 작성한 내용을 velog로 이전한 글입니다HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것을 말한다.랜더링 과정주소창에 URL 입력서버에서 주소/index.html 응답HTML 파싱 시작, HTML DOM 생성HT