콛 다이어리

피그마 작업을 너무 오래했나VSCode가 너무 오랜만이었다. 만들고 있던 프로젝트를 보려고터미널에서 yarn dev를 쳤는데package.json파일을 찾을 수 없다는 오류가 떴다.아니.. 좌측에 있는데;; VSCode도 껐다 켜보고 노트북도 껐다 켜봤는데해결이 안 되서git에서 파일을 받아오기도 해보고새 파일을 만들어보기도 했는데 해결이 되지 않았다. 찾아보니경로에 대쉬 기호가 들어가면 오류가 날 수 있다고 했다.하지만 나는 그렇지 않았다. 내 경우는 yarn init을 해주지 않아서였다. yarn init을 입력하니까 터미널에 계속 질문창이 떴다.질문에 전부 대답을 해주고 yarn dev를 하니정상적으로 내가 원하던 작업이 실행됐다.. (아니 근데 저번까지만 해도 yarn dev가 잘 됐는데갑자기 왜..

미들웨어 (Middleware):요청이 처리되기 전에 실행되는 서버 측 함수요청을 가로채어 인증, 리다이렉션 또는사용자에게 맞는 페이지를 제공하는 등의 작업 수행역할1. 사용자 인증2. 권한 검증3. 페이지 리다이렉션   1) 권한이 없는 사용자를 로그인 페이지로 리다이렉션   2) 다른 적절한 페이지로 안내4. 요청 정보 변경   1) 요청 객체의 내용을 변경하거나 추가 작업 수행

import { useEffect } from 'react';function Today() {  useEffect(() => {    console.log("우리는 코사녀들이에요 ㅎㅎ")  })  return (    div>Hello, world!div>  )}export default Today; 전체보기 라는 p태그를 누르자마자콘솔창에 "우리는 코사녀들이에요 ㅎㅎ"라고 찍히게 하고싶었다. 테스트용으로 그러면 저렇게 입력해준 다음에원하는 곳에 함수를 호출해주면 된다.

인피니트 콘서트랑 팬미팅으로 되어있는MOCK_DATA 하단도 같은 MOCK_DATA로만들고,전체보기를 클릭했을 때는 MOCK_DATA의하단에 공연 데이터들을 불러와서그리드로 출력을 해주려고 했다. 메일로 받은 KOPIS의 open API 인증키로axios 사용해서 공연 데이터를 가지고 있는공연예술통합전산망 서버에 접근하려고코드를 작성했는데process.env.REACT_APP_API_API_URL이라는 부분에서 자꾸 에러가 났다. 검색해봤더니  vite 프로젝트에서 이런 에러가 생기는 경우,cra에서 쓰는 process.env 가 아니라다르게 가져와야 하기 때문에import.meta.env 라고 써야한다고 한다.  출처https://serene-r.tistory.com/44

오늘 하려고 했던 일은사용자가 검색 텍스트 박스에 검색을 하면검색어를 포함되는 데이터를 출력하는 로직을짜려던 일이었다. 뮤지컬과 연극 사이트에 접속한 뒤,개발자 도구를 누르면 내 API를 볼 수 있다고 해서들어가봤는데 볼 수가 없어서 튜터님께 갔다.내가 완전히 잘못 알고 있었다.. API 키는 그 서버를 사용할 수 있는 사람들에게만 주는 것이고가지고있으면 그 서버를 제어할 수 있는 것이다. 내가 api키를 받고 나서 .env파일에 api키를넣었는데 왜 api키를 숨기는지 궁금했다. 전에 팀플 할 때에도 튜터님들이랑 팀원들이api키 숨기라고 했고, 며칠 전에는같이 공부하는 분이 api가 .env파일에 있지 않아서남들이 보게돼면 깃에 올라가지지 않지 않냐고물어보시기도 했다.. 마침 질문이 생겼다.api키도 ..

튜터님이랑 어제 만들었던 supabase 테이블이Authentication에 있는데VSCode랑 이어져 있지 않아서Table Editor에 가서 Users라는 테이블을 만들었다. 컬럼을 여러개 만들었다.컬럼을 보시더니나중에 비밀번호 컬럼은 지우라고 하셨다. 그냥 궁금해서 왜 냐고 여쭤봤는데개인정보법 위반이라고 하셨다. 신기했다.그래서 아까 낮에 찾아뵀던 튜터님께서비밀번호는 원래 저장이 안 되는거라고 하셨구나..그것도 몰랐넹,, 어릴 때 정보들은 데이터베이스에 저장된다는거 알고데이터베이스 볼 수 있는 사람들은 좋겠다,사람들 정보 보고싶을 때, 찾고싶을 때 볼 수 있어서..막 사람 찾아내서 그사람 정보 알아낼 수 있겠지?그러면 그사람 아이디랑 비밀번호도 알 수 있고그렇게 로그인 해서전화번호랑 사는곳도 찾을 ..

회원가입 이름 텍스트 박스에유효성 검사를 하려고 했다. 1. 국문은 최대 4글자 입력2. 숫자 입력 제한3. 특수문자 입력 제한4. 공백 입력 제한 바닐라 자바스크립트로프로젝트 할 때도 그랬지만생각한 것만큼 너무 안 된다......시간이 너무 오래 걸려서 결국 또튜터님의 도움을 받았는데 튜터님이흐음~.. 하시더니(튜터님) 개인적으로는이름 텍스트 박스에는 입력 길이 조건을두지 않는게 좋다고 하셨다. 우리나라 사람들은 최대 4글자고외국인들 이름은 기니까제한을 두는게 좋지 않을까 싶으면서뭐 진짜 김수안무거북이와두루미이런 이름을 가진 사람이 있나?? 했는데튜터님께서 화면공유를 해주시더니그런 이름들이 있었다...... 정말 많았다...... 그렇게 제한을 두면 이름이 긴 그런 사람들은가입을 할 수 없다고 하시면서..

https://supabase.com/docs/reference/javascript/auth-signup JavaScript: Create a new user | Supabase Docs supabase.com공식 사이트에 힌트는 다 있었다. 좀 더 자세히 볼걸.. 좀 더 찾아볼걸..후회했다. 나는 회원가입으로 사용자를 추가할 것이기때문에Create a user 탭으로 갔고,이메일과 비밀번호로 로그인을 할 것이만서도이름과 비밀번호 확인이라는 추가 정보가 있기 때문에있기 때문에 Sign up with additional user metadata를선택했다. supabase에 초록색으로 되어있는 부분에는내 state를 입력해주면 된다. 이 함수는 회원가입을 할 때,모든 데이터가 들어왔을 때,실행이 되어야 하기..

다른 수강생들이 과제 테스트 해달라고 하면항상 로그인 하는 기능이 있었다.기능이 돌아가는 것도 신기했고,구현한 것, 내 정보를 저장된 것도 신기했다. 나도 할 수 있지 않을까 싶어서 이번에는supabase로 로그인을 구현하기로 했다. 사실 다들 firebase로 구현하라고 하긴 했지만supabase라는 이름이 좀 더 멋져보이기도 했고,튜터님들께서도 supabase를 추천해주셔서supabase로 했다 ㅎㅎ  supabase:안정성이 높고성능과 기반이 좋은 sql 기반 관계형 데이터베이스관계형 데이터베이스:행과 열이 존재하는 것  사용 방법1. supabase 설치하기터미널에 yarn add @supabase/supabase-js 입력 2. VSCode에 .env파일 만들기(파일 제목이 .env)   1. ..

어제 클론코딩으로 하고있는 티켓링크 사이트의로그인 기능에서 사용할 데이터베이스를 만들었다.이름은 'TICKET_LINK'. 강의도 들어보고 인터넷도 찾아봤지만 소용 없었다.(공식문서는 supabase내 DOCS에 있었다왜 supabase mdn이라고 검색을 했을까......;;) 그 전에, 내가 만들었던 데이터베이스를먼저 찾고싶었다. TableEditor로 몇 번을 들어갔는데보이지 않았다. 뭘 잘못 건드렸을까상단에 콤보 박스에서 이것 저것 골라봐도보이지 않아서 좀 전에 튜터님을 찾아뵀는데schema를 'public'으로 해야 나온다고 하셨다..!! 생각해보니까 어제 베이직반 강의 들으면서auth를 공부하면서 변경했던 것 같다,,ㅎㅎ 어제 저 데이터베이스 찾으려고 한 시간을 썼는데;;그래도 원인을 찾았으니..