친구가 만들고 싶은 게 있다 해서 도와주는 겸 개인 프로젝트를 조금씩 해보고 있던 중 있던 일. 앱을 만들려하는데, 웹뷰라는 걸 알게 되어 전체적으로 웹뷰로 만들고자 함. React Native로만 앱을 만들었던 적이 있었는데, 라이브러리 생태계가 그리 활발하진 않아서 여러모로 고생함.이걸 웹 기반으로 구성할 수 있었다니… 왜 이제야 알았을까 싶었음. 웹뷰의 기반은 공부도 할 겸 Next.js로 결정.먼저 Navbar 컴포넌트를 만들고, 기본적인 UI 구조는 완성함.이후 CSS나 인터렉션 관련해 더 참조하고자 여러 앱들을 봤다. 그중 최고를 뽑자면 토스인 듯. 인터렉티브 하면서 깔끔하다. text와 SVG에 transition을 주는 방법을 구현하면 더 좋을 것 같긴 하다. 근데 써보면서 알게 ..

0.  잡설사실 프론트엔드 프레임워크의 경우 이미 React로 팀 프로젝트를 두 번 진행한 적이 있어, 이걸로 쭉 더 공부하는 것도 맞다고 생각하지만 아래 이유로 공부를 시작하게 되었다. CSR(Client Side Rendering)이 아닌 SSR(Server Side Rendering) 방식을 경험해보기사실 SSAFY에서 가르쳐준 Django도 풀스택 프레임워크로 방식은 배웠었지만.. Django로 하는 건 뭔가 ㅎ..Vercel 배포 시 백엔드 부분도 겸해서   이후 만들어볼 프로젝트(포트폴리오?)에서 배포 방식을 어떻게 할까 고민했는데, AWS는 커스터마이징 부분이 너무 포괄적이라서 Vercel로 배포를 할 생각(인프라도 해보니 재밌었는데, 일단 프론트엔드 중심의 공부를 위한 프로젝트라) 프론트엔..

요근래 웹사이트를 이용 중 가장 편리하게 느낀 기능을 따지자면 소셜 로그인 중 최근 로그인했던 소셜이 무엇인지 알려주는 기능이다.취준하면서 만들 프로젝트에서 이걸 구현하면 UX적으로 많이 좋을 것 같아서 구현 전 분석을 해보기로 함. 1. 최근 소셜 사이트를 저장하는 위치는 어디인가?1-1. 클라이언트? 서버?뭐 두 방법 중 정답은 없지만 유플러스에서는 어떻게 구현했을까 확인을 해봤다. 방법은 간단히 브라우저 2개(safari, chrome)를 통해 비교함. safari의 경우 위와 같이 네이버에 최근 로그인이 표시된 것을 확인하고, 크롬을 켜봤다.사파리에서 표시된 최근 로그인표시가 크롬에는 없다. 그럼 서버에서 관리하는 건 아니라는 소리라는 것 확인. 1-2.  로컬스토리지?  세션스토리지?  쿠키?일..

0. 잡설24년도 SSAFY 수료하고 나서 온전히 만들어보고 싶은 것을 만들어보자고 생각했었고, 크롬 익스텐션 개발이 첫 프로젝트가 될 것 같다. 내가 구상하고 있었던 건 예전부터 머릿 속으로는 생각했던 네이버 블로그로 맛집 검색 시 광고나 후원 받은 글이라면 광고글인지 알려주는 익스텐션인데..그래도 24년도 12월 1일 이전 글들에서는 써먹을 수 있으니까..! 그래도 만들어보려고 함. 일단 구상하는 방식은 아래와 같음. 1. 해당 사이트가 네이버 블로그(https://blog.naver.com/*)인지 확인    - chrome의 재미나이 AI를 활용하는 거라 엄한데 토큰을 쓰는걸 방지2. 해당 사이트 내 이미지 및 태그를 정리   - 굳이 판별할 필요 없는 부분은 제외하는 게 중요할 것 같다.3. 프..

1. 사용 계기프론트엔드 개발 중 동적인 이미지 구현을 하고 싶을 때가 있음. 이번 프로젝트에서 사용할 일이 생겼었다. 개발을 모르던 나도 알았던 gif를 사용해볼까도 했는데, gif의 단점인 동적 제어(재생, 정지)가 안되는 점이 이번 프로젝트에서 가장 큰 문제여서 다른 방식을 찾아보던 중 이미지 스프라이트 기법을 알게 됨.  이미지를 행과 열로 배치하고, 그걸 번갈아서 보여줌으로서 동적인 느낌을 선사할 수 있다.  장점은 여러가지가 있는데 일단 이미지 하나니까 gif 대비 가볍고, 여러가지 이미지를 배치하면 그 순서와 조합에 따라 다양한 동적인 움직임을 선사할 수 있다!(하지만 시간은 그리 많지 않아서 결국 저 둘만...)  나는 흔히 사용하는 기법이라고 생각해서 이미 라이브러리들이 많지 않을까 싶어..

HTML에서 태그를 사용할 때 보통 type 속성을 설정하여 입력값의 유형을 정의함.예를 들어 type="text"는 기본 텍스트 입력, type="checkbox"는 체크박스를 구현함.근데 number는 잘 사용하지 않는데 궁금해서 찾아보고 이유를 확인함 입력값 제한의 불완전성 위 input에다가 입력값을 넣어보면 알 수 있는데 기본적으로 글자를 모두 제한하지 않음      +, -, .와 같은 특수기호 (+와 -는 덧셈, 뺄셈이 아닌 부호로서만 작용함, ex: +123, -123)      e (예: 1e10 형태의 지수 표현)      한글 글자..(글자 제한은 브라우저 단에서 제어하는데 들어가긴함)위 ()의 규칙을 따르지 않으면 console.log에 아무것도 찍히지 않음 (NaN으로 인식되기 ..