전체 글

개요 Electron은 하나의 웹 사이트가 보기 편하게 프로그램으로 돌아간다고 생각해도 좋습니다. 그런데 웹사이트가 커지면 여러 페이지를 관리해야 합니다. 리액트는 상태 관리도 힘들어지고 LocalStorage, Cookie, session 을 관리해야 합니다. Electron도 제어가 필요합니다. 그것은 바로!!! Electron 통신 일렉트론은 메인 프로세스와 렌더러 프로세스 가 존재합니다. Socket.io 처럼 이벤트 날리면 그걸 받고 처리하는 식입니다. ipcMain, ipcRender 가 존재합니다. ipcMain 메인 프로세스에서 렌더러 프로세스로 통신할 때, ipcRenderer는 렌더러 프로세스에서 메인 프로세스로 통신할 때 사용합니다. 말로 해서는 이해가 잘 안됩니다. 예제를 통해 진행..

개요 타입스크립트를 사용하면서 편리한 기능들을 사용하면 좋을 것 같아 공부해봅니다!! 타입스크립트에서는 공통 타입을 변환을 용이하게 하기 위해서 유틸리티 타입을 제공합니다. 유틸리티 타입은 전역으로 사용 가능합니다. 종류 Partial , Readonly Record , Pick Omit, Exclue, Extract NonNullable, Parameters, ConstructorParameters ReturnType, Required Partial, ReadOnly Partial interface Todo { title: string; description: string; } // optional type을 쓰지 않고도 Partial 로 가능 function updateTodo(todo: Todo, ..

개요!! 엘리스 SW 부트캠프를 진행중하면서 스터디로 Next.js 풀스택 을 하고 있는데 너무 매력적인 프레임워크라서 공부 정리할겸 올립니다!! Next.js 는 단순히 SSR 만 제공하는 프레임워크는 아닙니다. 그 외에도 훌륭한 컴포넌트와 훅을 지원하며 성능이 뛰어난 동적 웹 사이트를 만들 수 있으며 최근에는 최적화에 대해 굉장히 신경쓰고 있습니다. 라우팅 시스템 원래 React 에서는 react-Router 라는 라우팅 라이브러리를 사용하여 외부 라이브러리를 설치를 하여 진행했었습니다. 모든 페이지가 클라이언트에서만 만들어지고 렌더링 되는 것입니다. Next.js는 다른 방법을 사용합니다. 바로 파일시스템 기반 페이지와 라우팅입니다. pages/ 디렉터리 안의 모든 파일은 곧 애플리케이션의 페이지와..

JavaScript 에 대한 이해도가 높지 않은 상태에서 참여하게 되었는데 이번에 이해한 Javascript 에 대해 새로 알게된 것들을 요약해드리겠습니다. 배열의 범위를 벗어난 인덱싱 input String의 특정 조건 충족 여부를 확인하는 boolean 함수를 작성 중 이었습니다. str[i] 와 str[i+1] 을 비교를 하는데 str.length 만큼 반복하는 건데 만약 i가 str 의 끝에 도달했을 때 str[i+1] 을 해버리면 오류가 뜨지 않나? 알아보니 Javascript 는 index error 가 나지 않습니다. undefined 가 떴습니다. function isIsogram(str) { str = str.toLowerCase(); str = str.split(''); str = st..

Next.js 란? React의 SSR(Server side rendering)을 쉽게 구현할 수 있게 도와주는 간단한 프레임워크 입니다. 리액트로 개발시 검색엔진 최적화(SEO)에 굉장히 좋지 않습니다. CSR을 하면 첫 페이지에서 빈 html을 가져와서 JS파일을 해석하여 화면을 구성하기 때문에 포털검색에 거의 노출 될 일이 없습니다. 하지만 Next.js 에서는 Pre-rendering을 통해서 페이지를 미리 렌더링 하며 완성된 HTML을 가져오기 때문에 사용자와 검색 엔진 크롤러에게 바로 렌더링 된 페이지를 전달할 수 있게 됩니다. Next.js와 비슷한 프레임워크 Gatsby JAM Stack을 활용한 정적 사이트 생성기입니다. Next.js 대신 사용할 수 있는 유명한 프레임워크 입니다. Ne..

interface vs type interface 인터페이스는 자체적으로 병합이라는것을 지원해주는데 기본적으로 array 인터페이스는 lib.es5.d.ts 에 정의되어 있고 기본적으로 lib.es5.d.ts 에 선언된 인터페이스가 사용됩니다. 그러나 tsconfig.json의 lib 목록에 es2015를 추가하면 타입스크립트는 lib.es2015.d.ts에 선언된 인터페이스에 병합됩니다. 여기에는 ES2015에 추가된 또 다른 Array 선언의 find 같은 메서드가 포함됩니다. 이들은 병합을 통해 다른 Array 인터페이스를 가집니다. // type에는 없는 선언병합 interface IState { name: string; capital: string; } interface IState { popu..