[TIL] 220914-15

먼지·2022년 9월 14일

TIL

목록 보기

31/57

블로그글읽기

취준생에게 도메인이 중요한가요?
- 경쟁의 차별점을 도메인으로 두는 것을 추천. 자신이 관심 있고 좋아하는 도메인 회사를 가기
나의 웹개발 기초실력 파악하기
- 나는 중간 정도는 되지 않을까,, 그래도 자주 확인하면서 부족한 부분들을 공부해야겠다
오늘만큼은 로그인을 부셔보자.
- 유저의 민감한 개인정보를 필요로 하는 플젝이 아니라 로컬스토리지에 토큰을 저장하는 방법을 주로 이용했는데 협업에선 간단한 로그인이 없다,,
- HTTP는 무상태성(Stateless)이다. 하지만 유저 정보, 지역에 따른 언어 등 여러 기능들을 지원하기 위해서 Cookie와 Web Storage가 생기게 됨. Web Storage는 Cookie에 비해 큰 데이터를 저장할 수 있고 브라우저에 로컬하게 저장되고 서버로는 데이터가 전송되지 않고 Local Storage 와 Session Storage로 나눌 수 있다.
- 로컬스토리지는 만료 기간이 없고, 세션스토리지는 탭이 종료될 때 데이터가 만료되고 같은 도메인이여도 세션이 다르면 데이터에 접근이 불가능함
- Cookie는 Web Storage에 비하면 작은 데이터를 저장할 수 있지만 서버에 전송할 수 있기 때문에 서버 데이터를 공유하는 용도로 사용됨. 쿠키의 종류엔 만료기간과 도메인이 있음.
- 하지만 로그인 정보를 클라이언트 브라우저의 작은 텍스트 조각인 쿠키에 저장하기엔 여전히 보안이 취약함.
- 세션(Session)은 클라이언트의 인증 정보를 서버에서 저장하고 관리함. 세션 인증방식에선 세션 id를 쿠키에 담아서 통신하기 때문에 쿠키와 전혀 상관없는 친구가 아니다.
- JWT(Json Web Token)는 무상태(Stateless)가 가장 큰 특징이다.
- 이것저것 로그인 관련해서 배웠는데 진짜 협업 경험이 없다 보니 잘 이해되진 않는다ㅜㅜ 공..부..
프론트엔드에서 비즈니스 로직과 뷰 로직 분리하기 (feat. MVI 아키텍쳐)
- 무슨 느낌인진 알겠는데 난 flux, mvc 등의 패턴을 그림으로 설명한 게 아직도 이해가 잘 안된다. 정!말 프론트엔드 아키텍쳐 트렌드가 굉장히 빨리 바뀌고 있다는 걸 다시 한번 느꼈다ㅏㅏㅏㅏ 열심히 공부 🤕
React는 컴포넌트를 언제 다시 리렌더링 할까요?
- 렌더링이란? => 문맥에 따라 약간 의미가 다르지만, 궁극적으론 이미지를 생성하는 과정을 설명함. DOM(Document Object Model)은 쉽게 말해서 웹 사이트를 열 때, 화면에 표시되는 내용을 마크업 언어인 HTML을 통해 표현한다는 것을 의미함.
- VDOM 이란? => 애플리케이션의 상태 변경은 VDOM에 먼저 적용됨. VDOM의 새로운 상태에 대한 UI 변경이 필요한 경우, ReactDOM 라이브러리는 업데이트해야 할 항목만 업데이트하여 효율적으로 작업을 수행할 수 있음. 예를 들어, 요소의 속성만 변경되는 경우, React는 document.setAttribute또는 이와 유사한 호출을 통해 html 요소의 속성만 업데이트함.
VDOM이 업데이트되면 React는 이전 VDOM의 스냅샷과 비교한 뒤 실제 DOM에서 변경된 내용만 업데이트함. 이전 VDO과 새 VDOM을 비교하는 이 프로세스를 diffing이라고 함. (재조정(reconciliation) 에 대한 React 문서를 참조)
하지만 렌더링이 항상 UI 업데이트를 의미하지 않음. (그림의 빨간색 점은 리렌더링을 나타내며 리액트에서 이것은 렌더 함수를 호출하는 것을 의미하고 실제 DOM에서 이것은 UI를 다시 그리는 것을 의미)
- 리렌더링을 최적화하는 방법 => 비효율적인 리렌더링의 예로는 상위 컴포넌트가 하위 컴포넌트의 상태를 제어하는 경우! 컴포넌트의 상태가 변경되면 모든 자식들이 리렌더링 됨.
React는 불필요한 업데이트를 방지하기 위해 몇 가지 함수를 제공함
```
	- `React.memo`는 요약하자면 React Hook 컴포넌트에서 props가 변경되지 않았을 때 렌더링 되는 것을 방지하는 함수
	- `shouldComponentUpdate` 함수는 리액트 라이프 사이클 함수 중 하나이며 클래스형 컴포넌트의 업데이트 시점을 리액트에게 알려줌으로써 렌더링 성능을 향상시킬 수 있음.
	- `key 속성을 설정`. 경우에 따라, 리액트는 컴포넌트를 식별하고 성능을 최적화하기 위해 key 속성에 의존함. 모든 원소들이 변경되었다 생각하지 않고 key에 해당한느 요소를 리렌더링?
	- 애플리케이션의 다른 부분에서 상태를 사용해야 하는 경우, React Context 또는 MobX 및 Redux와 같은 대안을 사용하면 됨
```
useEffect 잘못 쓰고 계신겁니다.
- Effect가 두 일어나도 유저가 이를 느끼지 못하게 코드를 작성해야 합니다. 해결 방법은 cleanup 함수를 꼭 작성하는 것입니다. 개발 모드에서 effect -> cleanup -> effect 와 같은 순서로 리액트가 컴포넌트를 실행시키기 때문에 클린업 함수가 필요한 부분에선 꼭 생략하지 않고 챙겨줘야 합니다.
- props, state 변경에 따라 또 다른 state를 업데이트해야 할 때. 이때는 useEffect를 사용하면 안 됩니다. 만약 이런 코드를 작성하고 있었다면 무의식적으로 불필요한 리렌더링을 발생시키고 있을지도 모릅니다.
  - props 변경에 따라 특정 상태만 업데이트 해야 하는 경우 useState로 prevItems란 상태를 하나 더 만들어서 items 상태를 담고 prevItems랑 items를 비교함으로 인해 리렌더링을 줄임. 첫 렌더링시 if statementㄹ르 통해 렌더링 횟수를 줄인 것
- 우리의 코드가 상태를 변경했을 때 작동하는 것이 의도인지, 유저의 이벤트에 따라 UI를 변경하는 것이 주 목적인지 생각해볼 때, 버그를 양산할 수 있는 가능성을 가진 useEffect보다, 이벤트 핸들러 내부에서 모달을 호출하는 것이 바람직합니다. (저는 개인적으로 event handler 내부에서 처리할 수 있는 로직은 useEffect가 아닌 event handler 내부에서 처리하는 것이 좋다고 생각합니다.)
- 결론? 최고의 방법은 중복 리퀘스트를 줄이고 여러 컴포넌트에서 캐신된 데이터를 재활용하는 것이다. useEffect는 버그를 양산할 수 있는 가장 쉬운 장소이기에 안티패턴에 대한 사례가 확실하게 이뤄져야 한다고 생각.
- 안티패턴 ㅜㅜ 리액트쿼리..

Blob

https://heropy.blog/2019/02/28/blob/
formData로 imgFile 보내는 거 두 번째 작성하는데, 전엔 typescript 땜에 밑에 빨간 줄 뜨는 게 보기 싫어서 그냥 as string 이랑 if(!fileData) return 이런 식으로 해결하고 넘어갔는데 formData.append 부분에 마우스를 갖다 대니까 (method) FormData.append(name: string, value: string | Blob, fileName?:... Blob 이란 type을 처음 봤다

input에서 imgFile data를 콘솔에 출력해 보면

Blob은 이미지, 비디오 등의 멀티미디어 데이터를 다룰 때 사용하고 File 객체도 name과 loastModifiedDate 속성이 존재하는 Blob 객체라고 해서 폼데이터에 넣을 이미지 파일 state를 useState<Blob>으로 작성해서 일단은 빨간 줄 해결

  const [fileData, setFileData] = useState<Blob>();
  
  const handleUpdateProfileImage = () => {
    if (!fileData) return;
    if (fileDataUrl === currentUser?.userImgUrl) {
      return;
    }
    let formData = new FormData();
    formData.append('imgFile', fileData);

정규표현식

아이디나 비밀번호 등의 정규 표현식은 구글링하면 웬만한 건 다 나와서 복붙해서 썼는데 조금은 이해할 필요가 있다고 느꼈다. 근데 어디서 공부할 수 있을까!
그리고 체크할 때 <input ... pattern='regexp' /> 이렇게도 해봤고 onChange에서도 시도했는데 잘 안돼서 onSubmit으로 form 양식 보낼 때 확인하는 방법을 사용하려한당