CodeSquad Day 72 : Team Project 2

 

CodeSquad🔹Day 72

Team Project 2일차 - Create React App & Styled Components

오늘은 코드스쿼드 센터를 2022년 들어서 처음으로 개방하는 날이었다. 화면으로만 접했던 코쿼 멤버들 그리고 크롱과 호눅스, 매니저인 클로이를 실물로 보니 신기하기도 했고 반가웠다. 비대면이 아니었을 시절에 코드스쿼드였다면 이 공간을 자주 왔겠지?

실물로 처음 만나면 어색할까 걱정했지만 다들 반갑게 인사하고 이야기를 나누었어서 그런 걱정은 금새 사라졌다. 햄디가 게더타운에 접속해서 제이미, 도톨, 포키에게 카메라를 켜고 센터 투어도 시켜주었다. 

이렇게 즐거운 시간을 보내다가, 3시쯤부터는 백엔드인 동기, 준과 함께 자리에 앉아서 스크럼을 하고 개발을 진행하기 시작했다. 매번 온라인으로만 하던 스크럼이었는데 이렇게 오프라인에서 생생하게 하니 느낌이 색달랐다.

스크럼 후에는 본격적으로 프로젝트 셋업에 돌입했다. 햄디와 함께 작성했던 프로젝트 목록들을 어젯밤에 내가 이슈로 옮겨놓았는데 확실히 이런 식으로 해야 할 일들이 가시적으로 보이니까 일 진행이 착착 이루어져서 좋았다. 앞으로도 무슨 프로젝트를 하든 이런 식으로 일정 관리를 하면 협업할 때 특히 빛을 발할 것 같다. 

우선 햄디의 컴퓨터로 npx create react app을 해서 boilerplate를 생성했다. 필요 없는 파일, 주석, 코드 등은 지웠다. 또 prettierrc 파일도 만들었다. lint 설정은 할까 고민하다가 너무 복잡해질 것 같아서 이번 프로젝트에서는 제외했다. 칸이 에어비엔비 lint를 썼다가 너무 빡세서 개발을 접을 뻔 했다는 (ㅋㅋㅋ) 이야기를 듣고 이건 다음에 건드리기로 했다. 

기본적인 셋업을 마친 후, 이제 Styled Components를 적용하기 위해서는 공부가 좀 필요했다. Sass를 적용할지 Module을 적용할지에 대한 고민이 많았는데 크롱이 Styled Components를 추천해 주셔서 이것을 하기로 했다. 나는 예전에 프로젝트에서 적용해 본 적이 있었는데 정말 아주 기초적인 사용법만 알고 일부의 기능만 쓴 것이어서 추가적인 공부가 필요했다. 전역 스타일링을 위해 createGlobalStyle이라는 함수를 사용해야 했다. Styled Components를 배우면서 Tagged Templates라는 것도 함께 알게 되었다.

Template literals (Template strings) - JavaScript | MDN

MDN의 설명에 따르면 Tagged Templates란 Template literals의 진보된 형태라고 한다. 태그를 사용해서 함수로 template literal을 분석할 수 있는 것이다. 어떻게 분석할 수 있다는 걸까? 처음에는 설명만 듣고 잘 와닿지 않았다.

const name = 'Millie'

function greet() {
	return 0;
}

greet`Hello, nice to meet you ${name}!`

일반적으로 함수를 실행할 때 greet() 이런 식으로 괄호를 붙여서 실행하지만, 괄호 대신에 문자열을 붙여서 실행할 수 있는 것이다! 이것이 바로 Tagged Literal. 리터럴에 태그를 해 주는 것이다. 위와 같이 함수를 실행할 경우 greet 함수의 리턴값인 0이 리턴이 된다. 

위와 같이 Tagged Literal 문법을 활용하면 문자열을 분석해서 단어의 순서를 변경하거나, 단어를 제거하거나 혹은 변수의 위치도 쉽게 옮길 수 있게 된다. Tagged Literal을 쓰지 않는다면 정규표현식이나 다른 메서드를 활용해야 했는데 ES6에 이 문법이 등장하여 문자열을 다룰 때 좀 더 수월하게 된 것이다. 

함수의 첫 번째 인자는 문자열이 잘려서 배열로 들어가고, 두 번째 인자부터는 변수이다.