[TIL] 22.01.18

인턴 2일차, 회사 사람들 엄청 착하심. 짱 좋음.

 

오늘의 공부

 

cra 후 scss 설치만 하면 사용할 수 있다는걸 알게됨.

 

이 게시글 보고 사용함.

https://heropy.blog/2018/01/31/sass/

Sass(SCSS) 완전 정복!

예전에 처음 scss 공부할 때 이 게시글 보고 했었는데

오늘 적용하려하니 다 까묵어서 다시 봄.

한 프로젝트 안에 여러 페이지의 스타일 작업을 하려고 하니까 확실히 css로만 작성하긴 힘들음.

특히 용도가 같으나 구조가 달라 컴포넌트 분리를 하기 어렵고 클래스 명을 동일하게 두고 싶을 때

scss 에서는 서로 다른 페이지 내에 존재하는 #root 바로 아래의 것을 가져와 그 안에서 스타일 작업을 하면 

내가 지정한 스타일이 원하는 스코프를 벗어날 우려가 없으니 안심!

 

그리고 svg를 리액트에서 사용하는 법 알아냄.

import {ReactComponent as 대문자로 시작하는 단어} from "../svg 위치";

이거 적어주면 svg를 svg로 가져와 쓸 수 있음.

여태 img의 src 에 넣어줬는데..싹 변경함. 저렇게 하면 기존에 정해진 내용물도 바꿀 수 있음. 

근데 나 거의 모든 도형을 svg나 img 태그에 넣어 사용했는데

어디서 찾아보니 의미가 있는것 (예를 들어 버튼인데 텍스트가 없이 아이콘만 있는 버튼, 메인 컨텐츠 이미지 등)은 깨져있다면 사용자에게 그 사진이나 아이콘이 의미 있는 것 임을 은연중에 알 수 있게 해주지만

의미 없는 것 (배경 디자인용 도형 등)의 경우 오히려 깨짐 표시 없이 안뜨는게 자연스러워 보일 수 있다구 함.

그래서 낼은 의미 있는거 없는거 나눠서 정리 할 예정!

오늘의 작업

 

회사 일

개인 프로젝트 와이어프레임 작업.. 한 30% 한..듯?