오늘의개발 [21/07/17] 업체 설명 모달 마무리 & 찜하기 디자인 품목 드랍다운 아이템 선택 종류 드랍다운 아이템 선택 해시태그 드랍다운 아이템 선택 다음과 같이 저장하여 문자열로 보여줘야하는 경우 join하여 다음과 같이 만들어 보여준다 그렇기 때문에 select(품목, 종류, 해시태그, 제작가능수량 타입들이 어떤 값으로 저장되어있는지 관리하는 상태값)을 인자로 넘겨주어 select.item이 있는지 없는지를 점검하여 각각 맞는 None 컴포넌트를 띄워주... 오늘의개발오늘의개발 [21/07/20] 모달 이슈 해결하기 리팩토링 할거 백로그에 다 올리기 select 상태를 Filter로 빼려고 했는데, Button에서 사용해야하므로 ExplorePick에서 관리하도록 한다. tip 자식에서 부모로 상태를 전달해주는 방법은 없을까 ? 살짝 벌어지는 이슈 css를 위와 같이 주었을때 드랍다운이 켜지게되면 드랍다운이 마지막 자식이 되어버림. css가 getClientBoundingRect() 계산 이후에 바뀌게 ... 오늘의개발오늘의개발 [21/09/23-24] Junzzi Editor 프로젝트 셋팅 - (3) head, router 설정, webpack 에러, export(모듈 내보내기) react-helmet 헤더를 관리할 수 있는 라이브러리 이다. 이를 쉽게 적용할 수 있도록 react-helmet을 사용해보았다. 페이지를 새롭게 불러오지않는 상황에서 각각의 라우팅에 따라 UI를 그려주기 위해 React Router를 이용할 수 있다. React Router의 Link 컴포넌트를 활용하면 된다. Link 태그로 작성하면 클라이언트 사이드 렌더링이 적용되어, 새롭게 html... 오늘의개발오늘의개발 [21/09/27] Junzzi Editor 프로젝트 셋팅 - (4) scss 적용하기 간략하게 작성하였다. scss를 사용하는 이유 학습의 목적 (지금까지 프로젝트는 css-in-js 환경에서 진행하였다. css-in-css를 적용해보고 싶어 결정) 상태에 따른 UI 스타일링이 바로 적용 (유저 인터랙션이 많은 어플리케이션의 경우 css-in-js 방식보다 효율적이다. -> 빠르게 UI스타일이 변경된다) 에디터를 이식할 부모 프로젝트의 환경을 고려 (업체 정보 입력 프로젝트가... 오늘의개발오늘의개발 [21/07/15] 에디터 리팩토링 & 액션 리팩토링 기존의 config 옵션 변수 변경된 config 옵션 변수 사용 굳이 두개로 나누기보단 깔끔하게 하나의 config 변수로 관리하여 ReactQuill 에게 전달해준다. key & value 기존의 value 상태는 introduce guide 두개를 합쳐 관리하였음. value 하나로 두 개의 키 데이터 관리하기보단, 각각 따로 나두는 것이 키값이 변경되어도 데이터를 보존하는데 좋을 것이... 오늘의개발오늘의개발 [21/09/19] Junzzi Editor 프로젝트 셋팅 - (2) 타입스크립트 설정 - 트리쉐이킹 JavaScript 프로젝트는 jsconfig.json파일을 대신 사용할 수 있습니다. tsc 명령어를 사용하여 컴파일 할 때 입력파일을 지정하면 tsconfig.json은 무시된다. 타입스크립트 소스코드가 컴파일 되어 만들어진 es5 자바스크립트 코드는 웹 브라우저와 node js 양쪽에서 모두 동작해야합니다. 자바스크립트 모듈은 웹 브라우저에서는 asynchronous module def... 오늘의개발오늘의개발 [21/07/28] 필터 추가 기능 병원도다니고.. 토익준비도하고.. 하튼 여러모로 바쁜 탓에 개발을 리팩토링 말고는 못했다.. 오늘을 마무리로 내일부턴 검색 기능, 에디터 확장 기능 구현에 들어가야겠다.. 선택한 아이템이면 focus FilterItem props로 전해주는걸 children으로 바꾸어 전달 직접 입력의 경우 input으로 내부 요소를 변경해주어야함. 다른 컴포넌트에서 사용하는 경우 input은 사용되지 않으... 오늘의개발오늘의개발
[21/07/17] 업체 설명 모달 마무리 & 찜하기 디자인 품목 드랍다운 아이템 선택 종류 드랍다운 아이템 선택 해시태그 드랍다운 아이템 선택 다음과 같이 저장하여 문자열로 보여줘야하는 경우 join하여 다음과 같이 만들어 보여준다 그렇기 때문에 select(품목, 종류, 해시태그, 제작가능수량 타입들이 어떤 값으로 저장되어있는지 관리하는 상태값)을 인자로 넘겨주어 select.item이 있는지 없는지를 점검하여 각각 맞는 None 컴포넌트를 띄워주... 오늘의개발오늘의개발 [21/07/20] 모달 이슈 해결하기 리팩토링 할거 백로그에 다 올리기 select 상태를 Filter로 빼려고 했는데, Button에서 사용해야하므로 ExplorePick에서 관리하도록 한다. tip 자식에서 부모로 상태를 전달해주는 방법은 없을까 ? 살짝 벌어지는 이슈 css를 위와 같이 주었을때 드랍다운이 켜지게되면 드랍다운이 마지막 자식이 되어버림. css가 getClientBoundingRect() 계산 이후에 바뀌게 ... 오늘의개발오늘의개발 [21/09/23-24] Junzzi Editor 프로젝트 셋팅 - (3) head, router 설정, webpack 에러, export(모듈 내보내기) react-helmet 헤더를 관리할 수 있는 라이브러리 이다. 이를 쉽게 적용할 수 있도록 react-helmet을 사용해보았다. 페이지를 새롭게 불러오지않는 상황에서 각각의 라우팅에 따라 UI를 그려주기 위해 React Router를 이용할 수 있다. React Router의 Link 컴포넌트를 활용하면 된다. Link 태그로 작성하면 클라이언트 사이드 렌더링이 적용되어, 새롭게 html... 오늘의개발오늘의개발 [21/09/27] Junzzi Editor 프로젝트 셋팅 - (4) scss 적용하기 간략하게 작성하였다. scss를 사용하는 이유 학습의 목적 (지금까지 프로젝트는 css-in-js 환경에서 진행하였다. css-in-css를 적용해보고 싶어 결정) 상태에 따른 UI 스타일링이 바로 적용 (유저 인터랙션이 많은 어플리케이션의 경우 css-in-js 방식보다 효율적이다. -> 빠르게 UI스타일이 변경된다) 에디터를 이식할 부모 프로젝트의 환경을 고려 (업체 정보 입력 프로젝트가... 오늘의개발오늘의개발 [21/07/15] 에디터 리팩토링 & 액션 리팩토링 기존의 config 옵션 변수 변경된 config 옵션 변수 사용 굳이 두개로 나누기보단 깔끔하게 하나의 config 변수로 관리하여 ReactQuill 에게 전달해준다. key & value 기존의 value 상태는 introduce guide 두개를 합쳐 관리하였음. value 하나로 두 개의 키 데이터 관리하기보단, 각각 따로 나두는 것이 키값이 변경되어도 데이터를 보존하는데 좋을 것이... 오늘의개발오늘의개발 [21/09/19] Junzzi Editor 프로젝트 셋팅 - (2) 타입스크립트 설정 - 트리쉐이킹 JavaScript 프로젝트는 jsconfig.json파일을 대신 사용할 수 있습니다. tsc 명령어를 사용하여 컴파일 할 때 입력파일을 지정하면 tsconfig.json은 무시된다. 타입스크립트 소스코드가 컴파일 되어 만들어진 es5 자바스크립트 코드는 웹 브라우저와 node js 양쪽에서 모두 동작해야합니다. 자바스크립트 모듈은 웹 브라우저에서는 asynchronous module def... 오늘의개발오늘의개발 [21/07/28] 필터 추가 기능 병원도다니고.. 토익준비도하고.. 하튼 여러모로 바쁜 탓에 개발을 리팩토링 말고는 못했다.. 오늘을 마무리로 내일부턴 검색 기능, 에디터 확장 기능 구현에 들어가야겠다.. 선택한 아이템이면 focus FilterItem props로 전해주는걸 children으로 바꾸어 전달 직접 입력의 경우 input으로 내부 요소를 변경해주어야함. 다른 컴포넌트에서 사용하는 경우 input은 사용되지 않으... 오늘의개발오늘의개발