본문 바로가기

전체 글

 (215)
실전에서 바로쓰는 Next.js | 렌더링 전략 렌더링 전략이란 웹 페이지 또는 웹 애플리케이션을 웹 브라우저에 제공하는 방법을 의미합니다. Gatsby와 같은 프레임워크는 정적으로 생성한 페이지를 제공하기에 알맞은 프레임워크죠. Next.js는 어떤 페이지를 빌드 시점에 정적으로 생성하고 어떤 페이지를 실행 시점에 동적으로 제공할 것인지 쉽게 정할 수 있습니다. 애플리케이션의 특정 페이지에 대한 요청이 있을 때마다 페이지를 다시 생성할 수도 있습니다. 또한 반드시 클라이언트에서 렌더링해야 할 컴포넌트도 지정할 수 있어서 개발이 훨씬 쉽습니다. 이 장에서는 아래와 같은 내용을 다룹니다. - 서버 사이드 렌더링을 사용해서 각 요청별로 페이지를 동적으로 렌더링하는 방법 - 특정 컴포넌트를 클라이언트에서만 렌더링하는 방법 - 빌드 시점에 정적 페이지를 생성..
OpenLayers 개념 및 용어 정리 이 글에서는 백마 인턴쉽으로 들어가게된 SIA에 출근하기 전에 Openlayer 라이브러리에 대해 학습한 내용을 정리합니다. SIA에서는 Openlayer 기반의 지도 서비스를 제공하고 있습니다. 따라서 Openlayer에 라이브러리에 대한 이해와 이를 리액트없이 사용해보고(바닐라) 리액트에서 간단한 프로젝트를 진행해보는 것을 목표로 학습을 진행합니다. 용어 OpenLayers: Completely free and open source, front-end JavaScript library for building interactive web maps. OpenLayers Can display different types of geospatial data such as raster, vector, marke..
정보처리기사 시험 공부 필기 합격(23.02.21) 소프트웨어 설계 XP(eXtreme Programming) - 수시로 발생하는 고객의 요구사항에 유연하게 대응하기 위해 고객의 참여와 개발 과정의 반복을 극대화하여 개발 생산성을 향상시키는 기법 - 짧고 반복적인 개발주기, 단순한 설계, 고객의 적극적인 참여를 통해 빠르게 개발하는 것이 목적 - 릴리즈 기간을 짧게 반복하면서 요구사항 반영에 대한 가시성을 높임 - XP의 5가지 핵심가치로는 의사소통, 단순성, 용기, 존중, 피드백이 있다. XP 개발 프로세스 1. 사용자 스토리: 고객의 요구사항 시나리오로 표현 2. 릴리즈 계획 수립: 몇 개의 스토리가 적용되어 부분적으로 기능이 완료된 제품을 제공하는 것에 대한 계획 수립 3. 스파이크: 요구사항의 신뢰성을 높이고 기술 문제..
React 18 for External Store Libraries 위 발표에 대한 내용을 정리한 글입니다. Daishi Kato는 Zustand, Jotai, Valtio, React Tracked를 만드신 분입니다. React 18로 버전을 올렸을 때 외부 Store에 의존하는 라이브러리의 경우 Tearing이 발생한다고 합니다.Tearing이란 유저가 느끼는 Visual Inconsistency입니다. Tearing에 대해서 다루기 전에 우리는 External Store에 대해서 알아봐야합니다.Redux와 Zustand는 외부 스토어를 사용합니다. Dom Object, 전역 변수 또한 외부 스토어라고 할 수 있습니다. 이제 Tearing이라는게 Concurrent Rendering에서 어떻게 일어나는지 알아봐야합니다. 우리는 외부 스토어에 count라는 변수가 있고..
실전에서 바로쓰는 Next.js | 지역 및 전역 상태 관리 리액트 애플리케이션에서는 상태 관리가 아주 중요한 부분을 차지합니다. Next.js도 리액트 프레임워크이므로 마찬가지입니다. 일반적으로 상태라는 것은 동적인 정보의 일종으로, 높은 수준의 상호 작용이 가능한 UI를 구현하거나 사용자 경험을 더 뛰어나게 만들기 위한 필수 요소입니다. UI는 사용자와 인터렉션에 따라서 반응할 수 있는데, 이는 전적으로 개발자가 변경된 상태를 어떻게 다루느냐에 따라 결정됩니다. 상태 관리 -> 애플리케이션에 더 뛰어난 상호작용 등의 기능을 구현할 수 있습니다. 하지만 그만큼 애플리케이션의 복잡도도 증가합니다. 리액트에서 데이터의 흐름은 단방향이라서 부모 컴포넌트는 자식에게 props의 형태로 상태를 전달할 수는 있지만 반대로 자식이 부모에게 상태를 전달할 수는 없습니다. 지역..
React 18 for app developers React 18 for App Developers React 18 for App Developers 발표를 정리한 내용입니다. 이 발표에서는 다음과 같은 주제를 다룹니다. - What's new in React 18? - How to upgrade to React 18? - Is it hard to upgrade an existing app? React 18 에는 동시성 기능이 포함됩니다. 따라서 React 팀은 React 이전 버전 사용자들을 위해 Working Group을 구성했고 Shruti Kapoor는 Working Group의 멤버로써 이 발표를 통해 React 18이 갖는 의미를 전달합니다. React 18에는 다음과 같은 기능이 나옵니다. - Automatic Batching - Suspe..
LeetCode 787. Cheapest Flights Within K Stops 먼저 Map을 사용하여 인접리스트를 만들어줍니다. 인접리스트를 잘 채워준 이후에 큐를 선언하고 출발지부터 넣어줍니다. while 문을 돌면서 queue를 거리순으로 정렬하고 가장 거리가 가까운 것 부터 방문해나갑니다. 방문했던 곳에서는 방문했던 곳에서부터 더 방문할 수 있는 수를 확인해서 현재 방문할 수 있는 개수 - 1 보다 더 많이 방문할 수 있다면 continue를 해줍니다. 모든 간선을 사용하거나 도착지에 도착하면 while 문이 종료됩니다. const findCheapestPrice = function(_, flights, src, dst, K) { const adjacencyList = new Map(); for(const [start, end, cost] of flights) { if(adj..
LeetCode 93. Restore IP Addresses IP 주소로 가능한 모든 경우의 수를 구해야 한다. -> 백트래킹 일단 길이가 4보다 작거나 12보다 크면 IP 주소를 만들수조차 없으므로 빈 배열을 반환하게 했다. 또한 조건에서 string에 속할 수 있는 것은 숫자뿐이므로 문자열 -> 숫자 변환은 parseInt(x) 또는 Number(x)를 이용한다. backtracking 함수에서 탈출조건은 배열의 현재 길이가 4일 때 join으로 합쳐서 정답 배열에 푸쉬한 후 탈출하기로 했다. 또한 탈출조건으로 현재 배열이 3개이고 남은 문자열의 길이가 3이상이라면 적절한 IP 주소를 만들 수 없으므로 제거하는 베이스케이스를 추가했다. 그 후에는 전형적인 백트래킹을 활용했다. 풀이는 아래와 같다. const restoreIpAddresses = (s) => {..

티스토리툴바