자라나라 개발머리

프론트엔드 개발 프로젝트를 시작할 때, 프로젝트 초기 설정을 위해 첫 단계로 우린 무엇을 할까요? 저는 Vite를 주로 사용하는데요, 터미널에 Vite의 간단한 명령어 몇 줄로 app을 init 하곤 합니다. Vite를 사용하지 않고 프로젝트를 init 해도 될까요? 우린 왜 Vite와 같은 현대적인 빌드 도구를 사용하는걸까요? 좀 더 자세히 알아봅시다!처음 Vite로 init 시 가장 간단히 눈에 보이는 점: Vite는 프로젝트 초기 구성을 도와준다.Vite는 프로젝트를 초기화할 때 필요한 파일들을 자동으로 생성해준다.예를 들어, package.json 파일, 기본적인 index.html, src/ 폴더와 같은 기본 구조를 만들어준다.만약 React, Vue 프로젝트를 구성한다고 하면, 해당 템플릿을 ..

💭 같은 웹 서비스를 사용할 때 다른 페이지를 여러 탭으로 띄워놓고 사용해본 경험이 있나요? 저는 보통 이렇게 많이 사용하는 편인데요, 한 탭에서 로그아웃 처리를 하게 되면 다른 탭에 있는 페이지들은 어떻게 될까요? 일반적으로는 다른 탭에 띄워져 있던 서비스도 함께 로그아웃 처리가 됩니다. 이런 동작들은 어떻게 구현되는걸까요? 탭들 간에 서로 어떻게 로그아웃 처리가 되는지를 알 수 있을까요? 여러 방법이 있을 수 있겠지만 이번엔 Web API를 사용하는 방법을 정리해보려고 합니다. 로그인 만료 기능 구현에 대한 요구사항을 다음과 같은 두 가지라고 생각해보겠습니다.1. 로그인 만료 시간이 다가오면 만료까지 얼마나 남았는지 유저에게 알려주기: 만료 시간 정책(유저가 자리를 비웠을 때)에 따른 타이머 구현2..

📖  최근에 실무에서 진행하는 프로젝트의 리액트 마이그레이션을 위해 공부하고 있는데, 같은 가상돔이라는 개념을 쓰면서도 어떤 프레임워크(혹은 라이브러리)냐에 따라 접근 방식이 다를 수 있다는 것을 최근에 알게 되었다. 이번 기회에 가상돔뿐만 아니라 React와 Vue의 가상돔 개념까지도 비교하면서 알아보도록 하자! 브라우저의 렌더링 과정 (Critical Rendering Path)브라우저가 화면을 렌더링하기 위해서는 다음과 같은 단계를 거치게 된다. 1. HTML 을 브라우저가 이해할 수 있도록 DOM(Document Object Model)이라는 일종의 객체(node) 로 변환한다.2. CSS 를 브라우저가 이해할 수 있도록 CSSOM(CSS Object Model) 으로 변환한다.3. 그리고 이 ..

함수형 프로그래밍이란?객체지향과 같이 프로그래밍 코드를 작성하는 하나의 방법론이다.예제를 보면 더 빠르게 이 함수형 프로그래밍이 어떤 모습인지 이해할 수 있다! 아래를 보자.// Non-functionalconst arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];let filteredArr = [];let sum = 0;for (let i = 0; i  위와 같은 예제를 함수형 프로그래밍으로 바꿔보면...// Functionalconst arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];console.log( "Result: " + arr .filter(num => num % 2 === 0 && !console.log(num)) .map(num => (cons..

💡 개발자는 자신이 개발하는 제품이 문제가 없는 플로우를 가지고 있는지 검증할 의무가 있고, 그에 대한 책임이 요구된다. 하지만 하나의 어플리케이션의 동작과 기능을 테스트하기 위해서는 생각보다 여러 개의 과정들이 필요하다. 테스트를 위해 같은 과정을 반복해서 수행하게 되면 번거로울 뿐만 아니라 리소스적 낭비도 발생할 것이다. 그럼 동작을 테스트해보기 위해 코드를 매번 수정하는 등의 과정을 거치지 않고 효율적인 테스트를 하는 방법은 어떤 것들이 있을까? 테스트 코드와 TDD, 여러번 들어본 그 단어들을 파헤쳐보자!테스트 코드가 필요한 이유?테스트 코드(Test code)는 말 그대로 소프트웨어의 기능과 동작을 테스트하는 데 사용되는 코드다.테스트 코드는 일일이 수작업으로 들어가는 동작, 기능에 대한 점검..

💡 인턴쉽을 시작하기 전의 나는 레이어의 ‘레’ 자도 모르는 상태였다. 처음 프로젝트를 init 하고서는, 페이지의 내용과 레이아웃 정도만 기획하고 프로젝트의 구현을 시작했다. ‘구조'라는 것에 대해 깊이 생각해본적도 없었으니, 왜 중요한지도 알 수가 없었다. 지금와서 돌아보니 레이어가 무엇인지 알고있었더라면 이렇게 많은 구조적 시행착오를 겪지는 않았을 것 같다. 이번 주제에서는 내가 경험하면서 느낀 레이어의 정의와 기준에 대해 말해보고, 레이어에 대한 생각을 확장해나갈 수 있는 시간이 되었으면 한다.💡 인턴쉽을 시작하기 전의 나는 레이어의 ‘레’ 자도 모르는 상태였다. 처음 프로젝트를 init 하고서는, 페이지의 내용과 레이아웃 정도만 기획하고 프로젝트의 구현을 시작했다. ‘구조'라는 것에 대해 깊..