REACT
-
react로 반응형 웹을 만들때 css로 media query를 적용하지만 javascript로도 적용을 할 필요가 있을때가 분명 있습니다. 저 같은 경우는 주로 페이지의 width에 따라 컴포넌트를 변경을 해줄때 사용합니다. 반응형 웹앱을 위해 검색을 하여 react-responsive, react-media.. 등 주 사용하는것으로 나오는데 react-media같은 경우는 쓰기에는 단순하지 못하고(주관적 의견입니다.) react-responsive같은 경우는 크롬에서 개발자모드에선 잘 작동하지만 일반적으로 사용할때는 잘 적용이 안되었습니다.(NextJS 환경입니다.) 계속 찾아보다가 가장 잘 작동하여 적용한 코드를 소개해 드립니다. 장점은 yarn이나 npm으로 설치할 필요도 없고 javascript..
React 반응형 웹앱 만들기 Best media query codereact로 반응형 웹을 만들때 css로 media query를 적용하지만 javascript로도 적용을 할 필요가 있을때가 분명 있습니다. 저 같은 경우는 주로 페이지의 width에 따라 컴포넌트를 변경을 해줄때 사용합니다. 반응형 웹앱을 위해 검색을 하여 react-responsive, react-media.. 등 주 사용하는것으로 나오는데 react-media같은 경우는 쓰기에는 단순하지 못하고(주관적 의견입니다.) react-responsive같은 경우는 크롬에서 개발자모드에선 잘 작동하지만 일반적으로 사용할때는 잘 적용이 안되었습니다.(NextJS 환경입니다.) 계속 찾아보다가 가장 잘 작동하여 적용한 코드를 소개해 드립니다. 장점은 yarn이나 npm으로 설치할 필요도 없고 javascript..
2021.07.01 -
개발하다보면 const text = "정보를 등록해주세요." 처럼 string 문장안에 태그를 넣어서 렌더링을 해야될때가 있다. 문장안의 태그를 인식하려면 dangerouslySetInnerHTML을 사용하면된다. 하지만 위 처럼 사용하면 아래의 에러가 생긴다. Can only set one of `children` or `props.dangerouslySetInnerHTML`. 번역을 하자면 "`children` 또는`props.dangerouslySetInnerHTML` 중 하나만 설정할 수 있습니다."이다. 지금 태그안에 내용도 있고 p태그 props에도 값을 넣어서 생긴 문제인데 아래처럼 props에만 값을 넣으면 된다.
Can only set one of `children` or `props.dangerouslySetInnerHTML`.개발하다보면 const text = "정보를 등록해주세요." 처럼 string 문장안에 태그를 넣어서 렌더링을 해야될때가 있다. 문장안의 태그를 인식하려면 dangerouslySetInnerHTML을 사용하면된다. 하지만 위 처럼 사용하면 아래의 에러가 생긴다. Can only set one of `children` or `props.dangerouslySetInnerHTML`. 번역을 하자면 "`children` 또는`props.dangerouslySetInnerHTML` 중 하나만 설정할 수 있습니다."이다. 지금 태그안에 내용도 있고 p태그 props에도 값을 넣어서 생긴 문제인데 아래처럼 props에만 값을 넣으면 된다.
2021.05.24 -
Object literal may only specify known properties, and 'devServer' does not exist in type 'Configuration'. 웹팩 설정중에 발생한 에러 입니다. devServer에서 Configuration타입이 존재하지 않는다고 합니다. 이 문제는 다른 @types와의 버전 문제이거나 타입스크립트에서 인식이 실패하여 나타난것입니다. 해결책은 아래의 링크 마지막줄처럼 webpack-dev-server 버전을 낮추는 방법이 있습니다. 하지만 이게 안통한다면 https://github.com/DefinitelyTyped/DefinitelyTyped/issues/27570 webpack과 webpack-dev-server import를 아래와 같..
Object literal may only specify known properties, and 'devServer' does not exist in type 'Configuration' : webpack-dev-server 오류Object literal may only specify known properties, and 'devServer' does not exist in type 'Configuration'. 웹팩 설정중에 발생한 에러 입니다. devServer에서 Configuration타입이 존재하지 않는다고 합니다. 이 문제는 다른 @types와의 버전 문제이거나 타입스크립트에서 인식이 실패하여 나타난것입니다. 해결책은 아래의 링크 마지막줄처럼 webpack-dev-server 버전을 낮추는 방법이 있습니다. 하지만 이게 안통한다면 https://github.com/DefinitelyTyped/DefinitelyTyped/issues/27570 webpack과 webpack-dev-server import를 아래와 같..
2021.05.23 -
친구 중에 글로벌 설문조사 소프트웨어 기업에 다니고 있는 개발자가 있다. 이 친구가 새로 뽑을 신입의 기술면접과 코딩 테스트를 본다고 나한테 코딩 테스트하기 전에 테스트 해보고 싶다고 하여 친구의 코딩 테스트에 응해줬다. 실시한 코딩 테스트 조건은 이렇다. 1. React 프론트엔드 개발자이니 React를 사용한다. 2. Todo list app을 만들어 볼 것인데 다음의 주소의 api를 사용한다. https://documenter.getpostman.com/view/8858534/SW7dX7JG 3. 40분 이내로 끝낸다. 4. 로그인, 회원가입부터 시작. Todo list야 리액트를 배우는 데에 있어서 기초적인 프로젝트이면서도 웹 개발에 있어서 핵심적인 기능을 대부분 포함을하고 있다. 그리고 지금의 ..
SurveyMonkey 개발자가 알려준 React, Frontend 코딩 테스트 비결친구 중에 글로벌 설문조사 소프트웨어 기업에 다니고 있는 개발자가 있다. 이 친구가 새로 뽑을 신입의 기술면접과 코딩 테스트를 본다고 나한테 코딩 테스트하기 전에 테스트 해보고 싶다고 하여 친구의 코딩 테스트에 응해줬다. 실시한 코딩 테스트 조건은 이렇다. 1. React 프론트엔드 개발자이니 React를 사용한다. 2. Todo list app을 만들어 볼 것인데 다음의 주소의 api를 사용한다. https://documenter.getpostman.com/view/8858534/SW7dX7JG 3. 40분 이내로 끝낸다. 4. 로그인, 회원가입부터 시작. Todo list야 리액트를 배우는 데에 있어서 기초적인 프로젝트이면서도 웹 개발에 있어서 핵심적인 기능을 대부분 포함을하고 있다. 그리고 지금의 ..
2021.05.22 -
yarn build 할때 오류가 생겼다. CORS problem이나 null, undefined를 참조할 수 없는 흔한 에러가 아닌 FATAL ERROR: v8::HandleScope 에러가 발생 했을때 검색을 해도 사실 막상 들어가보면 내용이 시원찮다. 자료 참고중에 그나마 힌트를 얻을 수 있었던 사이트다. answers.netlify.com/t/fatal-error-v8-createhandle-cannot-create-a-handle-without-a-handlescope/22957 현재 노드 버전이 12버전이었는데 14버전으로 업그레이드 해주니 해결되었다고 한다. node version을 확인해보니 정말 12버전이었고 최신 버전으로 업그레이드 해주니 해결 되었다. 같은 증상이 있다면 node ver..
FATAL ERROR: v8::HandleScope::CreateHandle() Cannot create a handle without a HandleScopeyarn build 할때 오류가 생겼다. CORS problem이나 null, undefined를 참조할 수 없는 흔한 에러가 아닌 FATAL ERROR: v8::HandleScope 에러가 발생 했을때 검색을 해도 사실 막상 들어가보면 내용이 시원찮다. 자료 참고중에 그나마 힌트를 얻을 수 있었던 사이트다. answers.netlify.com/t/fatal-error-v8-createhandle-cannot-create-a-handle-without-a-handlescope/22957 현재 노드 버전이 12버전이었는데 14버전으로 업그레이드 해주니 해결되었다고 한다. node version을 확인해보니 정말 12버전이었고 최신 버전으로 업그레이드 해주니 해결 되었다. 같은 증상이 있다면 node ver..
2021.03.16