Frontend

[React, next-auth] DefaultSession - session에 넣을 정보 변경하기

next-auth를 사용해서 useSsession으로 session에 올라간 정보를 받아오는 과정에서 token에는 다른 정보들이 다 저장되어있는데 defaultsession이라는 만들지도 않은 게 지정되어있었다 아무리 파일내에서 찾아도 안 나왔다... 그래서 이름처럼 기본적으로 설정된거라고 짐작해서 공식문서를 찾아보았고 역시 공식문서가 최고다 https://next-auth.js.org/getting-started/typescript#module-augmentation TypeScript | NextAuth.js NextAuth.js has its own type definitions to use in your TypeScript projects safely. Even if you don't use T..

[CSS] 중앙정렬 하는법

1. position: absolute 이용하기 부모요소에 relative를 주고 height을 뷰포트 기준으로 잡아준다. position: relative; height: 100vh; 중앙정렬을 할 요소에 absolute를 주고 transform으로 요소 사이즈만큼 반대로 이동시킨다. position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

[React] fetch 와 axios 어떤 차이가 있을까? + axios 설치하지 않을 경우 에러

리액트 프로젝트를 진행하면서 fetch와 axios 둘 중 어떤 걸 사용할지 논의를 했었는데 둘 다 큰 차이가 없고 비동기 통신할 때 사용하는 걸로만 알고 있었지만 내가 이걸 왜 사용하는지 알고 쓰고 싶어서 정리해 보았다. fetch와 axios 둘 다 js의 비동기 통신을 할 때 사용하는 방법이다. fetch는 전역 fetch()를 통해 비동기적으로 가져올 수 있고 자바스크립트에서 기본적으로 제공해주는 것이기때문에 별도의 설치가 필요없지만 사용하기 위해서는 .json()을 사용해 JSON데이터 형식으로 변환해서 사용해야한다. axios는 node.js에서 사용할 수 있는 promise 기반 라이브러리로 npm, yarn 같은 패키지 매니저를 통해 설치할 수 있다. 자동으로 JSON데이터 형식이 된다. ..

반응형 단계별로 쉽게 접근해보기

css를 하다보면 반응형 만들기가 쉽지 않다. css는 넘쳐나고 어떤 부분을 반응형으로 바꿔야한 고민되는데 조금 가볍게 접근하는 방법에 대해 알아보자! 반응형으로 바꾸는 순서 1. reset빼고 @media태그 안에 전부 ctrl + c, ctrl + v한다. - reset 관련 속성을 제외하고 /* layout */부터 footer 영역까지 반응형이 필요한 부분 다 그대로 넣는다. 2. 길이나 크기를 조절하는 요소외에 나머지 지우기 3. font나 margin등 변경되는 부분들 수정하기 Tip! 되도록 반응형을 할 때 추가 property가 없게 만든다. 그래서 처음부터 단축 속성을 미리 써두면 좋다고한다. property value만 바꿔주면 되기때문인데 property 하나하나 쓰면 property..

[React] 단축키

https://github.com/dsznajder/vscode-react-javascript-snippets/blob/HEAD/docs/Snippets.md

[React] Hook에 대해 알아보자. 그런데 useState 등을 곁들인

다들 Hook부터는 어려워진다. 인강을 들어도 이해하는게 힘들다고하는데 역시나 쉽지 않다. 그래서 나름 시리즈(?)에 걸쳐 Hook과 useState, useRef, useMemo에 대해 포스팅 하려고한다. Hook이란 뭘까? "기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다" 특징 - 기존의 코드를 다시 작성할 필요 없이 일부의 컴포넌트들 안에서 Hook을 사용할 수 있다. 이러한 훅은 함수의 최상위 레벨에서만 정의한다. 조건으로 훅을 할당하지 않는다. 렌더링 될 때 항상 같은 순서로 렌더링이 되야 한다 공식문서의 글을 읽어보면 간결하게 사용할 수 있게 한다고 이해할 수 있다. 📌 useState 변수의 변화를 감지하여 재렌더링하게 해주는 훅으로 ..

[React] 조각조각 땃따따 컴포넌트 만들어보기

앞서 리액트의 장점이 컴포넌트화라는 포스팅을 했다. 재사용 하기위해 컴포넌트가 중요하다고하는데 그래서 그 컴포넌트화가 대체 무엇인지 어떻게 하는지 정리해보려고 한다. 리액트에서 컴포넌트로 만들 때 이 3가지 방법을 사용한다. 본인이 마음에 드는걸 써도 되고 회사 컨벤션을 따라가면된다. const Section =()=>{} const Section = function(){} function Section(){} 컴포넌트를 어디까지 해야할까?? import './App.css' function Menu () { return ( menu ) } function Header(){ return ( header ) } function Main(){ return ( section ) } function Footer..

[CSS] height과 min-height 똑같아 보이는데 무슨 차이지?

요소를 가운데 정렬하기 위해서는 flex를 쓰고 align-items와 justfy-content는 가운데 정렬이 되게 한다는걸 알고 있다. body { display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; } 그런데 min-height : 100vh;를 적용했더니 화면을 기준으로 정가운데 정렬이 되었다.🤔 여기서 헷갈리는 점은 height : 100vh;와 min-height : 100vh;의 결과가 같아 보인다는 점이다. 이유는 min-height은 말 그대로 "최소 높이"라는 뜻인데 만약 값으로 min-height 100vh를 준다면 뷰포트 높이 100%가 최소값이 된다. 즉 요소의 최소높이..

[JS] 온라인 컴파일러

https://www.programiz.com/javascript/online-compiler/ Online JavaScript Compiler (Editor) www.programiz.com

[Error] VSCode Extension , Sass 에러 해결하기

문제 HTML, CSS할 때까지만해도 아무 문제없던 Extension들이 Sass를 하면서 갑자기 동작하지 않았다. 캡처해둔 에러는 이것뿐이지만 open.live.server~~~ 이러면서 emmet도 안되고 open live server도 안되는 상황이었다. 자동완성이 안되니 태그 하나하나를 일일히 써야했다. 해결 방법 1. 정확한 문제 파악하기 - 다른 폴더에서는 잘 됐었기때문에 특정 폴더에서만 생긴 문제라는걸 알았다. 그래서 폴더 별로 옮기면서 어느쪽에 문제가 있는지 찾았고 Sass폴더가 문제였다는걸 발견했다. 2. extension 변경 - 기존에 사용했던 extension 삭제하고 다른 extension 설치하기 다른 블로그에서 캡처한걸 보고 소리쳤다,,, 읽자마자 이게 내 문제를 해결해줄 답인..