나만보는 업무정리 3

리액트 공통컴포넌트 체크리스트

명확한 인터페이스 설계: 컴포넌트의 props는 명확하고 이해하기 쉬워야 합니다. 구조 분해 할당을 사용하면 명확한 인터페이스 설계를 통해 컴포넌트의 사용법을 쉽게 파악할 수 있습니다. 코드의 가독성이 향상되며, 오류의 가능성을 줄일 수 있습니다.// 좋은 예 const Button = ({ label, onClick }) => ( {label} ); // 나쁜 예 const Button = (props) => ( {props.text} ); 예를 들어 { label, onClick }을 사용하는 경우, 이 props가 Button 컴포넌트에서 어떻게 사용되는지 바로 알 수 있습니다. label은 버튼에 표시될 텍스트를 나타내고, onClick은 버튼 클릭 시 실행할 함수를 나타냅니다. 반면, props..

ESlint, Prettier 설정 방법

프로젝트 생성 시 설정 방법 Airbnb JavaScript Style Guide로 프로젝트 코드 스타일 설정 jsx, typescript 등 추가적인 설정은 구글링해서 추가한다. - 추가적인 package 찾아서 설치하고, eslint config 설정 필요 eslint, prettier package 설치 eslint : yarn add eslint --dev eslint-config-airbnb : npx install-peerdeps --dev eslint-config-airbnb eslint-config-prettier : yarn add --dev eslint-config-prettier prettier : yarn add --dev --exact prettier eslint config 생성..

Admin 시작 (회사구조)

기본 정보 프로젝트명 : 위메프오 어드민 프로젝트 성격 : 반응형 기준 브라우저 : 크롬 최신 버전 [web.platform] - 어드민 1 php phalcon 라이브러리를 사용, nginx로 웹서버를 띄운뒤 php, phtml, javascript로 화면 구성 [web.admin] - 어드민 2 React.js로 화면을 구성 후(CRA), WMPO gateway에 올라가 있는 webService를 직접호출하여 API 통신 React 참고 자료 cra : https://ko.reactjs.org/docs/create-a-new-react-app.html flux : https://haruair.github.io/flux/docs/overview.html redux,reducers : https://d2..