[프리온보딩코스] 1주차 -과제1

✍알게된 것들 (so many)

1. styled-components
2. jsconfig.json 추가하여 모듈을 절대경로로 임포트
3. Intersection Observer
4. [ { isIntersecting } ]
5. dl, dt, dd
6. README에 추가할 수 있는 Markdown Badges
7. netlify로 배포하기
8. 왜?의 소중함 feat. 습관 버리기

🔥그래서 해보는 정리

1. styled-components

css in js 방식으로 컴포넌트가 렌더링 될 때 스타일 정보를 읽는다고 한다.

but 그 컴포넌트가 렌더링 될 때 마다(!) 스타일정보도 가져옴 → 동적인 이벤트가 아주 많은 사이트라면 컴포넌트 전환이 많을 텐데 그러면 렌더링이 너무 많아진다는 단점이 있기도 하다.

그래도 클래스명을 하나하나 생각하지 않아도 된다는 엄청난 장점이 있으니 실제로 사용 후 자세히 적어야겠다.

 

2. jsconfig.json 추가하여 모듈을 절대경로로 임포트

프로젝트의 최상위폴더(root)에 jsconfig.json을 추가하고, 다음 코드를 추가

→ src 까지 알아서 인식하기 때문에 그 밑의 경로만 적으면 된다.

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

 

3. Intersection Observer

1) target으로 칭하는 요소가 기기 뷰포트나 특정 요소와 교차

2) observer가 최초로 타겟을 관측하도록 요청받을 때

마다 호출되는 callback을 생성하는 기능을 제공한다. (option은 optional / callback은 entries, observer를 매개로 받음)

let options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}

let observer = new IntersectionObserver(callback, options); 
//new IntersectionObserver(callback[, options]);

10의 배수 comment들을 target으로 설정하고, 타겟이 isIntersecting 되면 → page+1을 한다 → 그 page의 comments들을 가져온다

위가 동작의 큰 틀이다. 자세한 부분은 추후 추가할 예정이다..!

(추가된 글은 여기에서 확인!)

 

 

4. [ { isIntersecting } ]

짝님 코드를 보고 잘 몰라서 물어봤던 부분이다.

IntersectionObserverEntry가 여러 properties를 갖는데(MDN 참고) 그 중 하나인 isIntersecting를 사용하는 부분이다.

[ ] 로 Entry를 구조분해 → 그 안에 있는 {isIntersecting} 을 사용하는 거라고 알려주셨다. 천재..

 

5. dl, dt, dd

dl은 설명 목록을 나타냄, 주로 용어사전이나 메타데이터(key-value)를 표시할 때 사용
dt : 용어
dd : 그에 대한 설명으로 이루어짐

이건 8번과도 연결되는 문제인데, 내가 div와 span을 사용한 부분에서 짝님이 시멘틱적으로 dl, dt, dd가 더 나을 것 같다고 의견을 말씀해주셔서 너무 좋았다. 

 

6. README에 추가할 수 있는 Markdown Badges

나는 노잼 리드미를 쓰고있었고 짝님이 귀여운 배지를 알려주셨다.
배지를 모아둔 github ←언젠가 이 배지들을 다 쓸어담을거야😎

 

7. netlify로 배포하기

github 아이디로 가입하고 repository 연결하니까 금방 돼서 깜짝 놀랐다!

풀리퀘를 받은 후 merge를 하면 위의 Deploys에 들어가서 우측 하단의 Trigger deploy를 확인해주면 된다.

 

8. 왜?의 소중함 feat. 습관 버리기

구글meet로 얘기를 하는데 짝님이 왜 이렇게 하셨는지, 그걸 쓰신 이유는 무엇인지 물어봐주셔서 정말로 많이 생각할 수 있는 계기가 됐다. 질문에 어............... 하면서 제대로 대답하지 못해서 죄송했다ㅠㅠ 더 나은 선택지를 몰라서 못 쓴 것도 있었고, 그냥 생각을 못했던 것도 있고 해서 부끄럽기도 하고 쫌 아쉽?기도 하다. 예전에도 접근성이나 웹 표준 관련된 글을 읽고 반성했었는데 또 무뎌졌나보다... div 사랑 그만해..

 

🚀과제 후기

처음하는 과제였는데 정말 짝님 너무 천재고 천사고 올림픽 나갔으면 목에 금메달 10개 걸고 오셨을분인데 너무 고생 많이하신것같아서 감사하고 죄송한 마음이다ㅠㅠ 팀과제도 모두 적극적으로 참여해주셔서 더 열심히 공부하고싶은(+해야겠다는) 마음이 많이 생겼다! 4조 만세

 

 

 

🙇‍♀️참고

https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API

https://create-react-app.dev/docs/importing-a-component/#absolute-imports https://developer.mozilla.org/ko/docs/Web/HTML/Element/dl

https://github.com/Ileriayo/markdown-badges