- 인사
- 저는 오늘 리액트 그것마저 결정 해주마 발표 시작 해보리겠습니다
- 리액트 안써본분 푸처핸즈업
- 리액트 써본 분에게 유익한 시간이 될거다.
- 저는 작년초에 카카오페이지 웹을 리액트로 포팅했습니다. 기존에는 jsp로 되어있었습니다.
- 5년 넘어서 레거시 코드가 많았슴
- 레거시 코드가 이해가 안될 때 너무 힘들었다. 담당자에게 물어봐도 잘모르고 그만둔 사람도 있다.
- 지금은 포팅을 했고 잘 돌아가고 있다. 카카오페이지 리액트로 검색해보시면 경험담을 블로그로 잘정리해놓았습니다.
- 2년전에 리액트 컨트리뷰터 했다. 버그수정했다. 오타수정정도가아니다.
- 리액트 주변의 라이브러리를 어떻게 선택할지 고민해야한다.
- 예를들어 css in js로 하기로 했다면 styledcompoentes중 여러 라이브러리중 하나를 선택을 해야함 기타 등등
- 리액트로 개발하는것은 수많은 라이브러리 중에 여러 옵션을 선택해가며 개발을 해야한다.
- 리액트로 개발할 때 자주 하는 고민에 대해서 얘기하려 한다.
- 코드를 일관성 있게
- 코드를 일관성있게 작성하려면 컨벤션을정해야한다.
- 함수형 작성순서
- 속성값 타입정의
- 밑에 컴포넌트 코드 작성
- 밑에 기타 상수 변수 함수 작성
- 조건부 연산자는 앤퍼샌드 연산자 추천 삼항은 복잡해짐
- 클래스형 작성 순서
- 속성값
- 상태값
- 생명주기메서드
- 기타메서드
- 렌더메서드
- 속성값 타입의 중요성
- 속성값 타입이 정의 되어있지 않으면 어떤 속성이 있는지 알기 어렵기 때문에 꼭 사용할 것을 권장한다.
- 여러분은 팀의 컨벤션을 잘지키나요? 컨벤션을 지키는거에대해 두가지 팁을 드리려함
- 웹 FE에서 컨벤션을 지키기 위해 사용하는 툴 들이있죠 ESLINT 같은 훌륭한 툴인데 뭔가 2퍼센트 부족할 때가 있다. 그럴때는 커스텀 룰을 만들 수 있다. 저희 팀에서도 10개정도 만들었다.
- prettier를 사용해라
- 기존 클래스형 컴포넌트를 훅으로 리팩토링 해야 할까요?
- 단순하게 훅이 클래스와 동일한 기능을 갖게 한건 아니고 다른 특징이 이다.
- 변경해야 할까?
- 제 개인적인 생각이지만 클래스 컴포넌트는 지상파이고 훅스는 유튜브라고 생각한다. 유튜브는 대세지만 지상파를 보는게 나쁜건 아니죠 하지만 유튜브에 재밌는 컨텐츠 가 훨씬 많다. 리액트 훅에도 장점이 많다.
- 클래스형 컴포넌트의 단점을 설명 드리고 훅스에 어떤 장점이 있는지 보여드리겠습니다.
- 코드 설명...
- 대략 클래스형 컴포넌트에서는 라이프사이클 메서드에 맞추어 로직이 흩어져있지만 훅스는 useEffect나 기타 훅으로 하나의 기능 별로 모아 둘 수 있어 가독성이 좋다.
- 고차 컴포넌트는 단점
- 몇 달간 훅을 써봤는데 큰 장점을 가진 것 같다.
- 서버사이드렌더링을 해야 할까요?
- SPA로 개발 할 때는 SSR을 할지 고민하게 된다.
- SSR 개념설명....
- 서버사이드 렌더링을 할 때
- 배포 프로세스 관리
- 적절한 서버 인스턴스 스펙 결정
- 서버 모니터링 및 로그 관리
- 서버 비용 발생
- 서버사이드 렌더링을 안 할 때
- 내 코드가 서버에서 돌 수 있다는 것을 알아야 함
- window나 navigator 브라우저 api 활용은 분기 처리를해야함
- 사용자의 스크린 사이즈를 알 수 없다.
- 실제로 해보니 정말 힘들다. 될 수 있으면 피하자
- 아 그 마지막으로 한마디 더 하자면 백 오피스는 SSR 필요 없지만 실 사용자 대상은 아마 하셔야 될 겁니다.