본문 바로가기

분류 전체보기

 (63)
윈도우 업데이트 후 wsl 오류 날 때 터미널 실행시 파일 시스템 오류가 나는 경우 관리자 모드로 파워셀 실행 후 wsl --update로 wsl을 업데이트시키면 된다.
400 Bad Request 오류가 뜰 때 우리가 개발을 하다보면, 자주 만나는 에러 중 하나가 400 에러입니다. 보통 Bad Request라고 하면 파라미터 관련하여 생각하기 쉽습니다. 하지만, 파라미터 타입 등등을 모두 확인했는데도 불구하고 계속 400 에러가 뜨는 경우가 있습니다. 이런 경우에는 쿠키 크기를 초과했는지 확인하여야 합니다. 쿠키의 용량을 초과했을 경우에도 400 에러가 발생할 수 있다는 것을 기억하고 계시면 좋습니다.
RequestBody로 json array 형태 받기 파라미터 부분에 @RequestBody Map[] params 형태로 입력하면 된다. 여기서, Map 부분은 매핑되는 VO가 있다면 DataVO[] 형태로 받아도 된다. 중요한 것은 Map이든 VO든 []를 붙여줘야 한다는 것이다. 그리고 기본적으로 contentType이 application/json이어야 한다는 것도 잊지 말자.
개행 문자가 포함된 문자열을 화면에 그대로 나타내기 우리가 DB에서 주로 가져오는 값의 타입은 문자열입니다. 만약, DB에서 가져온 문자열에 \n, \t 등의 문자가 포함된 경우에 우리는 이 포맷을 그대로 화면에 나타내고 싶은 경우가 있습니다. 그럴 때, 사용할 수 있는 속성이 white-space: pre-wrap입니다. white-space는 공백 문자를 어떻게 처리할 것인지를 지정하는 속성입니다.
React-slick으로 슬라이드 만들기 일단, npm 혹은 yarn으로 react-slick과 slick-carousel을 설치합니다. npm install react-slick, npm install slick-carousel 혹은 yarn add react-slick, yarn add slick-carousel (타입스크립트 사용시 @types/react-slick 추가 설치) 가장 먼저, 슬라이드 설정을 해줘야 합니다. const settings = { dots: false, infinite: true, speed: 500, slidesToShow: 9, slidesToScroll: 9, initialSlide: 0, responsive: [ { breakpoint: 1440, settings: { slidesToShow: 7, slid..
styled-media-query로 반응형 디자인 구현하기 styled-media-query는 styled-component와 같이 반응형 디자인을 구현할 때 좋습니다. 사용법은 정말 간단합니다. 일단 styled-media-query를 npm 혹은 yarn으로 설치합니다. yarn add styled-media-query 혹은 npm install styled-media-query 그 후에, 전역적으로 영향을 미치는 최상위단의 파일에 (가령, styled-component를 사용하는 경우에는 GlobalStyles.js 내부) import { createGlobalStyle } from "styled-components"; import { generateMedia } from "styled-media-query"; import reset from "styled..
styled-components 사용법 일단 npm 혹은 yarn으로 styled-components를 설치합니다. yarn add styled-components 혹은 npm install styled-components 입력 가장 먼저, 공통으로 적용될 css을 설정해주기 위해 GlobalStyles.js라는 파일을 생성합니다. import { createGlobalStyle } from "styled-components"; import reset from "styled-reset"; const globalStyles = createGlobalStyle` ${reset}; a { text-decoration: none; color: inherit; } * { box-sizing: border-box; } body { font-family:..
Redux 사용법 import { configureStore } from "@reduxjs/toolkit"; import DetailReducer from "./reducers/DetailReducer"; import HomeReducer from "./reducers/HomeReducer"; import SearchReducer from "./reducers/SearchReducer"; import TVReducer from "./reducers/TVReducer"; export const store = configureStore({ reducer: { home: HomeReducer, tv: TVReducer, detail: DetailReducer, search: SearchReducer } }); 리덕스에서는 어플..

티스토리툴바