2021/08 WEEK1 TIL

junamee·2021년 8월 1일

목록 보기

8/16

(험한말) 8월이네

0801 [개인겅부]

중첩라우터
- 보통 헤더를 상단에 둘 때 라우트 파일에서 SWITCH 밖에 미리 선언하고 라우트 설정을 통해 헤더는 고정 컨텐츠는 변경되도록 했었다.
- 오늘 프로젝트는 라우트로 페이지가 전환된 후 상단바/좌측바가 고정되어있는 디자인인데, 그 안의 컨텐츠가 페이지 바뀌듯 변경되어야 함.
- 조건에 따라 컴포넌트를 다르게 선언해줄 수 있는데 이것을 라우팅으로 설정할 수 있음. 라우트 설정과 동일하고 대신 PATH를 해당 페이지에 이어서 연결해야함. /soccer/ => /soccer/chatting/
import {CSSProperties} from 'react'

e.stopPropagation() 부모요소로 버블링 일어나지 않도록 끊어주기

const Menu: FC<Props> = ({ children, style, show, onCloseModal, closeButton }) => {
  const stopPropagation = useCallback((e) => {
    e.stopPropagation();
  }, []);

  if (!show) return null;

  return (
    <CreateMenu onClick={onCloseModal}>
      <div style={style} onClick={stopPropagation}>
        {closeButton && <CloseModalButton onClick={onCloseModal}>&times;</CloseModalButton>}
        {children}
      </div>
    </CreateMenu>
  );
};

e.preventDefault
리액트에서 폼 제출하는 경우 새로고침 되지 않도록 써주긔

0802 [프리온보딩 수업]

과제리뷰

상수관리 : 엇..라우터도 상수처리...(2번이상 쓴다면 무조건)
url 설계 : id만 넣어도 되지않았을까, 또 사용자가 이해못할부분을 반영한 것은 좋지 않아보임 => 뜨끔🙄, 전체 데이터를 넘겼으니 아이디만 써도 될거란것은 알고있었는데...근데 목적에 따라 다른 것 같다. 나는 링크 공유하는 상황에서도 에러없이 페이지를 받아보길 원해서 나쁘지 않다고 생각한다. 만약 페이지가 넘어간 후 전체 데이터를 API요청으로 받아올 수 있었다면 모든 정보를 주소창에 붙이지 않았을 것이다.
constructor에서 사용할 데이터 형식을 미리 지정하고 시작하는 것이 좋다.
! 연산자 활용

	const checked = e.target.checked; //true/false
    	this.setState({isCheckNotInterest: !!checked});

Class vs Functional :
- 함수형: 재사용성이 높다. 관심사에 대한 코드 작성 및 분리가 가능하다.
- 클래스: 기능별,관심사별 코드를 작성하지 못하고 라이프사이클에 맞추어 나누어 작성해야하므로 코드를 파악하기 어렵다.(유지보수의 어려움),
- useEffect가 comonentDidMount/Update/willUnMount의 기능을 모두 다룰 수 있다. useRef는 class멤버변수 역할, useState의 state가 상태가 변경될 때마다 렌더링되는 성격과 달리 useRef는 유지되는 값으로 렌더링을 일으키지 않음.
- 라이프사이클 순서 및 역할/ 함수형과 클래스의 차이에 관한 질문에 대답은 이론은 간단하게, 사용실례 경험과 해결방법을 얘기하는 것이 좋음
라이브러리와 프레임웤
- 프레임웤 : 별도의 사용법이 있음(ex_앵귤러: 라우터 등을 설치하지 않아도됨, 모든게 다 정해져 갖추어져 있음)
- 라이브러리 : 일부 기능을 편하게 해주는 용도, ex_리액트: 상태관리(직접 돔에 접근하지 않아도 상태만 변경해도 돔을 변경해주니까!), 그 외엔 필요한 기능을 위해 직접 모듈을 설치해야하기 때문에 필수여부, )선택 기준이 명확한게 좋고, cra가 프레임웤의 기능을 조금 대리하고있다고 생각할 수도 있겠다.
페어프로젝트

이번엔 무려 8명이서 한 프로젝트를 .... 와우
기획서 분석 및 초기환경 셋팅 진행