🔸 CLI
- Shell은 무엇이고, 어떤 종류가 있는가?
: 사용자와 OS & 커널을 연결해주는 소프트웨어
: Shell을 이용하여 명령을 내릴 수 있고, 종류로는 sh, csh, bash, zsh가 있음
- Shell 화면의
$가 의미하는 바는 무엇인가?: 명령을 받을 준비가 되었음을 의미함
- Shell 화면의
~가 의미하는 바는 무엇인가?: 현재 로그인한 유저가 사용할 수 있는 최상위 디렉토리를 의미하고, 그 하위에서는 특별하게 패스워드를 입력하지 않아도 유저가 접근할 수 있음
pwd는 무엇이고, 왜 사용하는가?: Print Working Directory의 줄임말로, 입력하면 현재 위치한 디렉토리 위치를 알 수 있음
ls뒤에-a,-l,-al을 붙여 사용하는 경우, 각각 그 이유는 무엇인가?:
ls는 기본적으로 폴더 하위의 요소를 목록 형식으로 보여주는 명령어
: 각각의 옵션으로-a를 작성하면 숨김 파일까지 다 출력하고,-l을 작성하면 디테일한 정보까지 출력하고,-al을 작성하면-a와-l의 옵션을 모두 적용하여 출력함
cd,cd ..,cd ../..을 사용하면, 각각 어떤 결과가 나타나는가?:
cd를 입력하면 최상위 폴더로 이동,cd ..을 입력하면 한 단계 상위 폴더로 이동,cd ../..을 입력하면 두 단계 상위 폴더로 이동
mv는 무엇이고, 왜 사용하는가?: Move의 줄임말로, 특정 파일의 위치를 이동시킬 수 있음
:mv "파일명" "폴더명"과 같은 방식으로 사용 가능
:mv "원래 파일명" "바꿀 파일명"처럼 사용하면 파일의 이름을 변경시킬 수 있음
cp는 무엇이고, 왜 사용하는가?:
copy의 줄임말로, 파일의 사본을 생성하는 명령어
:cp "파일명" "폴더명"과 같은 방식으로 사용 가능
cat은 무엇이고, 왜 사용하는가?: 파일의 내용을 출력하고 싶을 때 사용
rm뒤에-r을 붙여서 어떻게 사용할 수 있는가?:
rm은 Remove의 줄임말로, 삭제할 때 사용하는 명령어
:-r "폴더명"처럼 사용하면 폴더 하위에 있는 파일과 폴더 자기 자신까지 삭제할 수 있음
🔸 Vim
- Vim에서 텍스트를 입력하는 insert mode로 어떻게 전환하는가?
:
i를 입력하여 전환 가능, 빠져나올 때는esc입력
- Vim의 command mode에서
:w,:wq,:q!는 각각 무엇을 의미하는가?:
:w는 편집한 파일을 저장하겠다는 의미
::wq는 편집한 파일을 저장하고 종료하겠다는 의미
::q!는 파일을 저장하지 않고 종료하겠다는 의미
🔸 Git
- commit과 push는 어떤 방식으로 하는 것이 바람직한가?
: commit은 작업 단위로 작게 분할하여 작성하는 것이 바람직함
: commit 메시지 작성시 너무 길지 않게 요약 정보를 작성하는 것이 바람직하고, 'feat:'나 'conf:' 등 작업 내용에 관한 접두사를 사용하면 인식하기 쉬워짐
: commit을 분할했다고 해서 push까지 분할하는 것은 좋지 않음, push 하기 전의 파일은 수정이 용이하지만 push를 해버리고 나면 그 후의 파일을 수정하는 것은 불가능에 가깝기 때문
🔸 배스킨라빈스 웹 사이트 개선 프로젝트 회고
💡 Repository 링크
🔹 개발 프로세스
💡 진행 기간
: 7/30 ~ 7/31
◾ 주제 및 콘셉트 회의
- 기존 웹 사이트를 클론 코딩하되, 성능 및 UX를 개선할 수 있는 UI 수정 및 추가
◾ 기존 웹 사이트 문제점 분석
- 렌더링 시간 이슈
: 처음 사이트 접속 시 아이스크림 메뉴 페이지 렌더링 시간이 약 40초 정도로 굉장히 많이 소요됨
💡 개선 방안
:
picture태그 사용하여 다양한 포맷과 사이즈의 이미지 제공
: Image Sprite 방식 이용하여 이미지 소스 다운로드 속도 개선
: Lazy Loading 기법을 활용하여 필요한 이미지만 먼저 보일 수 있도록 개선
: 렌더링 시간에 대한 UX 개선 위해 Skeleton UI와 로딩 표시기 제공
- 접근성 이슈
: 헤딩 태그의 오용
: 키보드 포커스 위치 식별 불가
💡 개선 방안
: 시맨틱한 마크업 구조 적용
: 식별이 쉬운 키보드 포커스 제공
- 보안 이슈
: 보안에 취약한 http 프로토콜 사용
💡 개선 방안
: 암호화 방식을 추가한 https 프로토콜로 변경
- 추가 기능
: 카테고리별 메뉴 추천 기능의 필요성
💡 개선 방안
: 작업 일정의 여유가 있다면 UI 및 기능 구현 시도
◾ 발표 진행 방식 및 일정 논의
- 이슈를 체감할 수 있는 유저 시나리오 설정
- 논리적인 발표 구조 작성
◾ 협업 방법 및 컨벤션 논의
- Git & GitHub
: Remote Repository 생성
: commit, branch, PR 컨벤션 논의
: merge 전 최소 2명의 코드 리뷰가 필요하다는 규칙 정의
- 환경 설정
: prettier 통일
: tailwindcss, postcss 환경 설정 적용
: 기타 사용할 패키지 적용
◾ Figma 시안 제작
- 메인 페이지와 메뉴 페이지의 데스크탑, 모바일 버전 시안 제작 완료
: 기존 웹 사이트와 유사한 형태로 제작하되, UX 개선에 대한 논의 반영
◾ Asset 파일 제작
- 이미지, 버튼 등 필요한 파일을 따로 추출하여 Image Sprite 방식으로 제작 진행 중
: 스타일링 시 추가할 파일이 많이 있을 듯하여 현재는 큰 비중을 두지 않기로 함
◾ 마크업 및 코드 리뷰
- 메인 페이지, 메뉴 페이지, 공통 컴포넌트인 헤더와 푸터 마크업
: 현재 코드 리뷰 후 merge 완료
🔹 참여한 작업
- 주제 및 콘셉트 회의
- 기존 웹 사이트 문제점 분석
- 발표 진행 방식 및 컨벤션 논의
- Figma 시안 제작
- 마크업 및 코드 리뷰
🔹 느낀 점 및 개선 사항
💡 코드 리뷰의 장단점
: 다양한 사람들의 의견을 반영할 수 있고, 놓치는 부분을 수정할 수 있다는 점에서 코드 리뷰의 필요성에는 이견이 없다. 다만 프로젝트 마감 기간이 얼마 남지 않았기 때문에 코드 리뷰에 대한 규칙을 완화할 필요가 있다고 팀원들과 협의했다. 구체적으로는 너무 작은 단위로 작업을 담당하기 보다, 큼지막한 레이아웃 단위로 작업을 담당하여 코드 리뷰 횟수를 최대한 줄이기로 타협했다.
💡 너무 짧은 프로젝트 기간
: 논의를 하면 할수록 퀄리티를 향상시키고 싶다는 욕심이 계속 생긴다. 현재 작업 속도로는 UX 개선을 위한 메뉴 추천 기능을 추가하는 작업이 가능할지 불투명하므로, 만약 이번 프로젝트 때 진행하지 못한다면 나중에 공부 목적으로라도 기능을 추가해보고 싶다.
