코딩배우는고양이

개발환경 Windows 10 node.js v21.5.0 nest.js 10.3.0 환경 세팅 Windows에서 node.js 최신 버전 업데이트 하기 node 공식 사이트 에서 직접 다운로드 후에 설치를 진행해도 되고 nvm 을 이용해서 설치해도 됩니다. nvm은 여러 노드 버전들을 손쉽게 관리할 수 있기 때문에 저는 nvm을 설치해서 업데이트 하였습니다. nvm 설치하기 nvm github 에서 nvm-setup.exe 파일을 다운로드 후에 설치를 하면 됩니다! 주요 nvm 명령어는 아래와 같고 저는 nvm install node를 이용해서 최신버전을 설치하였습니다. 만약 프로젝트 규모가 클 것으로 예상이 된다면 LTS 버전을 확인해서 설치하는 게 좀 더 안정적일 수 있을 것 같네요! nvm vers..

사이드바 메뉴 리팩토링 파이널 프로젝트가 끝나고 틈틈이 리팩토링을 진행하고 있는데 단순히 하나의 tsx 파일에 들어있는 코드를 컴포넌트로 분리해서 가독성을 향상시키는 것 외에도 로직 자체를 변화시켜서 개선할 수 있는 부분도 많이 보였습니다. 이번에는 사이드바 메뉴쪽을 개선시켜본 후에 정리를 해보았습니다. 개선 전 전체 코드 import defaultImage from "/images/cat.jpg"; import * as S from "./style"; import * as H from "../Header/styled"; import Logout from "../../assets/icons/Logout"; import product from "../../assets/product.svg"; import ..

우선 피그마로 그려본 페이지 프로토타입 입니다. 해당 페이지에서는 사용자가 수거 신청을 할 의류의 이미지를 등록하고 물품의 내용을 적어서 보낼 수 있는데 상품 추가를 통해 한 번에 여러 개를 묶어서 보낼 수도 있습니다. 요구 사항 하나의 물품당 하나의 이미지만 등록이 가능합니다. 이미지가 등록이 되어있지 않거나 상세 내용 중 하나라도 빠진 곳이 있으면 에러가 나야합니다. 상품 추가 버튼을 누르면 새로운 등록 폼이 등장하고 추가로 입력해서 한 화면에서 여러 개의 물품을 한 번에 보낼 수 있어야 합니다. 입력하던 폼의 삭제 버튼을 누르면 해당 폼은 사라지고 요청에서 제외됩니다. 요청은 formData 형식으로 보내며 productlist 라는 key로 물품의 상세 내용 배열을 문자열로, 각 이미지 파일은 f..

개요 스택오버플로우를 클론 코딩하는 Pre-project 팀 과제를 진행하던 중, 질문 상세 페이지와 수정 페이지, 답변 수정 페이지에서 중복되는 코드가 많이 발생하였다. 질문 등록 페이지 AskQuestion function AskQuestion() { const [titleValue, setTitleValue] = useState(""); const [bodyValue, setBodyValue] = useState(""); const submitHandler = (e: React.FormEvent) => { e.preventDefault(); setBodyValue(""); }; return ( Ask a public question submitHandler(e)}> Post your question..

타입스크립트의 Interface 자바의 인터페이스가 추상 메소드를 가지면서 설계와 구현을 분리하기 위한 기능이라면, 타입스크립트의 인터페이스는 객체를 위주로 다루면서 그 객체의 타입을 정의해놓은 설계도라고 할 수 있다. interface Fruit { name: string; price: number; } interface명은 첫 글자를 대문자로 한다. // 객체의 타입을 인터페이스로 지정 const fruit: Fruit = { name: mango; price: 1000; } // 매개변수의 타입과 반환타입 또한 인터페이스로 지정할 수 있다. function selling(item: Fruit): Fruit { // ... } 인터페이스 & 타입 별칭 인터페이스와 type alias는 객체 구조 타입..