아니원개발기록장━ ✩・*。

POST ✏️..:¨·.·¨:

• 

  📂 에러로그 라이브러리 사용하기 전에 꼭! 버전 체크하기 💥 상황: 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 컴포넌트 ..