Taak-e's Dev-Log

React 렌더링 최적화 & Advanced Hook

1. 렌더링 (Rendering) 1-1. 렌더링이란? 렌더링 - 렌더링이란 화면에 특정한 요소를 그려내는 것을 의미한다. 사실 이 렌더링 과정을 잘 처리해주는 것이 우리가 Vanila JavaScript를 사용하지 않고 React 같은 UI 라이브러리 또는 프레임워크를 사용하는 이유다. 브라우저에서 렌더링 - DOM요소를 계산하고 그려내는 것을 의미한다. HTML과 CSS를 통해서 만들어지고 계산된 DOM과 CSSOM은 결합되고, 위치를 계산하고, 최종적으로 브라우저에 그려진다. 그리고 우리는 브라우저에서 제공하는 DOM API를 JavaScript를 통해 호출하면서 브라우저에 그려진 화면을 변화시킨다. 명령형과 선언형 - Vanila JavaScript를 이용해서 DOM에 직접 접근하고 수정하는 것 ..

CI/CD with GitHub Actions

1. CI/CD CI/CD는 Continuous Integration(CI)와 Continuous Delivery/Deployment(CD)를 통합해서 부르는 용어 CI/CD는 개발 과정에서 필요한 빌드, 테스트, 배포등의 과정을 자동화 CI/CD 자동화를 통해서 개발자들은 코드를 자동으로 테스트하고 배포 효율적인 작업과, 더 빠르고 더 자주 배포를 진행할 수 있다. 1-1. CI (Continous Integration) Continous Integration은 코드를 지속적으로 통합해나가는 것을 의미한다. 일반적으로 코드의 통합은 GItHub의 PR을 통해서 진행할 수 있기에 CI 과정에서 도대체 무엇을 하는지 호기심이 생긴다. CI 에서 코드의 통합은 단순히 코드와 코드를 합치는 것뿐만이 아니라 코..

서버와 클라우드 컴퓨팅 & AWS S3

1. 서버란? 사전적 의미의 Server는 무언가를 제공해주는 사람이나 물건을 의미한다. 좀 더 나아가서 우리가 일상생활, 그리고 IT 업계에서 말하는 서버는 “무언가를 제공해주는 컴퓨터” 이다. 우리는 흔히 인터넷으로 특정한 웹사이트나, 리소스에 접근하는데 정확히 말하자면 우리가 접근하는 대상은 웹사이트, 리소스 자체가 아니라 해당 웹사이트와 리소스를 응답해주는 컴퓨터에 접속하는 것이다. 추상적으로 서비스가 운영되고 제공되는 과정을 알아보자면 서비스를 운영하기 위해서는 특정한 컴퓨터를 가동시킨다. 그리고 해당 컴퓨터에서 특정 프로그램을 실행시켜서 컴퓨터에 네트워크를 통해 접근하면 특정한 리소스를 응답해주도록 만든다. 그리고 인터넷을 통해서 이 컴퓨터를 외부에서 접근 가능하도록 설정한다. 이러한 동작을 ..

프리온보딩 코스 Week-5

1. Advanced JavaScript - 비동기 1-1. 비동기에 대해서 비동기에 대해서 1. 비동기 프로그래밍이란? 프로그램이 어떠한 동작을 하고 있을 때 그것을 기다리는 것이 아니라 그동안 발생하는 다른 이벤트에도 모두 반응할 수 있게만드는 기법을 의미 2. 자바스크립트의 taak-e.tistory.com 1-2. Event loop & Callback [JavaScript] 비동기를 구현하는 방법 (Event loop & Callback) 1. 자바스크립트가 비동기를 구현한 방법 자바스크립트는 비동기적인 동작을 관리하기 위해서 "이벤트루프"라는 개념을 사용 자바스크립트의 실행과정은 크게 2가지 요소들이 관여 자바스크립 taak-e.tistory.com 1-3. Promise & Async-Awa..

ESLint & Prettier, Git Hook(Husky) 사용으로 팀의 능률 올리기

1. Lintter & Code Formatter 한 프로젝트에서 작업자마다 각자 다른 코딩 스타일을 가지고 있고, 그것이 코드에 드러난다면 이 프로젝트를 제 3자가 읽기도 어려워지며, 팀원들끼리도 다른 팀원들이 작성한 코드를 읽고 이해하기가 힘들질 수 있다. 이러한 요소들은 결국 비효율을 유발하게되고 이를 극복하기 위해서 팀으로 작업을 할 때는 여러 작업자들의 코딩 스타일을 일치시키기 위한 Lintter와 Code Formatter를 사용하는 것이 좋다. 이러한 도구들을 사용하게 되면 어떤 형태의 문법을 지향하고 지양할지, 포맷팅은 쌍따옴표를 사용할지, 홑따옴표를 사용할지, 혹은 몇 자마다 줄바꿈을 할지, 문장의 끝에 세미콜론을 사용할지 등의 여부를 고민하지 않고 코드 작성 자체에 집중할 수 있도록 도..

프리온보딩 코스 Week-4

1. 프론트엔드에서의 테스트 1-1. 소프트웨어 테스트와 종류 소프트웨어 테스트와 종류 1. 소프트웨어 테스트 1-1. 소프트웨어 테스트란? 소프트웨어가 의도한대로 동작하는지를 테스트하는 행위를 의미 옛날에는 소프트웨어가 올바르게 동작하는지를 확인하는 테스트팀이 별도로 taak-e.tistory.com 1-2. TDD란? TDD (Test Driven Development) - 테스트 주도 개발 1. TDD 는? Test-Driven-Development의 약어로서 소프트웨어를 개발하는 여러 방법론 중 하나 TDD의 핵심은 기존에는 테스트 코드를 먼저 작성하고, 그 후에 실제 코드를 작성하는 것 일반적인 개발 흐름 taak-e.tistory.com 2. TypeScript의 이해와 활용 추후 공부하여 업..