사실 이건 포트폴리오에 추가시킬 예정은 아니었지만, nextjs13 + app router 환경에서 한번 해보는 것이 좋을 것 같아 추가해본다. 이전 프로젝트에서, 리액트 프로젝트에서 web worker로 시험 시간용 카운터를 만들었었는데 거기까지는 아니고 간단한 시

https://developer.mozilla.org/en-US/docs/Web/HTTP/Browserdetectionusingtheuser_agent 다시 isMobile 조건을 찾아보기 위해 위 mdn 내용을 보기로 한다.

포트폴리오의 기본은 작성되었으니 한 가지만 더 추가하면 이제 해보고싶었던 것을 할 수 있다는 생각이 든다. 현재 만들어놓은 컴포넌트 트리에서 LeftSide 와 RightSide는 테일윈즈의 XL 해상도에서밖에 보이지 않게 되어 있다. 이를 만들어보려면 간단하게 1

가끔씩 사용하게 될 때마다 아 이거 어떻게 하더라? 하면서 인터넷을 검색하는 것은 참 좋지 않은 일이다.위 컴포넌트는 사실 버튼을 누를 때마다 새로 렌더링되면서 이니셜 애니메이션을 플레이해야 하지만,실제로 위 코드에 따르면 expType이라는 프롭이 변경되는 것 뿐이기

12

지난 프로젝트에서 프론트엔드 개발자로 활동하며 받은 태스크에 대해서 잊지 않기 위해 기록해 볼까 함. 위 프로젝트는 openAI 요즘 핫한 chatGPT의 api를 사용해 이른바 '환자 정보'를 만들어내느 것이었다. 문제는 당시 백엔드 자원의 부족으로, 추가 db

저번 주 React Essentials에서 보았듯, 클라이언트 컴포넌트가 아닐 때, 리액트 라이프사이클을 적용하면 에러가 난다.만들어 보고 싶은것은 위의 애니메이션을 framer motion으로 적용하는 레이아웃인데, 가장 간단한 방법은 위 모든 컴포넌트들을(상단 na

디자인은 https://brittanychiang.com/을 참고했습니다.https://nextjs.org/docs/getting-started/installation의 글에 의거해서먼저 새 프로젝트를 열어준다.먼저 위 디자인에서는 Inter, Mon

NextJS를 제대로 공부하기 위해 docs를 다시 처음부터 정리해보는 시간을 가지기로 한다. https://nextjs.org/docs 의 prerequisites부터 시작하는데, React 공식 docs는 너무 방대하므로 넘어가고, React Essential

SSR에 대해서는 너무나도 많은 글이 있지만 내 자신이 이해하기 위해서 정리를 한번 해보려고 한다. 유저의 입장에서 결국 적은 로딩 시간 -> 더 나은 UX로 귀결되기 때문에 이 점에 있어서 전통적인 방식인 SSR은 CSR에 비해 더 나은 UX를 제공할 수 있다고 할

Vue로 회사 프로젝트를 작업하는 도중, Vue도 Suspense 기능을 지원하는 것을 보고 적용해 보았음.Suspense 기능이 친숙한건 아니고, 저번에 react로 적용해 보았을 때 loading 컴포넌트를 분리하기 편리하겠다 생각했기 때문에 이번에도 적용해 보기로

사실 지난 한달동안은 T3 stack을 사용해서 웹소켓과 레디스를 활용한 프로젝트를 만들고 deploy까지 하려고 했었다. 그런데 계속해서 deploy 단계에서 막혀서 일단 잠정적으로 중단하기로 했음. 일단 시작은 trpc에서 websocket-starter 프로젝

찾아봐도 없는거 같네

1. Vue로 뭔가를 만들자 원래 Svelte로 사이드를 하나 진행하고 있는게 있었는데, 긴급하게 무언가를 제작해야 할 일이 생겼다. 약 2주간 진행하는 프로젝트이고 리액트보다 빠른 무언가를 찾아야 할 필요가 있었다. 리액트보다 빠른 개발속도 -> 더 적은 코드량

올해와서야 깨달은 사실인데 왜 다크모드가 중요한지 알게 되었다.현재 작업하고 있는 페이지는 Alice Blue라고 하는 모양인데,저걸 하루종일 쳐다보면서 작업을 하다보니 퇴근하면 그냥 눈이 아파서 아무것도 못하는 지경에 이르렀다.번들링할 때 임시로라도 다크 테마를 만들

https://codepen.io/jihyeonjeong11/pen/bGxyNjG .speech-bubble:before { content: ''; position: absolute; top: 0; left: 80%; width: 0; height: 0;

3/ 20 Svelte 문법 정리 (mostly pirating from https://svelte.dev/tutorial/dynamic-attributes) 1. Introduction 1-1. What is Svelte? Svelte is a tool fo

Svelte가 그렇게 간단한 사이트 만드는데 좋다던데... SvelteKit으로 풀스택도 지원한다던데 이참에 한번 해보기로 했다. 괜찮으면 포트폴리오를 다시 쓰는것도 좋은 생각인것 같음.먼저 가장 친숙한 react와의 비교를 해보아야 하겠다.템플릿 언어: React에서

브라우저의 동작 단계navigationresponse까지의 정리https://velog.io/@jihyeonjeong11/%EB%B9%BC%EB%A8%B9%EA%B1%B0%EB%82%98-%EB%86%93%EC%B9%9C-%EA%B2%83%EB%93%A4.-U

https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines먼저 웹에 대한 간단한 용어 정리부터 하고 시작한다.