분류 전체보기
애자일 방법론과 스크럼, 칸반
애자일 방법론과 스크럼, 칸반
2021.10.11애자일 개발 방법론 🤗 애자일 방법론(Agile Methodology)은 어떻게 보면 폭포수 모델보다 우리에게 더 익숙한 용어일 수 있습니다. 현재 많은 회사에서 조직 문화를 애자일하게 전환해 나가고 있으며, 이를 더 잘 활용하기 위해 깊이 연구하고 있습니다. 애자일도 폭포수 모델과 동일하게 소프트웨어 개발 생명 주기를 어떻게 활용할지를 고민하여, 프로젝트를 더 효율적으로 진행해서 높은 품질의 소프트웨어를 개발하기 위해 등장했습니다. 애자일(Agile)의 사전적 의미는 날렵한, 민첩한, 재빠른입니다. 그 의미에 맞게 정해진 계획만 따르기보다는 개발 생명 주기 또는 개발 환경에 따라 그때그때 유연하게 대처해나가는 소프트웨어 개발 방법론입니다. 위 그림처럼 애자일 방법론은 폭포수 모델과 동일하게 소프트웨어 ..
폭포수 모델 (Waterfall)
폭포수 모델 (Waterfall)
2021.10.11선형 순차적 모델 🤔 선형 순차적(Linear Sequential) 모델은 폭포수 모델이라는 이름으로 잘 알려져 있습니다. 이 모델은 이름이 의미하는 것처럼 폭포에서 물이 떨어지듯이 다음 단계로 넘어가면서 진행하는 프로세스입니다. 폭포수 모델은 정말 고전적인 생명 주기 프로세스이며, 각 단계가 하향식(Top-Down)으로 진행되면서, 넘어간 단계는 절대 거슬러 올라갈 수 없습니다. 그렇기 때문에 각 단계마다 만들어진 산출물에 대해 확인하는 과정을 갖습니다. 폭포수 모델의 장단점 💦 폭포수 모델은 각 단계가 완료되면 더 이상 돌아갈 수 없기 때문에, 단계마다 상세한 문서를 잘 남기게 되는 문서 중심의 모델입니다. 각 단계에서 만들어진 산출물은 다음 단계의 입력 자료로 사용되어 해당 단계의 자료를 만들 때 ..
소프트웨어 공학이 필요한 이유
소프트웨어 공학이 필요한 이유
2021.10.10소프트웨어 공학 🤔 더 좋은, 더 나은 품질의 소프트웨어를 만들기 위해서는 소프트웨어 공학을 공부해야 한다고 합니다. 대체 소프트웨어 공학은 무엇이고, 왜 공부하면 좋다고 말하는 걸까요? 단순히 프로그래밍만 잘 해도 되는 건 아닌걸까요? 이에 대한 의문을 해소하기에 앞서, 우리는 소프트웨어를 개발하는 환경을 생각해 봐야 합니다. 오늘날의 소프트웨어는 대부분 개인이 아닌 팀 단위로 개발됩니다. 그렇기 때문에 소프트웨어를 필요로 하는 고객도 있을테고, 다양한 팀원들도 있을 것입니다. 이렇게 규모가 있는 프로젝트를 진행하기 위해서 우리는 구현을 위한 기술력도 갖춰야 하고, 고품질을 위한 테스트도 해야 하며, 의사소통 또한 원활하게 할 수 있어야 합니다. 하지만 이를 위한 체계적인 프로세스가 없다면, 우리는 프..
단일 링크드 리스트 (Singly Linked List)
단일 링크드 리스트 (Singly Linked List)
2021.10.10Singly Linked List 🙂 많은 데이터를 담기 위해서는 배열(Array)을 사용합니다. 그런데 배열은 간단하지만, 데이터를 담을 수 있는 사이즈에 제약이 있습니다. 자바스크립트에서의 배열은 메모리가 허용하는 한 사이즈가 무한하지만, C나 Java 같은 언어에서는 배열을 만들 때 정적으로 초기 사이즈를 결정한 후 사용해야 합니다. 그렇기 때문에 사이즈를 넘어서는 만큼의 데이터는 넣을 수 없다는 문제가 있습니다. 그래서 고안된 것이 링크드 리스트(Linked List)라 하는 선형(Linear) 자료구조입니다. 각 요소는 노드라는 것으로 표현하고, 노드들을 하나하나 연결해 놓은 것이 바로 링크드 리스트입니다. 요소를 추가할 때마다 새로운 노드를 만들어 연결하면 되기 때문에, 사이즈를 걱정할 필요가..
CPU를 효율적으로 사용하기 위한 스케줄링
CPU를 효율적으로 사용하기 위한 스케줄링
2021.10.09스케줄링(Scheduling) 🔥 프로세스는 생성, 준비, 실행, 대기, 종료의 5가지 상태(5-State)를 바탕으로 실행됩니다. 그리고 프로세스는 각 상태를 프로세스 자신이 바꾸는 것이 아닌, CPU 스케줄러라는 것에 의해서 관리되고 전환됩니다. 이렇게 스케줄러가 프로세스에 CPU를 할당하는 작업을 스케줄링이라 하며, 프로세스의 현재 상황을 보면서 CPU를 어떻게 할당해야 시스템 자원을 효율적으로 사용할 수 있을지 결정합니다. 스케줄링은 프로세스 관리 범주에 따라 다음과 같이 나뉩니다. 고수준: 시스템 자원을 할당받기 위한 프로세스의 수를 결정하는 단계 중간수준: 시스템 상황에 따라 실행 중인 프로세스를 중지하거나 활성화하는 단계 저수준: 준비 중인 프로세스에게 CPU를 할당하거나, 할당된 프로세스를..
비동기 처리를 위한 문법 (Promise)
비동기 처리를 위한 문법 (Promise)
2021.10.08Synchronous 자바스크립트 엔진은 기본적으로 동기(Synchronous)로 동작합니다. console.log(1); console.log(2); console.log(3); 런타임 시 코드를 위에서부터 아래로 읽으며 실행하기 때문에, 우리는 [ 1 2 3 ]이라는 결과를 얻을 수 있습니다. 만약 비동기로 동작하기를 원한다 하면 중간에 setTimeout, setInterval과 같은 Host API의 도움을 받아야 합니다. 그렇게 되면 태스크 큐와 이벤트 루프에 의해 비동기로 동작하는 것을 확인할 수 있습니다. 태스크 큐와 이벤트 루프에 대해 익숙하지 않으시면, 이전 글인 자바스크립트에 동시성을 부여하는 이벤트 루프를 확인해 주세요! Host API란 웹 브라우저 또는 Node 환경에서 추가적으로..
아스테라라는 프로젝트를 시작하며 🐳
아스테라라는 프로젝트를 시작하며 🐳
2021.10.07프로젝트 아스테라 ⭐️ 저는 저번 달부터 아스테라라고 하는 프로젝트를 기획했고, 이번 달이 되자마자 실행에 옮겼습니다. 아스테라(Astera)는 별을 뜻하는 그리스어로, 제 마음에 너무나 들어 지금도 어떤 것에 이름을 붙일 필요가 있을 때마다 계속해서 사용하고 때로는 남용(?)까지도 하고 있는 단어입니다. 우선 이 프로젝트는 IT 분야로의 진출에 꿈이 있으면서, 마음이 맞는 사람들이 모여 기본적인 프로그래밍 스터디를 진행하고, 이후에는 협업을 통해 각자의 머릿속에만 갇혀 있던 아이디어를 세상 밖으로 끄집어내려는 목적을 가지고 있습니다. 그리고 공부한 것을 바탕으로 멤버 모두가 취업까지 하자는 목표도 담고 있답니다! 멤버들이 모두 취업되면 프로젝트가 끝날 것 같지만, 이 프로젝트는 평생 지속되는 Endle..
자바스크립트에 동시성을 부여하는 이벤트 루프
자바스크립트에 동시성을 부여하는 이벤트 루프
2021.10.07Single Thread 자바스크립트 엔진은 한 번에 단 한 가지의 일만 수행 가능한 싱글 스레드(Single thread) 방식으로 동작합니다. 그렇다면 setTimeout과 같은 비동기 함수들은 어떻게 논블로킹 방식으로 처리되는 걸까요? 만약 싱글 스레드로 처리된다 하면, 비동기 함수가 실행을 마칠 때까지 블로킹되면서 프로그램이 멈췄을 텐데 말이죠. 이런 자바스크립트 엔진에 동시성(Concurrency)을 지원하기 위해 웹 브라우저는 이벤트 루프(Event Loop)라는 것을 지원합니다. 우리가 비동기 작업을 위해 사용했던 setTimeout과 setInterval 함수는 ECMA Script의 기본 사양이 아닌 웹 브라우저에서 별도로 제공하는 Web API입니다. 물론 기본적으로 소스 평가 과정을 ..
연속으로 발생하는 이벤트를 제어하는 방법
연속으로 발생하는 이벤트를 제어하는 방법
2021.10.07Event Controls HTML의 DOM 요소를 조작하면서 발생하는 이벤트 중 input, mousemove, resize, scroll 등의 이벤트는 짧은 시간 간격으로 연속해서 발생합니다. 이러한 이벤트들에 함수를 등록해서 사용하는 경우, 너무나 잦은 호출로 인해 성능 저하를 불러올 수 있습니다. 그렇기 때문에 연속적으로 발생하는 이벤트들을 그룹화하여, 원하는 순간에만 호출될 수 있도록 하는 기법을 소개하려 합니다. 본문에서는 간단한 예제만 소개하기에, 프로젝트에서는 Lodash와 같은 라이브러리 사용을 추천합니다. 디바운스 디바운스(Debounce)는 연속으로 발생하는 이벤트의 마지막 이벤트만 호출할 수 있도록 하는 기법입니다. 만약 우리가 외부의 API를 호출해서 사용한다 하면 보통 요청 제한..
웹 브라우저의 렌더링 과정 알아보기
웹 브라우저의 렌더링 과정 알아보기
2021.10.05렌더링 과정을 아는 것이 중요한 이유 우리는 웹사이트에 접속할 때 단순히 주소창에 주소를 입력하거나, 링크가 걸린 텍스트를 누르기만 하면 됩니다. 하지만 반대로 웹 브라우저의 입장에서는 사용자가 원하는 화면을 보여주기 위해 내부적으로 많은 과정을 수행합니다. 서버로부터 웹 페이지와 관련된 리소스(HTML, CSS, JS)도 불러와야 하고, 이를 해석도 해야 하며, 어떤 것만 보여줄 지도 결정해야 합니다. 이러한 과정을 거치며 만들어진 결과물을 최종적으로 사용자에게 보여주게 되는데, 이 과정을 통틀어 렌더링(Rendering)이라 합니다. 렌더링을 하는 프로세스 자체는 간단하지만, 잦은 렌더링은 성능 저하를 일으킵니다. 그렇기 때문에 웹 브라우저의 렌더링 과정을 잘 이해하고 있으면, 렌더링 시 필요한 자원..
코드 실행에 필요한 정보를 담은 실행 컨텍스트
코드 실행에 필요한 정보를 담은 실행 컨텍스트
2021.10.05Execution Context : EC 실행 컨텍스트(Execution Context)는 자바스크립트 코드를 실행하기 위해 필요한 정보를 저장하고 제공하는 환경입니다. 기본적으로 스코프의 정보를 담은 환경을 말하며, 새로운 스코프가 생성될 때마다 실행 컨텍스트도 생성되면서 스택 메모리에 쌓이게 됩니다. 그리고 스택이 쌓일 때마다 새로운 컨텍스트에게 코드 실행에 대한 제어권을 넘기며, 실행이 종료된 이후에는 소멸됨과 동시에 제어권을 다시 상위 컨텍스트에게 돌려줍니다. 실행 컨텍스트는 자바스크립트의 동작 원리를 담고 있는 핵심 개념이기 때문에 정말 중요합니다. 실행 컨텍스트를 잘 이해하면, 스코프, 호이스팅, 클로저 등의 원리도 모두 이해할 수 있습니다. 😱 다음의 코드와 그림을 통해 실행 컨텍스트가 스택..
BEM 방법론에 따라 클래스명 짓기
BEM 방법론에 따라 클래스명 짓기
2021.10.04BEM Methodology BEM은 클래스 이름에 Block, Element, Modifier를 함께 작성하는 방법론으로, 개발자들로 하여금 HTML과 CSS의 관계에 대한 이해가 쉽도록 하는 목표를 가지고 만들어진 명명 규칙입니다. 정말 쉽기 때문에 공식 사이트에서 확인하셔도 좋지만, 본문을 통해 가볍게 소개해 보려 합니다. 아래 코드는 BEM 스타일을 적용한 CSS 코드입니다. /* 컴포넌트 요소(Block) */ .card {} /* 컴포넌트에 의존성이 있는 요소(Element) */ .card__image {} .card__description {} .card__button {} /* 컴포넌트의 스타일 수정자(Modifier) */ .card--success {} .card--back {} Bl..