728x90 반응형 분류 전체보기167 [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. [React] 리액트 이해하고 사용하기 (3) useEffect useEffect(() => { fetch("https://api.coinpaprika.com/v1/tickers") .then((response) => response.json()) .then((json) => { setCoins(json) setLoading(false) }) }, []) useState는 값이 변화할 때마다 매번 실행되지만 useEffect는 단 한 번만 실행된다. 즉, 우리가 언제 코드를 실행시킬지 결정할 수 있다는 것이다. useEffect으로 우리는 아래와 같이 언제 코드를 실행시킬지 결정할 수 있다. 1. 처음부터 실행시키기 2. 특정 조건일때 실행시키기 알고보니 useEffect를 이러한 특성을 이용해 서버와 통신하여 데이터를 주고 받을 수 있다. 특정 조건일 때 서버와 통.. 2022. 8. 16. [ErrorFix] Axios multer로 파일 전송시 req.files에 나오지 않는 오류 해결 Axios로 파일을 보낼때 파일이 req.files에 나오지 않는 현상이 나왔다. 원래라면 이렇게 req.files를 할 때 나와야하는데 아예 빈 값이 나와 당황스러웠다. const formData = new FormData(); formData.append("script", data); axios.post(`http://${process.env.LOGICKIT_URL}/module/add`, formData, { headers: { 'Content-Type': 'multipart/form-data' } }) .catch((error) => { console.log(`fail 😱`, error.message) }) 작성한 코드를 한번 살펴보면 이상한 점이 하나도 보이지 않는다. 원인을 찾기 위해 여러가지.. 2022. 8. 11. [Docker] 명령어 모음 개발하면서 자주 쓰는 Docekr 명령어를 모아두었다. Docker-compose 관련 명령어 // Docker 내리기 docker-compose down // Docekr image build docker-compose build // Docker 컨테이너 올리기 docker-compose up -d // 위 3가지를 한 번에 하는 명령어 docker-compose up --build -d 2022. 8. 10. [npm] NodeJS에서 환경변수 사용하기 - dotenv 새로운 Repo에서 환경변수를 쓸 일이 있어서 process.env.URL 이라고 작성했는데 undefined가 떴다. 원인은 node 명령어로 실행시키는 파일에서는 .env파일을 인식할 수 없다고 한다 ❗️ 그래서 별도의 모듈인 dotenv를 설치하여 인식할 수 있게 해준다. npm install dotenv --save 사용법은 우선 dotenv 모듈을 설치한다. require("dotenv").config(); 환경변수를 사용할 파일에서 환경 변수를 불러오는 코드를 작성해준다. console.log("URL:", process.env.URL); 그 다음 원래대로 process.env로 원하는 환경변수를 호출해주면 됩니다. 2022. 8. 10. [Azure] AKS를 이용해서 서버 배포하기 (3) AKS에서 애플리케이션 실행 with.kompose 1. 매니페스트 파일 만들기 Kubernetes 매니페스트 파일이 있어야지 애플리케이션을 실행할 수 있습니다. docker-compose를 사용할 경우 kompose라는 서비스를 이용해서 손쉽게 만들 수 있습니다. brew install kompose brew를 이용해서 간단하게 kompos를 설치합니다. kompose convert -f docker-compose.yaml --out .yaml docker-compose.yaml 파일이 있는 폴더로 가셔서 위 코드를 입력해주세요. 참고로 docker-compose와는 달리 매니페스트 파일은 정해진 이름이 없어 자유롭게 해주시면 됩니다. 저의 경우 k8s.yaml로 써주었어요. 오류 없이 잘 작동했다면 적어주신 이름으로 파일 하나가 생성되었을 것입니다. .. 2022. 8. 5. [Azure] AKS Failed to pull image 오류해결 kubectl logs 혹시 pods의 오류가 나서 log를 조회해보니 Failed to pull image와 같은 오류 메시지가 나왔다면 AKS에 ACR로 인증하는 단계를 넣어줘야 한다. 1. ACR 통합 1-1. 새 AKS로 클러스터를 만들 경우 az aks create -n -g --generate-ssh-keys --attach-acr 위 명령어를 입력해주면 된다. 1-2. 기존의 AKS로 통합할 경우 az aks update -n -g --attach-acr 명령어를 통해 통합해주세요. 2. 클러스터에 연결 az aks get-credentials --resource-group --name 클러스터를 연결해주신 다음 kubectl apply -f k8s yaml 파일을 이용해서 배포해주세요. 참.. 2022. 8. 5. 이전 1 ··· 8 9 10 11 12 13 14 ··· 19 다음 728x90 반응형
