본문 바로가기

분류 전체보기

(140)
[TIL__LoL_트러블슈팅(2)] 3/13 1. 이미지가 안 나와요!아이템의 이미지를 화면에 렌더링하기 위해 라이엇 공홈에서 제공하는 url를 사용해서 넣어줬다하지만 이런 에러를 만나게 되었다url의 마지막 부분에 이미지의 아이디를 넣었을 때 이미지를 잘 가져오는지 테스트 해보았다이상이 없다해결 : 에러메시지에 적혀있는 see more info(https://nextjs.org/docs/messages/next-image-unconfigured-host)를 따라갔다이미지를 사용하기 위해서는 next.config.js를 수정해야한다는 것을 알게 되었다module.exports = { images: { remotePatterns: [ { protocol: 'https', hostname: 'assets.exa..
[TIL__LoL_트러블슈팅(1)] 3/12 fetch는 했는데,,,, SSG로 만드는 페이지부터 만들어야겠다 하는 생각으로 items의 목록을 보여주는 페이지를 시작했다Riot API에서 items목록을 주는 api를 찾아서 목록을 가져왔다description이 이상하게 나와서 이름만 가져왔다이렇게 이상하게 나와서 일단 중요한 이름, 그리고 이미지를 가져와야 한다아이템리스트를 가져올 때 버전을 명시해줘야 해서 최신 버전을 가져오는 함수를 만들어서최신 버전의 아이템리스트를 가져올 수 있도록 했다이미지 가져오는건 내일,,,
[TIL] 3/11 next.js(2) 4가지 렌더링 1. 클라이언트 사이드 렌더링 CSR(Client Side Rendering) - 페이지의 정적인 부분만 서버에서 생성하고, 데이터는 클라이언트에서 자바스크립트를 통해 동적으로 렌더링 장점 :  - 서버의 부담 감소  - 최초 한번 로드가 끝나면 사용자와 빠르게 상호작용 가능  - 서버에게 추가적인 요청을 보낼 필요가 없어 사용자 경험이 좋다 단점 :  - 첫 페이지 로딩시간(Time To View)이 길 수 있다  - js가 로딩 되고 실행될 때까지 페이지가 비어있어 검색 엔진 최적화(SEO)에 불리하다 'use client';import { useEffect, useState } from 'react';export default function Page() { const [data, setData]..
[TIL] 3/10 next.js next.js는 공장이다공장에서 일을 하려면 정해진 규칙을 따라야 한다. next도 마찬가지이다 정해진 규칙이 있고 그걸 따라서 하기만 하면 된다 page를 만들려면 먼저 폴더를 만들고 그 안에 page.tsx를 넣어야 한다 다른 파일명을 넣으면 안된다같은 폴더 안에 layout를 넣으면 이 layout은 같은 폴더 안에 있는 page에만 적용이 된다 detail/id와 같은 파일을 만들고 싶다면 detail폴더 안에 [id]폴더를 만들고 그 안에 page.tsx를 만든다그리고param을 이용해서 id값을 가져온다 즉 폴더 = 라우팅이다그럼 어떤 폴더가 라우팅되지 않으면 좋겠다면? 폴더명을 괄호로 감싸주면 오로지 폴더의 역할만 하고 라우팅되지 않는다
[TIL] 3/7 TS(제네릭)! TS를 익히고 아직 사용이 익숙하지 않은 TQ와 Justand를 연습하기 위해TS, TQ, Justand, Axios를 사용해서 투두리스트를 만들어보기로 결심!쉽지 않을 것 같다어디까지 타입을 넣어줘야하는지도 아리송한 상태,,1. axios를 통해서 받아오는건 앞에 Axios를 붙여준다!axios.get의 반환 형식은 AxiosResponse이다여기에 내가 넣은 값 Todo[]가 들어갔다2. 제네릭이란 무엇일까?제네릭은 보통 T를 많이 사용한다. 아니면 주로 대문자 하나(R, S, U,,,,)제네릭은 타입을 변수화한 것으로 생각하면 쉽다! 우리가 보통 함수에서 인자를 받아서 사용할 때의 그 인자. 혹은 매직넘버를 상수화해놓은 변수라고 생각하는게 나는 이해하기 쉬웠다function toArray(a: T,..
[TIL] 3/6 새로운 주차, 새로운 팀 심화주차가 끝이 나고 주특기 플러스 주차가 시작되었다이번 주차에서는 TS와 Next.js를 배운다ts,,,,타입 명시만 하면 되겠지 가볍게 생각하고 시작했는데 타입 명시를 이렇게나 다양하게 할 수 있구나를 느꼈다 이번 팀에서는 내가 리더를 맡게 되었다단순히 팀내 유일한 E라는 이유로,,,,사실 한번쯤을 해보고 싶었는데 이렇게 일찍 하게 될 줄 몰랐다근데 다시 생각해보니 이번 팀플이 끝나고 다음 팀플은 최종 팀플이라 규모가 너무 커서 이번이 시도해보기 좋은 타이밍인 것 같기도 하다솔직히 부담이 꽤 많이 되기는 하지만,,,나는 너무 부족한데 내가 어떻게,,,제일 부담이 되는 부분은 프로젝트 세팅 부분이라서 미리미리 노션에 정리해두고 있다이전의 팀플에서 팀장님들이 보여줬던 세팅을 생각하며 나도 열심히 해야지
[TIL] 3/5 KPT 회고 🔄 KPT 회고✅ Keep (잘한 점)naver api의 가이드를 사용하는 것에 어려움을 겪었지만 포기하지마 않고 끝까지 기능 구현을 해냈다.UI 컴포넌트 만들어서 각자 사용할 수 있어서 좋았습니다.커스텀 훅, 컴포넌트를 생성하면서 뷰와 비즈니스 로직을 분리해 볼 수 있었다.적극적인 소통을 통해 팀에 대한 협업을 느껴볼 수 있었다.ISSUE와 PR에 대해 리뷰를 꼼꼼하게 해주고 팀 컨벤션을 잘 따라 주어서 협업이 수월했다.Git Flow 전략을 사용하여 파일을 병합할 때 충돌을 최소화했다.❌ Problem (문제점)static Map api를 완료하지 못한 점이 너무너무 아쉬웠습니다…CORS를 해결하려다 소비한 시간이 아까웠습니다. 조금 더 완성도를 높일 수 있었는데!폴리라인과 마커에 대한 상태관리를 ..
[TIL__MapMory_트러블슈팅(1)] 2/27 네이버 지도 API는 어려워 1. React : index.html에서 환경변수 사용다른 파일에서는 환경변수 사용하려면 ${import.meta.env.환경변수명} 이런식으로 사용했었다하지만 index.html에서는 불러와지지 않았다html 파일에서는 해당 부분을 %로 감싸주고 환경변수명만 사용하면 된다는 것을 알게 되었다이렇게 넣어주니 값이 잘 들어가는걸 볼 수 있었다 참조:https://velog.io/@hahbr88/React-index.html%EC%97%90-%ED%99%98%EA%B2%BD%EB%B3%80%EC%88%98-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0 React : index.html에 환경변수 적용하기자바스크립트 파일에서는 아래와 같은 방법으로 .env 파일안에 있는 환경변수를 불러왔..