프리 온보딩 프로젝트

같이 공부하는 분께서 위코드와 원티드에서 제공하는 프론트앤드 프리온보딩을 소개해주셔서
어제부터 과제를 만드는 중인데, 쉽다고 생각했는데 생각보다 오래 걸려서 내 한계를 또 체험 중이다.
요새 클론 코딩 프로젝트를 거의 마무리하고 이제 또 어떻게 공부해야 할지 막막하고 감이 안 잡혀서
또다시 내 특기인 뭉그적 대면서 하루하루를 보내는 기분이다... 멈춰!!!

낼부터는 다시 딥 다이브 스터디, 코어 자바스크립트 읽은 후 TIL을 적고
과제를 다 끝낸 후, 강의를 들으며 또 강의 속 과제를 해보자!
강의를 들으면 잠이 쏟아지는 건 어떻게 해결 방법을 찾아야겠다 1. 커피 마시기 2. 핫식스 3. 투명의자 하기

---

 

과제 중 하나가 위의 이미지를 마크업 작업 (css, html)만 하는 건데,
개발자 도구를 활용하여 원티드의 리소스(사진 등)를 그대로 사용해달라는 조건대로
아마... svg를 적용하긴 했는데 이렇게 하는 것이 맞는 것인지 아직 잘 모르겠다.
구글링하고 유툽보면서 소스따서 inline 방식으로 추가했는데 맞으려나..?
수요일까지 시간이 더 있으니, 나머지를 다 하고서 좀더 구글링해보고 필요하다면 리팩토리 할 예정.
생각해보니 매번 아이콘 라이브러리를 다운로드하여서 사용했거나 img만 사용해봐서
svg는 처음 적용해본 것 같은 느낌적 느낌... 어떻게 하는 거야~ 맞는 거야 모야~

---

SVG는 Scalable Vector Graphics 의 약자로, 확장가능한 벡터 그래픽이라고 함.
픽셀을 이용해서 그림을 그리는 png, jpg 파일과는 다르게 벡터를 기반으로 이미지를 표현해서
장점 : 아무리 확대해도 화질이 깨지지않고, 용량이 늘어나지 않아서
최근 웹에서 icon, 간단한 일러스트(도형), button 등에 많이 사용되고 있고,
css와 js를 이용해서 조작이 가능하고, 크기(width/height)가 큰 이미지 표현이 유리하다.
하지만 모양이 복잡하고 개체수가 많을 수록 성능이 떨어지는 단점이 있음.

https://www.youtube.com/watch?v=knwej7J-bpU

https://www.youtube.com/watch?v=0U14rPBrs0Y

https://gomdoreepooh.github.io/notes/svg-by-react

React에서 SVG 사용하기

https://carpediem9911.tistory.com/43

ReactComponent를 통해 svg 를 컴포넌트처럼 사용하기