본문 바로가기

All

(220)
[Design Pattern] MVC 패턴, 어떻게 패턴 공부할까? 📝 Design Pattern 면접을 갔다가, 코드 리팩토링에 대해서 이야기 하던 중 디자인 패턴을 알면 도움이 많이 된다는 이야기를 나눠서 공부해 보려고 합니다. 공부한 내용과 생각을 적고 있습니다. 정확한 자료는 아닐수 있으니 맹신하지 마시길 바랍니다. 항상 다른 자료와 교차 검증을 통해 참고해 주세요. 디자인 패턴 건축의 공법에서 착안하여 목적에 따른 효율적인 코드 작성법을 위한 소프트웨어의 개발 방법(규칙, 패턴)을 공식화 하면서 시작되었습니다. MVC 패턴 (Model View Controller) 유지보수가 편해지는 코드 구성 방식 4 분 안에 MVC 설명 by Web Dev Simplified Controller 컨트롤러는 사용자의 요청에 따라서 Model에 데이터를 의뢰하고, 데이터를 Vi..
[Node.js] 백준 - 기본 수학 문제 1 : 달팽이는 올라가고 싶다, ACM호텔, 부녀회장이 될테야 📝 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] 백준 - 기본 수학 문제 1 : 손익분기점, 벌집O(1), 분수찾기O(1) 📝 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를 이용해 백준 문제 풀기 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] 백준 - 1차원 배열 문제 : 최소&최대, 최댓값, 숫자의 개수, 나머지, 평균, OX퀴즈, 평균은 넘겠지 📝 Node.js를 이용해 백준 문제 풀기 Node.js를 이용해서 백준 문제를 풀고 있습니다. 배움 console.log를 통해서 하나 하나 출력하면, 느리므로 시간제한이 있는 경우 출력 값들을 변수에 계속 추가하는 식으로 하여 최종 마지막에 console.log 한번만 불러서 모두 출력하도록 하자. (출력이 줄 단위로 표기해야 하는 경우 추가하는 값의 마지막에 개행 문자를 추가하는 식으로 하면 된다.) input을 받아오는 경우, 가끔 개행 문자중에 \n 만이 아니라 \r\n인 경우도 있다. 입력값을 받아올 때는 trim하여 확인해 보자 어떤 개행 문자가 들어 있지는 않은지 윈도우 : \r\n, 유닉스 \n, 맥 \r 너무 최신의 ES 문법의 경우 백준에서 인식하지 않을 수도 있다. 1차원 배열 문제..
[Node.js] 백준 문제 풀기(BaeckJoon) - 기본 입출력 문제, if 조건문 문제, for & while 반복문 문제 📝 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..
VSCode 스타일의 나만의 포트폴리오 만들기, 목차 기능, 부분 검색 기능, 생략된 글 더 보기 기능, 클립보드 기능 💼 나만의 포트폴리오 만들기 요즘에는 취업 준비를 위해서 포트폴리오를 만들고, 이력서를 작성하는데 시간을 보내고 있습니다. 예전에 문제 해결을 위해서 여러 블로그 글을 돌아다니다가, 맥 OS 스타일의 개발 블로그 페이지를 보았습니다. 찬미니즘 정말 잘 만들었더라구요, 그래서 저도 저만의 스타일로 포트폴리오를 만들고 싶었습니다. 그래서 생각한 것이 개발자가 항상 보는 에디터인 vscode의 스타일로 포트폴리오를 만들면 재미있겠다라는 생각이 들어서 만들게 되었습니다. VRCode 포트폴리오 github 📝 기획 일단, 여러 개발자들이 만든 포트폴리오를 구글에서 찾아보았습니다. 대부분의 경우에는 1개의 page로 구성된 스크롤 스타일로 만들어져 있었습니다. 그 중에서 해당 목차를 눌러서 해당 제목(title)..
20210907 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit39 :CRA + gh-pages를 통한 프로젝트 배포, Firebase 보안 설정, 프로젝트를 마무리 하며 리팩토링 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에..
20210831 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit38 : 좋아요 기능 보완을 위한 대대적인 코드 리팩토링, 좋아요 기능 보완 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit38 📄 프로젝트 안내 해당 프로젝트에 관한 자세한 화면 개요 및 스타일, 상태 관리, 코드에 관한 사항은 Github : RaccoonCode96/redux_racstagram 을 확인해 주세요. 📅 TIL (Today I Learned, 오늘 깨달은 것들) 2021.08.31 사항 좋아요 기능 보완을 위한 Post관련 리팩토링 이전글의 '좋아요 기능 구현의 딜레마'에서 다루었던 문제를 해결하고자 Post와 관련된 데이터 요청 함수 및 redux state를 대대적으로 리팩토링하였습니다. 이를 통해 Post에 상응하여 구현해야하는 Like 관련 데이터 요청 함수 및 redux state를 그나마 깔끔하게 보완하여 구현할..
20210825-30 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit37 : 현재 프로젝트에서의 좋아요 기능 구현의 딜레마 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit37 📄 프로젝트 안내 해당 프로젝트에 관한 자세한 화면 개요 및 스타일, 상태 관리, 코드에 관한 사항은 Github : RaccoonCode96/redux_racstagram 을 확인해 주세요. 📅 TIL (Today I Learned, 오늘 깨달은 것들) 자주 올라오던 포스팅이 최근에 몇 일간 올라오지 않았는데요. 25일 ~ 30일 까지 아버지 사과 과수원 수확을 도와드리느라 한동안 포스팅을 못했습니다. 당연히, 프로젝트 작업은 못했고 간간히 프로젝트 이슈들만 생각해보는 정도만 한 것 같습니다. 2021.08.25 ~ 30 사항 좋아요 기능 구현에 있어서 딜레마 저번에 좋아요 기능을 구현했었습니다. 그런데 다른 작업을 하면서 좋아..
20210823,24 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit36 : 유효성 검사 및 피드백, Material UI TextField 커스텀 스타일 적용하기, 유효성 검사에 따른 submit 버튼 disabled 처리 리팩토링 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..
20210820 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit35 : 좋아요 기능 구현, 좋아요 db 설계 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit35 📄 프로젝트 안내 해당 프로젝트에 관한 자세한 화면 개요 및 스타일, 상태 관리, 코드에 관한 사항은 Github : RaccoonCode96/redux_racstagram 을 확인해 주세요. 📅 TIL (Today I Learned, 오늘 깨달은 것들) 2021.08.20 사항 이전에 댓글 보기 버튼과 하트 모양의 좋아요 버튼을 구성하고 있는 PostControl이라는 컴포넌트를 만들었고, 기능적으로는 댓글 기능까지 추가가 완료 되었습니다. 오늘은 좋아요 버튼을 기능적으로 추가하였습니다. 처음에는 좋아요 기능이 단순하게 구현할 수 있을 거라 생각했지만, 그렇게 간단한 작업은 아니였습니다. 1. 좋아요 기능 구현 좋아요 기능의 경..
20210819 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit34 : 무한 스크롤 개선, Intersection Observer API 활용, 무한 스크롤 더 이상 데이터가 없는 경우 처리(버그 해결) 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit34 📄 프로젝트 안내 해당 프로젝트에 관한 자세한 화면 개요 및 스타일, 상태 관리, 코드에 관한 사항은 Github : RaccoonCode96/redux_racstagram 을 확인해 주세요. 📅 TIL (Today I Learned, 오늘 깨달은 것들) 2021.08.19 사항 전에 발생했던 무한 스크롤 데이터 끝 처리 버그를 해결하기 위한 접근과 제가 해결한 과정을 나누어 보고자 합니다. Intersection Observer에 대해서 잘 모르시면, 잘 정리된 intersection-observer by HEROPY TECH 글을 봐주시면 좋겠습니다. 1. 무한 스크롤 개선 기존 무한 스크롤의 무한 스크롤 데이터 끝 처리 버그..
20210818 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit33 : 자동 중복 체크 구현(debounce), React 에서 debounce 사용시 주의점, 무한스크롤 데이터 끝 처리 버그 발생 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit33 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 상태 관리 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 스타일 현재 SCSS를 채택하여 css 작업을 진행중에 있으며, 부분적으로 Material UI를 사용하고 있습니다. 대부분의 경우에는, Material UI와 React 호환성 문제로 대부분은 SCSS로 직접 구현하고 있습니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component..
20210817 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit32 : 댓글 작성 요청 개선, 댓글 지우기 요청 기능 구현, 축약된 PostText 더 보기 구현 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit32 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 상태 관리 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 스타일 현재 SCSS를 채택하여 css 작업을 진행중에 있으며, 부분적으로 Material UI를 사용하고 있습니다. 대부분의 경우에는, Material UI와 React 호환성 문제로 대부분은 SCSS로 직접 구현하고 있습니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component..
20210816 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit31 : 최신 댓글 최대 2개 보이기 구현, 댓글 총 개수 보이기 구현, useRandom hook 유지 보수, 신규 유저 가입시 count 넘버링 버그 해결, 로직 수정.. 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit31 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 상태 관리 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 스타일 현재 SCSS를 채택하여 css 작업을 진행중에 있으며, 부분적으로 Material UI를 사용하고 있습니다. 대부분의 경우에는, Material UI와 React 호환성 문제로 대부분은 SCSS로 직접 구현하고 있습니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component..