Coding Story

이미지를 px로 지정하면 이미지가 늘어나거나 뭉개지는 현상이 발생한다. 이미지를 지정한 px을 제외하고 다른 부분은 안보이도록 자르게 하려면 이렇게 하면 된다. img { object-fit: cover; }

저번 프로젝트에서 로그인을 구현할 때 토큰 방식을 사용했고, 이번 프로젝트에서는 쿠키를 사용하게 되었다. 이 두 방식의 특성과 차이점이 궁금해져 찾아보고 정리해보았다. 인증 Authentication(인증)은 웹에서 중요한 절차이다. 어떤 사용자가 서비스를 사용하는지 추적이 을 하는 등 개인정보를 다루는 과정이 포함되어 있어서 타인의 정보를 보호하기 위해 필수적인 파트이다. 브라우저에서는 자신이 누구인지를 증명할 수 있는 정보를 서버에 보내야하며, 서버는 그 단서를 바탕으로 사용자에게 맞는 데이터를 보내주어야 한다. HTTP의 비연결성 및 무상태성 HTTP는 인터넷 상에서 데이터를 주고 받기 위한 서버/클라이언트 모델을 따르는 프로토콜이다. 클라이언트가 서버에게 요청을 보내면 서버는 응답을 보냄으로써, ..

import styled from "styled-components"; import { motion, AnimatePresence } from "framer-motion"; import { useEffect, useRef, useState } from "react"; const box = { entry: (isBack: boolean) => ({ x: isBack ? -500 : 500, opacity: 0, scale: 0, }), center: { x: 0, opacity: 1, scale: 1, transition: { duration: 0.3, }, }, exit: (isBack: boolean) => ({ x: isBack ? 500 : -500, opacity: 0, scale: 0, tran..

.box { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .box::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/ }

css 초기화를 위해 styled-reset 설치 npm install styled-reset styled-components styled-components는 local로 동작한다. 개별 컴포넌트가 아닌 모든 컴포넌트에 동일한 스타일을 적용하는 편이 유리한 경우가 있다. 그러므로 GlobalStyles.js 파일을 생성해 Global Style을 관리한다. createGlobalStyle() 함수로 전역 스타일 컴포넌트를 생성한다. GlobalStyle.js import { createGlobalStyle } from "styled-components"; const GlobalStyle = createGlobalStyle` ${reset}; body { display: flex; justify-cont..

415 에러는 Unsupported Media Type 에러이다. Content Type이 맞지 않는다는 메세지이다. 보내주는 메세지 타입에 맞는 Content-Type을 잘 설정해줘야 한다. 나의 경우 Multipart/form-data 방식으로 js 내장객체인 formData를 사용하여 파일을 formData형식으로 만들어 클라이언트쪽에서 요청을 보냈는데 content type가 맞지 않아 에러가 뜨는 것이였다. 이 에러와 더불어 Failed to execute 'append' on 'FormData' : parameter 2 is not of type 'Blob'. 이란 에러가 반복적으로 나왔다. 이를 해결하기 위해 const data = new FormData(); let content = { c..

Blob이란? Blob은 일련의 데이터를 처리하거나 간접 참조하는 객체다. Blob이란 이름은 SQL 데이터베이스에서 유래하였으며 '대형 이진 객체(Binary Large Object)를 의미한다. Blob은 대개 바이트의 크기를 알아내거나 해당 MIME 타입이 무엇인지 요청하며, 데이터를 작은 Blob으로 잘게 나누는 등의 작업에 사용된다. 데이터 자체라기보다는 데이터를 간접적으로 접근하기 위한 객체인 것이다. JS에서 Blob(Binary Large OBject)은 주로 이미지, 오디오, 영상 등의 데이터를 다룰 때 사용한다. (꼭 미디어 관련해서만 사용하는 것이 아니라 html, plain text 등 바이너리로 표현 가능한 많은 데이터에서 쓸 수 있다.) Blob 생성 const newBlob =..

React.memo() UI 성능을 증가시키기 위해, React는 고차 컴퍼넌트(Higher Order Component, HOC) React.memo()를 제공한다. 컴포넌트가 React.memo()로 래핑 될 때, React는 컴포넌트를 렌더링하고 결과를 메모이징(memoizing)한다. 그리고 다음 렌더링이 일어날 때 props가 같다면, Rect는 메모이징된 내용을 재사용한다. 언제 사용? 같은 props로 렌더링이 자주 일어나는 컴포넌트에 사용한다. 순수 함수 컴포넌트 일 때 자주 렌더링 될 때 같은 prop으로 리렌더링 될 때 컴포넌트가 클 때 컴포넌트가 무겁지 않고 자주 다른 props를 받아 렌더링한다면 memo로 감싸는게 불필요 하다. function MovieViewsRealtime({..

https://zetawiki.com/wiki/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8_%EC%8A%A4%ED%81%AC%EB%A1%A4_%EB%A7%A8_%EC%95%84%EB%9E%98%EB%A1%9C_%EB%82%B4%EB%A6%AC%EA%B8%B0 자바스크립트 스크롤 맨 아래로 내리기 - 제타위키 다음 문자열 포함... zetawiki.com document.body.scrollTop = document.body.scrollHeight; // 아래로 window.scrollTo(0,0); // 위로 document.body.scrollTop = 0; // 위로

프로미스란? 비동기처리를 위한 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동기 처리를 한번에 처리하는 데도 한계가 있다. 프로미스란 ES6에서 도입한 비동기 처리를 위한 패턴이다. 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있다. // Promise 객체의 생성 const promise = new Promise((resolve, reject) => { // 비동기 작업을 수행한다. if (/* 비동기 작업 수행 성공 */) { resolve('result'); } else { /* 비동기 작업 수행 실패 */ reject('failure reason'); } }); 프로미스는 Pro..