분류 전체보기 (39) 썸네일형 리스트형 라이브러리 사용하기 전에 꼭! 버전 체크하기 💥 상황: Sentry를 추가하려다 에러를 마주했다!이번 프로젝트를 진행하면서 이것저것 새로운 기술들을 많이 알게 되었는데요, 그 중에 하나가 바로 Sentry입니다.지금 저희 프로젝트의 서버에는 Sentry가 달려있는데, 경험해본 결과 정!말 개발의 질이 올라가더라구요 ?! 전 API를 연결할 때, 알 수 없는 오류 응답을 마주하는 경우가 많습니다,,(개인적으로 가장 답답한 경우는 proxy 또는 관련 설정이 잘못 되어서 무작정 404에러를 주는 경우입니다.......... 흑흑)좋지 않은 습관일 수도 있지만 그럴 때마다 전 항상 우선은 제 탓을,, 해보며 코드를 이리 저리 뜯어봅니다. . .그리고 정말 도~저히 답이 안나올 때가 되어서야 백엔드 팀원분께 한번 봐달라고 요청을 하는 편입니다.만약 백의 문제.. 0. 기획과 디자인 - 기획은 재밌고 디자인은 어렵다. >> ps note 만들기 대작전 프로젝트를 시작했습니다!이번 프로젝트는 처음부터 차근차근 개발기를 기록해보기로 결심했습니다. 이러면 마지막에 프로젝트 회고할 때도 도움이 될 것 같아서요😚제발 작심3일이 되지 않기를 바라면서 ... ─── ･ ｡ﾟ☆: *.☽ .* :☆ﾟ. ─── 이 프로젝트가 왜 탄생했냐면요 ..제 7월 목표 중 하나가 바로 '사이드 프로젝트 기획하기'였습니다. 그런데 전 정말 창의성이 꽝💥인 사람이거든요,, 아무튼 마음에 쏙 드는 아이디어를 떠올리는 게 쉽지 않았습니다. 전 웹 사이트를 개발할 때 늘 제가 쓰고 싶고, 실제로 사용할 만한 사이트여야 애정도 생기고, 열정을 쏟아부을 수 있는 것 같아요! (거기에 실제로 유저를 모을 수 있는 아이디어라면? 완전히 만족 100퍼센트.).. Next.js에서 svg 파일을 사용하며 겪은 일 이번 글은 제가 부트캠프에서 위클리 미션을 수행하며 리액트 프로젝트에서 Next.js로 마이그레이션을 하던 중 svg 관련 문제가 발생하여 적었던 에러로그입니다.😭 Errorimport searchImg from '@/public/assets/images/search.svg';//..return ( ); 위와 같이 기존 리액트 프로젝트에서 사용했던 방법인 import를 사용하여 Image 컴포넌트를 사용했을 때, 이미지가 깨지는 현상이 발생하였습니다. 🥹 Solution 아닌 Solution..//사진이 정상적으로 불러와지는 방식 위 코드처럼 Image 컴포넌트에 직접 이미지 경로를 넣어주는 경우에는 이미지를 잘 불러오는 것을 확인하였습니다.그러나, 기존에 import 방식을 사용한 리액트 .. AWS EC2와 깃헙 액션으로 CI/CD 도전기 지금까지 저는 netlify나 vercel을 이용해서 간단한 배포만 해왔었는데요,,!Bridge 프로젝트를 진행하며 처음으로 직접 도메인 연결&배포,,! 을 해야하게 됩니다.((그 이유는 프론트가 저 혼자이기 때문입니다.......)) 아무튼험난했던 저의 AWS EC2 첫 배포 도전기를 기록해보겠습니다! 😟 사실 처음엔 포기를 했었습니다 . . .사실 처음에 aws로 배포를 시도했다가 포기했습니다.여러 블로그들을 참고하여 ec2 인스턴스까지는 만들었으나,, 도저히 서버에 업로드하는 방법을 이해하지 못했습니다.에라 모르겠다...는 심정으로 그냥 netlify로 배포를 하고, netlify에서 지원해주는 서비스를 이용해 도메인을 연결해주었습니다. 🤓 돌아온 AWS 배포저희 프로젝트가 사용하는 도메.. useFunnel과 zustand 동시 사용 시, state 초기화 문제 Opener 프로젝트를 진행하며 Funnel 방식을 처음 경험해 보았습니다. Funnel 방식 도입과 관련하여 꽤나 깊게 고민했던 문제였기 때문에 에러로그로 남겨보겠습니다 😝✏️Errormodal 로직: zustand 이용해서 구현useFunnel 사용 전modal open → zustand 변경 → post 재렌더링 → MainInfo 재렌더링 → state 변화X & input 태그 value 유지useFunnel 사용 후modal open → zustand 변경 → post 재렌더링 → useFunnel 재실행 → Funnel 재렌더링 → Step 재렌더링 → MainInfo 재렌더링 → state 초기화 !!state가 초기화되면서, 모든 input 태그의 value값이 날아가는 문제 발생=> .. Router.replace를 사용하게 된 이유 - 뒤로가기의 무한 굴레 서핏 구경하다가 꽤나 흥미로운 글을 발견했다. 사소한 것이긴 하지만, 나도 이번 프로젝트를 하며 처음으로 고민해봤던 부분이라 블로그에 남겨보기로 결정했다!🥹 Error: 수정 한 번하면 상세페이지 못 나감 이슈 ...수정이 완료된 후, Router.push를 이용해 행사 상세 페이지로 이동시킨다. 바로 이 과정에서 하나의 문제가 발생하게 된다...! 유저는 당연히 새롭게 진입하게 된 상세 페이지에서 뒤로가기 버튼을 눌렀을 때, 당연히 홈 / 검색 페이지와 같이 상세 페이지에 진입하기 전 페이지로 가기를 원할 것이다.그러나, Header에서 뒤로가기 기능은 Router.back으로 구현되어 있기 때문에 history의 전 단계로 넘어가게 되고, Router.push를 이용했으므로 수정하기 페이지가 그대.. [13주차] Next.js의 SSR 실행 과정 & Hydration 📌 Next.js에서 SSR을 실행하는 과정과 hydration에 대해 설명해 주세요. 🤖 SSR 실행 과정 데이터 리퀘스트가 들어왔다면, 프론트 서버에서 필요한 데이터를 백엔드 서버에 요청 받은 데이터를 활용해 프론트 서버에서 HTML을 렌더링 → 프리렌더링 프론트 서버에 요청한 페이지에 필요한 HTML, CSS, JS 코드를 브라우저(프론트 클라이언트)로 전달 클라이언트는 우선 미리 서버에서 렌더링된 HTML, CSS 코드 내용을 화면에 보여주고, 필요한 JS 코드를 가져온다. → 사용자는 우선 인터랙션할 수 없는 HTML, CSS 코드로만 그려진 화면을 보게 되는 것! 리액트 hydration 이후 인터랙션이 가능한 페이지가 띄워짐. ⇒ SSR은 UI가 미리 완성된 화면에서 JS를 실행하고, CSR.. [13주차] Next.js를 사용하는 이유 📌 리액트만 사용할 때와 비교해 Next.js를 사용하는 이유에 대해 설명해 주세요. 😭 순수 리액트의 한계 순수 리액트는 Single Page Application & Client Side Rendering을 지원 웹 사이트를 요청할 때 앱에 필요한 모든 컴포넌트를 다운로드하고, 빈 HTML을 가져와 script를 로딩하는 방식이기 때문에 첫 로딩 시간이 오래 걸림 → UX 저하 SEO에 취약 대부분 웹 검색 엔진의 크롤러 봇은 JS까지 다 다운받고 실행하지 않고, 그냥 HTML에 들어있는 내용으로만 정보를 수집 따라서 CSR 방식은 빈 HTML 파일을 보내주니까, 수집할 정보가 없는 것! → SEO에 취약할 수밖에 없다. 👍 Next.js를 사용하는 이유 프리렌더링 Next.js는 정적 생성과 SSR.. [12주차] TypeScript를 사용하는 이유와 동작 원리 📌 JavaScript만 사용하는 것과 비교해 TypeScript를 사용하는 이유에 대해 설명해주세요 💡 JavaScript + Type = TypeScript 자바스크립트는 C-family(C, C++ Java 등) 언어와 다른 점을 가지고 있다. Prototype-based Object Oriented Language Scope와 this 동적 타입 언어 위의 특성들로 인해 (클래스 기반 객체지향 언어에 익숙한) 여러 개발자들이 참여하는 규모가 큰 프로젝트에서는 주의하여 사용하여야 한다. 이런 자바스크립트의 태생적인 문제들을 극복하고자 TypeScript를 도입한 것이다. ✅ 점진적 타입 언어 TypeScript를 사용하는 가장 큰 이유 점진적 타입 언어란? 동적 타입 언어와 정적 타입 언어를 혼합한.. [9주차] Presentational & Container 디자인 패턴이란? 📌 Presentational & Container 디자인 패턴에 대해 설명해 주세요. 👩💻 Presentational & Container 디자인 패턴이란? 로직을 위한 컴포넌트와 UI(view)를 위한 컴포넌트를 분리한 패턴 → 관심사를 2개로 분리한 것! container 내에 데이터를 props를 통해 다른 컴포넌트에 전달한다. view 로직의 분리를 통해 컴포넌트의 재사용성을 극대화시킨다. 💄 Presentational 컴포넌트 UI와 관련된 컴포넌트 state를 직접 조작하지 않는다. state 관련 훅을 사용하지 않는다. container 컴포넌트로부터 받은 props를 통해 로직을 구현한다. → 순수하다. 다른 맥락과 독립적으로, 재사용하기 쉽게 설계한다. 🔧 Container 컴포넌트 .. 이전 1 2 3 4 다음
