Headwing

Docker란? 애플리케이션 구축, 구현 및 테스트를 위해 격리된 가상화 환경을 생성하는 서비스형 플랫폼 Docker는 컨테이너 엔진으로 리눅스 커널 기능을 사용하여 운영 체제 위에 컨테이너를 만들고, Docker 자체는 서비스의 컨테이너를 관리하는 데몬으로 실행된다. Docker Image란? 파일로 어플리케이션 실행에 필요한 독립적인 환경을 포함하며, 런타임 환경을 위한 일종의 템플릿 소스 코드, 라이브러리, 종속성, 도구 및 응용 프로그램을 실행하는데 필요한 기타 파일을 포함하는 불변(변경 불가) 파일 이미지는 읽기 전용이므로 스냅샷이라고도 하며, 특정 시점의 애플리케이션과 가상 환경을 나타낸다. 이러한 일관성은 도커의 큰 특징 중 하나로 개발자가 안정적이고 균일한 조건에서 소프트웨어를 테스트하고 ..

1월에는 소스마켓 프로젝트의 완성도를 높이는 데 초점을 맞췄다. 새롭게 합류한 프론트엔드 개발자님과 eslint 통일 및 타입스크립트 도입 등의 사항들에 대해서도 논의를 했던 주였다. 또 저작권 침해 페이지를 대신 맡아주셔서 여유가 생겨 이력서도 쓰고 지원도 해보며 시간을 보냈다. 소스마켓에 대해서는 커스텀 훅을 사용하여 각종 목록들의 get 요청을 통한 렌더링이 효율적으로 작동하도록 수정하였다. 커스텀 훅에 대해서는 아직 많이 익숙하지는 않은데, 생존 코스를 통해 배운 것들을 참고해서 좀 더 효율적으로 바꾸고 싶은 생각이 있다. 아직은 다소 중복되는 부분들이 있는 것 같다. 또한 sass 기능들을 좀 더 탐구해보며 mixin 기능을 활용하여 각종 테이블들의 css를 간소화했다. 중복되는 부분들은 아주 ..

3~4주차에는 사이드 프로젝트인 소스마켓의 많은 부분을 구현하였고, 생존코스의 쇼핑몰 프로젝트를 따라 구현해보면서 많은 것들을 배웠다. 소스마켓의 경우에는 Next.js로 처음 구현해본 프로젝트다 보니 생각보다 간단한 부분에서 시간이 걸리는 부분들이 있었다. 특히 컨텐츠마다 모달을 띄워서 post 요청을 해야하는 부분에서 좀 어려움이 있었다. 리액트에서는 portal만 잘 쓰면 되는 문제였는데, 라우팅 방식이 리액트와 다른 넥스트의 경우 Parallel Routes와 Intercepting Route를 활용하여 구현하는 부분을 시도했고, 어려운 부분이 있었으나 빼먹은 defalt.jsx나 page.jsx을 제대로 설정하니 잘 동작하였다. 추가적으로 모달 뒷부분의 스크롤에 대한 문제와 pagination ..

이번주 진행한 사항들 저번주 주말부터 몸이 안좋아져 며칠을 쉬게 되어 12월의 회고를 이제서야 작성하게 되었다. 그래도 이번주 목요일부터는 괜찮아져서 미뤄뒀던 공부들을 마무리하려고 노력했다. 스토어에 대한 부분과 리액트 라우터에 대해 배웠는데, 스토어에 대한 부분이 특히나 어려웠고, 강의 분량도 역대급이라 마무리하기가 어려웠다. 결론적으로는 리덕스를 사용하지 않고 TSyringe와 같은 라이브러리를 이용하여 리덕스의 기능을 직접 만들어보는 내용이었는데, 막상 최종 결과물의 코드는 매우 간단했지만, 그 결과를 향한 과정이 너무 험난했다. 강의를 들을 때는 "아~"하고 이해되고 신기했지만, 막대한 분량 때문에 코드를 전부 세세히 따라해볼 수는 없었다. 또한 잘 모르는 타입스크립트 개념들을 이용하는 부분들이 ..

Layered Architecture Layered Architecture(계층화 아키텍처)는 소프트웨어 개발에서 가장 일반적으로 널리 사용되는 아키텍처이다. 구성되는 계층의 숫자에 따라 N 계층 아키텍처 (N-tier Architecture) 라고도 한다. 각 계층은 어플리케이션 내에서의 특정 역할과 관심사(화면 표시, 비즈니스 로직 수행, DB 작업 등)별로 구분된다. 이는 Layered Architecture 의 강력한 기능인 관심사의 분리 (Separation of Concern) 를 의미한다. 특정 계층의 구성요소는 해당 계층에 관련된 기능만 수행한다. 이런 특징은 높은 유지보수성과 쉬운 테스트라는 장점이 존재한다. Flux Architecture 대규모 애플리케이션에서 데이터 흐름을 일관성 있..

리액트 테스팅 라이브러리는 리액트 컴포넌트를 사용자 입장에 가깝게 테스트할 수 있는 도구이다. 예를 들어 Hello World라는 코드가 있다면, div 태그를 사용하는지보다 Hello World 메시지가 브라우저에 노출이 되는지 파악하는 것을 더 중요하다고 본다. 또한 컴포넌트를 사용하는 테스트 코드를 작성하면서 해당 컴포넌트의 인터페이스를 개발 전에 미리 점검하여 문제를 발견 및 수정할 수 있다는 장점이 있다. 그러므로 최대한 개발 전 혹은 바로 직후에 테스트 코드를 작성하는 것이 권고된다. 초심자를 위한 React Testing Library 여기서도 마찬가지로 BDD 스타일로 코드를 작성하는 것이 유리하다. 다만 보다 구체화를 해보자면, given-when-then 패턴을 찾을 수 있다. 예를 들..

TDD(Test Driven Development) 란? 테스트 코드를 먼저 작성하는, 즉 구현보다 인터페이스와 스펙을 먼저 정의함으로써 개발을 진행하는 방식이다. TDD Cycle Red → 실패하는 테스트 코드를 작성. 인터페이스와 스펙에 집중한다. Green → 재빨리 테스트를 통과시킨다. 올바른 방법이 아니어도 괜찮다. Refactor → 리팩터링을 통해 코드를 올바르게 만든다. TDD에서 가장 중요한 부분이지만, 간과될 때가 많다. 중요한 것은 실패하는 테스트 코드를 작성할 때까지 실제 코드를 작성하지 않는 것과, 실패하는 테스트를 통과할 정도의 최소 실제 코드를 작성해야하는 것이다. 이를 통해 실제 코드에 대해 기대되는 바를 보다 명확하게 정의 함으로써 불필요한 설계를 피할 수 있고, 정확한 ..

저번주는 참 많은 것들을 배운 한 주 였다. 생존코스는 6주차에 접어들었지만 미약했던 3~4주차를 복습하고 체화하는데 많은 시간을 보냈다. 주로 리액트의 기본인 컴포넌트와 상태(state)에 대해 배웠는데, 아샬님이 짜는 코드 스타일을 보다 보니 기존의 나의 방식이 굉장히 비효율적인 방식이라는 생각이 들었다. 컴포넌트로 분리해야 하는데, 분리하지 않고 짜서 비효율을 초래해왔던 것 같다. 이번의 기회로 컴포넌트 분리 방식을 어느 정도 알게 되었다. 한편으로는 아샬님의 방식대로 컴포넌트를 분리하여 상태를 계속해서 props로 넘겨줘야 하는 문제가 발생하곤 했는데, 아직 진도를 나가진 않았지만, store를 사용하여 이런 부분들을 간편화할 수 있지 않을까 생각했다. 소스마켓 프로젝트의 경우에는 몇 개의 모달을..