제로초 slack 강의(새롭게 배운 내용 정리)(2)

참고사항:

index.html에서 css 관련한 링크로 css를 위해 계속 링크 주소 업데이트를 하라고 강의 초반 설정에서 소개했지만, 사실상 이제 다 만든 코드들에서 css를 복붙해오고 있기때문에 이 에러가 콘솔에 계속 떠도 크게 문제는 없으니 넘어가면 된다.

 

index.html의 link 태그 주소

<link rel="stylesheet" href="https://a.slack-edge.com/bv1-8/client-boot-styles.57e47b5.css" crossorigin="anonymous" />

  <link rel="shortcut icon" href="https://a.slack-edge.com/cebaa/img/ico/favicon.ico" />

  <link href="https://a.slack-edge.com/bv1-8/slack-icons-v2-40cccfd.woff2" rel="preload" as="font"

    crossorigin="anonymous" />

 

---

Menu 만들기

 

- gravatar 라이브러리

gavatar 라이브러리로 email과 nickname을 사용하여서 그에 맞는 이미지를 불러옴.

---

- css 관련 , 코드 스플리티 관련 주의 사항

css관련해서 아래와 같이 많은 것들을 불러와서 태그로 사용하기 때문에 헷갈릴수 있으니 조심하자.

그래서 제로초의 해결방안은 좀 큼직한 곳에서만 css태그를 이런식으로 사용해서 헷갈릴만한 요소를 줄이자는 것.

(그래도 헷갈릴듯 ㅋㅋㅋ)

 

아래의 loadable은  @loadable/component는 패키지에서 제공하는 모듈.

 

이는 코드 스플리팅을 쉽게 할 수 있도록 도와주는 라이브러리이니, 나중에 Workspace로 중첩라우팅을 위해 channel, direct 등의 이미 코드 스플리팅된 것을 들고갈 때 같이 들고 가서 다시 선언해줘야 한다.

import { Header, ProfileImg, RightMenu, WorkspaceWrapper, WorkspaceName, MenuScroll, Workspaces, Chats, Channels} from '@layouts/Workspace/styles';

import loadable from '@loadable/component';

---

- 중첩 라우터의 두가지 방식

1. 만약 주소가 workspace 이런식으로 일관되게 내려온다면 따로 workspace에서 Switch 태그로

각 페이지들( Channel, DirectMessage ) 관리 가능

2. 아니라면 workspace를 각각 layouts로써 각각 Channel, DirectMessage 페이지에 넣어줘야한다.

 

1번 예시.

const DirectMessage = loadable(()=>import('@pages/DirectMessage'));

const Channel = loadable(()=>import('@pages/Cha

<Switch>

            <Route path='/workspace/channel' component={Channel}/>

            <Route path='/workspace/dm' component={DirectMessage}/>

          </Switch>

 

 

아래처럼 Switch와 그 안에 Route를 통해 라우팅하여 각 페이지마다 다른 화면이 보이도록 했다.

---

만들면서 각 css 파일을 확인해보며, element 구조를 확인하면서 어떤식으로 파일이 돌아가고 있는지 계속 확인하고 이해한다. 

---

메뉴를 재사용한 모달 만들기

 

여태껏 재사용하는 컴포넌트 a가 있다면 b 컴포넌트를 만들때, b의 export도 a로 해줘야 된다하고 순간착각함.

=> 원인: 강사분이 modal 폴더 index에 마우스를 갖다대서 거기에서 만들고 있는 줄 알았는데 

강사님 화면의 아주 조그마한 글씨의 파일 경로를 확인해보니.. menu에서 만들고 있었음..ㅎㅎ;

이것도 계속해메다가 도저히 오류가 안고쳐져서 기존 완성물 코드 살펴보고서 알게됨.(내 30분..ㅠ)

---

메뉴에서 개인 이미지를 클릭하면 정보와 함께 로그아웃이 되는 버튼이 있는 화면이 나오도록 함.

7.7현재 진도

 

-

---

---

24.07.05 평가.

 

예전 코드라서 확실히 지금은 기술적 트렌드로서는 불필요해 보이는게 있기는 하지만, 그래도 쭉 둘러보면서 내가 프론트 개발자로서 복잡한 부분들을 어떻게 기초공사를 다져나가야 하는지를 알게 해주는 거의 유일한 강의인듯 싶다.