FrontEnd 이상혁

이번에 프락시란 개념을 들어서 알아봤다프록시(proxy)프록시(proxy)란 대신 요청하고 응답을 중계해 주는 것 역할클라이언트가 서버에 직접 요청을 보내는 게 아니라프록시 서버에 요청을 보내면 그요청을 프록시 서버가 그 요청을 원래의 서버에 보낸다 또 서버의 응답을 프록시 서버를 통해 클라이언트로 보낸다 왜 바로 서버에 보내면 될 것을 굳이 중간에서 서버를 거쳐서 요청을 보내고 받을까? 목적1. 캐시 데이터프록시 서버의 기능 중에는 요청된 내용을 캐시를 사용해 저장한다 캐시 되어있는 데이터에 대한 재요청은 따로 서버에 요청을 보낼 필요 없이 데이터를 보내면 돼서 응답시간을 줄일 수 있다 또한 서버로 가는 부담이 적어져 네트워크 병목현상도 방지가 가능하다 2. 보안브록시 서버를 경유해서 서버에 접속하면 ..

내가 예전에 react-router-dom을 공부할 때 history api라는 개념을 처음 들었다 그때는 그냥 브라우저에서 방문한 페이지를 stack으로 쌓아서 관리한다 정도로만 이해했었다 이번에는 조금더 깊이 공부하겠다history APIhistory api는 전역 객체를 사용하여 브라우저의 세션 히스토리에 대한 접근과 조작 기능을 제공한다 즉 내가 참조한 세션을 stack형태로 쌓아서 저장한다 원래 브라우저의 history는 새로고침하거나 링크를 눌러 이동해야 history가 쌓였다하지만 SPA가 도입되면서 url이동을 하지 않으니 history가 쌓이지 않고 뒤로 가기 같은 기능이 수행되지 않아 사용자사용경험이 떨어졌다 이를 해결하기 위해 history api가 만들어 졌다중요 메소드1. back..

오늘은 SEO최적화의 원리에 대해서 공부를 해보았다원래 예전에 작성했지만 저때 일이 많아 묻혔다.그러나 이번에 친구가 블로그글을 작성한 것을 보고 생각이나 마저 작성해 보았다SEO란?SEO는 (Search Engine Optimization)의 약자로 우리말로 풀이하면 검색엔진 최적화다 SEO가 최적화가 되어있으면웹사이트가 검색 엔진 결과 페이지에서 더 높은 순위를 차지합니다 더욱 높은 순위로 표시가 되면 더욱 많은 사용자를 모을 수 있습니다 SEO는 개념적으로 크게 3가지로 나뉩니다 1. 기술적 최적화검색 엔진이 웹사이트를 더 잘 이해하고 크롤링할 수 있도록 사이트 구조와 기술적인 부분에서 최적화를 하는 방법입니다 크롤링은 쉽게 말해 검색 엔진이 자동화된 소프트웨어를 사용하여 웹페이지를 방문하고 정보를..

내가 보통 프로젝트를 배포 할 때엔 vercel을 사용하여 배포를 한다 그런데 내가 만든 웹페이지가 배포되는 과정은 알아야겠다는 생각이 들어 이렇게 공부해 봤다배포웹페이지 배포란 내가 만든 웹페이지를 사용자가 접근할 수 있도록 인터넷에 올리는 행위 요즘은 Vercel이나 Netlify 같은 플랫폼들을 사용해서 쉽게 쉽게 배포 하게 되었다과정코드 작성, 빌드, 서버 업로드, 도메인 연결, 배포의 과정을 거친다1. 코드 작성일단 당연하게 우리가 작성한 html코드가 있어야 한다2. 빌드빌드는 소스 코드 및 구성 요소들을 모아서 실행할 수 있는 파일로 만들고 최종적으로 배포할 수 있는 형태로 변환하는 과정이다 1. 트랜스 파일링우리가 작성한 최신 코드를 구형 브라우저가 인식할 수 있도록 변환한다 TS나 JSX..

이번에 취업동아리 FE1 부장을 하게 되었다 그런데 선배가 나한테 브라우저가 뭐냐?라는 질문에 쉬히대답하지 못했다나한테 브라우저는 단순히 html를 보여주는 공간이었다 그래서 이번기회에 브라우저와 동작방식을 공부해 봤다브라우저(browser)브라우저란 인터넷에서 웹 페이지에 접속하고 탐색하고, 상호작용할 수 있도록 해주는 소프트웨어다 브라우저는 많이들 사용하는 Chrome 말고도 Firefox, Edge, Safari, Opera 등이 있다 이러한 브라우저들은 각각이 지원하는 기능이 조금씩 다르거나 다른 브라우저가 지원하는 기능 외에 추가적인 기능을 제공하지만 기본적인 기능들은 접속, 탐색, 상호작용, 이 3가지에 크게 벗어나지 않는다  역할 기본적인 브라우저의 역할은 크게 웹페이지요청, 렌더링, 인터렉..

오늘의 주제는 react hook form에 대해서 공부해 봤다 내가 프로젝트를 하는데 폼 작성하는 기능이 주를 이루는 프로젝트라이번기회에 react hook form을 사용하자고 결정하고 자세하게 배워봤다React Hook FormPerformant, flexible and extensible forms with easy-to-use validation.유효성 검사를 쉽게 할 수 있는, 성능이 우수하고 유연하며 확장 가능한 form을 제공하는 라이브러리이다. npm install react-hook-form react hook form은 React에서 폼을 쉽게 다룰 수 있도록 도와주는 라이브러리이다 여기서 폼이란 html태그중 하나인 form을 의미하는 것으로html에서 사용자가 값을 입력하고 제출할..

react에서, 2020년 12월에 server component를 소개했다 그 후 next.js에서 server component를 적극 도입 & 확장했다이에 따라 next.js에서는 client component와 server component, 2가지 형식으로 사용할 수 있다 하지만 client component는 알고 있었지만 server component는 언제 사용해야할지 몰랐다Before Server component...먼저 서버 컴포넌트가 있기전, react의 컴포넌트가 브라우저에서 어떻게 렌더링 되는지 한번 알아보자React문법으로 코드작성babel을 만나 vanilla js 코드로 변환js기반 element로 변환(vitual dom)현재 dom과 vitual dom을 비교비교 후 u..

개요평화로운 1학년 겨울방학....동아리에서 내준 과제를 하던 중에 한 가지 문제가 발생했다 분명 브랜치 2개를 파서 main으로 PR을 올렸는데1번째 브랜치에 올렸던 commit들이 2번째 브랜치에 중복되어 올라와 있었다... 내가 터미널에 git log를 실행한 결과 문제를 발견했다2번째 브랜치를 팔때 main이 아니라 1번째 브랜치에서 팠던 것이다 이제 뭐가 문제인지 알았으니 이제 해결할 차례이지만문제는 2번째 브렌치에서 행해졌던 변경사항들이 걸렸다 checkout으로 main으로 가서 새로운 브렌치를 만드니이미 변경사항들이 사라진 상태로 브랜치가 만들어지고,  cherry-pick이나 rebase 같은 방법을 사용해도 도통 해결될 조짐이 보이지 않았다 그냥 변경사항이 사라지더라도 메모장에다 옮기고..

이번에 공부한 기술은 Tanstack-Query이다 원래 React에 최적화된 fetching 라이브러리였지만Vue, Solid, Svelte 등 다양한 프레임워크까지 기능이 확장되어 React-Query라는 이름대신tanstack이라는 이름으로 다른 라이브러리와 함께 묶였다 사용방법//npmnpm install @tanstack//yarnyarn add @tanstack/react-query//pnpmpnpm add @tanstack/react-query설치 후 최상위 컴포넌트를 provider로 감싼다 내가 이번에 공부하고 사용한 기능은 useQuery와 use-mutation이다useQueryuseQuery는 서버에서 데이터를 fetch 하는 데 사용된다import { useQuery..

지금의 블로그는 monorepo의 설명과 팀 더모먼트 8기의 1차 과제이다Monorepo모노레포란 여러 개의 프로젝트를 하나의 저장소(repogitory)에서 관리하는 방식이다위 사진처럼 하나의 저장소에 여러 개의 프로젝트를 관리한다장점프로젝트간에 코드 공유와 협업이 매우 수월해진다 예를 들어 관리자 프로젝트와 일반 클라이언트 사이에 공유하는 코드가 많을 것이다 그럴 때 monorepo를 사용하면 공유하는 코드를 한 번만 작성하고 그냥 관리자 프로젝트랑 클라이언트 프로젝트에 import 해서 사용하면 된다 또한 일반된 개발환경을 경험할 수 있다 하나의 레포지토리에서 여러 가지의 프로젝트를 관리하니 버전과 환경설정을 통일할 수 있습니다 단점하나의 레포지토리에서 여러 개의 프로젝트를 관리한다는 것은 장점이 ..