전체 글
NextJS, Atomic Design Pattern의 조합에서 프로젝트 구조에 대한 단상
안녕하세요, 오랜만에 짤막한 글을 가지고 돌아왔습니다. 최근 회사에서 혼자 맡아 진행 중인 프로젝트 중 생각난 내용입니다. 관리자 백오피스 형태에서 중복되지 않고 일회성으로 사용되는 컴포넌트에 대하여 프로젝트를 어떤 구조로 구성하여야 좋을지에 대해 고민하고 있었습니다. Atomic Design Pattern를 사용한 이번 프로젝트의 큰 구조는 아래와 같습니다. pages/ ├─ index.tsx/ ├─ _app.tsx ├─ _document.tsx src/ ├─ components/ │ ├─ atoms/ │ ├─ molecules/ │ ├─ organisms/ │ ├─ template/ 일단 크게 pages와 src/components 디렉토리를 확인할 수 있습니다.(스캐폴딩 된 NextJS 프로젝트에서..
🍪 프론트엔드에서 우아하게 쿠키를 조회하는 방법
안녕하세요, 오랜만에 쿠키를 조회하는 방법을 가지고 돌아왔습니다. 쿠키는 보통 사용자의 세션 관리, 개인화(사용자 선호 및 테마 설정), 추적(행동 기록 및 분석)을 위해 사용됩니다. 일반적으로 프론트엔드에서 서버에 요청을 하고 받아오는 응답의 HTTP 응답 헤더 중 Set-Cookie를 통해 서버에서 사용자 브라우저에 쿠키를 전송할 수 있습니다. 프론트엔드에서는 document 객체의 cookie에 접근하여 본인이 원하는 key, value를 문자열 형태로 지정하여 저장할 수 있습니다. document.cookie의 경우 도메인 별로 저장되며 전체 쿠키를 조회하여 가져올 때 쿠키 별로 세미콜론(;)으로 구분된 문자열로 반환됩니다. 이렇게 조회한 쿠키를 실제로 사용하기 위해 key별로 분리하여 반환하려면..
자바스크립트의 비동기 처리 - Promise
Promise 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 Callback Function을 사용합니다. 그러나 전통적인 Callback 패턴은 코드의 가독성을 해치고 비동기 작업 중 발생한 에러의 예외 처리가 곤란하며 여러 개의 비동기 처리 로직을 한꺼번에 처리하는 것에 대한 한계를 보여줍니다. ES6에서 추가된 Promise는 이런 기존의 Callback 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현합니다. // 👍 화살표 함수를 사용하여 코드의 가독성과 간결성을 챙길 수 있습니다. const asyncWork = new Promise((resolve, reject) => { if (// 비동기 작업의 성공 여부) { resolve("작업 성공"); } else { resolve..
[2021.03.28 수정] React + Typescript 기반의 Electron 윈도우 어플리케이션 만들기
안녕하세요! 최근까지도 포스트를 많이 봐주셔서 내용 중에 사용된 모듈 중 deprecated 된 내용이 있어 변경이 되었습니다. mainWindowUrl 에서 사용되던 url.format() 대신 url.pathToFileURL()을 대신 사용하라고 공식 문서에서 권장되고 있어 변경하기로 하였습니다. 참고: nodejs.org/api/url.html#url_url_pathtofileurl_path 1. React + Typescript 기반 프로젝트 생성 2. Electron 개발 모듈 설치 3. package.json 작성 4. electron.ts 작성 5. electron.ts 컴파일 6. 어플리케이션 실행 7. 데스크탑 어플리케이션으로 빌드 1. React + Typescript 기반 프로젝트 생..