본문 바로가기

TIL

 (100)
렌더링 패턴 SSG, SSR, CSR, ISR ■ SSG (Static Side Generation)▸ 특징 ➜ 미리 html 파일을 만든 후 브라우저에 보여주는 형태의 렌더링 방식, 최초 빌드 시에만 생성이 됨 (* 사전에 미리 정적 페이지를 여러 개 만들어놓음 → 클라이언트가 홈페이지 요청을 하면, 서버에서는 이미 만들어져있는 사이트를 바로 제공! → 클라이언트는 표기만 함)▸ 장점 ➜ 첫 페이지 로딩 시간이 매우 짧아(TTV) 사용자가 빠르게 페이지를 볼 수 있음, SEO에 유리, CDN(Content Delivery Network) 캐싱 가능▸ 단점 ➜ 정적인 데이터에만 사용할 수 있음, 사용자와의 상호작용이 서버와의 통신에 의존하므로 클라이언트 사이드 렌더링보다 상호작용이 느릴 수 있음, 또한, 서버 부하가 클 수 있다, 마이페이지 처럼 ..
Typescript 개념 공부 🧐 느낀점오늘 타입스크립트를 처음 접했는데, 타입스크립트로 타입을 어노테이션 해줌으로써 실수없이 안정적으로 개발을 한다는 것이 어떤 뜻인지 조금 알게된 것 같다. 개발은 정말 배움이 끝이 없는 것 같고 공부하면서도 누가 이렇게 만들어낸건지, 신기한 분야라는 생각이 든다.
아웃소싱 팀 프로젝트 ⑥ - 마무리, 회고 ■  KPT 회고☀︎ Keep - 현재 만족하고 있는 부분PR에 피드백 잘 남겨준 것기획 내용을 다 구현하기 위한 업무 분담이 잘 이루어졌다.컴포넌트 별로 구분을 잘 해서 팀원과의 머지 할때 충돌이 크지 않았다.깃 컨벤션이 잘 지켜졌다.서로 배려하며 좋은 분위기의 협업이었다.발생한 문제가 팀원에게 먼저 공유가 되고, 함께 고민 후 해결했던 점이 만족스러웠다. ☀︎ Problem - 불편하게 느끼는 부분프로젝트 초기 세팅의 부족으로 팀원 간 버전 차이가 있었다.초반에 깃허브로 작업상황이 잘 공유되지 않았다.기능구현은 기획대로 구현되었지만 화면 ui에서 아쉬움이 남았다.시간이 부족해 로직분리를 모두가 경험해보지 못한게 아쉽다.공통된 컴포넌트(예-버튼)을 분리해서 재사용하지 못했다.리드미 내용이 부족한 것 같..
아웃소싱 팀 프로젝트 ⑤ - 모달창에 지도 불러오기 드래그 동작을 막아놓은 피드의 지도부분을 클릭했을 때 큰 모달창이 뜨면서 드래그, 확대축소가 가능한 지도가 출력되도록 하고 싶었다. ■ 모달 기본 틀 만들기이전에 자전거 경로를 선으로 표시한 지도와 동일한 지도를 불러오게 되므로 동일한 코드를 부모 컴포넌트에 옮겨서 함수로 감싼 뒤 피드의 지도, 모달창의 지도 각 컴포넌트에 props로 내려주었다.지도 생성함수인 showMap을 useEffect 로 감싸서 컴포넌트가 렌더링 되고 실행되도록 하였고 모달 기본 틀을 만들어 주었다.// Posting.jsxconst Posting = () => { const { kakao } = window; const [modalOpen, setModalOpen] = useState(false); // 지도 생성 함수..
아웃소싱 팀 프로젝트 ④ - Infinite Scroll 피드에 게시물들이 쌓이게 되었을 때 모든 게시물을 한번에 가져오는 것 보다는 사용자가 스크롤 할 때마다 새로운 게시물을 불러오는 것이 좀 더 효율적 일 것 같아 useInfiniteQuery를 이용하여 무한스크롤을 구현했다.useQuery의 페이지와 옵저버 상태 관리를 useInfiniteQuery가 알아서 해줌으로써 관리와 유지보수가 편리하다. ■ 무한스크롤☀︎ 최종코드컴포넌트 하단에  를 추가하여 div가 옵저버 역할로 다음페이지를 가져올지 여부를 판단한다!// feedApi.jsexport const getFeedPages = async ({ pageParam = 1 }) => { const response = await feedInstance.get(`/feed?_sort=created_time..
아웃소싱 팀 프로젝트 ③ - 카카오맵 api 로 자전거 경로 지도 출력 ■  카카오맵 api 활용해서 지도 불러오기(1) 카카오 디벨로퍼스에 가입 및 앱 생성 후 앱키(javascript 키) 를 받아서 index.html 에 추가해주었다.     (key 는 .env.local 파일에 환경변수로 만들어서 사용!)  (2) 사용할 컴포넌트 안에서 지도 불러오기https://apis.map.kakao.com/web/sample/basicMap/카카오에 api 가이드가 잘 정리되어 있어서 참고해서 쉽게 지도를 불러올 수 있다.// 예시코드var mapContainer = document.getElementById('map'), // 지도를 표시할 div mapOption = { center: new kakao.maps.LatLng(3..
아웃소싱 팀 프로젝트 ② - 기능구현(따봉) 피드 게시물의 따봉 버튼을 클릭했을 때 숫자 1이 올라가고 색깔이 채워진 손모양이 나오도록 구현하고자 했다. 🚨 발생한 문제patch 메서드로 db.json에 있는 thumb 데이터를 수정하고자 했는데 patch 는 실행이 되었지만 페이로드가 빈값이어서 값 변경이 안되었다. 값 전달이 어디서 잘못되었는지 한참 헤맸다. 작성했던 코드// json-server 에 patch 로 api 통신한 코드export const updateThumb = async (FeedId, newThumb) => { await feedInstance.patch(`/feed/${FeedId}`, newThumb);}; 버튼의 onClick 이벤트에 addThumb(currentFeedId, { thumb: thumbCount ..
아웃소싱 팀 프로젝트 ① - 기획 ■  프로젝트 기획 ⚬  프로젝트 명 : RIDERS  - 자전거 라이딩 경로 추천 및 종주 정보 기록, 경로 근처의 공중화장실 등 편의시설을 함께 알려주는 브라우저 앱 먼저 지도 API, Youtube API, 설문조사(스프레드시트) 중 하나를 택해서 어떤 브라우저를 만들지 회의를 했다.우리 팀은 세가지 중 지도 API 를 선택했고 네이버 / 카카오 / 구글 지도 중 카카오 지도를 선택했다.국내 사용자를 대상으로 앱을 만들 예정이라 구글 지도는 다소 국내친화적이지않으므로 배제했고 네이버와 카카오를 비교했을 때 여러가지 기능들이 가이드로 좀 더 잘정리되어있는 카카오 지도 API 를 사용하기로 결정했다.  ⚬  와이어프레임 제작 및 역할배분  - 랜딩페이지, 메인페이지, 모아보기, 마이페이지, 로그인/회원..

티스토리툴바