DevRadon

코드 :

1. 불필요한 import문 등 코드를 정리하는 요령 등이 부족

2. 깃 레포관리 readme 파일은 내가 보려고 만드는게 아니라는 걸 간과함 (내가 작성한 코드를 처음 볼 사람들에게 안내판 같은 역할을 해야 할텐데, 작성한 내 위주로만 생각해서 readme를 작성했던 것 같다.)

지식 : 

1. 컴퓨터 공학, HTTP 통신에 대한 이해 등이 부족함을 느꼈다. 특히 프로세스, 스레드 부분은 예전에도 배워서 동시성, 병렬성 내용 등과 함께 정리한 적이 있지만 프로세스에 대한 이해가 부족하였는지 설명을 제대로 하지 못했다. 비전공자인 만큼 컴퓨터 공학, HTTP통신에 대한 이해 등을 보완하려는 노력이 더 필요하다.

2. 타입스크립트 : 처음 타입스크립트로 코드로 작성할 때는 모든 변수 모든 함수 등에 다 타입을 지정하는 식으로 했다가, 이런 식으로 하지 않아도 처음 그 변수가 사용되거나 파라미터자리에 값이 들어올 때 타입이 자동으로 지정된다는 점을 배운 후에는 그냥 JS로 코드를 작성하는 것과 거의 비슷하게 코드를 작성하였는데... 이렇게 하는 것도 아닌 것 같다... 타입스크립트로 작성된 좋은 코드 예제 등을 찾아보고 참고해야 겠다.

데이터베이스(RDBS)에 대한 이해 : 

1. 데이터베이스 정규화에 대한 내용을 정리하면서 조금 안다고 생각했었는데, 특정 상황을 가정하고 DB를 어떻게 설계하면 좋을 것인가? 라는 질문을 받았을 때 머릿속에서 바로 정리하여 답변하기 어려웠다... 특히 여러개의 데이터를 갖고있는 테이블에 저장하는 문제 같은 경우엔 프로젝트를 할 당시에 많이 고민했던 부분이라 잘 알고 있다고 착각했다... 처음 데이터베이스를 배울 때 했던 '웹 서비스의 특정 화면' 등을 보고 관련된 데이터들을 어떤식으로 저장해서 불러오면 좋을 지 생각해보는 연습을 다시한번 해보면 도움이 될 듯 하다.

Node.js 에 대한 이해 :

1. 진행하고 있는 스터디에서 서버 언어에 대해 이야기 하다가 Node.js 서버의 성능에 대한 이야기가 나왔던 적이 있는데, 그 당시에 관련 내용을 좀 더 찾아보고 정리하지 않았던 점이 아쉬웠다... Node Performance 에 대해 설명해야 할 기회가 있었는데, 그나마 알고 있던 싱글스레드로 작동되고 비동기 처리를 할 수 있다는 부분도 답변하지 못한 점이 매우 아쉽다..!

 얼마전 REST API와 GraphQL의 특징들을 비교하고 간단하게 알아보는 내용으로 블로그 글을 작성한 적이 있었는데, 바로 그 다음주에 취업활동 중 과제로 GraphQL서버 구현을 하게되었다. 서버 구현을 해본일 자체가 몇번 없긴 하지만 그 몇번 없는 경험 마저 express만을 활용하는 REST API형식의 서버들 뿐이어서 과제를 처음 받고 굉장히 난감했었다. 과제의 기본조건이 ORM의 일종인 Prisma를 사용하는 것과, apollo-server를 사용하는 것 그리고 mysql을 사용하는 것 이었는데 이중에 무엇인지 알아들었던 건 사실 mysq뿐이었다...

 검색을 통해 급하게 알아본 결과 Prisma는 ORM의 일종으로 v1같은 경우에는 GraphQL을 통해 모델을 정의할 수 있다는 사실을 알았다. Apollo 서버는 GraphQL API를 제공하는 서버를 개발할 수 있게 도와주는 패키지로서 기존에 Node.js에서 사용하는 Express와 역할이 비슷하다고 한다.

 처음엔 무엇부터 시작을 해야하나 막막하였는데, 공식문서를 쭉 살펴본 결과 새로 접한 스택들 모두 기존에 내가 다루어 보았던 것들과 유사한 점이 많아 어느정도 접근이 가능해 보였다! 과제에서 Prisma를 이용하여 테이블들을 생성하고 속성들간의 관계를 설정하라고 하였는데, sequelize를 사용하면서 했던 방식을 떠올리면서 공식문서를 살펴보니 어느정도 이해를 할 수 있었다. Apollo 서버의 경우에도 Express를 생각하면서 보니 어느정도 맥락이 비슷한 부분들도 있었고 어떤식으로 서버객체를 불러와 사용하는지 알 수 있었다. 과제를 다 마친 이후에도 아직 해결 못한 궁금증이 많이 있었는데 그 중에서 Apollo 서버에서는 라우팅을 어떤식으로 구현해내는지? 또 Express에서 사용하는 미들웨어와 같은 것들을 Apollo서버에서는 사용할 수 없는지 궁금했다. 검색을 해보다가 express로 서버를 구현하면서 라우팅 구현과 미들웨어등을 사용하되, Apollo 서버또한 동시에 같이 구현하여 원하는 엔드포인트마다 다른 형식의 서버를 통해 응답하는 걸 보았는데 Apollo 서버 단독으로는 불가능한 지 여부도 궁금했다.

 굉장히 생소하고 어려운 도전이 된 과제였지만 덕분에 GraphQL API를 제공하는 서버를 처음으로 만들어 볼 수 있었고, 기존에 내가 프로젝트에서 구현했던 REST API가 몇몇 부분에선 잘못되었다는 점도 알게 되었다. 

코드 블록

```언어 이름(소문자)
이 부분에 코드 적기
```

언어 이름까지 적어주면 예약어, 변수 등등에 색깔 하이라이팅이 들어간다. 예를 들어

```c++
#include <iostream>
using namespace std;

int main()
{
cout « “Hello World !” « endl; // 안녕!
}
```

#include <iostream> using namespace std; int main() { cout << "Hello World !" << endl; // 안녕! }

스페이스바 4번로도 표현할 수 있다

오늘 Section2를 통과했다는 안내 메일을 받았다! section1에서는 설문과 블로깅 등을 꾸준하게 성실하게 했었는데, 요번 섹션에서는 출결을 깜빡하고 늦게 체크한적도 있었고 배우는 내용들도 좀 더 어려웠어서 결과에 대해 걱정이 있었다. 하지만 다행히도 HA나온 문제들을 풀어내는데 크게 어려움없이 마칠 수 있었다! 빠른 기간에 정말 많은내용을 소화하면서 과정을 지나온 만큼 돌이켜보면서 복습하고 일부로라도 배운 내용을 활용해 보려는 시도가 매우 중요한 것 같다...

섹션3를 진행하면서는 설문/페어리뷰 등을 자꾸 빼먹지 말고 초심을 잃지 않는 성실함!을 갖춰야 겠다!

스프린트를 진행하면서 알게된 새로운 메소드, 기능 들이 꽤 있어서 그 내용들을 하나하나 정리해보고자 한다.

우선 매번 리액트를 접할 때 마다 헷갈리던 것으로 이벤트핸들링 관련된 내용이다.

HA1 에도 나왔던 이벤트 객체 대신 전달된 파라미터를 사용하는 방법에 주목해서 정리해둘 필요가 있다!

스타일컴포넌트를 사용하여 css를 적용한 모습이다. 여기서 굉장히 생소했던게 &를 사용하는 것인데 검색을 잘 못해서 정확한 내용을 찾지는 못했지만, 아마 위에서 써준 셀렉터들&뒤에써준선택자까지 모두 해당되는 것을 선택한다는 뜻인 것 같다.

CSS관련된 내용은 모양을 다듬는 기능을 구현하는거 보다, 셀렉터를 정확하게 알고 사용하는 것이 중요해 보인다. 셀렉터 관련 내용들을 좀더 확실하게 정리하고 넘어가자! (관련링크 : https://offbyone.tistory.com/43)

유알클래스 다음단계를 진행하던 중 &에 관한내용이 나왔다!! 조금만 미리 살펴볼걸... 

(Styled Component 는 중첩 스타일링을 위해 SCSS와 같은 전처리 기능을 자동으로 지원) 중첩 스타일링을 위한 ampersand(&)기호! 만약 ampersand기호를 사용하지 않으면 평범한 후손셀렉터처럼 동작한다. 이처럼 ampersand는 컴포넌트 안에서 적용되는 CSS규칙을 확장해 줌으로서, 특히 순수 CSS와 Styled Component를 혼용해서 사용해야 하는 경우에 각 스타일 간의 충돌을 피하는 데에 유용하게 사용할 수 있다.

그동안 무수하게 .map .filter들을 사용해 오면서 인자자리에는 항상 el만 사용했었는데 오늘 페어가 두번 째 인자 자리에 index를 넣고 그를 받아 리액트에서 map을 돌릴때 필요한 키 값으로 활용하는 것을 보았다. 너무 편리해서 충격적이었다... 이번 페어는 상당한 실력을 가진 분이어서 여러모로 많이 배우기도 했지만, 진행속도가 어마어마하게 빨라서 고생을 좀 했다. 

그리고 또! 리액트에서만 그런건지는 좀 더 알아보아야 겠지만, 여러 줄을 리턴할 때에 리턴문에 () 괄호를 사용하는 것을 알게 되었다.

이 부분도 상당히 낯선 문법이라서 처음에 오타인줄 알고 고생을 했다... CSS관련된 기능들은 볼수록 어렵다기 보다는 신기한 기능들이 너무나 많아서 적재적소에 기억해내 사용을 할 수 있을까 하는 걱정이 앞선다... 

Component-Driven Development(CDD) 란 무엇일까? 디자인과 개발단계에서부터 재사용할 수 있는 UI 컴포넌트를 미리 디자인하고 개발, 즉 같은 UI컴포넌트를 여러 프로젝트 혹은 여러 팀 같에 공유할 수 있도록, 레고처럼 조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 나가는 개발을 CDD라 한다.

CDD가 트렌드로 자리 잡게 되면서 이를 지원하는 도구 중 하나인 Component Explore가 등장했다. 그 중 유명한 Storybook을 다뤄보았다. Storybook은 UI개발 즉, CDD를 하기 위한 도구이다. 각각의 컴포넌트들을 따로 볼 수 있게 구성해주어 한 번에 하나의 컴포넌트에서 작업할 수 있다. 복잡한 개발 스택을 시작하거나, 특정 데이터를 데이터베이스로 강제 이동하거나, 애플리케이션을 탐색할 필요없이 전체 UI를 한눈에 보고 개발할 수 있다. Storybook은 재사용성을 확대하기 위해 컴포넌트를 문서화하고, 자동으로 컴포넌트를 시각화하여 시뮬레이션 할 수 있는 다양한 테스트 상태를 확인할 수 있다. 이를 통해 버그를 사전에 방지할 수 있고 테스트 및 개발 속도를 향상 시키며 애플리케이션 또한 의존성을 걱정하지 않고 빌드할 수 있다.

구조적인 CSS 작성 방법의 발전

이 중에서 가장 인기 있는 CSS-in-JS 관련 React라이브러리인 Styled-Component에 대해 다뤄보자. Styled Component는 React의 컴포넌트 기반 개발환경에서 스타일링을 위한 CSS의 성능 향상을 위해 탄생했다. Styled Component를 사용하면 기존 CSS문법으로도 스타일 속성이 추가된 REact컴포넌트를 만들 수 있다.

사용방법 등은 내일 진행할 스프린트에서 직접 경험하게 될텐데 아직 이럴것 같다! 하는 느낌이 전혀 오지 않아서 걱정이 조금 된다... 내일 스프린트를 진행하면서 많이 배울 수 있도록 해야겠다!