React

서론사내 UI 라이브러리로 Mui를 사용하고 있는데 디자인 시스템에 따른 컴포넌트 스타일링 작업을 theme 자체를 커스텀하여 사용중이다. theme을 커스터마이즈해서 패키지로 분리하여 패키지에서 정의해둔 theme을 가져오면 어느 워크스페이스 프로젝트에서든 디자인이 한번에 적용되게 하여 유지보수를 하고있다. 즉 theme에 디자인 작업을 해두면 레포 내부의 모든 워크스페이스에서 다른 개발자들도 스타일링이 입혀진 컴포넌트를 바로 가져다가 쓸 수 있다.그런데 이번에 Select 컴포넌트를 커스텀하는데 넘나 삽질을 하였다... 라벨 여부에 따라 padding 간격을 조정해야했는데, Textfield 컴포넌트와는 다르게 직접적으로 label 프로퍼티를 가져올 수 없어 애를 먹었다. 그래서 기록해봄! Textf..

터보레포로 구축한 프로젝트의 루트 디렉토리의 turbo.json 파일은 위와 같다. 착각했던 것turbo.json { "pipeline": { "build": { "dependsOn": ["^build"], "outputs": ["dist/**"] }, ... }이걸 보고 빌드 결과물의 outputs이 루트 디렉토리의 dist에도 저장되겠구나 생각했다. 근데 turbo run build를 하고 아무리 찾아봐도 루트 디렉토리에 dist 폴더가 보이지않았다;;루트에서 빌드를 하고나면, 워크스페이스 작업물인 패키지, 하위 프로젝트들의 빌드 결과물이 루트에도 묶여서 dist 폴더에 저장이 된다고 착각했던 것이다.빌드 Outputs 경로빌드 결과물은 각 워크스페이스의 dist..

우리 서비스의 주소찾기 기능은 주소 + 위/경도 정보도 함께 받아와야 한다.  주소찾기는 daum에서 제공하는 무료 우편번호 검색 서비스 api를 사용했고, 위/경도 정보는 카카오에서 제공하는 무료 로컬 API 를 사용해서 구현했다.  다음 우편번호 검색 api는 쌩 js로 구현되어있다. 이를 react 환경에서 구현하기 위해서 react-daum-postcode 오픈소스 패키지를 활용하여 개발하였다.   리액트 페이지에서 pop up 형태로 우편번호 찾기 api를 띄우려면 우선 아래의 코드가 필요하다.아래 두 개 파일 코드만 있으면 우편번호 검색 서비스를 팝업으로 띄울 수 있어 해당 패키지를 npm install로 따로 설치하진 않고 프로젝트 내부에 파일로 추가해주었다.  loadPostcode.tsD..

서론사내에서 사용자에게 이메일 발송하는 템플릿을 만들기위한 html 작업을 했다. 그런데 a 태그로 만든 버튼이 바로 가운데 정렬이 안되는 것이다. 어떤 때는 text-align 속성으로 가운데 정렬이 되고, 어떤 때는 안되는 경우가 있었는데 오늘 그 이유를 확실히 알았다! 이슈사항 a 태그로 만든 버튼이 가운데 정렬이 되지않는다. html 코드 이메일 인증하기 style 코드해당 a 태그의 부모는 body > main > section 이 전부이고, a 태그에 영향을 미칠만한 스타일링 속성은 따로 없다. a 태그에 `pillButton`이라는 클래스를 줘서 버튼 모양의 스타일링을 주었다. 그리고, 가운데 정렬을 하기위해서 a 태그에 text-align: center 를 주었다. 그런데!! 위에서 캡처한..

서론 회원가입 페이지를 프론트에서 리액트로 제작했다. 사실상 우리 프로덕트 시나리오에 따르면 회원가입 페이지는 모바일 앱 내부의 웹뷰로 띄워지는 모바일에 종속된 화면이다. 그렇지만 모바일 앱이 개발되기 이전에 웹페이지에 자체에서도 해당 기능들이 독립적으로 동작할 수 있도록 웹에서의 임시적인 시나리오로 해당 페이지를 만들었다. 그리고 모바일 앱 개발이 완성되고, 내가 만들어놓은 웹페이지를 웹뷰로 올리는 작업을 했다. 개발 환경 모바일: flutter, 웹뷰 패키지 flutter inappwebview 웹프론트: react 이제 내가 제작한 웹페이지가 아래와 같이 두 가지 시나리오로 나뉘게 된 것이다. 1. 모바일 웹뷰에서 띄워졌을 때 2. regular 웹 브라우저에서 동작할 때 따라서 기존 리액트 페이지..

서론 이미지 데이터를 서버에서 받아올때, 이미지 src 태그로 바로 사용할 수 있는 string 형태로 바로 받아올 수 있는 것이 아닌, 이미지 데이터 정보 + 이미지 파일 다운로드를 통해 이미지를 화면에 띄울 수 있다. 1. 이름, 날짜 등이 포함되어있는 이미지 데이터 api를 먼저 호출 2. 이미지를 받아오기 위한 이미지 파일을 다운로드하는 api를 호출 두 가지를 api를 활용해서 화면에 이미지를 띄운다. 문제 이미지 목록을 화면에 띄울때 string 형태의 이미지 관련 데이터만 띄우는 것이 아닌 이미지 파일을 다운로드 받아서 화면에 표출해야하니, 이미지 데이터 목록을 먼저 쿼리로 받아오고, 받아온 목록 정보로 이미지 파일을 다운로드 받고나서 화면에 렌더링하게 했다. 그랬더니 전체 이미지가 다운받아..

프로젝트 폴더구조 📦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..

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: ..