Grid
·
CSS
Grid" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스요소를 2차원 배치 시킬 수 있는 CSS 모듈 Grid의 여러 속성" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스grid-template그리드의 열과 행을 정의하는 속성.container { display: grid; grid-template-rows: 100px 200px 200px; grid-template-columns: 100px 300px 100px; width: 500px; height: 500px; margin: 200px auto; border: 5px dashed gray;}1. grid 요소의 가로, 세로 크기를 gird-template-colums, grid-te..
box-shadow
·
CSS
HTML 삽입 미리보기할 수 없는 소스 .box { border-radius: 20px; background-color: brown; width: 200px; height: 200px; box-shadow: 0 25px 25px rgba(0, 0, 0, 0.5); } box-shadow : x축 오프셋, y축 오프셋, 흐림 반경, 그림자 색상 애니메이션 적용하기 HTML 삽입 미리보기할 수 없는 소스 .box { border-radius: 20px; background-color: brown; width: 200px; height: 200px; transition: box-shadow 0.3s ease, transform 0.3s ease; } .box:hover { transform: translate..
애니메이션 효과
·
CSS
HTML 삽입 미리보기할 수 없는 소스 .box { border-radius: 20px; background-color: brown; width: 200px; height: 200px; transition: transform 0.5s ease; } 1. transform : 변화가 일어날 속성 2. 0.5s : 변화가 일어나는 시간 3. ease : 변화가 일어나는 속도 (ease, linear, ease-in, ease-out, ease-in-out) .box { border-radius: 20px; background-color: brown; width: 200px; height: 200px; transition: box-shadow 0.3s ease, transform 0.3s ease; } .bo..
FileReader
·
JavaScript
속성1. error : 파일 읽기 작업 중 오류가 발생했을 때 해당 오류를 일으킨 이벤트 객체2. result : 파일의 컨텐츠, 읽기 작업이 완료되고 읽기 작업의 초기화에 사용한 방식으로 결정된 데이터의 포맷3. readyState : FileReader의 상태를 나타내는 숫자이벤트 핸들러1. onabort : 파일 읽기 작업이 중단되었을 때 발생2. onerror : 파일 읽기 작업 중에 에러가 생길 때 발생3. onload : 파일 읽기 작업이 성공적으로 완료되었을 때 발생4. onloadstart : 파일 읽기 작업이 시작 될 때 발생5. onloadend : 파일 읽기 작업이 끝났을 때 발생 (읽기의 성공, 실패 여부는 상관x)6. onprogress : Blob 컨텐트를 읽는 동안 호출 메서드..
createPortal로 모달을 띄웠을 때의 이슈와 해결 방법.
·
Project/Synamon
Trouble" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스1. createPortal로 모달을 띄웠을 때, 백 드롭을 포함한 요소가 현재 레이아웃과 맞지 않아 가로스크롤이 생김 Solution" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 1. body 태그에 relative 속성을 설정한 후,  2. 띄울 모달을 absolute로 설정하고, createPortal의 목적지를 document.body로 하였다.  3. 이슈였던 가로 스크롤이 사라졌다. 이 방법은 body가 최소한 브라우저 화면 전체를 커버하고 있어야 가능하다. 주의해야 할 점은, 모달을 띄울 요소의 크기를 screen이 아니라 full로 해야한다는 것. screen은 현재 보이는..
Tanstack Query
·
Library/Tanstack Query
Tanstack Query" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스서버 상태를 관리하는 라이브러리. QeuryClient()" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스캐싱 데이터와 상호작용할 수 있게 해주는 객체를 제공하는 생성자 함수.import { QueryClient, QueryClientProvider } from "@tanstack/react-query";const App = ({ Component, pageProps }) => { const queryClient = new QueryClient(); return ( );};export default App;QueryClient() 생성자함수로 생..
Promise
·
JavaScript
Promise" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스비동기 작업을 처리할 때 사용되는 객체 Promise 객체의 생성과 구조" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스window.onload = () => { const promise = new Promise((resolve, reject) => { const count = 1 + 1; count === 2 ? resolve(count) : reject("Error"); }); const errPromise = new Promise((resolve, reject) => { const count = 1 + 1; count === 3 ? resolve(count..
width
·
CSS
width" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스1. width의 기본 값은 100%가 아닌 auto이다2. auto는 부모 요소의 너비를 넘을 수 없고, 100%는 부모 요소의 width 값과 똑같이 가진다.3. width값을 직접 설정하면, width값은 content영역의 크기가 된다. 4. box-sizing 속성의 border-box를 사용하면, 요소의 크기는 content box가 아니라 border를 기준으로 잡아준다. https://cdpn.io/pen/debug/adLPwv
Flex
·
CSS
Flex" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스요소들을 유연하게 배치시켜주는 레이아웃 속성 flex-direction" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스컨테이너의 주축을 설정하는 속성 .container { display: flex; border: 1px solid black;}.item { width: 100px; height: 100px;}1. flex의 기본 flex-direction 값은 가로 row 이다..container { display: flex; flex-d..
async/await
·
JavaScript
async/await" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스Promise 객체를 다루는 비동기 문법. async" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스함수에 붙어 return값을 PromiseResult 로 갖는 Promise객체를 반환window.onload = () => { const result = async() => { return "hello world!"; }}1. async 함수에서 Promise객체를 return하면 async 함수는 중첩된 Promise객체를 반환하지 않고, return하려는 Promise객체를 그대로 반환한다. await" data-ke-type="html">HTML 삽입미리보기할 수 없는 ..
JWT(JSON Web Token)
·
User function
JWT" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스JSON 형식의 데이터를 문자열로 인코딩한 토큰  Header" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스1. 암호화에 사용된 알고리즘, 토큰 형식 등 토큰에 대한 정보를 저장. PayLoad" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스1. 토큰이 실질적으로 저장하려는 데이터(만료시간, 발급시간, 토큰 고유값, 토큰이 인증하려는 유저 등, 저장하고 싶은 데이터 종류의 제한 없음).2. 토큰 만료시간, 발급시, 토큰 아이디를 페이로드에 넣을땐 exp, iat, jti같은 공식명을 사용해야 한다.3. 암호화된 내용이 아니기 때문에 비밀번호와 같이 보안에 민감한 정보는 ..
Authentication (인증)
·
User function
Authentication - 리퀘스트를 보낸 유저가 누구인지 파악하는 기능 - 서버에 유저에 대한 정보가 있어야함 - 유저를 나타내는 모델(유저 클래스)을 만들어야 함 (특정 지을수 있는 유일한 id나 email, 암호화한 pw) ● 회원가입 - 서버에 유저 정보를 저장하는 행위 workflow 1. 회원 가입 페이지에서 이메일, 필수정보 등을 입력. 2. 입력한정보를 리퀘스트 body에 담은 후, 회원가입을 담당하는 서버 URL로 POST. 3. 서버에서는 인증정보에대해서 간단한 테스트(중복확인) 후, 유저를 특정할 수 있는 자연수 id 값과 함께 저장. 4. 통과하면 200 OK, 통과하지 못하면 400 Bad Request. ● 로그인 - 서버의 유저 정보를 특정하는 행위 workflow 1. 로..
Hyunsoo_Kim
상단으로

티스토리툴바