본문 바로가기
fron-end 기본

프로젝트를 진행하면서 잊은 부분들 (중요)

by ddddbbbb 2023. 11. 15.

프로젝트를 진행하면서 우대사항에 적힌 부분을 사용하기 위한 방향으로 프로젝트진행하고있다는 생각이 들었고
 
한 프로젝트를 자가복제해서 조금만 변경하는 기분이 들었습니다

이에 우선순위를 다시 생각해봤습니다 
 
프론트엔드엔지니어가 해야하는일 
0. 사용자 친화적으로
--> 단순 이쁘게가 아닌 해당 기획의 의도와 사용자가 편한 방식으로 
 
1. 번들 크기를 줄이고 
--> 당연하게 CRA를 사용해왔는데 CSR이 초기랜더링이 느린게 단점이니 당연히 관리
 
2. 상태를 잘관리하고 
--> 가상돔을 사용하는 입장에서 어떤시기에 변경사항을 리얼돔에 업데이트해야하고 
--> 너무 잦은 업데이트가 일어나지않는지 관리할 것 
 
3. 좋은 코드
--> 좋은 코드란 뭘까를 생각하며 코드를 짜는것
--> 남이 봐도 이해가 편한 코드 
--> 해당 컴포넌트의 목적이 명확한 코드 
--> 변수명 , 함수명이 명확할 것
--> 태그명에 따라 브라우저의 크롤러가 인식하기 편할수있음 확인해서 짤 것   
 
4. 유지보수를 쉽게 짜는것 
--> 컴포넌트간 의존도는 낮게
--> 코드에 대한 설명을 적어 놓을 것 
 
5. 보안 
--> 사용자가 모든 코드를 볼수있다는 생각으로 짤것 (보안관련로직은 서버쪽에서 처리하는게 안전)
 
6. 동작환경의 이해 
--> 자바스크립트는 싱글스레드언어로 비동기 처리를 위해서 web API라는 곳에서 비동기 작업을 진행하고 
콜백큐를 거쳐 콜스택에서 해소되기에 생길수 있는 문제점을 생각해 볼 것 (이벤트루프)
--> 각 브라우저마다 차이가 존재하는데 고려했는가 
--> 동작기기를 고려했는가  
 
7. 동기 비동기 처리 , 동기화
-->  API요청의 응답 상태에 따라 사용자에게 적절한 표시를 해줬는가 
--> 해당 로직이 기획단계에서 정한 관리기법과 맞는가 , 효과적인가 
 
8. 라이브러리/프레임워크의 사용이유 
--> 직접 만들수없는 라이브러리/프레임워크인가 
--> 해당 라이브러리/프레임워크를 쓰는 이점을 알고있는가?
--> 해당 라이브러리/프레임워크를 선택한 이유가 명확한가  
 
9. 테스트의 목적 
--> 테스트는 내가 기획한 부분과 다르지않다는 것을 보장하기 위한 수단 
 
10. 기획의 목적을 생각한 성능 및 기능 추가 
--> 온라인 쇼핑몰, 은행 홈페이지 , 블로그 , 화상채팅 사이트 등 다양한 프로젝트가 존재할 수 있는데
주된 목적/동작을 위한 성능과 우선순위를 생각할 것 
 
 

'fron-end 기본' 카테고리의 다른 글

마이크로 프론트엔드 아키텍쳐  (1) 2024.01.31
bundler에 대하여  (0) 2024.01.28
Memoization 과 Closer  (1) 2023.10.19
React component life cycle  (0) 2023.10.02
브라우저 랜더링3 (최적화)  (0) 2023.09.20