안녕하세요 css와 styledcomponent 발표를 맡게된 김경연입니다.
발표의 순서는 아래와 같습니다
저는 이번 프로젝트때 왜 styledcomponet를 쓰게되었는지를 소개하고자합니다.
css 이란
html 또는 xml로 쓰여진
문서의 스타일을 나타내기위해 사용된언어입니다.
문서의 구조와 스타일 디자인을 분리하여
hmtl이나 xml의각요소를꾸미는것이역할입니다.
그림)
ui 디자인을 통해 시각화 하는 역할을 합니다
지난 2주 프로젝트때, nodejs와 css를 사용하면서 아쉬운 점을 발견했습니다.
css를 쓰면서 원하지 않는 스타일이 적용되었고,
이를 파악하는데 상당한 에너지가 소모되었다.
또한 class가 너무 많아
다른 팀원이 이를 까먹고 중복해서 만드는 경우나 ,
css 파일이 너무 길어져서 나중에 전체적으로
일일이 수정하다보니 사소한 에러를
크로스 체크하는데
상당한 시간이 걸렸다.
그래서 css 대체재를 찾고자하였습니다.
조원들은 코드스테이츠에서 문자열 조합을 더욱 쉽게 할 수 있게 해주는 ES6 문법을 사전에 공부해 어느정도 Template Literal 에 대해서는 익숙했습니다.
때문에
react 와 어울리면서 동시에 es6문법에 적합하고,
html과 css 파일을 각각 따로 만들어야 한다는 부담을 덜어내기
위해 아래와 같은 조건으로,
직관적으로 파일을 구성할 수 있는 다른 tool을 찾아보기 시작했습니다
The state of css 사이트는, css의 선호도와 사용빈도를 설문조사하는 사이트입니다.
2020년 기준으로,
차트에서 stylecomponent 는 과반수가 넘는 유저가 사용하였고,
82.03%의 만족도를 보였습니다.
또한 사용해보지 않은 과반수 미만의 사람들의 흥미도가 60.8%인 점을 보아
styledcomponent는
어느정도 알려진, 안정적인 라이브러리라고 판단되어졌습니다.
게다가 react의 구성요소들의 스타일을 정해 css의 장점을 더 활용할 수 있다는 점에서 더욱 매력적으로 다가왔습니다.
위와같은 장점으로 styled-component를 선택하게 되었습니다.
제가 맡았던 랜딩페이지는 유저가 보게되는 첫 화면이였습니다.
때문에 차후 google analytics를 활용해 DAU(디에유) 를 높이기위해서
목표달성 버튼을 활용했으며, 또한 애니메이션 효과에 집중하려 노력했습니다.
styledcomponet와 typescript은 잘 호환이 되었기에,
// 피드백 : framework입니다. angular는
또한, 보통의 경우 Angular와 같은 프레임워크를 먼저 정하고 라이브러리를 정하게 되는데, 경연님이 접근하신 방법은 “라이브러리와 호환되는것을 찾다가 Angular 프레임워크를 발견하였다”는 일반적이지 않은 문제 해결 방법인 것 같습니다.
결론: 타입스크립트를 왜 쓰는지.. 그부분에 대해 이해가 부족하다 보니 논리가 엉망..
ts 애니메이션 특화된 angular 모듈을 알아보게 되었습니다.
여러번의 시도끝에
angular/core와
angualr animation 모듈은 아쉽게도 styledcomponent에서 호환되지 않는것을 파악했습니다.
이를 해결하려면 emotion JS 라는 툴을 써야 했는데,
저희가 초창기에 설정한 TS와는 맞지 않는다는 점이 있어, 이 또한 사용하지 못하게 되었습니다.
사전 조사가 부족해 이를 초기에 파악하지 못했고 타입스크립트의 animation interface 또한 활용하지 못한 점이 아쉽습니다. 피드백 2
면접 시, 코딩에 대해 전혀 모르는 인사 담당자를 만날수도 있기 때문에 코드 풀이는 최대한 피하는 것이 좋습니다. 정말 필요하다면 해당 내용만 텍스트로 구성하여 자료를 만드시는게 더 좋고, 화상 면접 진행 시에는 “코드를 직접 보여드려도 괜찮을까요?” 라고 미리 여쭙는 것이 좋습니다.하지만
진행한 프로젝트가 유저의 운동 시간 기록 해야 하다 보니,
props를 이용해
모바일과 웹에서 사용이 용이하게끔 반응형 웹을 구축하게 됩니다.
애니메이션 또한
img2라는 컴포넌트를 선언하여,
기존의 active 클래스 대신 props로 애니메이션을 추가했습니다.
지금보시는화면은 최종 랜딩 페이지 입니다.
그외에 프로젝트를 진행하면서 알게된 styled component의 장점으론 ,
컨텐츠 내용과 스타일 변경이 동시에 가능한 점이나,
다른파일과 컴포넌트 이름이 겹쳐도 css 문제가 생기지 않아
나중에 스타일 변경시 하나의 파일에 들어
가 한번에 수정할수 있어 용이한 점을 발견할 수 있었습니다.
아쉬운점으로
typescrit 와 styled component를 동시에 사용한 자료가 많지 않아 기존 세팅에 시간이 걸렸습니다.
스타일컴포넌트는 CSS in JS 라는 라이브러리 답게, JAVASCRIPT 안에 CSS 를 작성하는 것에 특화되어 있는데,
이를typescript 언어로 PC, MOBILE에 반응할수 있 게 연결하는 부분, 즉 반응형 및 스타일 리셋 설정 하는데에 어려움을 겪었습니다.
또한 styledcomponent를 활용해 전역css를 사전에 정의하지 못한 부분도 아쉬움으로 남습니다.
css적인 관점에서
객체지향적인 사고를 하지 못한점 또한 아쉽습니다.
css의 coponent화를 위해 css사용을 제한한 것이
오히려 전체적인 프로젝트의 볼륨과 시야를 좁게한 것 같습니다.
추후에
OOCSS와 리팩토링을 통해
구조적인 css에 대해 더 공부를 한다면
다른 css툴을 좀 더 효율적으로 이해하고 사용 할 수 있다는 자신감과 교훈을 얻었습니다.
감사합니다.
//추가 피드백
사용하며 느낀 styled-component의 장점 및 아쉬운 점을 발표해주신 점이 매우 좋았습니다. 아쉬운 점도 장점을 발표해주신 것처럼 키워드로 작성된 시각적 자료가 있으면 좋을 것 같다고 생각하였습니다
- 초반에 프로젝트에 대해 짧게 소개 했으면 더 좋을 것 같습니다. 면접시에 항상 프로젝트 소개는 필수 질문 중 하나이기 때문에 미리 준비해주세요.
-