TIL

이번주차 과제는 귀여운 포켓몬 도감을 만드는 일! next.js를 많이 사용해보지 않아 어색하고 모르는 부분도 많지만, 그만큼 트러블 슈팅 회고할 내용이 많아지니 좋은 게 아닐까? next.js는 알아갈 내용이 너무 많아서 요즘 하루하루가 새롭다. 이 글을 작성하고 있는 새벽에도 방금 전까지 오류와 싸우고 왔다...(이겼지요~)외부 이미지 사용 에러이렇게 외부 API를 사용하여 포켓몬들의 리스트들을 격자형태로 만들어주는 것이 시작이었는데, 정적인 이미지 파일이 아닌 외부의 이미지 파일을 사용하려니 아래와 같은 에러가 생겼다 왜 이런 오류가 생길까?next/image는 성능 최적화를 위해 이미지 로딩을 관리하는 컴포넌트로, 이미지 호스트를 명시적으로 지정해야 한다. 이를 통해 외부 이미지 URL을 사용할 ..

타입스크립트를 넘으니 next.js가 반갑게 맞이해준다... 이것도 얼른 해봐야지 ※ laytout.tsx에 과 는 있는데 가 없는이유  - metadata라는 정해진 이름의 변수 => 즉, 메타데이터에 의해 설정되거나, next.js로 인해 이면에서 자동으로 설정됨※ components 폴더 위치: next.js 공식문서에서는 다양한 방법의 폴더구조를 소개함. 선호되는 것은 app 폴더 밖에 위치시키는 건데, 그러면 app 폴더를 라우팅과 그에 관련된 일에만 사용할 수 있기 때문임. ※ next.js의 보호된 파일명: 이 파일명들은 app 폴더 내부에서 생성될 때만 특별한 역할을 하며, app 폴더 외부에서는 특별한 방식으로 처리되지 않음.   - page.js: 신규 페이지 생성  - layout.j..

오늘 한 일1. [개인 과제] api와 컴포넌트 useEffect 내 중복 try~catch 문 제거2. [개인과제] loading, error 상태에 따른 안내문 추가3. [연습] Next.js + typescript + tailwind css로 미니 프로젝트 시작 typescript와 next.js를 비교적 많이 사용해보지 않았고, 역시 맨땅에 헤딩하는 것이 가장 빠르게 실력을 늘리는 길 같아서 일단 무언가 시작했다. 주말까지 투자해서 무언가 의미있는 성과가 있었으면 좋겠는데, 요즘 세운 계획이 순탄하게만 굴러가지 않아 아쉬운 하루하루

매일 여러 개발 글을 탐험하다가 본 Toss Frontend Accelerator 프로그램. 정말정말 좋은 기회고 되면 좋겠다 싶지만 테스트도 있고 커피챗까지 있는 걸 봐서 지원하고, 지원한 모두에게 주어지는 테스트를 맛볼 수 있는 기회이기에 지원해 보았다.최근 기술 공부만 하느라 너무 늦게 글을 발견해서 마지막 문항을 채우지도 못하고 제출해서 마음을 이미 비웠지만, 그래도 토요일에 재밌는 테스트를 볼 수 있으면 좋겠다!! 어떤 문제가 테스트로 나올지 기대 가득한? 더 성장할 수 있을 것 같은 기회가 지원서도 제대로 마무리 못한 채 막을 내려 아쉽지만 지금 산더미처럼 쌓인 공부거리나 열심히 해야겠다..그래도 지원 문항에서 스스로를 되돌아보고, 어떤 개발자가 '잘하는 개발자'일지 고민도 해보고, 2024년..

오늘의 알고리즘으로 풀어본 문제!문제 풀이를 위한 생각1. 많은 부서의 물품 구매하려면? -> 신청한 금액이 적은 부서부터 처리2. 신청 금액 별로 정렬하려면? -> sort() 사용(오름차순) -> 시간 복잡도 n log(n)3. 예산에서 정렬된 부서별 신청 금액을 순차적으로 삭감   3-1. 예산이 소진된다면 순회 끝내기 문제 풀이처음 생각한 대로 코드로 작성하니 정상적으로 잘 작동하였다. for문을 쓸지 다른 내장함수를 사용할지 고민했는데, 3-1 예산이 소진될 경우 순회를 끝내기 위한 로직을 넣기 위해선 for문이 좀 더 효과적이라 생각하여 사용하였다.

이번주는 타입스크립트에 익숙해지는 시간인데, 하도 예전 프로젝트에서 타입스크립트 때문에 골머리를 앓았던 기억이 있어 더 열심히 살아야 하는 한 주가 될 것 같다.구현 자체는 간단해보이나, api를 타입스크립트를 적용해 가져오는 걸 연습해 보라고 하시는 건지 api 개수가 많다... 그런데 api에 필요한 값만 타입을 지정하면 될 것 같은데, 모두 한 번 연습차 써봐야 하나 고민 중이다.

2024.06.17~21, 5일 동안 진행된 아웃소싱 프로젝트프로젝트 주요 내용: https://github.com/hyeonseok98/3-feet 상세 페이지를 맡으며팀원들끼리 기능 역할분담을 하며 상세 페이지를 맡았을 때는 그렇게 어려운 작업 없어 보여서 '금방 끝나겠네'라는 생각을 조금 했었다. 하지만 디테일을 하나 둘 챙기다 보니 결코 작업량이 적지 않았다. 이렇게까지 디테일적인 부분을 많이 챙겨본 것은 처음이지만 확실히 꼼꼼할수록 사용자의 편의성이 크게 향상되는 것 같았다. 디테일 1. 상세페이지를 모달로?말 그대로 상세 '페이지', 어제자 TIL에 썼듯 지도 api와 숙소/맛집 api를 활용하는 페이지에서 사용자는 여러 숙소나 맛집 정보를 빠르게 확인하고 싶을 텐데 매번 페이지를 이동하게 되..

Query String구상한 와이어프레임을 보면 MAP 페이지에는 지도 api와 숙박/맛집 정보를 가져오는 api까지 사용하여 서버와 통신할 일이 많은 작업이 포함되어 있어, 디테일 페이지로 이동하고 다시 돌아오면 괜한 로딩시간만 더 생기지 않을까 생각하였다. 때문에 디테일 페이지를 모달 형태로 띄워 뒤에 지도나 숙박/맛집 정보는 리렌더링 되지 않도록 하는 방법을 선택하였다.다만 이럴 경우 모달을 띄운 상태로 새로고침을 하게 되면 모달 창이 유지되지 않기에 튜터님의 도움을 받아 query string을 이용해 주소값을 부여하였다.