TIL

구글로그인 구현 후 vercel에 deploy했는데 middleware에는 SSR인 getsession을 쓸 수 없다는 에러가 나왔다. 이를 해결하려고 웹 에플리케이션의 인증 방식에 대해 공부했다. [ 인증이란? ]인증과 인가에 대해 구분할 필요가 있다.  Authentication - 인증- 유저식별, 신원검증 , 로그인하는 것이라고 생각하면 된다.  Authorization - 인가- 인증 후, 유저가 어디까지 접근하는 것을 허락할 것인가- 관리자 권한을 가진 유저만 관리자 페이지에 엑세스할 수 있다.  [쿠키와 세션]쿠키서버 -> 브라우저로 전송해 클라이언트에 저장할 작은 파일브라우저(클라이언트)는 받은 쿠키를 요청시 같이 전송함예를 들어 사용자가 로그인하면 서버는 아이디, 비번을 쿠키에 담아 서버..

SEO - 검색 결과 상단에 뜨게 하기 위한 것구글과 같은 검색엔진은 봇을 통해 사이트들을 크롤링하고 저장(인덱싱)하는데, 이때 봇들한테 이 사이트에 대한 정보를 잘 보여줘서 높은 순위에 차지하도록해야 한다.  슬프게도 정해진 공식은 없다. 이렇게 이렇게 하면 무조건 검색결과 첫번째로 뜬다. 이런게 있으면 너도나도 하기떄문에 공식이 될 수 없을것이다..그냥 최대한 할 수 있는 요소들을 세팅하는 것으로 한다.  실제로 내가 사이트를 만들고 해보니 구글 검색 상단에 뜨게하는게 엄청 어렵다 그래도 기본적으로 세팅해야하는 것들이 있다.  nextjs app router 를 쓰고 있어서 이를 예시로 설명하겠다. layout.tsx에서 구성한다. [ 사이트 등록하기 ]일단 가장 먼저 할 일은 구글 서치콘솔에 내 사..

로컬에서는 안나는데 vercel에 빌드할때 나는 에러Error: `"` can be escaped with `"`, `“`, `"`, `”   .eslintrc.json 에 아래 코드를 삽입하면 된다. "rules": { "react/no-unescaped-entities": 0 },"rules": {    "react/no-unescaped-entities": 0  }, 전체 eslinttrc.json {  "rules": {    "react/no-unescaped-entities": 0  },  "extends": "next/core-web-vitals"}

데이터를 관리하려면 state에 대해 알아야한다. state는 useState() const [likes,setLikes] =useState(0)0에서 시작한다. 그리고 리스트를 리턴한다. ( [likes,setLikes])likes : state변수setLikes : function to update it function Likes() {const [likes, setLikes] = useState(0)const handleClick = () => {setClicks(likes+1)}return(Likes: {likes})};  Controlled 컴포넌트의 경우,form에서 사용하려면 다음과 같이 쓴다. const [value,setValue] =useState('') function Controll..

keys are often used with listskey={1}, key="asd" 유니크한 숫자이거나 문자열만 올 수 있다. {items.map(item => ())}유니크한 값이 아니면 index활용

리액트 컴포넌트가 가진 props, state 개념에 대해 알 필요가 있다.  props는 컴포넌트 외부에서 받을 수 있는 값, 부모로부터 자식에게 단방향 데이터 흐름 구조를 가진다.  부모-자식 컴포넌트가 아닌데 데이터를 전달해야하는경우, context를 사용한다. props쓰기 않고도 컴포넌트 사이에 데이터를 전달할 수 있다. state는 내부에서 저장하는 데이터이다. 반드시 해당 컴포넌트 자신과 그 하위에만 영향을 미친다. const [count, setCount] = useState(0)1. make prop, give it a value 2. Use prop valuefunction Gretting(props){return {props.text}}*props는 오브젝트임,다른 컴포넌트들에서 값을..

tailwind css에서 하위 요소를 가운데로 정렬하는 방법  최근 배당투자 계산기 사이트 개발하는 중에 가운데 정렬을 자동으로 하는 방법이 궁금했다. 아래는 내가 개발한 배당투자 사이트!https://www.turtleinvest.site/ko 상위div에 classname을 아래와 같이 주고, flex-container items-center justify-center 하위 가운데 정렬할 요소들에 className = 'text-center" 를 주면된다text-center 일일이 하는 방법이 번거로워서 아예 자동화할 수 있는 방식이 있나 찾는중 쓴 코드는 다음과 같다.  div className="my-3 flex-container items-center justify-center" >  h1 c..

저번에는 도메인 사서 vercel 에 등록하는 방법에 대해 살펴봤다. 이번에는 SEO 작업을 해볼 것이다.  Google Search Console 에 등록하기https://search.google.com/search-console Google Search ConsoleSearch Console 도구와 보고서를 사용하면 사이트의 검색 트래픽 및 실적을 측정하고, 문제를 해결하며, Google 검색결과에서 사이트가 돋보이게 할 수 있습니다.search.google.com으로 접속한다.  property를 추가하는 창에 구매한 도메인 입력한다. 하단에 나오는 txt record 를 복사하고, 가비아로 접속한다.  https://www.gabia.com/ 웹을 넘어 클라우드로. 가비아그룹웨어부터 멀티클라우드까..

https://www.gabia.com/ 웹을 넘어 클라우드로. 가비아그룹웨어부터 멀티클라우드까지 하나의 클라우드 허브www.gabia.com 국내에서도 도메인을 살 수 있는 곳들이 있는데 시험삼아 한번 사봤다. 원래는 cloudfare에서 도메인을 샀었는데 vercel에 하면 셋팅이 조금 번거로워서 정착할 곳을 찾는중이다 사용방법은 간단하다도메인을 사고난 뒤, dns를 등록해주면 된다.  vercel 에서 내 프로젝트에서 도메인으로 이동한다. 내가 구매한 도메인을 등록해준다 2. 가비아에서 DNS관리에서 레코드를 수정한다 이러고 바로되지는 않고 조금 기다리면 된다 체감상 15분 정도?국내에서 도메인 사는 것에 대해 조금 시간도 오래걸리고 불안정하다는 말이 있는데 일단 연결은 괜찮게 된듯하다그치만 불안한..

NextJS 에서 프론트 개발하다가 JSX expressions must have one parent element. 오류가 나올때가 있다.  이때 해당 부분을 , 와 같이 감싸주면 해결 가능하다. 간단하게는 로 감싸ㅜ면 쉽게 해결 가능하다.  맨날 까먹어서 기록!