본문 바로가기

프론트엔드

 (12)
[프론트엔드] 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에서 필요한 상태를 가져와 사용하는 방식이다.이러한 특성으로 인해 개발하는 애플리케이션의 전..
[프론트엔드] 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가 변동될 때..
[프론트엔드] SSR/CSR 환경별 쿠키 관리 방법 SSR와 CSR에서의 Axios 인스턴스 구분Next.js 에서는 SSR과 CSR 모두 지원하기 때문에, 상황에 따라 서버 인스턴스와 클라이언트 인스턴스를 구분하는 것이 필요할 수 있다. 특히, 인증 기능을 구현하고자 할 때, 쿠키를 사용하는 경우가 상당히 많은데, 이때 각 환경에 따라 쿠키에 접근하는 방식을 알아둬야할 필요가 있다. 클라이언트 Axios 인스턴스 설정 예시const getTokenFromCookie = () => { const name = 'access_token' const match = document.cookie.match(new RegExp(`(^| )${name}=([^;]+)`)) if (match) return match[2] return null}axiosInsta..
[프론트엔드] 브라우저 렌더링 과정, SSR과 CSR의 개발 환경 차이를 잘 알아야 하는 이유 (feat. Rollup) 최근 사내에서 개발한 UI패키지를 사용하여 퍼블리싱을 진행하는 과정에서 새로고침시 스타일 지연이 많이 발생하는 문제가 있어. 이를 해결해본 경험을 공유해보고자 한다.  예시처럼 화면이 로드된 초기에 스타일 적용이 지연되면서 다소 얼빠진(?) 화면이 보이다가 의도한 화면이 그려지는 것을 확인할 수 있다. 문제의 원인은 Rollup 설정에 있었다.plugins: [ peerDepsExternal(), resolve(), commonjs(), typescript(), postcss({ extensions: [".css"], plugins: [tailwindcss, autoprefixer], extract: false, }), CSS 인라인 포함 vs ..
[프론트엔드] 왜 Vite는 Webpack보다 훨씬 빠를까? 기존에 웹팩만 써오다 최근에 그렇게 좋다는 Vite를 체험해보았다.놀랍도록 빨랐다. 물론 처음부터 이거저거 다 설치해주는 CRA에 비해 Vite는 세팅 이후에 npm install 또는 yarn install을 실행하여 프로젝트의 의존성을 설치해야하기는 하지만, 그럼에도 불구하고 CRA에 비해 체감이 들정도로 빨랐다.그렇다면 Vite은 왜 Webpack보다 훨씬 빠를까? 에 대해 궁금해졌다.그전에 Vite가 뭔지부터 확실히 알고 넘어가고 싶어졌다. Vite란?Vite는 웹팩과 달리 개발 서버와 번들러의 역할을 모두 수행한다. 그리고 큰 특징은 개발 서버에서는 ES 모듈을 직접 사용하여 빠른 모듈 로딩을 지원하며, 빌드 시에는 롤업을 사용하여 최종 번들을 생성한다고 한다. 낯선 용어들이 많이 등장했다. 하..
[프론트엔드] 리액트에서 상태관리는 어떻게 이루어질까? (Feat: useState) 결론부터 말하자면 리액트의 상태관리는 비동기적으로 이루어진다. 만약 리액트의 특성을 모른채로 개발을 진행하다가 상태를 업데이트한 직후에 바로 해당 값을 사용할 경우, 기대한 최신 값이 아니라 이전 상태의 값이 사용될 수 있는 여지가 있다. 예를 들어, 다음과 상황이 있을 수 있다. const [userSelect, setUserSelect] = useState(null);const [computerSelect, setComputerSelect] = useState(null); const play = (item) => { setUserSelect(userSelect); setComputerSelect(computerSelect); judge(userSelect, computerSelect..

티스토리툴바