전체 글 (73) 썸네일형 리스트형 [프론트엔드] localhost에 https 적용하기 개발을 하다보면 로컬에서도 https를 적용해야할 순간들이 있다.예를 들어, 인증 관련 api를 연동하는중에 백엔드에서 크로스 사이트 쿠키를 위해 SameSite=None; Secure 옵션을 주었거나, https에서만 동작하는 브라우저 api를 활용해야하는 경우가 있을 수 있다.전자의 경우, SameSite=Lax나 Secure=true로 완화하여 로컬에서 개발할 수도 있으나, 테스트 조건이 프로덕션 환경과 다르면 예상치 못한 문제가 발생할수도 있기에 개발 편의성보다 실전 환경과의 일관성을 유지하는게 좋을 수도 있겠다는 생각이 든다. 1. HTTPS 사설 인증서 발급을 위한 CLI 툴 설치 (Mac OS 기준)우선, localhost는 기본적으로 http 환경에서 실행된다.localhost 환경에서 H.. [프론트엔드] Zustand vs Jotai 실제로 사용해보면서 느끼는 것은 zustand는 Redux와 유사한 면이 있고, Jotai는 recoil과 유사한 면이 있다고 한다.늘 그렇지만 두 도구중 어떤 것이 더 우월하다기 보다는 만든이의 철학과 설계에 있어서 차이가 있을 뿐, 전역 상태 관리와 리렌더링 성능 측면에서는 큰 차이가 없다. 그렇기 때문에 개인의 취향(?) 혹은 프로젝트 요구사항에 맞춰서 사용하면 된다고 생각한다. ZustandZustand의 Redux와 비슷하게 중앙 집중형 방식을 차용하고 있다고 생각한다. 즉, 하나의 Store를 생성하고, 필요한 모든 상태를 그 안에서 정의하고 관리하는 방식이라는 것이다. 그리고 각 컴포넌트는 Store에서 필요한 상태를 가져와 사용하는 방식이다.이러한 특성으로 인해 개발하는 애플리케이션의 전.. [리액트] 리액트에서 렌더링, 리렌더링이란? (Feat. useState) 우선, 일반적으로 렌더링이란 HTML, CSS 소스를 바탕으로 UI를 그리는 작업을 의미한다.하지만 리액트에서는 그 의미가 살짝 다른데, 모던 리액트 딥다이브에서 읽었던 내용을 바탕으로 이야기하자면"리액트의 관점에서 렌더링이란 우리가 작성한 jsx문법에 기반한 컴포넌트가 호출되면서 이를 평가하고 Virtual DOM 객체를 생성하는 과정을 의미한다"라고 한다. 그리고 리렌더링이란 말 그래도 이러한 과정이 두 번 이상 발생했다라는 뜻이다. 필자는 함수형 컴포넌트위주로만 다뤄봤기에 함수형 컴포넌트위주로 살펴본다면 리액트에서 리렌더링이 발생하는 상황은 크게 세가지라고 한다. 1. setState함수가 호출되었을때2. useReducer의 dispath가 실행되었을때3. 컴포넌트의 key props가 변경되었을.. [리액트] JSX는 어떻게 자바스크립트로 변환될까? (feat. Babel, Virtual DOM) 최근까지 jsx는 리액트의 전유물이며, 리액트에서만 사용이 가능한 문법이라고 생각하고 있었다.하지만 jsx는 ECMA 표준이 아닐뿐, 데이터를 표현하는 또 하나의 방식일뿐이라는 것을 딥다이브 책을 읽으며 알게 되었다. 그리고 jsx를 사용하면 Babel이 이를 React.createElement를 호출하는 JavaScript 코드로 변환한다는 것을 알았다. 바벨(Babel)에 관하여// Beforeconst element = Hello, JSX!;// Afterconst element = createElement("h1", { className: "title" }, "Hello, JSX!"); 바벨은 이처럼 jsx로 작성된 코드를 자바스크립트가 이해할 수 있는 방식으로 변환한다고 한다. 그리고 creat.. [알고리즘] 최소 실행 시간 구하기 https://leetcode.com/problems/task-scheduler/description/태스크 스케줄러문제) You are given an array of CPU tasks, each labeled with a letter from A to Z, and a number n. Each CPU interval can be idle or allow the completion of one task. Tasks can be completed in any order, but there's a constraint: there has to be a gap of at least n intervals between two tasks with the same label.Return the minimum num.. [네트워크] Blocking I/O와 Non-Blocking I/O, 그리고 프론트엔드의 탄생(feat. Node.js) Blocking I/O와 Non-Blocking I/O는 개발을 하다보면 자주 접하게 되는 용어이다. 최근 현업자분께서 분야를 막론하고 신입 개발자에게 중요한 네트워크 관련 지식 중 이 동기와 비동기에 관한 이야기를 해주셨다.그래서 이 참에 프론트엔드 개발자의 시점에서 이 개념에 대해 이해한 바를 정리해보고자 한다. 이 글을 I/O의 개념과 왜 느린지, 그리고 Node.js가 이 문제를 어떻게 해결해왔고, 프론트엔드 개발자가 이를 알아둬야하는 이유까지 담아보고자 한다. 우선, 필자는 최근까지 Blocking I/O, Non-Blocking I/O를 동기와 비동기와 동일한 개념으로 받아들이고 있었다. 하지만 이는 독립적인 개념이다. I/O 란? 우선 Blocking과 Non-Blocking에 대해 다루기 .. [프론트엔드] SEO 최적화 SPA 개발을 하다보면 SEO에 대한 피드백을 한번씩 받기 마련이다.이는 아무래도 클라이언트에서 자바스크립트로 모든 DOM요소를 완성해버리는 SPA특성상 검색 엔진 봇이 사이트에 처음 진입했을때 빈 html을 보게 되기 때문이다. 그리고 검색 엔진 봇은 이렇게 빈 html나 메타 정보를 제공하지 않는 페이지들을 싫어하고 SEO점수를 낮춰버리게 된다.문제는 단순히 점수가 낮아지는게 문제가 아니라 이게 웹사이트 수익성에 악영향을 미친다는 것이다. 클라이언트 사이드 렌더링(CSR)의 단점CSR의 치명적인 단점으로 항상 거론되는 두가지가 첫째로, 페이지 로딩 속도가 다소 느릴 수 있다는 것, 둘째로, 구글 검색 노출이 어려운 편일 수 있다는 것이다. 물론 요즘 구글 봇은 SPA 사이트일지라도 알아서 잘 크롤링한.. [프론트엔드] dvh (CSS 단위) 최근 사내와 프로그래머스에서 진행한 프로젝트에서 공교롭게도 모바일 중심의 개발을 진행하며 바텀시트 컴포넌트를 자주 도입하게 되었다. 특히 바텀시트 하단에 input 태그를 배치해 댓글 입력과 같은 기능을 구현하는 형태가 많았다. 그러나 개발 중 키패드가 올라오면 바텀시트 컴포넌트 전체가 키패드의 높이만큼 위로 밀려 화면이 잘리는 문제가 발생했다.이 문제의 원인은 기존 vh 단위가 브라우저가 초기 화면 높이를 계산한 후 고정된 값을 사용하기 때문에 키패드가 올라오는 상황을 반영하지 못한다는 점이다. 이를 해결하기 위해 검색하던 중 dvh(Dynamic Viewport Height) 단위에 대해 알게 되었다. dvh (Dynamic Viewport Height)dvh는 키패드가 올라오거나 UI가 변동될 때.. 이전 1 2 3 4 5 ··· 10 다음
