Chunho’s DevLife

위와 같이 react-query를 사용하여 데이터를 받아와 출력한 결과 Home.jsx:16 Uncaught TypeError: Cannot read properties of undefined (reading 'data') 이와 같은 에러가 발생하였다. 데이터를 받아오는 과정은 비동기적으로 수행되고, 콘솔에 data를 출력하는 라인이 바로 실행되는데, data에 값이 없기 때문이다. 위와 같이 useEffect를 사용하여 컴포넌트가 마운트된 후 2초 뒤에 실행시키도록 하여도 똑같은 에러가 발생한다. Get요청을 보내는 쿼리도 컴포넌트가 마운트되며 생성되고 이와 동시에 useEffect안의 함수도 실행되는데, 아마 실행과 동시에 setTimeout 함수와는 관계없이 data의 state를 check 하는 ..

API서버가 배포되지 않은 상황에서 http 통신을 하는 코드를 작성해야 할 때, 또는 빠른 시간 안에 Restful한 API를 구축하고 테스트하고 싶을 때 json-server를 사용할 수 있다. 먼저 npm install json-server -g 명령어를 사용하여 글로벌 설치를 해준다. 이후 dummyDB.json 파일을 생성해준 후 아래와 같이 데이터를 넣어준다. 이후 json-server --watch dummyDB.json --port 4000 명령어를 사용하여 json-server를 실행시켜주면 된다. POSTMAN을 열고 http://localhost:4000/hero 에 GET 요청을 보내보자. 데이터를 정상적으로 받아오는것을 확인할 수 있다. POST요청으로 데이터를 변경하는 것 또한 ..

axios를 사용하여 API서버에 POST요청을 보내고 응답을 받아와 데이터를 뿌려주려고 하던 중, response를 콘솔에 찍어봤을 때 [object Object]로 나타나는 문제가 발생하였다. JSON.stringify 메소드를 사용해봤지만, 객체가 아닌 전체가 다 '문자열' 로 바뀌어버려서 사용할 수 없었다. 콘솔엔 [object Object]로 나타났지만 데이터가 뿌려지긴 했다. 빠른 시일내에 위 문제를 해결해봐야겠다..

VScode를 실행한 후, 터미널을 키고 작업할 디렉토리로 이동한다. npx create-react-app my-app 명령어를 실행한다 "my-app" 자리에는 프로젝트의 이름을 명시하면 된다. 위와 같은 에러가 날 경우 npm uninstall -g create-react-app npm add create-react-app 위 명령어를 순서대로 실행시킨 후 다시 npx create-react-app 명령어를 실행시키면 된다. cd my-app 명령어를 사용한 뒤 npm start 명령어를 입력하여 프로젝트를 실행시킨다.

더 많은걸 배우고 새로운 프로젝트를 진행하며, 학습해야 할 양은 점점 방대해져 갔지만 시간은 항상 부족했었다. 4학년을 앞두고 전공과목에 대한 지식 뿐만이 아닌 효율적으로 학습을 하는 방법과 시간을 사용하는 법을 배울 수 있어서 이번 학기는 나에게 조금 더 의미있었던 것 같다. 물론 흥미와 관심이 뒷받침돼야 한다고 생각한다. 내가 하고싶은 일, 배우고싶은 일이라 다행이라고 생각한다. 앞으로 더 많은걸 배우고 발전해야겠다.

보안상의 목적으로, 또는 굳이 원격 저장소에 올라가지 않아도 될 파일은 .gitignore를 사용하여 Push 시에 제외시킬 수 있다. .gitignore 파일은 git init이 되어있는 프로젝트 폴더의 최 상단에 위치해야 한다. 위와 같이 .gitignore 파일 안에 제외할 파일 또는 폴더를 작성하면 된다. 같은 경로에 있는 파일은 ./가 아닌 / 임에 유의하여야 한다.

RESTful API는 RESTful (REpresentational State Treansfer) 규정에 맞게 만든 웹 서비스를 의미한다. RESTful 웹 서비스의 구조는 GET방식 (조회) POST방식 (추가) PUT방식 (수정) DELETE방식 (삭제) 으로 나뉜다. 위 방식에 맞춰 RESTfulgks 웹 서비스를 개발해보자. DB는 DummyDB를 미리 작성해 놓았다. DummyDB는 get, insert, remove 메소드가 있다. Dummy.get(id) -> id를 매개변수로 받아 해당 id가 포함된 정보를 JSON형태로 반환해준다. Dummy.insert(data) -> 아래와 같은 JSON형태의 데이터를 매개변수로 받아 DummyDB에 저장한다. { name: name, region:..

express의 use() 메소드는 여러 번 사용할 수 있다. 또한 use() 메소드의 매개변수에는 function(req, res, next){} 가 입력된다. next는 다음에 위치하는 함수를 의미한다. 위 코드를 실행하고 웹 브라우저에 접속하면, Hello Express라는 문구가 출력된다. 하지만 터미널 화면을 보면 위와 같이 출력되는것을 확인할 수 있다.

모델링이란 세계에서 일어나는 현상을 수학식으로 표현하는 행위이다. 모델링을 통해 모델을 알아내고 이것을 바탕으로 새로운 현상을 예측할 수 있다. x와 y가 있을 때 y는 x와의 관계가 형성된다. 이 때 x를 설명변수라 하고, y를 반응변수 또는 그라운드 트루스라 부른다. 또한 이 x,y의 쌍으로 모여있는 묶음들을 훈련 집합 이라 부른다. 위와 같이 x,y데이터를 vector로 넣어준 뒤 lm을 사용해 선형 회기를 구할 수 있다. Intercept(1.75)는 y절편이며, x(0.40)는 x의 계수이다. coef()명령어를 통해 이를 다시 확인할 수 있다. fitted()는 훈련 집합에 있는 샘플에 대한 예측값을 나타낸다. 또한 residuals()를 사용하여 잔차를 구할 수 있으며, deviance()를..

Stack은 자료구조 중 하나로, 먼저 들어간 데이터가 가장 나중에 나오는 선입후출(FILO)구조를 가지고 있다. import java.util.Stack; 을 선언한 뒤 Stack을 사용할 수 있다. 이후 위와 같은 방법으로 Stack을 생성할 수 있으며, 안에는 자료형이 들어간다. Stack에는 대표적으로 세 가지 메소드가 있다. pop(): 스택의 가장 마지막에 있는 데이터를 삭제하면서 반환한다. push(): 스택에 데이터를 삽입한다. peek(): 스택의 가장 마지막에 있는 데이터를 반환한다. pop()과 peek()의 차이는 데이터 삭제의 유무다.