라쿤의 끄적끄적

요즘 Nodejs 개발 환경 구성하기Nodejs는 프론트엔드 개발자가 가장 먼저 설치해야 할 javascript 런타임 프로그램 입니다. 옛날에는 공식 홈페이지에 들어가서 설치하면 설치 파일을 다운로드 받아서 설치하였습니다. 하지만 요즘에는 Nodejs 버전을 관리하는 커맨드 라인 툴을 통해서 받는 형식이 보편화되고 있습니다.이번 시간에는 예전과 달리 간단하게 Nodejs를 설치하고, 버전을 관리하는 방법에 대해서 이야기 해보려고 합니다. CLI로 설치하기 Nodejs 공식 다운로드 페이지를 확인하면, 설치하려는 Nodejs 버전, OS, Nodejs 버전 매니저 및 패키지 매니저를 설정하여 다운로드 할 수 있는 방법을 CLI로 아주 친절하게 보여주고 있습니다.초창기에는 정말 단순하게 설치 파일 다운로드..

WSL 환경 구성하기배경윈도우 환경에서 개발을 진행하거나, 시스템을 돌리는 경우 호환성 및 리소스 효율성이 떨어지는 등의 문제가 발생하고 있고 Docker를 돌리거나 쉘 파일을 돌려야 하는 경우 WSL 설치가 필수적입니다.또한, 대부분의 클라우드 서버 등의 서비스는 Linux 기반의 OS에서 돌리는 경우가 많습니다.그리고, Github Action을 작성할 때도 bash 스크립트를 작성하는 경우가 많기 때문에 해당 환경과 친해질 필요가 있습니다.사실 Mac쓰면 됩니다. 그러기엔 Mac에 적응하기에 너무나 늦어버려서 저는 Windows를 씁니다. WSL ?WSL(Linux용 Windows 하위 시스템)은 Windows 운영 체제 내에서 Linux 환경을 실행할 수 있도록 해주는 호환성 계층입니다. 쉽게 말..

웹 서비스 안드로이드 환경에서 제공하기 (WebAPK, TWA)23년도에 웹 서비스가 키오스크와 같은 모습으로 특정 안드로이드 기기에서 설치되어 제공되어야 하는 상황이 발생했습니다. 웹 서비스를 안드로이드 환경에서 앱 처럼 사용자에게 제공할 수 있는 방법을 찾기 위해서 23년도 당시 탐구하고 고민하여 서비스를 제공했던 경험을 공유합니다.목표안드로이드 태블릿에서 키오스크와 같은 형태로 사용자에게 서비스 제공하기제한 사항프론트엔드 인력만 활용 가능안드로이드 개발자분이 계시긴 하지만, 서비스 자체를 개발하기에는 부족하여 현재 여유가 되는 프론트엔드 개발자 위주로 개발 진행 가능했습니다.모바일 환경에 대한 전문성 부족보통 채용 현황이 React 기반의 웹 프론트엔드 개발자로만 구성되어 있는 상태현재 서비스할 기..

Github 여러 계정 사용하기회사 또는 다른 조직에서 활동을 하는 경우 보통 새로운 Github 계정들을 활용하여 작업을 진행하게 됩니다.보통 작업을 진행하다 보면 하나의 디바이스에서 여러 계정들에 접근해서 작업을 진행하는 경우 인증 문제가 발생하는 경우가 많습니다. 이전에는 Git에서 Github 아이디, 패스워드 방식의 인증을 통해서 진행했지만 2021-08-13일부터 Git에서 Github 패스워드 인증 방식을 제공하지 않기 시작하면서 토큰(Personal Access, OAuth, SSH Key) 방식의 인증 방식을 사용하도록 하고 있습니다.하나의 디바이스에서 여러 계정들에 손쉽게 접근하여, 인증되고 작업을 진행할 수 있는 설정에 대해서 설명합니다. 설명하고 있는 내용은 wsl 환경을 기준으로 ..

📝 Design Pattern 면접을 갔다가, 코드 리팩토링에 대해서 이야기 하던 중 디자인 패턴을 알면 도움이 많이 된다는 이야기를 나눠서 공부해 보려고 합니다. 공부한 내용과 생각을 적고 있습니다. 정확한 자료는 아닐수 있으니 맹신하지 마시길 바랍니다. 항상 다른 자료와 교차 검증을 통해 참고해 주세요. 디자인 패턴 건축의 공법에서 착안하여 목적에 따른 효율적인 코드 작성법을 위한 소프트웨어의 개발 방법(규칙, 패턴)을 공식화 하면서 시작되었습니다. MVC 패턴 (Model View Controller) 유지보수가 편해지는 코드 구성 방식 4 분 안에 MVC 설명 by Web Dev Simplified Controller 컨트롤러는 사용자의 요청에 따라서 Model에 데이터를 의뢰하고, 데이터를 Vi..

📝 Node.js를 이용해 백준 문제 풀기 Node.js를 이용해서 백준 문제를 풀고 있습니다. 기본 수학 문제 1 (3개) 최대한 반복문 없이 수학을 활용하도록 노력했습니다. (4) 달팽이는 올라가고 싶다. 정상 까지 도착하면 무조건 올라가는 것으로 끝난다고 볼 수 있습니다. 무조건 u - d + u - d + ... + u로 끝납니다. day(u-d) + d = h day = (h-d)/(u-d) // (4) 달팽이는 올라가고 싶다 const fs = require("fs"); const filePath = process.platform === "linux" ? "/dev/stdin" : "./input.txt"; let input = fs.readFileSync(filePath).toString()..

📝 Node.js를 이용해 백준 문제 풀기 Node.js를 이용해서 백준 문제를 풀고 있습니다. 기본 수학 문제 1 (3개) 최대한 반복문 없이 수학을 활용하도록 노력했습니다. (1) 셀프 넘버 // (1) 손익분기점 const fs = require("fs"); const filePath = process.platform === "linux" ? "/dev/stdin" : "./input.txt"; let input = fs.readFileSync(filePath).toString().trim().split("\n"); input = input[0].split(" ").map((num) => Number(num)); const dCost = input[0]; const vCost = input[1]; ..

📝 Node.js를 이용해 백준 문제 풀기 Node.js를 이용해서 백준 문제를 풀고 있습니다. 함수 문제 (2개) (1) 셀프 넘버 // (1) 셀프 넘버 const range = new Set([]); for (let i = 1; i { alphabets[al.charCodeAt(0) - 65] += 1; }); const maxCount = Math.max(...alphabets); if (alphabets.filter((i) => i === maxCount).length > 1) { console.log("?"); } else { console.log(String.fromCharCode(alphabets.indexOf(maxCount) + 65)); } (6) 단어의 개수 // (6) 단어의 개수..

📝 Node.js를 이용해 백준 문제 풀기 Node.js를 이용해서 백준 문제를 풀고 있습니다. 배움 console.log를 통해서 하나 하나 출력하면, 느리므로 시간제한이 있는 경우 출력 값들을 변수에 계속 추가하는 식으로 하여 최종 마지막에 console.log 한번만 불러서 모두 출력하도록 하자. (출력이 줄 단위로 표기해야 하는 경우 추가하는 값의 마지막에 개행 문자를 추가하는 식으로 하면 된다.) input을 받아오는 경우, 가끔 개행 문자중에 \n 만이 아니라 \r\n인 경우도 있다. 입력값을 받아올 때는 trim하여 확인해 보자 어떤 개행 문자가 들어 있지는 않은지 윈도우 : \r\n, 유닉스 \n, 맥 \r 너무 최신의 ES 문법의 경우 백준에서 인식하지 않을 수도 있다. 1차원 배열 문제..

📝 Node.js를 이용해 백준 문제 풀기 Node.js를 이용해서 백준 문제를 풀고 있습니다. Node.js로 문제 푸는 방식 Node.js로 백준 문제를 푸는 경우 다른 언어에 비해서 입출력을 따로 다루어 주어야 합니다. 백준 문제의 경우 성능도 다루기 때문에 많은 사람들이 Node.js의 fs 파일 시스템 모듈을 활용하여 입력을 받고 출력하여 문제를 제출하게 됩니다. fs로 간혹 안되는 부분은 readline을 사용해야 합니다. // fs 방식 입력 받기 const fs = require("fs"); const filePath = process.platform === "linux" ? "/dev/stdin" : "./input.txt"; let input = fs.readFileSync(filePa..

💼 나만의 포트폴리오 만들기 요즘에는 취업 준비를 위해서 포트폴리오를 만들고, 이력서를 작성하는데 시간을 보내고 있습니다. 예전에 문제 해결을 위해서 여러 블로그 글을 돌아다니다가, 맥 OS 스타일의 개발 블로그 페이지를 보았습니다. 찬미니즘 정말 잘 만들었더라구요, 그래서 저도 저만의 스타일로 포트폴리오를 만들고 싶었습니다. 그래서 생각한 것이 개발자가 항상 보는 에디터인 vscode의 스타일로 포트폴리오를 만들면 재미있겠다라는 생각이 들어서 만들게 되었습니다. VRCode 포트폴리오 github 📝 기획 일단, 여러 개발자들이 만든 포트폴리오를 구글에서 찾아보았습니다. 대부분의 경우에는 1개의 page로 구성된 스크롤 스타일로 만들어져 있었습니다. 그 중에서 해당 목차를 눌러서 해당 제목(title)..

리팩토링 Instagram 클론 프로젝트 by Redux-toolkit39 📄 프로젝트 안내 해당 프로젝트에 관한 자세한 화면 개요 및 스타일, 상태 관리, 코드에 관한 사항은 Github : RaccoonCode96/redux_racstagram 을 확인해 주세요. 📅 TIL (Today I Learned, 오늘 깨달은 것들) 2021.09.07 사항 CRA + gh-pages 배포 드디어 인스타그램 클론을 배포하였습니다. 배포는 gh-pages를 통해서 배포하였습니다. (gh-pages가 제일 간단하고, 그래도 연관성 있는 도메인과 path를 가질수 있기 때문입니다.) gh-pages의 경우 배포하면, repo 이름이 들어간 도메인, Path로 배포가 됩니다. 하지만, React-router-dom에..

리팩토링 Instagram 클론 프로젝트 by Redux-toolkit38 📄 프로젝트 안내 해당 프로젝트에 관한 자세한 화면 개요 및 스타일, 상태 관리, 코드에 관한 사항은 Github : RaccoonCode96/redux_racstagram 을 확인해 주세요. 📅 TIL (Today I Learned, 오늘 깨달은 것들) 2021.08.31 사항 좋아요 기능 보완을 위한 Post관련 리팩토링 이전글의 '좋아요 기능 구현의 딜레마'에서 다루었던 문제를 해결하고자 Post와 관련된 데이터 요청 함수 및 redux state를 대대적으로 리팩토링하였습니다. 이를 통해 Post에 상응하여 구현해야하는 Like 관련 데이터 요청 함수 및 redux state를 그나마 깔끔하게 보완하여 구현할..

리팩토링 Instagram 클론 프로젝트 by Redux-toolkit37 📄 프로젝트 안내 해당 프로젝트에 관한 자세한 화면 개요 및 스타일, 상태 관리, 코드에 관한 사항은 Github : RaccoonCode96/redux_racstagram 을 확인해 주세요. 📅 TIL (Today I Learned, 오늘 깨달은 것들) 자주 올라오던 포스팅이 최근에 몇 일간 올라오지 않았는데요. 25일 ~ 30일 까지 아버지 사과 과수원 수확을 도와드리느라 한동안 포스팅을 못했습니다. 당연히, 프로젝트 작업은 못했고 간간히 프로젝트 이슈들만 생각해보는 정도만 한 것 같습니다. 2021.08.25 ~ 30 사항 좋아요 기능 구현에 있어서 딜레마 저번에 좋아요 기능을 구현했었습니다. 그런데 다른 작업을 하면서 좋아..

리팩토링 Instagram 클론 프로젝트 by Redux-toolkit36 📄 프로젝트 안내 해당 프로젝트에 관한 자세한 화면 개요 및 스타일, 상태 관리, 코드에 관한 사항은 Github : RaccoonCode96/redux_racstagram 을 확인해 주세요. 📅 TIL (Today I Learned, 오늘 깨달은 것들) 2021.08.23 사항 Material UI TextField 컴포넌트 도입을 통한 유효성 검사(Validation Check) 및 피드백 오늘은 사용자의 input을 받는 경우 유효성 검사를 실시하여 submit을 제한하고, 형식에 맞는 값을 넣도록 안내(피드백)하도록 알림을 보여 줄수 있도록 하고자 하였습니다. 과거 구현 방식 기존에 input의 경우에는 input을 sub..

리팩토링 Instagram 클론 프로젝트 by Redux-toolkit35 📄 프로젝트 안내 해당 프로젝트에 관한 자세한 화면 개요 및 스타일, 상태 관리, 코드에 관한 사항은 Github : RaccoonCode96/redux_racstagram 을 확인해 주세요. 📅 TIL (Today I Learned, 오늘 깨달은 것들) 2021.08.20 사항 이전에 댓글 보기 버튼과 하트 모양의 좋아요 버튼을 구성하고 있는 PostControl이라는 컴포넌트를 만들었고, 기능적으로는 댓글 기능까지 추가가 완료 되었습니다. 오늘은 좋아요 버튼을 기능적으로 추가하였습니다. 처음에는 좋아요 기능이 단순하게 구현할 수 있을 거라 생각했지만, 그렇게 간단한 작업은 아니였습니다. 1. 좋아요 기능 구현 좋아요 기능의 경..