본문 바로가기

Programming

 (80)
[Error] yarn install 에러 : info There appears to be trouble with your network connection. Retrying... 해결하기 에러 원인 yarn istall을 하는 과정에서.. info There appears to be trouble with your network connection. Retrying... 라는 문구가 발생했고, 모듈 설치가 제대로 이루어지지 않았다. 그래서 찾아보니! 몇 가지 원인이 있었지만, 나의 경우는 네트워크가 느리거나 해당 패키지 파일이 너무 큰 경우에 해당하여 시간을 늘려주면 되는 문제였다. 에러 해결방법 아래와 같이 명령어를 입력해주자! yarn install --network-timeout 600000 참고 블로그 더보기 https://enhjh.tistory.com/25 [yarn] info There appears to be trouble with your network connection..
[React] Mui styled-components 설치 및 구현 방법 프로젝트를 진행하며 전체적으로 styled-components를 이용하여 스타일을 지정하고 있었는데, Mui로 불러온 같은 방식으로 구현하다가 오류가 나는 상황이 생겼다..!! 알아보니 그 이유는 Mui는 emotion이 기본 엔진인데, styled-components로 엔진을 교체하기 위한 작업이 동반되지 않았기 때문이였다. 공식 문서에도 친절히 설명이 되어있었는데 ㅠㅠ 에휴... 앞으로! 진짜 공식 문서부터 잘 챙겨보는 것을 습관화해야겠다! Mui styled-components 설치 yarn add @mui/material @mui/styled-engine-sc styled-components Mui styled-components를 이용한 구현 import 부분에서 모듈 이름을 materialSt..
[React] TypeScript + 객체 값 순회하기 분리수거 서비스 웹 페이지를 만들면서 퀴즈와 답을 화면에 그려야했다. 퀴즈 문제와 답에 관련된 데이터를 받아와서 화면에 표시해주어야 했기 때문에, 이 때 사용한 객체를 순회하는 방법을 소개한다. Object.values().map() 으로 객체 순회하기 1. 객체의 type을 설정한다. 2. 객체의 값(value)을 map() 함수를 통해 순회한다. * 객체의 값 뿐만 아니라 키도 필요하다면 다음의 함수를 사용할 수 있다. Object.keys(obj) 객체의 키만 담은 배열을 반환합니다. Object.values(obj) 객체의 값만 담은 배열을 반환합니다. Object.entries(obj) [키, 값] 쌍을 담은 배열을 반환합니다. 그리고 이 때! 주의할 점은 map() 함수 내에서 리턴할 때, {..
[JavaScript] ES6 Rest, Spread Operator 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..
[React] styled-components props 값 넘겨 받기 아래 예시는 간단한 버튼 배경 색상을 바꾸는 코드이지만, 이를 잘 활용하면 다양한 곳에 편리하게 사용할 수 있을 것 같다! styled-components props 값 넘겨 받기 import styled from "styled-components"; export const Test = () => { return ( 버튼// theme를 props로 전달 ); } const Button = styled.button` background-color: ${(props) => props.theme}; `;
[Next.js] TypeScript + styled-components 사용하기 Next에서 styled-components를 사용하려면 초기 설정이 필요했다. _document 파일은 SSR시에 실행이 되는데, 여기에 스타일 설정을 해주면 서버에서 문서를 내려받을 때 스타일이 적용된 문서를 받을 수 있다. 만약 설정해놓지 않았다면, styled-components를 통한 스타일이 적용되지 않고 랜더링 되는 문제가 생길 것이다! SSR 이후 내부 라우팅을 통해 페이지가 이동하면서 CSR을 하게 되는데, 이 때 서버에서 생성하는 해시값과 브라우저에서 생성하는 해시값이 달라서 에러가 발생한다. 이를 해결하기 위해서 바벨 플러그인을 설치해준다. TypeScript + styled-components 사용하기 1. styled-components 설치 2. styled-components용..
[Error] Module not found: Can't resolve 'styled-components' 에러 해결하기 에러 원인 Next.js + TypeScript 환경에서 styled-components를 설치하고 사용하려 하는데, Module not found: Can't resolve 'styled-components'라는 에러가 발생했다. 내 생각으론 현재 프로젝트가 TypeScript 환경이기 때문에 @types/styled-components만 설치하면 되는줄 알았지만, 이것은 타입을 정의한 파일일 뿐이였고... 정작 필요한 패키지는 안한 셈이였다. 에러 해결방법 필요한 패키지를 설치해주면 된다! 아주 간단했다~ $ yarn add styled-components
[React] styled-components 사용하기 그동안 각각의 CSS 파일을 밖에 두고 스타일링 했었는데, 하나의 컴포넌트 내에서 이용가능한 styld-components를 사용해보았다. 불필요한 CSS가 import 되지 않도록 만들어주기 때문에 좋다! styled-components 설치 yarn add styled-components styled-components를 이용한 구현 import styled from 'styled-components'; export const Test = () => { render ( 버튼 ); } const Wrapper = styled.div` width: 100%; height: 100vh; `; const Button = styled.button` background-color: gray; border-rad..

티스토리툴바