콛 다이어리

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키도 ..

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. ..

6살이었나?스크롤을 내리다가우측 하단에 화살표가 있길래무심코 눌렀는데브라우저 맨 위로 쑤욱 올라가는게너무 신기했다. 스크롤을 쭉 내리고 버튼을 누르는 것만몇 번을 했는지 모른다. 그 때는 '개발자' 라는 직업을 몰랐기에우측 하단에 있는 화살표 버튼을 누르면맨 위로 올라가게 해주는컴퓨터랑 나만의 약속인 줄 알았다. 오늘 티켓링크 개인 프로젝트 하면서그 때 그 기억이 갑자기 생각이 나기도 했고사용자 측면에서도 그 기능이 있으면좋을 것 같기도 해서(스크롤이 있어도 스크롤을 올리는 것 보다버튼을 누르는 게 더 편하다고 생각한다.)만들어 보았다. window.scrollTo 를 사용하면 된다. // 상단으로 올라가게 해주는 함수const GoToTop = () => {  window.scrollTo({ top: ..

KOR ▼ 버튼을 만들었고자식으로 ENG                JPN                CHN 버튼을 만들었다.KORBtn onClick={(e) => ShowLocalMenu(e)}>             KOR ▼            {localMenu && (              KORBtnSubUl isVisible={localMenu}>                KORBtnSubLi>                  ApplyInLinkTag to="https://www.ticketlink.co.kr/global/en">                    ENG                  ApplyInLinkTag>                KORBtnS..

로그인, 아이디 찾기, 비밀번호 찾기, 회원가입비즈니스 로직(form validation)을 만들 때내가 제일 신경쓰는 부분은마지막 텍스트 박스에서 값을 입력하고 나서enter를 쳤을 때, 버튼(로그인에서는 로그인 버튼,아이디 찾기 에서는 아이디 찾기 버튼,비밀번호 찾기 에서는 비밀번호 변경 버튼,회원가입 에서는 회원가입 버튼)이자동으로 클릭 되는 부분이다. 내가 다른 웹 사이트에서 사용하면서편하다고 생각했던 부분이기도 하고그 기능을 만들어준 개발자에게 고맙다고생각이 들기도 했기 때문이다. 그래서 오늘은마지막 텍스트 박스에서 엔터치면다음 인풋으로 focus가 돼는 방법을 배웠고추가로,조건에 부합하지 않을 경우텍스트 박스에 입력 된 값을 모두 지우는로직도 배웠다.  먼저 내가 작성한 코드는 이렇다.// 비..

오늘은 내 할 일은로그인, 아이디 찾기, 비밀번호 찾기, 회원가입ui를 구현하는 것이었다. 내가 클론코딩 하려는 사이트인'티켓링크'에 접속해서 만들 ui들을 보니모두 좌측 화면에 완전히 붙어있었다.. ui들 모두 인풋이 차지하는 부분보다빈 부분이 더 많기 때문에나도 그 사람들처럼 개발하고 싶었다. 그래서 구글에 찾아봤는데검색하는 방법이 잘못되었는지나오지 않았다..ㅠㅠ어떤 검색어로 검색했어야 하는걸까.. 결국 튜터님을 찾아뵀는데window.open함수를 쓰라고 하셨다.  window.open() 함수는웹에서 새 창을 열기 위해가장 쉽게 사용할 수 있는 방법이라고 한다. 문법은window.open(url, target, features);1. url:   1) 열고자하는 웹 페이지의 url   2) 컴포넌트..

리액트 라우터 돔도 설치했고,import도 해줬고,내 VSCode에는 에러가 뜨지 않는데 브라우저는 흰 창만 띄운다.. 구글에 검색해보면 다'링크 태그로 연결하세용!','이렇게 연결하세용!'이래서 챗gpt한테 물어봤다.또,t="_blank" 및 rel="noopener noreferrer"외부 링크는 보안과 성능을 위해target="_blank"와 rel="noopener noreferrer"를 포함하는 것이 좋습니다.Link로 외부 URL 연결하기 (비추천)기술적으로는 Link에 to 속성으로 외부 URL을 지정할 수도 있지만,권장되지 않으며 예기치 않은 동작이 발생할 수 있습니다  라고 말 했다. 근데 전에 a태그를 사용했고a태그보다 Link태그를 사용하는 것이좋다고 배워서 사용하고 싶었다. 그래서 ..