🧡 (미완성으로 다시 제대로 작성할 예정입니다 ㅠ_ㅠ) 팀원들에게도 배울 점이 많았고 새로운 시도로 뿌듯했던, 감사한 프로젝트 !! - 프로젝트 명 : Utrend (유트렌드) - 프로젝트 간단 소개 : 광고주가 자신의 광고를 효과적으로 전달할 수 있는 유튜버를 찾을 수 있도록 도와주는 사이트로, 유튜브 api를 활용해 만들었습니다. - Github 주소 링크 : https://github.com/Sparta-outsourcing-Project/Sparta-outsourcing-Project - 배포 주소 링크 : https://nbc-outsourcing-project-utrend.vercel.app/ Utrend nbc-outsourcing-project-utrend.vercel.app 담당 기능 :..

이전 팀프로젝트에서는 BaaS로 firebase 만 써봤었는데 이번 프로젝트에서  supabase를 처음으로 써보게 됐다. firebase가 사용하기 편리한 거 같아 supabase는 어렵지 않을까 고민이 있었지만 supabase가 익숙해지기만 하면 정말 좋다고 들었는데 이번 기회에 사용하게 되어 설렌다ㅎㅎ 간략하게 supabase에 대해서 알아보고 DB를 생성해 데이터를 불러오는 과정도 조금 써보기로! 💚 1. Supabase 란?  firebase (파이어베이스) 의 대안으로 인기를 얻고 있는 *BaaS 플랫폼이다. PostgreSQL 기반의 SQL DB 기능, REST API 등의 기능을 오픈 소스로 제공 firebase만큼 편리하면서도, firebase가 못 갖춘 장점을 지니고 있다.RDB(Re..

0319 next.js 심화프로젝트 팀장님과 함께 프로젝트 초기 셋팅을 하면서 Next.js 프로젝트를 생성했다. 강의에서 배운건 npx create-next-app 명령어 였지만, 이후 튜터님은 yarn add 등으로 라이브러리를 설치하셨고 ㅠㅠ 이런 경우 package.lock.json 과 yarn.lock 모두 생겨서 충돌이 있지않을까 우려되었담.. (그전에 충돌이 나서 지운 적이 있었기 때문에..) 물론 이전에도 yarn create 로 할 때 yarn 에서의 문제가 있어 npx create 를 권고하셨었지만 다들 yarn 을 많이 쓰고 있기도 하고.. ! 그래서 yarn create next-app 을 해보기로 했다. 🪄 1. yarn 으로 create next-app 하는 방법 알아보기 1) ..

1

24.3.15 🫧 배운 Next.js의 개념을 토대로 간단히 만든 To Do List 프로젝트 기간: 3.12 ~ 3.15 인데, 사실 구현자체는 빨리 끝냈던 거 같다. (근데 그 뒤에 json-server - vercel 배포를 시도하다가 오류가 나고... localhost를 127.0.0.1로 바꿔보다가 CORS 에러를 접해서 ㅠㅠ 이를 해결해보고있는 중이다.. ) 0) 홈 메인 페이지 1) About 페이지 SSG로, (fetch 옵션 - force-cache, 혹은 설정 안해도 됨) 만들어 build 시의 데이터로 고정되어 렌더링. 회사정보에 대한 데이터를 가져와서 보여준다. (companyInfo - image, name, description) * 서버 컴포넌트이기 때문에, 바로 json-se..

3.14

Next.js 과제를 하며 SSG 렌더링으로 About 페이지를 만들어야 했다. (회사 소개 페이지) 그런데 테스트를 위해 npm run dev (yarn dev) 로 로컬 서버를 통해 확인하다가, DB 데이터 (json-server 의 db.json) 를 변경했는데 (과제에선 json-server 를 활용 - 원래 BaaS이지만 이 과제에선 임의로 DB로 삼아서 쓰고있다) 변경된 데이터가 반영되지 않았다 .. 😥 이는 SSG 렌더링 특성 상 force-cache 로 캐시가 저장되어 유지되기 때문인데, 간단히 캐시 파일 삭제하는 법을 알아보자. 저번 글에서도 정리했지만, SSG를 다시 설명해보자면 🪨 SSG (Static Site Generation) 웹 렌더링 방식은 빌드 타임때 미리 페이지를 렌더링 ..

0312 !

0311 ✍️ 🔮 Next.js 의 기본 소개 Vercel에서 React.js를 기반으로 만든, 웹 개발을 위한 프레임워크 Route Handler를 통해 백엔드를 다룰 수 있어, 풀 스택 웹 개발이 가능 + 여기서 프레임워크란? 개발자가 기능 구현에만 집중할 수 있게 필요한 모든 프로그래밍적 재원을 지원하는 '기술의 조합'으로, 별도의 셋팅을 개발자가 할 필요 없이 프레임워크가 다 알아서 해줘서 편리하게 개발할 수 있다! Ex ) Next.js, 혹은 JS기반 웹 FE SPA 프레임워크들인 Vue.js, Augular.js 등) + 이에 반해 라이브러리는 공통 기능의 모듈화가 이루어진 프로그램의 집합. 개발자의 별도 셋팅이 필요하며, 프레임워크보다 기능적으로 부족하다고 할 수 있다. 예를 들어, Rou..

0309 💎 🪄 TypeScript 사용해 To-Do List 만들기 - props-drilling 방식 튜터님의 답안 코드를 살펴보자! 하지만 뭔가 코드에서 잘못 된 것인지 에러가 떠있었고 ㅠㅠ 내가 코드 수정해서 해결하긴 했다. 강의에서와 달리 hook을 만들어 사용해서 강의 때 코드와 다르기도 했다. 답안 코드의 to-do list 는 간소화된 투두리스트라 todo는 id, title, isDone(완료여부) 의 key들로만 간단히 구성됨. App.tsx > TodoList.tsx 컴포넌트 > TodoItem.tsx 컴포넌트 방식으로 속해있다. TodoList가 거의 메인이다. 이 컴포넌트에서 hook을 import해 사용하며, TodoItem으로 이 hook에서 받은 리턴값을 props 형태로 전..