frontend

replace는 push와 다르게 브라우저에 새로 히스토리가 쌓이지 않습니다. 그쵸 ?근데 오늘 신기한 거를 봤습니다. 코드부터 볼까요 ?import { useRouter } from "next/router";export default function Home() { const router = useRouter(); const handleClick = () => { router.replace("/blog"); }; return 블로그 가기;}그리고 next.config.js를 확인해 보겠습니다./** @type {import('next').NextConfig} */const nextConfig = { reactStrictMode: true, rewrites: async () => { ..

오늘은 SEO, 그중에서도 구글 검색 엔진이 하는 일과 최적화에 대해서 공부한 것을 정리해 보겠습니다.SEO란 ?SEO는 Search Engine Optimization의 줄임말로 검색 엔진 최적화을 의미합니다. 쉽게 말해서 우리의 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 것입니다.SEO를 왜 해야 할까 ?SEO는 가장 효율적인 마케팅이라고 생각합니다. 구글에 검색을 했을 때 검색 결과에 높게 표시될 경우 유저들의 트래픽이 증가할 확률이 매우 높습니다.이 사진을 분석해 보면 검색결과 1,2,3등을 합친 게 50%가 넘는 모습입니다.광고 달면 그게 더 높게 나오는데 광고로 하는 게 좋지 않을까 ?물론 돈으로 광고를 달면 아예 검색 결과에 안 나오는 것보다는 괜찮겠지만 유저들은 심리적으로 맨위에 있..

저번에 React 19 + Next js 15 + Panda Css 의 기본적인 세팅을 했습니다. 이제 추가적인 세팅을 하고 서비스에서 사용할 SVG들을 편하게 사용할 수 있는 SVGR이라는 라이브러리를 사용해 보겠습니다.SVGR이란 ?공식문서 첫 화면에서 바로 확인할 수 있는대요. Transform SVGs into React components SVG를 React Component로 바꿔주는 라이브러리입니다.SVGR 설치pnpm i -D @svgr/cli이 명령어로 설치를 해줍니다.SVG 명령어 적용 cli를 사용하기 위한 명령어입니다. 저는 이렇게 구성을 했는데요. npx @svgr/cli --typescript --no-index --jsx-runtime automatic --out-dir ./s..

오늘은 브라우저의 동작 원리에 대해서 살펴볼 예정입니다. 프론트엔드 개발자 면접에서도 많이 나오는 질문이기도 하고요. 우선 브라우저가 먼지 먼저 살펴볼까요 ?브라우저란 ?인터넷을 통해 웹 페이지를 탐색하고 보는 데 사용되는 소프트웨어입니다.브라우저의 내부 구성다들 많이 보신 기억이 있는 사진일 거 같은데요.브라우저는유저 인터페이스 : 유저의 상호작용을 받는 부분으로 브라우저에 위쪽에 보면 뒤로, 앞으로 가기 버튼, 새로고침, 주소 입력창, 북마크 등이 있는 영역입니다.브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어하는 엔진입니다.렌더링 엔진 : 요청받은 내용을 화면에 표시합니다.네트워킹 : 네트워크 호출을 하고 통신, 보안의 역할도 수행합니다.자바스크립트 해석기 : 자바스크립트 코드..

최근에 나온 React 19, Next js 15와 제가 좋아하는 Css 라이브러리 Panda Css로 Sns를 간단하게 만들어 보겠습니다. 깃 레포는 여기 있습니다.React 19, Next 15 init우선 초기 세팅을 해볼 건데요. 저는 이 블로그 글을 참고해서 세팅을 했습니다.React 19 + Next js 15 설치pnpm create next-app@rc이 명령어를 입력하면 여러 질문들이 나오는데요. 저는Typescript 사용Eslint 사용Tailwind 사용 Xsrc 사용App Router 사용Turbopack 사용 X@ import alias 사용 X이렇게 세팅을 했습니다.React 컴파일러 설치이번에 React 19에 새로 등장한 컴파일러인데요.pnpm add -D babel-plu..

오늘은 웹 어셈블리에 대해서 글을 써보려고 합니다.간단히 웹 어셈블리가 뭔지 알아보고 Rust를 사용해서 간단한 웹 어셈블리를 만들고 기존 Javascript와 어떤 점이 다른지 확인을 해보겠습니다.웹 어셈블리란 ?WebAssembly는 최신 웹 브라우저에서 실행할 수 있는 새로운 유형의 코드이며, 새로운 기능과 성능 면에서 큰 이점을 제공합니다. 직접 코드를 작성하는 것이 아니라 C, C++, RUST 등의 소스 언어를 효과적으로 컴파일하도록 고안되었습니다.MDN 공식 문서쉽게 말해 C, C++, Rust 등 빠른 언어를 컴파일하여 브라우저에서 실행시킬 수 있는 바이너리 형식으로 만드는 기술을 의미합니다.웹 어셈블리, Javascript 처리과정 비교웹 어셈블리와 Javascript의 처리 과정을 비교..

오늘은 자바스크립트의 Promise가 어떻게 동작하는지에 대해서 공부를 해보려고 합니다.자바스크립트는 싱글 스레드 언어인데 ?자바스크립트의 Promise는 비동기 처리를 할 때 사용합니다. 근데 신기한 부분이 있습니다. 자바스크립트는 싱글 스레드 언어인데 어떻게 비동기 처리를 하는 걸까요 ? 싱글 스레드의 특징 중 하나인 단일 작업 흐름: 한 번에 하나의 작업만 처리할 수 있습니다. 에 따르면 한 번에 하나의 작업만 처리하는데 "하나의 작업이 끝나기도 전에 다른 작업을 실행시킨다." 라는 개념이 이해가 되지 않습니다. 우선 동기 처리와 비동기 처리일 때를 분리해서 이때 자바스크립트가 어떻게 동작하는지 살펴보겠습니다.이 사이트에서 자바스크립트의 동작을 시각화해줘서 이해하기 편한 거 같아요 ! 근데 오류가 ..

오늘은 css 라이브러리 그중에서 개인적으로 제일 좋다고 생각하는 Panda Css에 대해서 작성을 해보겠습니다.Panda Css가 무엇일까요 ?과거 Next js App Router가 처음 나왔을 때 App Router에서 사용할 수 있는 css in js 라이브러리는 어떤 것들이 있을까 찾아봤습니다. 시간이 좀 지나 다시 확인해 보니이렇게 padda css가 있더라고요. 이때부터 Panda Css에 관심이 생겨 찾아보고 테스트도 해보면서 참 좋은 라이브러리 같다는 생각이 들었습니다.이제 본격적으로 panda css에 대해서 알아 보겠습니다 !간단하게 사용해보자이제 한번 사용해 볼까요 ??Next js 세팅 공식 문서 참고하면 쉽게 사용할 수 있어요.panda-config.ts 파일을 만들고 이렇게 세..

혹시 이런 프론트엔드 개발자분들 계신가요 ?주변에 프론트엔드 개발자 동료가 없거나 적어서 아쉬워요.프론트엔드 공부를 하는데 혼자 하니까 어려워요.많은 프론트엔드 개발자분들과 네트워킹 해보고 싶어요.개발 블로그를 키우고 싶어요.📚 우당탕탕 도서관 소개우당탕탕 도서관은 프론트엔드 개발자들이 다양한 코드 스타일과 개발 지식을 공유하며 함께 성장하는 공간입니다. 이 커뮤니티는 각자의 경험과 이론을 바탕으로 매주 주제별 글을 작성하고, 이를 통해 심도 있는 학습과 토론을 진행합니다. 참가자들은 서로의 작업을 검토하고, 다양한 시각을 통해 새로운 인사이트를 얻을 수 있습니다.우당탕탕 도서관은 여기서 확인해 볼 수 있어요.🌟 활동 방식참여 개발자들은 매주 공통된 주제를 가지고 포스팅을 작성합니다. 이를 통해 새로..

원래 밸로그에서 글을 쓰다가 티스토리에서 처음 글을 써보네요. 오늘은 리액트에서의 추상화에 대해서 공부를 해보겠습니다. 추상화란 ? 위키백과에 나온 내용을 보면 추상화(abstraction)는 복잡한 자료, 모듈, 시스템 등으로부터 핵심적인 개념 또는 기능을 간추려 내는 것을 말한다. 라고 하네요. 리액트의 컴포넌트와 훅에서는 어떻게 할 수 있을까요 ? 리액트에서의 추상화 리액트에서 추상화를 할때 이런점들이 고려되어야 합니다. 한가지의 역활 (단일 책임) 재사용성 (도메인에 종속되면 안됩니다.) 변경에 쉽게 대응 변경에는 닫혀있고 추가에는 열림 (개방 폐쇠) 변경에 쉽게 대응인데 변경에는 닫혀있다는 말은 모순인데요 ? 🤔 변경에 쉽게 대응에서의 변경과 개방폐쇠에서의 변경은 다른 의미입니다. 변경에 쉽게 ..