과거의 내가 미래의 나에게

저번에 CI에 대해 알아보다가 샜는데, 오늘은 CI가 무엇인지 제대로 정의하고 또한 CD의 개념까지 알아본다음에 CI/CD를 하기 위해 사용되는 도구들을 살펴보겠다. CI/CD 개념 CI/CD는 소프트웨어의 개발 단계부터 사용자에게 보여질 수 있는 배포단계까지 최대한 효율적으로 구성하는 작업을 말한다. 개발자들이 하나의 소프트웨어를 완성시키기 위해 각자 코드를 작성하고 해당 코드들을 모으게 되는데, 이 때 서로 다른 코드들을 합치는 작업은 결코 쉬운 일은 아닐 것이다. 게다가 어찌저찌 코드들을 잘 모았다치더라도 이 모여진 코드들이 실행될 수 있도록 빌드를 해야하는데, 이 때 합쳐진 코드들이 빌드가 잘 되는지 확인하여야 하고, 또 빌드 후에도 새로 추가된 이 코드들이 잘 동작하는지, 기존 시스템에서 문제가..

팀 프로젝트를 하나 시작했다. 이번 프로젝트의 목적으로 react를 이용하여 개발하기 그리고 CICD 과정을 전부 겪어보기를 잡았는데, CICD를 아무것도 모르는 상태에서 처음부터 구축하려니깐 뭐부터 해야하는지 혼란스러울 따름이다. 원래 블로그에는 주제에 대해 공부를 전부 마치면 그것을 정리한 글만 올렸는데 이번에 혼란을 겪는 겸(?) CICD에 대해서 아무것도 모르는 내가 어떻게 학습하는지에 대한 과정을 서술하면서 해볼 생각이다. 먼저 CICD는 무슨 뜻일까? CI/CD를 사전적 의미로 먼저 찾아보니 Continuous Integration/Continuous Delivery라는 의미로, 직역하면 계속적인 통합/계속적인 제공이라는 뜻이다. 요약하자면 개발 완료된 수많은 코드들을 하나의 파일로 합치는 것..

모듈 시스템 기존에는 html 파일에서 script 태그를 사용하여 js 파일들을 실행했다. 그러나 js의 활용성이 커지면서 js 파일을 분리해서 사용해야 할 필요성이 생기고 이에 따라 한 html 파일에 여러 js 스크립트를 넣었더니 한 파일에서 쓴 것 마냥 내용이 전역으로 공유되어지고, 또 이에 따라 스크립트 load 순서에 힘을 쏟아야했다. 이러한 문제점에 따라 나온 것이 모듈 시스템이다. 모듈은 코드를 캡슐화하여 기능에 따라 파일 별로 분리한 코드 조각으로 재사용이 가능하며 사용 시 파일 별로 서로 영향이 없어야 하는 것이다. ES6 이전까지는 공식적인 모듈 지원이 없었지만 ES6부터는 공식적인 모듈도 지원하게 되었고 또 그 이전에 모듈을 정의하기 위해 다양한 포맷이 등장했다. 이 곳에서는 대표적..

프론트엔드 아키텍쳐를 짜는 부분에 대해서 고민을 많이 하고 있다. 점점 더 커지는 애플리케이션의 규모, 예상할 수 없는 요구사항으로 언제 어떻게 변경될 지 모르는 코드 등 맞닥뜨리게 되는 여러 상황을 최대한 유연하게 대처하기 위해 다양한 방식을 공부하고 있고 공부한 내용을 정리하여 기록해놓겠다. 참고로 아래에 정리한 내용은 프론트엔드 소스를 설계한다 가정하고 학습하였음을 사전에 알린다. 1. 가장 전통적인 형태, 모놀리스 아키텍쳐 Monolith는 사전적 의미로는 하나의 거대한 암석으로 된 기둥따위로 거대한 하나의 조직을 나타내기도 한다. 이런 의미와 같이 모놀리스 아키텍처는 단일 단위로 구성되어 있는 아키텍처로 모든 로직이 한 곳에 존재한다. 하나의 코드베이스가 존재하고, 하나의 배포 단위를 거치며, ..

개발 관련 글을 보다가 stacking context라는 단어를 보게 되었다. stacking context를 사용하는 글들을 보면 z-index도 나오고 position도 나오는 등 결국 뭔가 요소들의 순서에 관련된 단어같은데 그것 만으로는 stacking context가 무엇인지 설명할 수 없으니 이에 대해 공부해보기로 했다. 이름이란 것은 그것을 무엇인지 설명해주는 존재와도 같은 것이니, stacking context를 이해하기 위해서는 왜 stacking context 라는 이름으로 불리는 지를 살펴보는 데에 집중하여 살펴보았다. stacking context를 분해하면 stacking은 쌓임이라 해석하고 context는 맥락이라 해석하며, 통틀어 직역하면 쌓임 맥락이라고 한다. 한글로 번역한다고..