전체 글

프로젝트 폴더구조 📦public ┣ 📂policy ┗ ┗ 📜service.html 📦src ┣ 📜App.tsx ┣ 📂assets ┃ ┣ 📂fonts ┣ 📂components ┣ 📂containers ┗ ... 시도한 방법 1. vite.config.ts 파일에 html 경로 지정 ❌ https://ko.vitejs.dev/guide/build.html#multi-page-app build: { rollupOptions: { input: { main: resolve(__dirname, 'index.html'), public: resolve(__dirname, 'public/policy/service.html'), }, }, }, 2. iframe 에서 src 로 띄우기 https://ko.vitejs.de..

JavaScript const string = 'dcba' console.log(string.split('').sort().join('')) //'abcd' 자바스크립트에서 정렬을 하고 싶으면 `sort()`를 활용한다. 하지만, `sort()` 메서드는 `배열 자료형만 정렬이 가능`하다. 따라서, 문자열을 정렬하고 싶으면 우선 그 문자열을 배열로 변경해줘야 한다. 1. `split()` 메서드로 먼저 문자열을 배열로 만들어준다. split의 기본 문법은 `split(separator)`으로, separator 기준으로 어떻게 배열을 나눌건지 정해줄 수 있는데, `string.split('')`으로 적어준다면 string인 'dcba'를 ' 한 자 한 자 분리한다, 쪼갠다는 의미가 된다. 2. 이제 배열..

python에서 정렬하고 싶을 때 파이썬 내장 메서드의 `sort()`와 `sorted()`를 활용할 수 있다. 파이썬 정렬 메서드`sort()`는 list형 자료구조에만 사용가능하다면, `sorted()`는 아래와 같이 리스트형, 문자형, 튜플형과 같은 이터러블한 자료구조에 모두 사용 가능하다. 리스트 sort() 메서드my_numbers = [2,5,6,1,8,3]my_numbers.sort()print(my_numbers) #[1, 2, 3, 5, 6, 8] sorted() 함수정렬하고자하는 iterable을 첫번째 인수로 적어준다list = [5, 4, 3, 2, 1]print(sorted(list)) #[1, 2, 3, 4, 5]string = 'abcd'print(sorted(string)) ..

Form을 저장할 때 필요한 input 상태값을 object 타입으로 한번에 관리하고, 각 input 값이 변동될 때마다 상위 부모에서 handleChange 함수를 호출하여 form 상태값을 일괄적으로 관리한다. 상위 부모는 상태값 관리 및 비즈니스 로직을 담당하고, 하위 컴포넌트는 상위에서 상태값을 받아 ui 만 그릴 수 있도록 관심사를 분리하였다. 기본적인 설계는 위의 설명과 같이 컴포넌트를 구현하려고 코드를 리팩토링하는데 초점을 맞추었는데, 뭔가 문제가 있었다. 상위 부모 컴포넌트 export const Form = () => { const initialFormValue: Info = { name: '', location: { address: '', detailAddress: '', zipCode..

실시간 검색어 자동완성 컴포넌트를 구현했는데, 기존의 코드는 검색어 input 값이 바뀔때마다 서버에 api를 호출했다. 성능 개선을 위해 debounce라는 개념을 코드에 새로 적용해보았다. debounce가 어떤 개념이며 이걸 react 코드로 어떻게 적용할 수 있는지 알아본다. 기존 검색 컴포넌트 useEffect(() => { getLazySearchList(); //api 호출 }, [searchInputValue]); setSearchInputValue(e.target.value) } /> 위 코드에서는 useState hook으로 관리하고 있는 searchInputValue가 바뀔때마다 서버에 요청을 보낸다. 지금 예제 사진에서 보듯이 검색창에 유저가 아래 처럼 입력하면 ㄱ > 그 > 글 >..

서론기본적인 Form 컴포넌트가 있는데, 이름, 주소, 핸드폰 번호를 input으로 받을 수 있고, 저장버튼을 누르면 input 정보가 저장된다. 이 Form 컴포넌트는 생성시, 수정시 재사용할 수 있는 컴포넌트이다. 생성시기본 input 초기 상태값이 빈 string을 가진다.저장 이벤트 발생시 input 데이터 값을 모아서 생성요청을 보내는 함수인 onCreateInfo라는 함수를 호출한다. 수정시상위 컴포넌트에서 전달 받은 데이터 value값을 초기값으로 가진다.  저장 이벤트가 발생하면 input 데이터를 서버에 수정 요청을 보내는 onEditInfo라는 함수를 호출한다.   interface Props { data?: Data; //수정시에만 존재 onCreateInfo?: (inputs: ..

모노레포 도입지금 회사 프런트 팀의 프로젝트는 원래는 도메인 메뉴별로 나누어서 멀티레포 Multi repo 방식으로 개발을 했었다. 즉 개발자마다 레포지토리를 하나하나 따로 관리해서 개발했었고, 팀원끼리 똑같은 ui를 개발한다고 하여도 저장소간에 컨텍스트 공유가 어려워서 개개인 각자가 관리하는 레포지토리 내부에서 똑같은 ui를 중복해서 개발하기도 했다. 그런데 이제 여러곳에서 중복으로 사용하는 코드를 공유해서 재사용성을 높이고 하나의 코드베이스에서 모든 프로젝트의 코드와 자원을 관리하여 서로의 관계와 의존성을 쉽게 파악할 수 있도록 모노레포 환경을 구축했다. 모노레포 환경에서 처음 개발하면서 프로젝트 실행이 안될때가 있었는데 이때 마주한 에러를 정리한다.  Monorepo 빌드 도구 Turborepo  ..

문제 트리구조 데이터 interface Data { id: string; children: Data[]; } export const data: Data = { id: "상위1", children: [ { id: "하위1", children: [ { id: "하위1-1", children: [{ id: "하위1-1-1", children: [] }] }, { id: "하위1-2", children: [] }, ], }, { id: "하위2", children: [] }, ], }; 현재 클릭하는 아이템의 id는 상태값으로 관리하고 있다. 해당 아이템을 누르면 id 상태값이 바로 변경된다. const [currentId, setCurrentId] = useState(data.id); 그 변경된 id를 가지고..