꿈꾸는 개발자의 블로그

분리수거 서비스 웹 페이지를 만들면서 퀴즈와 답을 화면에 그려야했다. 퀴즈 문제와 답에 관련된 데이터를 받아와서 화면에 표시해주어야 했기 때문에, 이 때 사용한 객체를 순회하는 방법을 소개한다. Object.values().map() 으로 객체 순회하기 1. 객체의 type을 설정한다. 2. 객체의 값(value)을 map() 함수를 통해 순회한다. * 객체의 값 뿐만 아니라 키도 필요하다면 다음의 함수를 사용할 수 있다. Object.keys(obj) 객체의 키만 담은 배열을 반환합니다. Object.values(obj) 객체의 값만 담은 배열을 반환합니다. Object.entries(obj) [키, 값] 쌍을 담은 배열을 반환합니다. 그리고 이 때! 주의할 점은 map() 함수 내에서 리턴할 때, {..

Rest Operator 함수의 인자, 배열, 객체 중 나머지 값을 묶어 사용하도록 한다. 함수 인자 function getMin(...rest) {// 인자들을 배열로 담음 return rest.reduce((a, b) => a < b ? a : b) } getMin(7, 4, 5, 1)// 1 배열 let arr = [1, 2, 3, 4, 5]; let [head, ...tail] = arr;// arr 배열의 첫 번째 원소를 head, 나머지 값들을 tail에 배열로 묶음 객체 let o = { name: "Daniel", age: 23, address: "Street", job: "Software Engineer", }; let { age, name, ...rest } = o;// age, nam..

아래 예시는 간단한 버튼 배경 색상을 바꾸는 코드이지만, 이를 잘 활용하면 다양한 곳에 편리하게 사용할 수 있을 것 같다! styled-components props 값 넘겨 받기 import styled from "styled-components"; export const Test = () => { return ( 버튼// theme를 props로 전달 ); } const Button = styled.button` background-color: ${(props) => props.theme}; `;

Next에서 styled-components를 사용하려면 초기 설정이 필요했다. _document 파일은 SSR시에 실행이 되는데, 여기에 스타일 설정을 해주면 서버에서 문서를 내려받을 때 스타일이 적용된 문서를 받을 수 있다. 만약 설정해놓지 않았다면, styled-components를 통한 스타일이 적용되지 않고 랜더링 되는 문제가 생길 것이다! SSR 이후 내부 라우팅을 통해 페이지가 이동하면서 CSR을 하게 되는데, 이 때 서버에서 생성하는 해시값과 브라우저에서 생성하는 해시값이 달라서 에러가 발생한다. 이를 해결하기 위해서 바벨 플러그인을 설치해준다. TypeScript + styled-components 사용하기 1. styled-components 설치 2. styled-components용..

에러 원인 Next.js + TypeScript 환경에서 styled-components를 설치하고 사용하려 하는데, Module not found: Can't resolve 'styled-components'라는 에러가 발생했다. 내 생각으론 현재 프로젝트가 TypeScript 환경이기 때문에 @types/styled-components만 설치하면 되는줄 알았지만, 이것은 타입을 정의한 파일일 뿐이였고... 정작 필요한 패키지는 안한 셈이였다. 에러 해결방법 필요한 패키지를 설치해주면 된다! 아주 간단했다~ $ yarn add styled-components