우당탕탕 기술블로그

목차 1. 프로모션 구현 목록 2. 폴더 구조 3. 테스트 케이스 목록 4. 테스트 결과 5. 느낀점 5.1. 객체지향 프로그래밍 적용하기 5.2. 클래스와 객체 리터럴 차이 GitHub - hyzzzzy/javascript-christmas-6-hyzzzzy Contribute to hyzzzzy/javascript-christmas-6-hyzzzzy development by creating an account on GitHub. github.com 🎄 프로모션 구현 목록 방문 날짜 입력 및 유효성 검사 1 이상 31 이하의 숫자가 아닌 경우 (추가) 자연수가 아닌 경우 ⇒ 예외 발생 후 재입력 주문할 메뉴, 개수 입력 및 유효성 검사 메뉴판에 없는 메뉴를 입력한 경우 메뉴의 개수를 1 이상의 숫자로..

목차 1. 로또 코드 구조 2. 구현 기능 목록 3. 테스트 케이스 목록 4. 느낀점 4.1. 경험에 따라 테스트 케이스 생각하기 GitHub - hyzzzzy/javascript-lotto-6 Contribute to hyzzzzy/javascript-lotto-6 development by creating an account on GitHub. github.com 🎰 로또 코드 구조 로또 구입 금액 입력 로또 구입 금액 유효성 검사 발행한 로또 수량 출력 발행한 로또 번호 출력 당첨 번호 입력 당첨 번호 유효성 검사 보너스 번호 입력 보너스 번호 유효성 검사 당첨 결과 계산 당첨 통계 출력 총 수익률 계산 총 수익률 출력 🎰 구현 기능 목록 입력 함수 출력 함수 유효성 검사 함수들 숫자로 이루어져 있..

목차 1. 자동차 경주 코드 구조 1.1. 게임 시작 1.2. 게임 진행 1.3. 게임 종료 1.4. 폴더 구조 2. 구현 기능 목록 3. 테스트 케이스 목록 4. 테스트 결과 5. 느낀점 5.1. 드디어 jest로 단위 테스트를 적용하다 5.2. 오늘도 관심사 분리하기 GitHub - hyzzzzy/javascript-racingcar-6 Contribute to hyzzzzy/javascript-racingcar-6 development by creating an account on GitHub. github.com 🏎️ 자동차 경주 코드 구조 1.1 게임 시작 경주할 N대의 자동차 이름 입력 이름 유효성 검사 시도할 횟수 입력 횟수 유효성 검사 1.2. 게임 진행 1대마다 랜덤값을 부여 랜덤값이 4..

목차 1. 숫자 야구 게임 로직 1.1. 게임 시작 1.2. 게임 진행 1.3. 게임 종료와 재시작 1.4. 폴더 구조 2. 구현 기능 목록 3. 테스트 결과 4. 느낀점 4.1. 관심사 분리의 어려움 4.2. 리팩토링 진행 4.3. JSDoc 사용 4.4. 상수 관리 시 Object.freeze() 사용 GitHub - hyzzzzy/javascript-baseball-6 Contribute to hyzzzzy/javascript-baseball-6 development by creating an account on GitHub. github.com ⚾ 숫자 야구 게임 로직 1.1. 게임 시작 게임 시작 문구 출력 랜덤 숫자 제작 1.2. 게임 진행 사용자 입력 받기 유효성 검사 (숫자가 올바르게 입력..

✏️ 문제 상황 회원정보 수정 페이지 내에서 프로필에 고화질 이미지를 등록하고 수정을 서버에 요청한다면 413 Payload Too Large 에러 발생 여기서 HTTP 상태코드인 413 에러는 요청 엔터티가 서버에 의해 정의된 제한보다 크다는 것을 의미한다. 🧐 문제 원인 1MB 정도의 이미지 파일을 서버에 보낸다면 413 에러를 뱉어내서 수정을 할 수 없게 된다. const handleFileSelect = (e: ChangeEvent) => { const file = e.target.files?.[0]; if (file) { const reader = new FileReader(); reader.onload = () => { setImageSrc(reader.result as string); }; ..

목차 1. 프로젝트 개요 2. 프로젝트 진행 과정 3. 프로젝트를 통해 배운 점 4. 프로젝트를 진행하며 아쉬운 점 5. 프로젝트 결과 6. 마치며 🧊 프로젝트 개요 📖 프로젝트 목표 모프는 누구나 스터디 및 프로젝트를 함께 할 팀원을 모집하고, 참가할 수 있고, 열심히 완성한 프로젝트를 자랑할 수 있도록 플랫폼을 구축하려고 한다. 또한, 통일성있는 스타일과, 쉽고 간편한 상호작용을 통해 사용자에게 최선의 UX/UI와 모바일 사용자를 위한 반응형 페이지를 제공한다. 진행 기간 2023년 5월 29일 ~ 2023년 6월 22일 (4주) 팀 구성 Front-End: 6명, Back-End: 1명 기술 스택 React, TypeScript, Recoil, Sass, Node.js, Expree.js, MySQ..

✏️ 문제 상황 useState 혹은 useRef를 사용해도 input 창에 텍스트를 빠르게 타이핑하면 깜빡임 현상이 발생했다. 🧐 문제 원인 타이핑할 때마다 폰트를 요청하고 있어서 발생한 문제였다. @import url(//fonts.googleapis.com/earlyaccess/notosanskr.css); *, body { font-family: 'Noto Sans KR', sans-serif; } 😊 해결 방안 src/assets/fonts 폴더를 만들어서 사용할 폰트(woff2, woff, otf)를 직접 다운받아서 적용했다. /* src/assets/font.module.scss */ @font-face { font-family: 'Noto Sans KR'; font-style: normal..

✏️ 문제 상황 프로젝트를 시작하면서 초기 파일설정을 한 GitLab 레포지토리를 remote 후 npm i 를 하려고 하는데 node-sass 부분부터 에러가 나더니 node_modules를 제대로 설치할 수 없는 상황이었다. 🧐 문제 원인 Windows 환경이고 Node.js 버전이 18이라 node-sass 버전이 8 이상으로 설치할 있는데 현재 package.json을 보니 node-sass가 7 버전이었다. 😊 해결 방안 node-sass 버전을 높이는 방법도 있겠지만, node-sass 패키지를 설치하기 보다는 sass 패키지를 설치하여 패키지를 변경했다. sass 패키지는 node-sass를 흡수한 패키지로 지속적으로 업데이트가 되는 패키지 이므로 sass 패키지 설치를 더 권장한다고 한다...