분류 전체보기 (49) 썸네일형 리스트형 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 사이.. VsCode 에서 Git Bash 쓰다 알면 좋은 점 [1] 내가 폴더로 이동하고 싶을때 $ cd [이동하고 싶은 폴더 구조] # 이전 경로로 이동하고 싶을떄 $ cd - [2] 그 폴더에 무엇이 있는지 알고 싶을 때 # ls : 이 폴더에 존재하는 파일 혹은 폴더를 리스트로 보여줘 andan@DESKTOP-LGLU6E9 MINGW64 ~/OneDrive/바탕 화면/nextjs 알아가기/nextjs-dashboard $ ls app/ package-lock.json scripts/ next.config.js postcss.config.js tailwind.config.ts next-env.d.ts prettier.config.js tsconfig.json node_modules/ public/ package.json README.md # 만약에 숨겨진 폴더.. json-server: command not found ERROR 에러사진 구글링 전에 json-server 가 있나 없나 보려고 버전 확인 명령어 해봄 => 없습니다!!! 그래서 다음과 같이 설치해줌 => 무엇인가 추가가 되더라 다시 해보았더니 에러가 발생 함 그래서 찾아보기로 함 https://velog.io/@code_gg_/json-server-%EC%82%AC%EC%9A%A9-%EC%A4%91-%EC%97%90%EB%9F%AC json-server 사용 중 에러 json-server 사용할 때 에러가 난다면 velog.io 이분 블로그를 참고해서 재시도 하기로 함 이전에 설치된 json-server 제거하기 전역적으로 설치되어있을 가능성이 있어서 uninstall -g로 제거 전역적으로 설치하기 전역적이다라는 것은 군대 전역아니고 , 여기뿐만아니라 전체에 걸쳐.. 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를 맞게만 입력하면 나옵니다. 어려운 점 저는 처음 이용하는.. TIL : 오늘은 무엇을 배웠나? next.js 는 무엇인가? ( 참고 ) Reactjs기반 폴스택 프레임워크 입니다. 프레임워크 00 이렇게 작성하라는 작성법을 공식 메뉴얼로 제시 예시) 스프링 프레임워크 , Vue.js 라이브러리 기능을 하는 덩어릴 뿐입니다. 예시) 리액트에서 리액트 라우터를 설치 받습니다. next.js 프레임워크가 가지고 있는 기능 - API Route를 지원하여 폴스택(프론트 + 백엔드) 개발이 가능해집니다. - 웹 페이지 로딩시간을 줄이는 코드스프리팅이 기본이다. - vercel이 개발하여 vercel 에 배포가능합니다. - fetch를 이용한 요청이 확대되었습니다. next.js 설치하고 샘플 앱 실행하기 ( 참고 ) next.js 설치 관련해서는 next.js 공식 설치 매뉴얼을 이용했습니다. 그리고 다음.. TIL : 오늘은 무엇을 배웠나? VITE 프로젝트에서 .env 설정하기 기존 리액트 프로젝트에서는 다음과 같이 .env 설정을 하였다. (1) .gitignore에 .env 파일이름을 추가한다. 그러면 깃허브에 .env 파일을 안올림으로써 노출이 안됩니다. (2) 리액트에서는 .env 파일에 다음과 같이 작성합니다. REACT_API_SERVER_URL = " 내용 " VITE 는 여기서 (2)번만 다름니다. 다음과 같이 작성합니다. # 다음과 같이 VITE...으로 시작합니다. VITE_API_SERVER_URL = " 내용 " 이전 1 2 3 4 5 다음 목록 더보기
