TIL (24) 썸네일형 리스트형 오늘 내가 진행한 것 깃에서 나의 브랜치를 바꾸고 싶다면.... branch -m 명령어를 이용해봅시다. > git branch -m 프로젝트 계획을 다음과 같이 잡았습니다. https://fresh-border-4d5.notion.site/Todo-Calender-789e797d0bcf4c959975795cfd5dafd0 Todo Calender | Notion 어디서 감명 받았나? fresh-border-4d5.notion.site json-server 시작 명령어 간편화 & 실행 점검 제가 블로그에 작성했던 글을 참고하였습니다. [1] 다음과 같이 등록한 이유는 json-server 실행 명령어를 일일이 타이핑하는 것을 방지하기 위해서 다음 명령어를 사용했습니다. 그리고 db.json를 안하면 안됩니다. 그러면 다음과 .. Nextjs + Supabase와 연결하기 / 데이터 뿌려주기 Supabase 프로젝트가 생성되었다고 하고 Nextjs 에서 Supabase 데이터를 불러오시죠 들어가기전에 Supabase에 대해서 알아보시죠 [ 1 ] Supabase 란? 수파베이스는 PostgreSQL 데이터베이스를 기반으로 하며 데이터베이스, 인증, 파일 스토리지, 서버리스 기능 등을 제공 f하는 오픈 소스 플랫폼입니다. [ 2 ] Supabase 설정하기 ( 1 ) VsCode 프로젝트를 세팅 / supabase 가입 하고 프로젝트 생성해주세요 ( 참고 를 기반으로 해주세요 ) [ 3 ] env.local 생성 프로젝트 루트 디렉토리에 생성해주셔야 합니다. 그리고 .gitignore에 다음과 같이 등록해주세요 env.local 파일 만들어주고 , 서버 URL 과 API 키를 작성해주세요 다음.. 오늘의 정리 nextjs 설치 중 다음과 같은 에러 PS C:\Users\andan\Desktop\today> npx create-next-app@latest Need to install the following packages: create-next-app@14.1.4 Ok to proceed? (y) y √ What is your project named? ... my-app The directory my-app contains files that could conflict: .prettierrc db.json node_modules/ package-lock.json package.json public/ README.md src/ Either try using a new directory name, or remo.. TIL : RTK 이용하기 RTK는 왜 나왔을까? RTK 공식 문서에 따르면 "Configuring a Redux store is too complicated" 리덕스에서 세팅하는데 복잡하다. "I have to add a lot of packages to get Redux to do anything useful" 리덕스에서 사용하려면 많은 패키지가 필요합니다. "Redux requires too much boilerplate code" 리덕스는 많은 보일러플레이트 코드를 요구합니다. 3가지 이유 덕분에 세상에 나오게 되었습니다. 그리고 또한 리덕스를 좀 더 간편하게 사용하는데 도움을 주는 도구모음이라는 것도 알게 되었습니다. 리덕스 툴킷 들어가기 ( 0 ) 설치하기 $ npm install @reduxjs/toolkit (1) .. TIL : 내가 오늘 이것을 이루었구나!!!! supabase 데이터베이스로부터 데이터 받아오기 시도해본것 1 . supabase에 있던 대로 따라해보기 참고 NEXT_PUBLIC_SUPABASE_URL , NEXT_PUBLIC_SUPABASE_ANON_KEY 가 이거였습니다. 로 했더니 data : [] , error : null 이 뜹니다. 그래서 각가지 생각을 해본게 - 네가 테이블 명을 잘못 작성했나? => NO - DB의 테이블에 데이터가 존재하는가 => NO - 나의 .env가 잘못되었나 => NO 그래서 생각한게 분노의 구글링이였습니다. 그러다가 저람 동일하게 에러를 발견하신 분의 블로그를 발견했습니다. https://velog.io/@dram26/ComAround-Supabase-%EC%97%B0%EA%B2%B0-data-null-%E.. 오늘을 무엇을 하였나? 프로젝트 S. A 문서를 작성 우리가 기술스택을 무엇으로 할것인지.....향후 앞으로의 계흭이 어떻게 될 것인지...... 피그마 디자인 을 나 혼자가 아닌 팀원분들과 같이 하면서 잘못 작성해서 삭하기도하고 .. , 서로 피드백을 해주기도하고 오늘은 무엇보다도 팀원분들과 함께한 이 순간을 기억하기 위해서 기록으로 남겼습니다. Github에 올린 내 작품 돌아보기 애써 지난것인데 왜 회상을 하는가 과거를 둘러보면서 내가 잘못했었던 점을 통해 다시 하지 말아야겠다를 배우고 , 튜터님의 피드백으로 잘한 것은 칭찬하며 나중에도 이렇게 적용을 해보기 위해서 입니다. React_personal [1] 축약어를 사용한 점 처음에는 todo 대신에 tD를 이용하였습니다. 그래서 사람들이 할일목록을 나타내는 것인지 , tD를 나타내는 것인지 혼란스러웠습니다. 그래서 저는 todo로 바꾸었습니다. [ 2 ] 디자인 구현사항을 놓친 것 react_letter [1] style이라는 폴더가 하나는 대문자 / 소문자로 중복되어있는 경우 기존 프로젝트에서 쓰이는 Style 폴더만 존재하게 하기 , 깃허브 저장소에서 style 파일 제거해주기!!! [2] 위 React_personal [.. TIL : 리액트와 인사하기 - 2 https://devpost.tistory.com/98 TIL : 리액트와 인사하기 - 1 리액트에 대해서 무엇이라고 말하는가? 리액트 공식문서에 따르면 A JavaScript library for building user interfaces 입니다. 이말은 즉 리액트는 사용자가 보는 웹 또는 앱 화면을 구축하는데 사용되는 라 devpost.tistory.com 1. JSX 태그 JSX로 이루어진 요소가 한개이상이라면 6 , 7 번째 줄 코드를 다음과 같이 묶어야합니다. 의 축약 표현입니다. 그리고 리액트는 return문안에서 반드시 하나의 최상위 태그만 존재합니다. 앞에서 말한것이 가능하게 도와주는 태그입니다. 데이터를 사용자 화면에 뿌려지게 도와주는 {} (증괄호) App 컴포넌트와 return 사이.. TIL : 리액트와 인사하기 - 1 리액트에 대해서 무엇이라고 말하는가? 리액트 공식문서에 따르면 A JavaScript library for building user interfaces 입니다. 이말은 즉 리액트는 사용자가 보는 웹 또는 앱 화면을 구축하는데 사용되는 라이브러리 라는 것입니다. SPA는 무엇이고 , 그전에는 어땠는가? 갑자기 왠 SPA??? , 리액트 위키백과에 따르면 SPA 와 모바일 어플리케이션 개발에 이용된다고 들었습니다. 그래서 SPA는 무엇인가요 . 그전에는 어떤 방식으로 했나요 SPA는 싱글 페이지 어플리케이션의 약자이며 , 영어 그대로 보여지는 페이지(ihtml)가 하나라서 SEO에 약함니다. 하지만 , 우리가 좋아요를 눌러도 새로고침없이 반영되기 때문에 그 점은 좋습니다. 그 전에는 웹페이지에서 좋아요를 누.. TIL : 오늘 내가 발견한 것은 Next.js 에서 환경변수 파일은 어떻게 설정하는가 ? env 파일은 왜 필요할까요? 그냥 url써도 되는데 왜 구지 있어야 될까를 생각해보면 , 나는 여기에 사용자의 소중한 정보 ( 비밀번호 , 유저 정보) 를 가지고 있기 때문에 그것을 보존하기 위해서 필요하다고 봅니다. NEXT_PUBLIC 으로 접근합니다. 다음과 같이 process.env 를 이용해서 접근합니다. // NEXT_PUBLIC_TODO_URL = "경로" process.env 를 이용해서 접근합니다. tailwindCSS 태어나서 난생 처음으로 tailwindCSS를 사용하였습니다. 느낀점 CSS까지 맞아야하는 개발자들의 피로를 덜어줄수 있다고 생각합니다. className를 맞게만 입력하면 나옵니다. 어려운 점 저는 처음 이용하는.. 이전 1 2 3 다음
