PWA
모바일 앱(React-Native) 보다 PWA를 사용하면 모바일 페이지를 쉽고 빠르게 효율적으로 만들 수 있다.
홈페이지 만들기 -> 반응형으로 모바일 웹 만들기 -> 모바일 웹에 PWA 추가
PWA를 사용하면 앱을 다운로드 받지 않고 접속하기만 해도 바탕화면에 아이콘 생성, push알림, 로고, 오프라인 모드 등이 가능해진다.
추가적으로 React-Native에서 iframe을 사용하여 안드로이드 / ios 배포도 가능하다.
Frontend 분야
- PWA
- webRTC : 음성 통화, 영상 통화, P2P 파일 공유
- webGL : 3d 화면
- d3.js : 데이터 시각화 (실시간 그래프, 주식 차트 등)
- ReactNative (모바일 앱)
- AI
- JS 백엔드
실무형 알고리즘
- 날짜 검색시 입력할때 . 이나 - 자동입력 가능한 알고리즘 작성해보기
- 전체 체크박스 감지하는 알고리즘
Object 기능들
객체 안에 아이디와 객체가 있을 경우, 배열 안에 객체로 변형하는 알고리즘 작성해보기
-> id도 객체 안에 들어가도록 설정
-> Object.keys(), Object.values() 사용
github 협업 방법
gitflow workflow
브랜치 나누어주기
master / develop /release /hotfixes /feature
-
여러명이서 작업할 경우 feature 브랜치 생성 (feature-boardList / feature-login 등)
기능을 추가할 경우 feature 브랜치에서 작업한다. -
develop 브랜치에서 각 feature 브랜치를 merge하면 기능들이 합쳐진다.
-
release 브랜치에서 develop 브랜치를 merge 해준다.
release에서는 버그 수정시에만 commit한다. -
master브랜치에 release 브랜치를 merge 해준다.
master브랜치를 EC2에서 git pull origin master 해서 배포한다. -
hotfixes 브랜치는 운영상 나타나는 버그들을 master브랜치에서 가져와 수정 후, master브랜치에서 merge 해준다.
branch 명령어
-
git brance
브랜치 확인 -
git checkout 브랜치이름
브랜치 이동 -
git checkout -b qqq
qqq브랜치를 생성하면서 브랜치 이동 -
git merge qqq
현재브랜치에 qqq브랜치 합치기
=> 나만의 폴더에서 branch 생성 -> 그 폴더에서 작업, 저장 -> 다른 브랜치로 와서 merge
예시
-
회사계정(develop)이 올린 프로젝트 보일러 플레이트 폴더를 팀원들마다 fork 해준다.
-
fork한 후 vscode에서 git clone ~~
-
각자 기능 구현 후, 본인 github에 push하고 pull request(PR)를 날린다.
-
회사계정 develop에서 PR들의 코드 리뷰 후 선택해서 merge 한다.
-
각 feature 브랜치에서 develop 브랜치를
git pull upstream develop해서 다른 팀원들이 올린 기능들을 다운로드 받아온다.
(회사계정은 upstream, 각 팀원의 github는 origin) -
마지막으로 release 브랜치 -> master 브랜치로 배포
주의사항
1. 최소 1일 1PR 올라갈 것
-> 기능을 완성하지 못하더라도 반드시 올려야 팀원들 간 코드를 맞출 수 있다.
2. 서로 독립적인 기능 분배 (게시글 / 상품 / 결제 등)
3. 공통 기능들 (로그인 등)은 경력자 위주로 -> 모든 기능에 영향을 미치기 때문
4. 1일 2회 이상 PR시, PR들이 독립적인 기능이도록
(게시글 등록 + 게시글 수정과 같은 경우 독립적이지 않음)
git remote add upstream github주소
-> upstream 주소 등록
git checkout develop
-> develop 브랜치로 이동
git pull upstream develop
-> develop 브랜치에서 해주기
주의!! feature branch 생성시 반드시 최신화된 develop branch에서 해주기
- 알고리즘 : 프로그래머스 1~2단계
- 기능구현: PDF파일 보고 기능 구현
- 반응형 디자인은 기본
- UI 최대한 신경쓰기 (폴더, 컴포넌트 구조가 사실은 더 중요)
- 모든 기능 구현하기
- 컴포넌트 재사용성 높이기
- 글로벌 스테이트 잘 활용하기
- 타입스크립트
- 테스트 코드 작성하기
- 메모이제이션(useCallback, useMemo, memo 등) 포함하기
++ SSR 적용해서 배포하기
++ 과제 도메인 구입후 배포
++ gif형태로 핵심 기능들 유저 플로우 만들기
++ 경력 2~3년차 지원
