Search for a command to run...
들어가며 큰 규모의 프로젝트를 출시한 뒤, 후일을 위해서 더 늦기 전에 파일 정리 및 문서화를 진행해야했다. 문서화 작업을 하는 중에 기왕 정리하는 거 파일 구조를 이쁘게 트리 구조로 나열하여 코멘트를 달면 나중에 보더라도 이해하기 더 쉬울 것 같았다. 어떻게 해야 간지나는 트리 구조를 만들 수 있을까 방법을 찾다보니 역시나 파일 구조를 트리로 이쁘게 출력해주는 커맨드 툴이 존재했다. tree 커맨드에 대해서 알아보고 알짜배기 내용만 정리했다....
GraphQL은 API를 위한 Query Language이다. 우리에게 더 익숙한 REST API와 GraphQL의 차이점이 무엇인지 알아보고, Next.js에서 GraphQL을 사용하는 방법에 대해 알아보겠다. REST API Representational State Transfer의 약자로 URL로 자원을 표현하고 HTTP 요청을 통해 CRUD를 실행하는 API이다. GET api/todos/1PUT api/todos/1 처럼 HTTP 메소...
트위터 로그인 모달창을 만들어보며 넥스트의 parallel routes 와 intercepting routes 을 학습한 내용을 정리해보았습니다. 트위터 로그인 창을 확인해봅시다. 루트 디렉토리 화면을 배경으로 i/flow/login 페이지가 동시에 표시되고 있습니다. 저는 app router 를 학습하기 전까지는 createPortal 을 사용하여 포탈 영역에 로그인 컴포넌트를 띄우는 방식을 사용했었습니다. const NoLogin =()=...
개요 트리는 노드들이 나무 가지처럼 연결된 비선형 계층적 자료구조이다. 하위 트리가 존재하고, 그 노드에 또 하위 트리가 존재하는 자료구조 이다. 트리의 맨 위에 있는 루트 노드가 존재한다. 우리가 알아볼 트리는 이진 트리이다. 이진 트리는 자식 노드(부모로부터 아래로 이어진 노드)가 2개 이하인 구조를 말한다. 트리의 사용 사례로는 다음과 같다 계층 적 데이터 저장(파일,폴더) 효율적인 검색 속도 힙 데이터 베이스의 인덱싱 트리에 ...
React.js 18 에 도입된 리액트 서버 컴포넌트는 서버에서 동작하는 리액트 컴포넌트를 의미합니다. Next가 권장하는 라우팅 방식인 app router의 기반이 되는 컴포넌트이기 때문에 app router 를 이해하기 위해서는 server component 에 대한 이해가 필요합니다. server component 리액트는 클라이언트단만을 컴포넌트화하는 대신, server component라는 개념을 통해 서버 영역을 컴포넌트화합니다. ...
Flutter에서 단일 페이지 앱을 만들 때에는 하나의 폴더에 모든 파일들을 넣어도 된다. 하지만 다양한 페이지와 데이터 모델들을 추가하기 시작할 때, 파일들을 어떻게 일관적인 방식으로 정리할 수 있을까? 대표적인 방식으로 feature-first 구조와 layer-first 구조가 있다. Layer-first (feature inside layers) ‣ lib ‣ src ‣ presentation ...
초보 개발자에게 있어 개발 프로젝트에서 넘어야 하는 첫 번째 난관은 개발 환경 세팅입니다. 개발 환경 세팅으로 몇 분, 혹은 몇 시간을 삽질로 태우게 된다면 '시작이 반이다' 라는 말에 격하게 공감하게 될 것입니다. 저도 공감하고 싶지는 않았습니다. 오늘은 React, Typescript, Tailwind를 사용하는 프론트엔드 개발 환경 설정과 Express로 서버를 만들어 client에서 data fetching을 할 수 있도록 하는 과정에 ...
학교에서 전공을 하는 학생들이라면 자료구조, 알고리즘, 운영체제 등 어려운 컴퓨터과학(CS)에 대한 공부들을 합니다. 개발자는 개발이나 하면 되지 왜 이런 것들을 배울까 불만이 쌓이기도 합니다. 하지만, 양질의 개발자 채용에 심혈을 기울이는 회사일수록 CS 전공 면접을 중요하게 봅니다. Kakao, Naver, Toss, 당근마켓 등 개발자가 선호하는 회사의 면접 질문에는 CS 전공 질문이 많이 등장합니다. 피상적인 질문을 하는 것이 아니라 깊...
크롬에서 탭을 쓴다고 생각해봅시다. 우리는 chat gpt를 쓰던 학교 강의를 듣던 여러개의 탭을 켜놓고 작업들을 할 것입니다. 이 때에 우리는 멀티 프로세스(Multi-process)와 멀티 스레드(Multi-thread)의 개념을 생각해 볼 수 있습니다. 멀티-프로세스 모델 : 크롬은 탭이 마치 독립된 브라우저처럼 작동합니다. 멀티-쓰레드 사용: 각각의 탭이 각각 하나의 프로세스이고 그 안에서는 다수의 쓰레드가 사용됩니다. ex) 웹페이...