subin-dev-blog

[React] 클라이언트에서 이미지를 압축해보자
우리는 서버 비용을 직접 부담하고 있기 때문에 항상 최적화와 비용 절감 방법을 고민하게 된다. 현재 자유게시판이 활성화가 많이 되지는 않았지만 사용자들이 업로드하는 이미지가 평균 5MB 이상일 경우를 대비해서 클라이언트에서 이미지 압축을 진행했다. 웹에서는 크게 두 가지 방법이 있었는데 Canvas API를 직접 사용하는 방법 browser-image-compression 라이브러리를 활용하는 방법 이 있다. 여러 장점을 고려해 brow...
Oct 8, 20252 min read
[책 추천] 프론트엔드 개발자라면 반드시 알아야 할 '웹 접근성' 이야기
내가 생각하는 프론트엔드 개발자는 단순히 보이는 화면만 구현하는 것을 넘어서 누구나 접근할 수 있는 웹을 만드는 데 중요한 역할을 해야 한다고 생각한다. 실무에 바로 적용하는 웹 접근성 가이드북 이번에 이 책을 받고 프엔들이 읽기에 너무 좋다고 생각해서 블로그에 추천 글까지 적게 되었다 ! 목차 Chatper1. 쉽게 이해하는 접근성 Chapter2. 웹 접근성의 기초 Chapter3. HTML 태그, 의미 있게 사용하기 Chpater4...
Jul 27, 20255 min read
S
subin-dev-blog
27 posts
끊임없이 배우기 위해 노력합니다. 🌱
[Next.js] 나만의 학습 블로그 만들기#3-다국어 지원 (Feat.next-i18next)
오늘은 다국어 지원 가능한 기능 구현 과정을 적어보려고 한다. 원래는 댓글기능보다 먼저 구현하려고 했는데 ,, 갑자기 댓글기능 알아보다가 재밌어서 먼저 끝내버렸다,,,🙄 시작하기 전에 정말 어려웠다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 어려움이 많아서 기능 적용하는 데 시간이 꽤 걸렸다 ,,, 다국어 지원 기능 나는 영어랑 일본어를 추가해줬다 ! (해외취업도 관심 있기 때문에 나중에 이력서 낼 때 도움이 되지 않을까? ..🤭) 다국어 구현 방법 구현 방...
Jul 15, 20254 min read
[Next.js] 나만의 학습 블로그 만들기#4 - 댓글 기능(Feat. Giscus)
댓글기능이 있으면 무조건 재밌을 거 같아서 넣어보려고 한다🤭 아무래도 개발에 관련된 학습 블로그라서 개발자들이 많을 것으로 예상했다 ! 그래서 깃허브 이슈 기반 댓글 시스템을 기반으로 기능을 구현해보려고 한다. 👉🏻 도움이 많이 된 블로그 ! 방법 Giscus | (https://giscus.app) utterances | (https://utteranc.es) 알아봤을 때는 이렇게 두 개가 유명하다고 한다. 그럼 각각의 특징과 장...
Jul 14, 20253 min read
[React] React + localStorage로 하루에 한 번만 보이는 팝업 만들기
이번 프로젝트에 설문조사 배너를 제작했는데… 흠… 뭔가 별로라는 의견이 많았다! (팀원들 의견) 🙄 디자인이 문제일까? 해서 래퍼런스를 많이 찾아봤는데 … ! 일반 웹사이트는 설문조사 배너 자체를 안 만들어요,,,🤭 충격 그 자체 ( 난 아직 멀었음 ) 그리고 알아보니깐.. 설문조사 배너는 사용자 경험을 해치기 쉬워 잘 쓰이지 않는다고 한다! 그래서 나는 모달 팝업 방식으로 전환하기로 결정했고 실무에서 자주 사용하는 패턴으로 구현했다. 방...
Jul 9, 20253 min read
[Next.js] 나만의 학습 블로그 만들기 #2 - 방문자 수 측정하기(feat. Firebase)
내용 기록 외에도 방문자 수랑 댓글 기능도 넣으려고 한다.! 이번 글에서는 방문자 수 측정 기능 구현을 적어보겠다🤭 나는 서버가 없으니 파이어베이스를 선택해줬다…! 파이어베이스 사이트에 들어가서 프로젝트를 생성해주고 Firestore Database를 클릭해주자 👉🏻 링크 클릭 클릭하면 이런 화면이 나옴 데이터베이스 만들기를 클릭 프로덕션 모드에서 시작 그러면 이런 화면이 뜬다 ! 여기서 규칙을 수정해주자 기본 파이...
Jul 3, 20253 min read
[Next.js] 나만의 학습 블로그 만들기 #1 - 프로젝트 구조 잡기(Header, Footer, 다크모드)
이번에 모던 Modern-React-Deep-Dive를 읽고 정리를 하려던 중에 아예 블로그를 만들어서 제작하는게 어떨까?!라는 생각을 갖고 시작한 미니 프로젝트(?) 👉🏻 예시 블로그 이런식으로 굉장히 간단하고 가독성 좋게(?) + 깔끔하게 만들려고 한다. 기술 스택 + 구성 방식 항목추천 프레임워크Next.js 스타일Tailwind CSS / MDX 블로그 엔진자체 마크다운 렌더링 or Contentlayer 배포Ver...
Jul 1, 20252 min read
[React] 구글 서치 콘솔 & 네이버 서치 어드바이저에 웹사이트를 등록해보자(+SEO 💯점 만들기)
맡은 기능이랑 반응형 오류를 이미 다 잡아서,,! SEO 100점을 목표로 리팩토링을 진행했다. 6월 25일 기준으로 우리 웹사이트를 검색 했을 때 전혀 안 나오는 걸 확인할 수 있었다🧐 라이트 하우스 측정 결과 저번 프로젝트와 마찬가지로 robots.txt가 문제였다…👿 🥸 robot.txt가 뭔데? 검색 엔진 크롤러에게 특정 파일이나 디렉토리에 대한 접근 권한을 부여하거나 제한하는 역할이다. 🥸 엥?? 이게 무슨 말이야 ro...
Jun 24, 20254 min read
[React] Tanstack-Query에 대해서 알아보자 & 무한스크롤 구현
최근에 인프런 멘토링을 받았는데 tanstack-query는 프론트엔드 개발자에게 선택이 아닌 필수다! 라는 이야기를 듣고 이번 프로젝트에 직접 사용해보려고 한다. 일단 사용하기에 앞서 공부한 내용을 정리하려고 한다 ! 🌱 (평소에는 공부한 내용들을 깃허브에 기록하지만 내가 작성한 내용이 누군가에게 도움이 되면 좋겠는 마음에 …. ✨) 굉장히 많은 도움을 받은 블로그입니다,,👍🏻 ✨ Tanstack-Query(react-query)가 뭔가...
Jun 14, 20255 min read