프론트엔드 개발 가이드

개발도구

• Visual Studio Code
• 크롬
• 크롬 확장 프로그램
  • Chrome DevTools
  • React Developer Tools
  • Redux DevTools Extension

설계

• Clean Architecture by Robert C. Martin
• REST API
• BEM

코딩 컨벤션

• Airbnb Style Guide
  • JavaScript - 번역본
  • React/JSX - 번역본
• NHN의 FE개발랩 웹 프론트 개발 가이드
  • HTML/CSS/Sass
  • 코딩컨벤션
  • 안티 패턴
  • 정적 분석
  • 성능 최적화
  • 디버깅
  • 의존성 관리
  • 번들러
  • 테스트

개발

• HTML5
• ES6+ (ES2015+)
  • 표준 ECMA-262 - ECMAScript
    • JavaScript는 ECMAScript 사양을 준수하는 범용 스크립팅 언어
  • TypeScript
  • React - 번역본
    • React 프레임워크
      • next.js
      • Create React App
    • react-redux - React 상태 컨테이너
      • Redux (한글)
    • redux-saga (한글)
• CSS3
  • Ant Design - React UI 컴포넌트 라이브러리
  • styled-components - CSS-in-JS 라이브러리
  • Sass(Syntactically Awesome Style Sheets) - CSS pre-processor. CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장(extension)
• JavaScript 라이브러리
  • eslint- 린터(JavaScript linter)
  • prettier - 코드 포맷터
  • axios - HTTP 클라이언트
  • winston - 로그(Logger)
  • i18next - 국제화 라이브러리
  • moment - 날짜 관련 라이브러리
  • lodash - JavaScript 유틸리티 라이브러리
• HTTP 프로토콜 - MDN HTTP 개요

테스트

• JEST - JavaScript 단위 테스트
• Enzyme - React 컴포넌트 테스트
• POSTMAN - API를 테스트

소스 제어

• Git - 분산 버전 관리 시스템
• Bitbucket - Git 저장소. Git을 프로젝트 기반으로 체계적으로 관리하고 Bitbucket 서버에 웹으로 접근하여 코드의 커밋 히스토리, Pull Request, Fork 등을 쉽고 편하게 수행할 수 있게 지원하는 제품

종속성 관리

• Node.js 패키지 매니저
  • npm - Node.js의 기본 패키지 매니저
  • yarn - JavaScript의 새로운 패키지 매니저
• Nexus Repository Manager 3 - 회사 내 Maven, NPM 저장소로 이용

빌드

• Babel - ECMAScript 2015+ (ES6+) 로 작성된 코드를 함수적으로 동일한 ES5 코드로 변환해 주는 JavaScript 컴파일러. Internet Explorer 등 다양한 브라우저 종류로 발생하는 호환성(Cross Browser) 문제 해결을 위해 사용.
• Webpack - JavaScript 모듈 번들러
  • 모듈 번들러란 여러개의 나누어져 있는 파일들을 하나의 파일로 만들어주는 라이브러리
  • 모듈 번들러는 JavaScript 코드들을 압축하고 최적화 할 수 있기 때문에 로딩 속도를 높일 수 있음

CI (지속적 통합)

• Bamboo - 자동화된 빌드, 테스트 및 릴리즈를 함께 단일 워크플로우에 연결하는 지속적 통합 및 배포 도구

운영

• Red Hat Enterprise Linux 8
• PM2 - Node.js 프로세스 관리자
• Node.js - 번역본 - V8 (JavaScript 엔진)으로 빌드 된 이벤트 기반 JavaScript 런타임

상용 솔루션 (기능별 제품)

• Git 코드 관리 - 아틀라시안 Bitbucket
• CI (지속적 통합) - Bamboo
• 웹브라우저 인증서 (범용네트워크암호/인증)
  • 라온시큐어 Key# Biz v2.0
• 트랜잭션보안 및 바이러스보호 SW
  • 라온시큐어 TouchEn Transkey v4.6 - (PC) 가상키패드/Server
  • 라온시큐어 TouchEn mTranskey v4.6 - 모바일 키보드보안(Web용)
• 출력물(보고서) - 포시에스 OZ Report
• Extended Validation (EV) SSL 인증서
  • Sectigo
  • DigiCert - crowdnet, lei-k
  • GlobalSign - e-safe, dacc
  • Thawte - safeplus
  • GeoTrust - ksd, evote, nanum
  • Let’s Encrypt (무료)
• 통합 서버보안 솔루션 - sga RadCastle
• 쉘 모니터(ShellMonitor) - umv기술 WSS(Web Server Safeguard)
• Linux 백업 - Acronis Backup

성능

• Lighthouse
• KOREA HTML5 통합진단
• WebPageTest
• PageSpeed Insights 도구

SEO

• 구글 검색엔진 최적화(SEO) 초보자 가이드
• 네이버 웹 표준 최적화 기본 가이드

공개 SW

• 네이버 오픈소스 가이드

[참고] 기술 블로그

• 제로초
  • (강의) React로 NodeBird SNS 만들기 - Next.js
  • (도서) Node.js 교과서
• landvibe - 카카오페이지 웹 React 포팅 후기 - Next.js
  • (도서) 실전 리액트 프로그래밍 - 리액트 훅부터 Next.js까지
• 벨로퍼트
  • (도서) 리액트를 다루는 기술 - Create React App
• 캡틴판교 - 웹 기초
• web.dev

To Do

• 웹서버 캐시 처리
• PWA - MDN 프로그레시브 웹 앱 소개
• Docker