TIL#1 - Today I Learned

TIL(Today I Learned)

말 그대로 오늘 무엇을 공부했는지 또는 배웠는지를 적는 것으로 많은 개발자들이 하고 있다고 한다. 역시 개발자에게는 포트폴리오가 필수다. 유명 개발자 블로그를 보면 1000회가 훌쩍 넘는 TIL을 본 적도 있다. 짧게라도 꾸준한 습관을 들여 멋진 시니어 개발자가 되고 싶다. 아래 적는 내용은 그냥 빠르게 주저리주저리 쓰고 내용이 모이면 주제별로 모아 글로 작성해볼 계획이다.

 

옥소폴리틱스 인턴십

현재 옥소폴리틱스 인턴십 2주 차를 진행하고 있다. 지금 진행 중인 프로젝트는 옥소폴리틱스 홈페이지의 메인 페이지를 React를 이용하여 클론코딩해 보는 것이다. 3명의 팀원들과 협업하며 React와 더불어 Git, Git-hub까지 실전으로 부딪혀가며 공부해가고 있다.

 

PR(Pull Request) 시의 복잡한 에러 발생(Conflicts too complex to resolve)

내가 맡은 작업을 빌드하고 PR 하던 중 다른 팀원이 먼저 작업을 merge 했다는 것을 깜빡하고 내 작업을 푸시해버렸다. 작은 충돌은 깃허브에서 제공하는 web editor로도 수정할 수 있었기 때문에 PR까지 진행했더니 웬걸. 이 충돌은 웹 에디터로 작업하기에는 너무 복잡하단다... 이때는 이미 많은 심력을 소모한 상태여서 깊게 생각하지 않고 main을 새로운 Repo에 Fork 해서 다시 작업했다. 제대로 공부 안 하고 주먹구구로 깃허브를 사용하다 보니 예상치 못한 문제들이 많이 생긴다. 빠른 시일 내에 깃허브 공부를 진행해야겠다.

 

Styled-Components 사용법 공부

이번 프로젝트에서 우리 팀은 CSS-in-JS, 그중에서도 Styled-Components를 사용하기로 하였다. 사용방법은 간단하다. 

npm install styled-components

터미널을 이용해 스타일드 컴포넌트를 설치한 후(철자를 잘 확인해야 한다) styled-components를 import 해서 사용하면 된다.

import styled from 'styled-components';

**중요** 반드시 VS Code에서 Styled-components 확장팩을 다운 받아야한다!!

블로그 첫 글에 썼듯, 나는 필기하는 것을 싫어하고 반복되는 작업을 싫어한다. 그래서 Snipets와 intelligence를 최대한 활용하는 편이다. 확장팩을 다운로드하면 CSS에서 사용하는 intelligence와 emmet을 모두 사용할 수 있다! 만약 이런 것이 별로 필요가 없더라도 확장팩을 다운로드하지 않으면 코드 컬러링이 되지 않는다.

 

JSON 로컬 파일에서 불러와 사용하기

이번 프로젝트는 클론 코딩이다 보니 데이터를 직접 fetch하지 않고 옥소폴리틱스 사에서 mock-up JSON 파일을 제공해주셨다. 일단 하던 데로 async와 await 사용하여 fetch 함수로 받았더니 Promise가 reject를 반환했다... 어떻게 해야 하나 하고 찾아봤더니 XML을 사용하라거나 require.js라는 API를 사용해야 한다는 복잡한 글... 밖에 없었다. 그러다 혹시나 싶어 해 본 한 줄로 해결했다.

import group from './data/group.json';

위 코드로 불러온 group은 .json() 같은 거 할 필요 없이 자동으로 객체화되어 받아들여진다.

 

객체 순환하며 배열로 만들기

위 항목의 연장선. json파일을 받아보니 배열이 아닌 객체의 형태였다. 지금까지 fetch 해 온 JSON 데이터는 모두 배열 형태였기에 for-of 구문이나 .map() 메서드를 사용해보려 했으나 Iterable 하지 않다고 모두 에러만 뱉었다... 팀원에게 물어봤더니 객체의 key를 받을 수 있는 for-in이라는 구문을 알게 되었다. 이를 아래와 같이 사용하여 객체 형태의 데이터를 받아 배열로 만들고 내가 원하는 데이터(날짜 데이터)로 sorting까지 할 수 있었다.

function fetchJsonToArray(rawJson) {
  const array = [];
  const jsonData = rawJson.data;
  for (const key in jsonData) {
    jsonData[key] = { ...jsonData[key], id: key };
    array.push(jsonData[key]);
  }

  return array;
}

const groupsArray = fetchJsonToArray(group);

 groupsArray.sort(
    (x, y) => y.lastGroupPostCreatedAt - x.lastGroupPostCreatedAt
  );

객체의 key 값은 배열 안에 id라는 항목으로 넣어주었다.  스프레드 연산자(...)를 이용하면 객체에 새로운 항목을 추가한 새로운 객체를 만들 수 있다. 그 후 객체 배열에서 날짜 부분을 골라 날짜 순으로 배열을 sorting 하였다.

 

 

더 공부해 볼 것

• 변수명 컨벤션 어떤 것들이 있는지
• 깃허브 정확한 사용 방법
• 스타일 컴포넌트 실제 사용 방법(규칙)
• 웹킷이 뭔가요..?