Portfolio

참고 자료

코딩_커밋_컨벤션 · boostcamp-2020/Project18-D-WEB-Boostact Wiki

You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

https://github.com/boostcamp-2020/Project18-D-WEB-Boostact/wiki/%EC%BD%94%EB%94%A9_%EC%BB%A4%EB%B0%8B_%EC%BB%A8%EB%B2%A4%EC%85%98

코딩 컨벤션

3. 협업 룰 세팅

3.1. 코드 컨벤션

컴포넌트 선언 방식


const temp() {
  return (
    <div>
      
    </div>
  )
}

export default temp;

일반 함수는 화살표 함수 const func = () => {}

이벤트 핸들러 함수 네이밍

한 컴포넌트 내에서

→ 기능을 대표하는 이름으로, 정 애매하면 handle~

prop으로

onClick~, onChange


// 부모
const openModal = () => {}

<자식 onClickModalCancel={openModal} />

이벤트 핸들러: on~

validation: isValid~

컴포넌트 이름

명사로 표현이 가능하면 명사 (Login, Modal 등)

안된다면 동사 명태 형태로 (searchButton 등)

스컴포넌트

일단 그냥 사용해보고 추후 공통 컴포넌트 분리한다.

props


interface CommonInputProps {
	width: string;
	errorMsg: string;
}

function CommonInput(props: CommonInputProps) {
	const { width, errorMsg } = props;
	...
}

배열 이름은 ___List (userList, groupList, userDataList 등)

~~~~Data, ~~Info✅~~

useState의 set 함수를 자식 컴포넌트에서 사용하고자 할 시, set 함수를 prop으로 그대로 넘겨주지 않고 함수에 감싸서 그 함수를 보내주자!

a. 이 함수를 prop으로 넘겨줄 때 prop이름은 마치 이벤트 핸들러처럼 onChange~, onClick~ 형식으로 짓자!


// 예시 - 직접 짰는데 좀 이상하니까 진지하게 보시지 말규 네이밍과 패턴만 봐주세요 . .
// ParentsComponent.jsx
function ParentsComponent() {
	const [buttonContent, setButtonContent] = useState("등록");
	const changeContent = (key, value) => { // 네이밍 기준 - 함수의 기능 
		setButtonContent("삭제");


c
...
	};
	const props = {}
...
	return(
		<>
			<ChildrenComponent onClickButton={changeContent} /> // prop 네이밍 기준 - 이벤트 핸들러 비스무리 onClick~
...

// ChildrenComponent.jsx
function ChildrenComponent({ onClickButton }) {
...
	return(
		<>
			<Button onClick={changeContent} />
...

스타일 관련 상수

아래와 같이 작성하되, color.ts button.ts 와 같이 파일을 나누어서 작성해놓기


import { css } from 'styled-components';

export const Z_INDEX = {
  closeUp: 0,
  camOn: 10,
  camOff: 20,
  nickname: 25,
  question: 30,
  cheers: 40,
  modal: 50,
  updownNum: 55,
  toast: 60,
};

export const FULL_WIDTH_BUTTON = css`
  width: 100%;
  height: 58px;
  border-radius: 14px;
  font-size: 16px;
`;

시멘틱 태그는 필요하면 유동적으로 사용할 것!

스컴포넌트랑 일반컴포넌트 한 파일에 - 컴포넌트 (index.jsx, style.js)

컴포넌트, Pages 폴더명 대문자로 시작 (대문자 적용 안된것들은 한번에 이름 변경하기)

상수는 대문자를 _로 분리

변수명 최대한 명시적으로, camelCase

코딩 컨벤션 예시