728x90 반응형 분류 전체보기173 [React] useState() 바로 반영 안되는 현상 해결 회원가입 서비스를 만들려고 하는데 비밀번호와 비밀번호 확인가 일치할 때만 가입할 수 있도록 만들고 싶었습니다. 하지만 위와 같이 비밀번호를 동일하게 입력했음에도 불구하고 한 박자 느리게 useState가 반영되었습니다. const onChange = (e) => { setUser({ ...user, [e.target.name]: e.target.value, }) if(user.password === user.passwordCheck) { setIsPassword(true); } else{ setIsPassword(false); } } 코드를 보면 input에 상태값이 바뀔 때마다 onChange 함수가 실행되면서 만약password와 passwordCheck가 같다면 true로 바꿔주고 같지 않다면 fa.. 2022. 9. 21. [Jest] Axios undefined 해결하기 with.mock Axios로 통신하여 데이터를 잘 가져오는지 확인하기 위해 테스트 코드를 작성했다. 하지만 예상과 달리 결과값이 undefined였다. 공식문서를 확인해보니 axios를 테스트하기 위해서는 jest.mock를 써줘야했다. 공식문서 : https://jestjs.io/docs/mock-functions#mocking-modules Mock Functions · Jest Mock functions allow you to test the links between code by erasing the actual implementation of a function, capturing calls to the function (and the parameters passed in those calls), capturi.. 2022. 9. 14. [MongoDB] Robo3T Failed to load documents 해결 방법 - Studio 3T 설치 그동안 잘 Robo3T를 사용하였는데 오늘부터 위와 같은 오류들이 생기기 시작했다. 알아보니 Robo3T v1.4의 문제 중 하나였다. 해결 방법은 v1.4.2을 다운로드 받는 것인데 알고보니 Robo3T는 개발 작업을 중단했으며 지원 중지되어 다운로드 받을 수 없다. 공식문서를 찾아보니 Robo3T 대신 Studio 3T를 다운로드 받는 것은 권장하고 있다. 다운로드하는 방법은 아주 간단하다. https://robomongo.org/ Robo 3T | Free, open-source MongoDB GUI (formerly Robomongo) Read by Dmitry Schetnikovich robomongo.org 위 링크를 클릭한 후 Download Studio 3T Free Today를 눌러주면 .. 2022. 8. 30. [NodeJS] code ERESOLVE ERESOLVE could not resolve 해결 클라이언트 Dockerfil을 작성 중 code ERESOLVE ERESOLVE could not resolve 라는 오류를 만나게 되었다. 오류의 원인은 npm v7에서는 npm install 충돌이 발생하면 실패한다고 한다. npm v4~6에서는 충돌이 있어도 경고만 뜨고 설치는 되었다고 한다. RUN npm install --save --legacy-peer-deps 발견한 해결 방법은 --save --legacy-peer-deps 였다. 해본 결과 Build도 잘 되었고 작동도 문제 없이 되었다. 좀 더 찾아보니 --legacy와 --force 둘 중 하나를 사용하여 해결하는 것 같았다. --legacy는 충돌을 무시하고 peerDependency가 맞지 않아도 일단 설치한다고 한다. --forc.. 2022. 8. 30. [TypeScript] object vs. Object 차이점 간단하게 변수에 객체를 넣고 싶었다. 그런데 객체에 object와 Object가 있다는 것을 알았다. 문제점 text라는 변수에 object[]라는 타입을 지정했다. 일부러 string을 넣어보니 바로 타입 에러가 표시되어 잘못 지정해줬다는 것을 개발자에게 알려준다. 이럴 경우 코드 작성시 생길 수 있는 에러 확률을 현저히 낮춰준다. 하지만 Object[]를 주면 오류가 뜨지 않는다. 이럴경우 매우 당황스러운 순간이다. 어째서 object는 잡아주고 Object는 잡아주지 않는 것일까? 차이점 object의 경우 원시형이 아닌 모든 값들을 받을 수 있다. 즉, string, number, boolean, symbol, null, undefined가 들어오면 type 에러를 발생한다는 것이다. 하지만 원시.. 2022. 8. 29. [NodeJS] 테스트 코드 참맛과 필요성 테스트 코드란테스트 코드란 통상적으로 서비스의 품질을 확인하거나 소프트웨어의 버그를 찾을 때 작성하는 코드이다.쉽게 말해서 내가 짠 코드가 잘 동작하는지 확인하는 도구이다. 또한 개발자라면 한 번씩 TDD에 대해서 들어보았을 것이다.Test-Driven Development 즉, 테스트 주도 개발이라고 불리면서 많은 개발자들이 해야하는 덕목처럼 주장하는 사람들이 많다.채용공고나 면접에서 테스트 코드를 잘 짜는지에 대해서 물어보기도 한다. 부정적인 생각많은 개발자들이 테스크 코드를 중요하게 생각하는데 솔직히 지금까지 필요성을 못느끼고 있었다.오류 사항을 파악할 수 있다고 하는데 console.log를 찍든 errer 메시지를 보면 바로바로 수정이 가능하다.오히려 테스크 코드를 먼저 짠다고 생각하니 자유롭.. 2022. 8. 24. [React] useEffect 두 번 호출?! with.StrictMode useEffect을 이용해서 백엔드로부터 받은 data를 확인하기 위해 console.log을 찍어보았습니다. 그런데..무려 두 번이나 콘솔에 찍혔습니다. 어째서 두 번이 호출된 것일까요? 🤔 root.render( ); 이유는 태그에 감싸져 있으면 개발 단계에서 오류를 잘 잡기 위해 두 번씩 렌더링 된다고 합니다! useEffect과 관련된 사항이 아니었군요. 그렇다면 StrictMode는 무엇일까요? 바로 React에서 제공하는 검사 도구입니다. 개발 모드일 때만 디버그를 하며 해당 태그로 감싸져 있는 컴포넌트의 자손까지 검사를 한다고 합니다. 공식문서 : https://ko.reactjs.org/docs/strict-mode.html Strict 모드 – React A JavaScript libra.. 2022. 8. 21. [NodeJS] 검색기능 만들기 (1) MongoDB Query 규모가 크지 않은 서비스라면 굳이 검색엔진을 구축할 필요는 없습니다. MongoDB Query를 가지고 간단한 검색기능을 알아보도록 하겠습니다. 1) Regex 아마 가장 많이 사용하는 방법이 정규식이라고 생각합니다. 정규식을 이용하면 쿼리 중에 문자열의 패턴을 검색 가능합니다. 정규식은 패턴을 일련의 문자와 일치시키는 일반화된 방법입니다. .find({ title: { $regex: "강아지" } }) 원하는 필드에 찾고자 하는 데이터를 $regex로 걸어줍니다. 그러면 title이라는 필드 안에 "강아지"라는 단어를 가진 데이터들을 모두 가지고 옵니다. 예를 들어, title이라는 데이터에 "강아지" 말고도 "강아지산책", "사료강아지" 등 강아지가 포함된 모든 데이터들이 검색됩니다. 부분 텍스트 검.. 2022. 8. 19. [강의] React 초보자의 완강 후기 - 노마드코더 ReactJS로 영화 웹 서비스 만들기 왜 노마드코더 'ReactJS로 영화 웹 서비스 만들기'를 들었나요? React 공부를 위해 프론트엔드 팀원분께 여쭤보니 공식문서와 이 강의를 추천해주셨습니다. 먼저 공식문서를 봤는데 저와 맞지 않아서 넘어가고 강의를 보기 시작했습니다. 진행률이 56%인데 더 들어야 하는거 아닌가요? 처음 커리큘럼을 보는데 끝도 없이 긴 강의 수에 놀랐습니다. 그만큼 공부할게 많다고 생각했는데 알고보니 2021년에 업데이트를 하셔서 나머지 44%는 업데이트 전 강의였습니다. 딱 7강까지 들으시면 되기 때문에 짧게는 하루만에 넉넉하게는 일주일 잡고 들으시면 좋을 것 같네요. 완강하신 지금 이 강의를 추천하시나요? 네, 추천 드립니다 👍 프론트엔드 개발 공부 로드맵을 만든다면 첫 시작을 이 강의로 할 것 같습니다. 저는 백.. 2022. 8. 18. 이전 1 ··· 8 9 10 11 12 13 14 ··· 20 다음 728x90 반응형
