HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🐣
프론트엔드 데브코스 3기 교육생
/
🐸
나영팀
/
코딩 컨벤션

코딩 컨벤션

😵‍💫
코딩 컨벤션 예시
코딩_커밋_컨벤션
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
코딩_커밋_컨벤션

prettier

Options · Prettier
Prettier ships with a handful of format options.
Options · Prettier
https://prettier.io/docs/en/options.html#prose-wrap
Options · Prettier
 

컴포넌트

컴포넌트 파일
→ camelCase.tsx → ie. MyComponent.tsx
컴포넌트 선언 방식
  • Arrow Function Component Syntax
  • 파일 아래서 export 하기

페이지

페이지 파일
→ kebab-case.tsx → ie. about-us.tsx
페이지 컴포넌트 이름

이벤트 핸들러

컴포넌트 내에서
→ handle[동작][기능] → ie. handleClickUpdate
props로 받을때
→ on[동작] → ie. onSubmit

파일 구조

💡
Next.js 13의 app디렉토리를 활용합니다.
  • app
    • user
      • user.css
      • user_component.tsx
      • page.tsx
  • pages
    • api
      • index.ts
  • components
    • 파일 구조 참고 예시
      • File Structure - React
        React doesn't have opinions on how you put files into folders. That said there are a few common approaches popular in the ecosystem you may want to consider. Grouping by features or routes One common way to structure projects is to locate CSS, JS, and tests together inside folders grouped by feature or route.
        File Structure - React
        https://reactjs.org/docs/faq-structure.html
        File Structure - React
    Created
    Feb 6, 2023 09:42 AM
    Tags
    //.prettierrc.js module.exports = { printWidth: 80, semi: true, singleQuote: true, tabWidth: 2, useTabs: false, endOfLine: 'auto', jsxSingleQuote: true, bracketSameLine: true, quoteProps: 'as-needed', trailingComma: 'es5', arrowParens: 'always', bracketSpacing: true, };
    const MyComponent = ({ propA, propB }) => { } export default MyComponent; const Container = styled.div` `;
    const AboutUsPage = ({ propA, propB }) => { } export default AboutUsPage;