[TIL] 230714

Github 그룹프로젝트 진행과정

repository 만들기 -> 팀원 초대 -> 프로젝트 환경 세팅 -> develop branch 생성 ->
main(master) branch 보호하기(Lock branch: push하지 못하게), require a pull request before merging
-> 프로젝트 보드 만들기 (Todo, InPregress, Done을 작성할 수 있다.) -> GitIssue 만들기 -> feature branch 만들기

충돌 해결하기

featureA 에서 최신 develop으로 branch 이동 -> pull -> 다시 featureA로 이동 git checkout - -> git merge develop -> 충돌 작업 해결하기(의논하기) -> 충돌 해결 후 push 하기 -> PR

Main(Master)에 완성된 코드 올리기

배포 담당이 New pull request 수행하기 develop -> main(master)

• review, request 수행 확실히 하고 approve

SPA특강

MPA(Multi-Page App)

클라이언트에 요청에 따라 서버에 그에 맞는 것을 보내주고 페이지를 reload 해주는 방식이다. 과거에 많이 사용했다.

SPA(Single Page Application)

클라이언트에서는 HTML파일을 받고 AJAX요청 통해 JSON파일을 받고 클라이언트에서는 렌더링을 한다.
요즘에는 둘을 적절히 섞어 사용한다.

렌더링

누가 렌더링을 했는지(누가 UI를 준비했는지)에 따라 갈린다.
요즘에는 둘을 같이 사용한다.

CSR (Client Side Rendering)

HTML 다운로드 -> JS 다운로드 -> JS 실행 -> Page Viewable & Interactable

SSR (Server Side Rendering)

HTML 다운로드 -> JS 다운로드, Page Viewable -> JS 실행 -> Page Interactable

새로 알게 된 것

• useEffect에서 return문은 해당 컴포넌트를 벗어날 때 실행된다.

Modal

바깥을 눌렀을 때에도 닫히게 만들기
1. 외부영역을 지정핟도록 ref로 지정한다.
2. useEffect로 이벤트를 추가해준다.

const clickOutside = (event) => {
  if(modalRef.current && modalRef.current === event.target) {
    closeModal();
  }
};

useEffect(() => {
	document.addEventListner("mousedown", clickOutside);
    return () => {
    	document.removeEventListener("mousedown", clickOutside);
    },[]);

과제를 마치고 효율적인 코딩을 위해 했던 고민에 대한 해결책이 동작원리에 있지 않을까 싶어 렌더링에 대해 복습하는 시간을 가졌다.
다음 주 프로젝트를 위해 Github 사용에 대해 정리해봤다.