jongfeel commented 3 years ago

10:00 - 12:00 진행 예정

접속 주소:

https://meet.google.com/jyx-mxnq-kpk

참여 방법:

Assignees에 자신의 github 계정을 self로 추가 2시간 분량의 할 일에 대해 댓글 작성 (최소 모임 시작 전까지) 빛의 속도 혹은 (주말, 휴일 포함) 최소 3일 내에 구글 캘린더 등록 메일 확인 모임 시간에 스터디 진행 모임 끝난 후 공부한 내용 정리 & 링크 추가 => 최소 다음 모각코 전까지 확인 가능해야 함.

Youtube 음악 재생목록:

음악 취향 강요 공유를 위해 재생목록을 공유합니다. 자유롭게 추가해 주세요. https://www.youtube.com/playlist?list=PLBFc2T4S7JnvZrV92zSlOfqeYHj7-qJfB&jct=hkFSXgrr2X-4yldTm5iMtpqnGcjKRQ

새로운 규칙 추가
- 가장 적게 음악을 추가한 분 보다 +1곡 이상 추가하지 말아 주세요.
- 진짜 취향 강요 공유를 위해 노력해 주세요
잘 모르겠거나 안되면?
- @fora22 님이 작성한 매우 훌륭한 문서인 #16 을 참고해 주세요.

yoonucho commented 3 years ago

계획 냥터레스트 회고록 작성 멘토님 comment

[x] 마인드맵 작성
[x] 목차 작성
[x] 마인드맵 스샷 comment에 업로드

결과

마인드맵

photo_2021-01-09_11-47-49

회고록 목차 작성 링크

hi-hyein commented 3 years ago

계획

알고리즘 기초 개념 공부

librewiki
4.1.2.3 데크 Deque
~~4.1.2.4 링크드 리스트~~
데크와, 링크드 리스트는 링크에 나와있는 정보가 짧아서 추가로 찾아보고, 자바스크립트로 코드 작성이 가능하다면 함께 작성할예정

FINISH

4.1.2.3 Deque 정리
notion 링크
pdf link
파일을 압축하여 같이 만들어두었던 표지도 추가해서 묶어 pdf로 올렸습니다 😄 😄

fora22 commented 3 years ago

Plan

fastcampus 인공지능 공부
- 새로운 레포지토리(인공지능 공부용) 생성
- 강의자료 따라하기 -> 따라한 예제 자료 Finish 증거로 제출
- 강의 8개 강의

Finish

새로운 레포지토리 생성 완료

저는 Python 할 때(주로 데이터 처리나 인공지능)는 Colab을 사용 많이 하는데요. Local에 패키지 설치했다가 지우고 하는게 많이 번거로워서 중요한 것 아니고는 대부분 Colab 에서 합니다. 근데 최근에 Colab에서 .ipynb파일을 github에 직접 커밋해서 올리는 기능이 생겼더라구요. 이번에 아시게 됐다면 참고하면 좋을 것 같습니다!

jongfeel commented 3 years ago

EBS 수학과 함께하는 AI 기초

66~75 페이지 읽고 02 소리 데이터 다루기 부분 코드 및 설명 아래 repository에 올리기

https://github.com/jongfeel/EBS-AI

실제 작업한 페이지 링크 https://github.com/jongfeel/EBS-AI/tree/main/chapter2/3_process_sound_data/2_handling_sound_data

fora22 commented 3 years ago

스리슬쩍 질문 하나 올리겠습니다..ㅎㅎ @yoonucho @jongfeel @hi-hyein

현재상황

// router.js
const express = require('express');
const app = express();
const PORT = process.env.PORT||4000;
const db = require('../dbconnection');

app.get('http://localhost:3000/', (request, response) => {
    db.query("select * from inventory", (err, rows) => {
        if(!err) {
            console.log(rows);
            response.send(rows);
        } else {
            console.log(`query error: ${err}}`);
            response.send(err);
        }
    })
})

app.listen(PORT, () => {
    console.log(`check :${PORT}`);
})

// dbconnection.js
const mysql = require('mysql');
const connection = mysql.createPool({
    host: 'fora22jeonhafirstdb.mysql.database.azure.com',
    user: 'fora22@fora22jeonhafirstdb',
    password: '~~',
    database: 'fora22jeonhafirstdb',
    port: 3360,
    ssl: false
})

module.exports = connection;

router.js에서 db 접속하여 response.send()로 데이터 보내게 설정 맞추고 App.js에서 fetch()를 실행하려 하는데 console.log에서 unexpected token o in json at position 0 에러가 발생했습니다.

fetch()에서

// App.js
fetch('http://localhost:3000/')
    .then(response => {
      console.log(response);
    });

을 실행해보면 response 자체가 json 형태! 그래서 json 두번 parse했다고 저 에러가 뜬 것으로 보임!

// 원래 코드
fetch('https://koreanjson.com/posts/1')
  .then(response => response.json()) // 이 부분
  .then(json => console.log(json))

실제로 response값을 봤더니 아래 사진처럼 뜸. 하지만 데이터는 어떻게 가져와야 하는지 잘 모르겠습니다.(현재상황 공유)

궁금한 점

router.js는

router.js는 서버거 URL에 따른 동작을 달리 해주는 것이라고 알고 있는데 그렇다면 이는 React의 App과는 다르게 command Line에서 따로 실행해줘야되나요?
아니라면 App.js 에서 require() 함수를 통해 가져오면 자동으로 실행되는 건가요?

사진에서

사진에서 Response 객체는 도착했는데 제대로 데이터가 오진 않은 것 같습니다. Data 가 제대로 온 것을 알기위해서는 어떻게 해야 할까요??

Reference

jongfeel commented 3 years ago

@yoonucho님, @hi-hyein님에게도 이 상황을 얼마나 이해하고 도와줄 수 있는지, 또 얼마나 충분한 대화를 할 수 있는지를 가늠해 봐달라고 얘기 해 드렸어요.

자신의 현재 상태와 실력을 판단해 볼 수 있는 좋은 기회이기도 할 거 같아서 한번 해보셨으면 좋겠습니다.

그런 의미에서 저는 조용히 있을께요.

fora22 commented 3 years ago

마인드맵

회고록 목차 작성 링크

마인드맵 관련해서도 이야기 나누고 싶었는데 시간이 부족해 아쉽네요 @yoonucho 님 ㅎㅎ

저도 마인드맵은 아니지만 문제를 풀거나 설계(?) 대부분 옆에다 종이(혹은 화이트보드)를 두고 엄청 그리면서 하는 스타일인데요. 마인드 맵도 좋아하지만 컴터에서 작성하기에는 작성이 힘들고, 사진을 찍어서 Notion 에 저장해 두기에는 많이 번거로워서 요즘 고민 아닌 고민입니다.

혹시 @yoonucho 님은 따로 저장을 해두시나요??

yoonucho commented 3 years ago

안녕하세요 @fora22님 궁금한게 있는데 스샷에 있는 body안에는 어떤데이터가 들어와 있는지요?

스리슬쩍 질문 하나 올리겠습니다..ㅎㅎ @yoonucho @jongfeel @hi-hyein

현재상황
// router.js
const express = require('express');
const app = express();
const PORT = process.env.PORT||4000;
const db = require('../dbconnection');

app.get('http://localhost:3000/', (request, response) => {
    db.query("select * from inventory", (err, rows) => {
        if(!err) {
            console.log(rows);
            response.send(rows);
        } else {
            console.log(`query error: ${err}}`);
            response.send(err);
        }
    })
})

app.listen(PORT, () => {
    console.log(`check :${PORT}`);
}) 
// dbconnection.js
const mysql = require('mysql');
const connection = mysql.createPool({
    host: 'fora22jeonhafirstdb.mysql.database.azure.com',
    user: 'fora22@fora22jeonhafirstdb',
    password: '~~',
    database: 'fora22jeonhafirstdb',
    port: 3360,
    ssl: false
})

module.exports = connection;
router.js에서 db 접속하여 response.send()로 데이터 보내게 설정 맞추고 App.js에서 fetch()를 실행하려 하는데 console.log에서 unexpected token o in json at position 0 에러가 발생했습니다.

fetch()에서
// App.js
fetch('http://localhost:3000/')
    .then(response => {
      console.log(response);
    });
을 실행해보면 response 자체가 json 형태! 그래서 json 두번 parse했다고 저 에러가 뜬 것으로 보임!
// 원래 코드
fetch('https://koreanjson.com/posts/1')
  .then(response => response.json()) // 이 부분
  .then(json => console.log(json))
실제로 response값을 봤더니 아래 사진처럼 뜸. 하지만 데이터는 어떻게 가져와야 하는지 잘 모르겠습니다.(현재상황 공유)

궁금한 점

router.js는

router.js는 서버거 URL에 따른 동작을 달리 해주는 것이라고 알고 있는데 그렇다면 이는 React의 App과는 다르게 command Line에서 따로 실행해줘야되나요?

아니라면 App.js 에서 require() 함수를 통해 가져오면 자동으로 실행되는 건가요?

사진에서

사진에서 Response 객체는 도착했는데 제대로 데이터가 오진 않은 것 같습니다. Data 가 제대로 온 것을 알기위해서는 어떻게 해야 할까요??

Reference

JEoN-Ha/Senior-Project#61

JEoN-Ha/Senior-Project#59

fora22 commented 3 years ago

안녕하세요 @fora22님 궁금한게 있는데 스샷에 있는 body안에는 어떤데이터가 들어와 있는지요?

어..죄송합니다. 맨 밑의 스샷을 말씀하시는 거면 body를 어떻게 봐야하는 지 몰라서요.. fetch()에서 console.log(response.body)라고 하면 되나요??

yoonucho commented 3 years ago

@fora22 앗 저한테도 질문을 주셨군요 사실 제 마인드맵을 외부에 공유하기 부끄러워서 저는 스프링 노트에다가 작성하고 그 노트만 보관하고 있네요 그런데 비공개로 노션에다가 스샷을 저장해두어도 괜찮을거 같네요 아참 대원님의 문서정리 기록 능력이라고 해야할까요 정말 능력자십니다 ㅋ 본받고싶네요

마인드맵 회고록 목차 작성 링크

마인드맵 관련해서도 이야기 나누고 싶었는데 시간이 부족해 아쉽네요 @yoonucho 님 ㅎㅎ

저도 마인드맵은 아니지만 문제를 풀거나 설계(?) 대부분 옆에다 종이(혹은 화이트보드)를 두고 엄청 그리면서 하는 스타일인데요. 마인드 맵도 좋아하지만 컴터에서 작성하기에는 작성이 힘들고, 사진을 찍어서 Notion 에 저장해 두기에는 많이 번거로워서 요즘 고민 아닌 고민입니다.

혹시 @yoonucho 님은 따로 저장을 해두시나요??

yoonucho commented 3 years ago

안녕하세요 @fora22님 궁금한게 있는데 스샷에 있는 body안에는 어떤데이터가 들어와 있는지요?

어..죄송합니다. 맨 밑의 스샷을 말씀하시는 거면 body를 어떻게 봐야하는 지 몰라서요.. fetch()에서 console.log(response.body)라고 하면 되나요??

네 한번 그렇게 보셔도 되고요 이미 콘솔로 찍은부분에서 body부분이( ...)인디 그부분을 클릭하면 보이지 않을까 생각했습니다.

fora22 commented 3 years ago

아 클릭하면 보이는군요.... 삼각형 토글만 보이는줄 알았는데...ㅋㅋㅋㅋ

클릭했더니 ReadableStream이라고 합니다! @yoonucho 님!

hi-hyein commented 3 years ago

@fora22 @yoonucho

알고 계실 수 있겠지만 저는 마인드맵 어플을 사용하는데요

https://mainia.tistory.com/2080 xmind 앱 추천합니다

안드로이드, 아이폰 모두 사용 가능하네요!

yoonucho commented 3 years ago

@fora22 음 제생각에는 아직 데이터를 제대로 받아오지 못한거 같습니다.

라우터 코드 부분에서 http://localhost:3000/ 은 리액트쪽 로컬URL인데 우선 프론트쪽은 나중에 생각하시고 라우터쪽에서 데이터를 제대로 받아오시는게 먼저 확인이 필요할거 같습니다.

// router.js
const express = require('express');
const app = express();
const PORT = process.env.PORT||4000;
const db = require('../dbconnection');

// 요기요 ↓
app.get('http://localhost:3000/', (request, response) => {
// 중략

fora22 commented 3 years ago

@yoonucho

// router.js
const express = require('express');
const app = express();

const path = require('path');
const PORT = process.env.PORT||4000;
const db = require('../dbconnection');

app.get('http://localhost:3000/', (request, response) => {
    db.query("select * from inventory", (err, rows) => {
        if(!err) {
            console.log(rows); // 여기서!
            response.send(rows);
        } else {
            console.log(`query error: ${err}}`);
            response.send(err);
        }
    })
})

app.listen(PORT, () => {
    console.log(`check :${PORT}`);
})

console.log(rows) 을 해놨는데 명령창에 node router.js를 하면 check:4000 만 뜬 다는 것은 db.querry 가 안먹는다는 걸까요?

yoonucho commented 3 years ago

@fora22 @yoonucho

알고 계실 수 있겠지만 저는 마인드맵 어플을 사용하는데요

https://mainia.tistory.com/2080 xmind 앱 추천합니다

안드로이드, 아이폰 모두 사용 가능하네요!

@hi-hyein 오 감사합니다 ! 저는 온라인으로는 OKMindmap을 사용해보았었는데 그런데 손맛을 느끼고 싶어서 현재는 그리고(?) 있습니다.ㅋ

fora22 commented 3 years ago

@fora22 @yoonucho

알고 계실 수 있겠지만 저는 마인드맵 어플을 사용하는데요

https://mainia.tistory.com/2080 xmind 앱 추천합니다

안드로이드, 아이폰 모두 사용 가능하네요!

좋은 의견 감사합니다 ㅎㅎ 저도 예전에 사용해봤었는데 그리는 손 맛을 포기 못하겠더군요.. 갤럭시 탭 같은 거라두 사야할 것 같습니다(돈이 있다면 말이지요..ㅎ)

hi-hyein commented 3 years ago

@yoonucho @fora22 제가 그래서 아이패드를 샀어요 ^^.......... ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

yoonucho commented 3 years ago

제생각에는 check:4000은 현재 접속된 포트번호를 알려주는거 같습니다. 혹시 http://localhost:4000을 브라우저 주소창에 넣어서 작업중이신지요 그리고 제가 2시간정도 지나서 다시 살펴보겠습니다!

@yoonucho

// router.js
const express = require('express');
const app = express();

const path = require('path');
const PORT = process.env.PORT||4000;
const db = require('../dbconnection');

app.get('http://localhost:3000/', (request, response) => {
    db.query("select * from inventory", (err, rows) => {
        if(!err) {
            console.log(rows); // 여기서!
            response.send(rows);
        } else {
            console.log(`query error: ${err}}`);
            response.send(err);
        }
    })
})

app.listen(PORT, () => {
    console.log(`check :${PORT}`);
})

console.log(rows) 을 해놨는데 명령창에 node router.js를 하면 check:4000 만 뜬 다는 것은 db.querry 가 안먹는다는 걸까요?

yoonucho commented 3 years ago

@fora22 그런데 폰으로 보니 이제 보이는데 데이터를 받기전에 콘솔을 찍었네요 우선 이부분 순서를 바꿔보세요 라우터js if문 코드요

fora22 commented 3 years ago

@fora22 그런데 폰으로 보니 이제 보이는데 데이터를 받기전에 콘솔을 찍었네요 우선 이부분 순서를 바꿔보세요 라우터js if문 코드요

@yoonucho 접속은 localhost:3000으로 접속했습니다!

if문 코드를 바꾸라는 것이 if else 다음과 같이 바꾸어서 했더니 check 4000은 동일합니다.

app.get('http://localhost:3000/', (request, response) => {
    db.query("select * from inventory", (err, rows) => {
        if(!err) {
            response.send(rows);
            console.log(rows); // 여기서!
        } else {
            console.log(`query error: ${err}}`);
            response.send(err);
        }
    })
})

2시간정도 지나서 다시 살펴보겠습니다!

천천히 답해주셔도 됩니다. 감사합니다 ; )

fora22 commented 3 years ago

@ hi-hyein

제가 그래서 아이패드를 샀어요 ^^.......... ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

나중 일이지만 저도 결말이 같을 것 같네요ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

hi-hyein commented 3 years ago

@fora22

mysql 연결이 안된 것 같은...느낌인데

createPool은 getConnection 으로 mysql을 연결해줘야하는 것 같아요

db.getConnection(function(err, conn) {
  if(!err) {
    //연결 성공
    conn.query(...);
  }
  conn.release(); // 사용 후 꼭 connection 반환
});

이렇게 하셔서 서버로 요청을 보내본 후 서버 console을 보셨을 때

if(!err) {
            console.log(rows); // 여기서!
            response.send(rows);
        } else {
            console.log(`query error: ${err}}`);
            response.send(err);
        }

여기에 설정해 놓으신 console.log 둘 중 하나라도 찍히면 연결에 성공하신거에요!

SyntaxError: Unexpected token P in JSON at position 0 에러는 서버에서 응답으로 JSON데이터가 왔을때 프론트에서 JSON이 파싱되지 않았을 때 나는 오류 입니다. 프론트에서 데이터를 자바스크립트 객체로 parse해주면 해결되지 않을까 생각이듭니당

hi-hyein commented 3 years ago

@fora22 그리고 궁금한 점에 대한 답변을 드리자면

Q1

별도로 서버를 구동해 주셔야 하는게 맞아요 냥터레스트에서는 클라이언트와 서버 각각 구동해줘야하는 불편함을 제거하기 위해서 프로젝트 최상위 루트폴더에서 명령어 하나로 두개의 서버가 구동되도록 명령어를 작성해두었는데요~ node 프로젝트라면 package.json이 루트폴더에 있을텐데 "scripts" 영역에 원하시는 명령어를 설정해주시면 됩니다.

방법은 여러가지가 있긴한데 냥터레스트에서는 아래와 같이 작성해서 npm run dev, yarn dev 로 사용하고 있습니다. 보시면 각script에 command Line 명령어와 동일하게 작성되어 있어요

"scripts": {
  "start": "node packages/backend/server",
  "backend": "nodemon packages/backend/server",
  "frontend": "cd packages/frontend && npm start",
  "dev": "concurrently \"npm run backend\" \"npm run frontend\"",
},

start : 백엔드 서버만 구동
backend : 백엔드 서버를 구동시키고 nodemon을 사용하여 서버 파일에 변경이 있을 경우 재구동시키도록함
frontend : 클라이언트 서버 구동
dev : backend, frontend 명령어 동시에 실행. 이때 동시에 실행시켜주는 concurrently라이브러리를 사용하였습니다.

Q2

response 데이터를 눈으로 확인하고 싶으시다면 방법이 여러가지가 있긴한데 제가 아는 방법은...............ㅎㅎ

개발자도구에서 network탭의 response 아래 첨부이미지처럼 개발자도구에서 network탭의 response를 확인하시는 방법도 있구요.
postman 주소를 설정하여 api를 자유롭게 테스트할 수 있는 도구도 있습니다

제가 궁금한점을 충분히 이해하고 답변을 드렸는지는 모르곘네여..^^... 이제 무력감을 느껴보겠습니다...ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

yoonucho commented 3 years ago

@fora22 제가 궁금하여 대원님 프로젝트 코드를 받아서 실행을 해보았는데요 혹시 이렇게 데이터를 보고싶으신게 맞을까요?

fora22 commented 3 years ago

이렇게 하셔서 서버로 요청을 보내본 후 서버 console을 보셨을 때

자꾸 물어봐서 죄송합니다. 새로운 것을 배우고 물어볼 때, 항상 느끼지만 제가 무엇을 모르는지 몰라서 자꾸 질문 하는 것 같습니다. 귀찮으실텐데 죄송합니다 ㅠㅠ

현재 상황

제가 지금 Azure 서버를 사용중인데 web 서버는 Deploy가 됐고 DB 서버랑 데이터 연결만 하면 됩니다. 근데 서버 console 을 확인할 수 있다는 점을 몰랐는데 이 내용이 제가 이해한게 맞는지 말씀해주시면 감사하겠습니다.

이해 내용

react 프로젝트를 만들면 package.json 과 기타 등등 파일, src 폴더의 App.js등이 있다. 이때 App.js 와 index.js 가 프론트를 나타내는 것이고 root 디렉토리에서 server폴더를 만들어 server.js 혹은 router.js를 통해 Clinet가 URL 입력시 동작할 로직을 구현해준다.

그리고 이 내용을 Azure Web server 에 Deploy 한다.

디버깅 상황

하지만 디버깅을 위해 주소를 localhost:3000으로 맞추고 @ 님이 말해주신 것 처럼 concurrently 패키지를 추가하여 dev 명령어를 만들어 동시 실행!

parse도 JSON.parse(response)으로 하니 Unexpected token P in JSON at position 1 에러(0이 아닌 1 ?!)가 떠서 JSON.stringify()으로 하니 빈 객체가 왔습니다. {} 이렇게요.

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "dev": "concurrently \"node server/routes/router.js\" \"react-scripts start\""
  }

이렇다는 건 현재 DB 서버에서 제대로 가져오지 못한다는 것이겠죠..?? ㅠㅠ

밑에는 실제 코드입니다.

// dbconnection.js
const mysql = require('mysql');
const connection = mysql.createPool({
    host: 'fora22jeonhafirstdb.mysql.database.azure.com',
    user: 'fora22@fora22jeonhafirstdb',
    password: 'Jeonha12#',
    database: 'fora22jeonhafirstdb',
    port: 3360,
    ssl: false
})

module.exports = connection;

// router.js
const express = require('express');
const app = express();

const path = require('path');
const PORT = process.env.PORT||4000;

const db = require('../dbconnection');

app.use((req, res, next) => {
    console.log('time : ', Date.now());
    next();
});

app.get('http://localhost:3000/', (request, response) => {
    db.getConnection(function(error, conn) {
        if (!error) {
            db.query("select * from inventory", (err, rows) => {
                if(!err) {
                    response.send(rows);
                    console.log(rows);
                } else {
                    console.log(`query error: ${err}}`);
                    response.send(err);
                }
            })
        }
        conn.release();
    })
})

app.listen(PORT, () => {
    console.log(`check :${PORT}`);
}) 

// module.exports = app;

// App.js
import React, {Component} from 'react'; 
import './App.css';
import Subject from './component/Subject';
import LoginRoot from './component/LoginRoot';
import Content from './component/Content.js';
import TopBar from './containers/TopBar';
import BasketRoot from './component/BasketRoot';

class App extends Component {

  componentDidMount() {
    const all = fetch('http://localhost:3000/')
    .then(response => {
      console.log(JSON.stringify(response));
    });

    // .then(data => {console.log(data);});    

    // all.catch(function(err) {
    //   console.log(err);
    // });
  //   fetch('https://koreanjson.com/posts/1')
  // .then(response => response.json())
  // .then(json => console.log(json))
  }

  render() {
    return (
      <div className="App">
        {/* JEoN-Ha 제목 */}
        <Subject></Subject>

        {/* 로그인 폼 */}
        <LoginRoot></LoginRoot>

        {/* 상단 메뉴 */}
        <TopBar></TopBar>

        {/* MENU */}
        <Content></Content>

        {/* 장바구니 */}
        <BasketRoot></BasketRoot>
      </div>
    )
  }
}

export default App;

fora22 commented 3 years ago

@fora22 제가 궁금하여 대원님 프로젝트 코드를 받아서 실행을 해보았는데요 혹시 이렇게 데이터를 보고싶으신게 맞을까요?

헉 맞습니다. 저걸 App.js에서 보여주면은 Front와 통신이 된거라고 생각되서 그걸 하려는 중인데 잘 되지 않네요.

yoonucho commented 3 years ago

@fora22 우선 혜인님이 말씀하신 concurrently 패키지를 실행하기전에 별도로 node서버와 리액트를 실행해보신건지요 저는 대원님의 프로젝트를 클론하고 fora22/Develope브런치를 다운받고 노드패키지를 설치하고 node 서버와 리액트를 각각 경로로 들어가서 실행해보고 콘솔로 찍어본거밖에 한게 없는데 db는 제대로 연결되어진걸로 보여집니다.

yoonucho commented 3 years ago

@fora22님 https://github.com/JEoN-Ha/Senior-Project/pull/61 이부분은 제가 문제를 찾긴 했습니다.

제가 받은 깃허브레파지토리 코드에서 보니 App.js부분에 일부 코드가 빠졌고 fetch 주소도 변경하면 해결될거 같습니다.


class App extends Component {
    state = { username: null };

    componentDidMount() {
        fetch("/api/getUsername")
            .then((response) => response.json())
            .then((user) =>
                this.setState({
                    username: user.username,
                })
            );
    }

    render() {
        // const { username } = this.state;
        return (
            <div className="App">
                {/* JEoN-Ha 제목 */}
                <Subject></Subject>

                {/* 로그인 폼 */}
                <LoginRoot></LoginRoot>

                {/* 상단 메뉴 */}
                <TopBar></TopBar>

                {/* MENU */}
                <Content></Content>

                {/* 장바구니 */}
                <BasketRoot></BasketRoot>
                <p>
                    <div>
                                                /* state값을 못받아서 null이었던거 같습니다.  아래처럼 this.state를 붙여주세요*/}
                        {this.state.username ? (
                            <h1>{`Hello ${this.state.username}`}</h1>
                        ) : (
                            <h1>Loading.. Please wait!</h1>
                        )}
                    </div>
                </p>
            </div>
        );
    }
}

매번 this.state를 붙이긴 번거로워서 아래와 같은 방법을 많이 씁니다.

렌더함수 밑에


render() {
        const { username } = this.state;

이렇게 코드를 넣으면 this.state를 생략할 수 있습니다.

                                       <div>

                        {username ? (
                            <h1>{`Hello ${username}`}</h1>
                        ) : (
                            <h1>Loading.. Please wait!</h1>
                        )}
                    </div>

테스트용으로 따라서 작성하신 블로그에도 이와 같은 방법으로 작성을 하셨더라고요

제가 받았던 router.js코드로 그대로 작성하시면 제가 올린 스샷 화면을 보실 수 있을겁니다.


// 중략

router.get("/api/getUsername", (request, response, next) => {
    response.send({ username: os.userInfo().username });
    console.log({ username: os.userInfo().username });
});

우선 이부분을 해결하시고 db데이터를 front에 출력하는 부분을 시도해보셔요!

yoonucho commented 3 years ago

@fora22 그리고 이건 TMI지만 리액트를 작업하실때 유용한 툴을 알려드리려고 합니다. https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi 인데 설치를 하면 개발자도구에 아래와 같은 탭이 생깁니다.

fora22 commented 3 years ago

@yoonucho 이렇게 많이 신경써주셔서 감사합니다 ㅠㅠ @hi-hyein

이전에 db내용은 출력한 적이 있어서 App.js 로 넘어간 거였는데 성공 코드를 안남겨 놨네요... 열심히 해보도록 하겠습니다!!

hi-hyein commented 3 years ago

@fora22 죄송하긴여...제 답변은 빠르게 손절치시고 잊어주세요^^....(아련) 대원님 화이팅ㅋㅋㅋㅋㅋㅋ!!!!!!!!!

jongfeel commented 3 years ago

@fora22

월요일 미팅 전에 지금 진행했던 것들에 대해 간략히 얘기해 주세요. 진짜 간략하게요, 대원님 성격상 엄청난 문서를 만들어 둘 거 같아서 미리 얘기하는 거에요.

제가 대충 보니front하고 back하고 별도로 호스팅 되고 있어서 서로 통신을 못하고 있는 문제로 보이는데 혜인님이 얘기해준 방법 혹은 front와 back이 동시에 같이 호스팅 할 수 있는 나이스한(?) 방법을 찾으셔서 적용하시면 됩니다.

보통 백엔드를 모르는 프론트엔드린이(?) 분들이 흔히 겪는 혼란스러움과 실수이니 정상이라고 보시면 되요.

hi-hyein commented 3 years ago

@fora22
아참..! 그리고 proxy를 api서버(4000) 으로 설정하시고 pacakge.json에서 설정가능해요

fetch('/getData').then(
      res => res.json()
    ).then(
      json => console.log(json)
);

이렇게 해보시면 문제없이 받아올 수 있을 것 같기두......ㅎㅎ (username두요)

proxy는 package.json에서 "proxy":"http://localhost:4000" 요줄 추가하시면 됩니다~

yoonucho commented 3 years ago

@fora22 죄송하긴여...제 답변은 빠르게 손절치시고 잊어주세요^^....(아련) 대원님 화이팅ㅋㅋㅋㅋㅋㅋ!!!!!!!!!

혜인님이 알려주신 방법이 얼마나 유용한데요 코드 제대로 프론트에 출력성공하시면 꼭 설정하셔요!

fora22 commented 3 years ago

@fora22

월요일 미팅 전에 지금 진행했던 것들에 대해 간략히 얘기해 주세요. 진짜 간략하게요, 대원님 성격상 엄청난 문서를 만들어 둘 거 같아서 미리 얘기하는 거에요.

디스 아닌 디스로 인해 밤에 빵터졌네요 ㅎㅎㅎㅎ

현재 상황만 간략하게 적자면 @yoonucho 님 스샷까지는 무사히 성공했습니다(Hooray!!). 이제 fetch() 로 받으면 될거같은데 처음에는 Access-Control-Allow-Origin 문제로 애먹다가 해결하고 이제 console에 찍어봤는데 안나오는...데....

와우! 답변 작성하다가 해결했습니다! ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ

이거 때문에 약 2주 가까이 책상 쾅을 몇번 했는지 모르겠네요 ㅠㅠㅠㅠㅠ 감사합니다 @yoonucho 님 @hi-hyein 님

나중에 제가 커피라도 한 잔 사겠습니다 ㅠㅠㅠㅠ

이제 post만 해결하면 되겠네요 ㅠㅠ 감사합니다 정말로 ㅠㅠ

yoonucho commented 3 years ago

@fora22 와우 축하드립니다! cors이슈 저도 정말 첨에 겪었을때 고생했는데 ㅠㅠㅠ혹시 또 이슈생기면 알려주셔요!

fora22 commented 3 years ago

@fora22 와우 축하드립니다! cors이슈 저도 정말 첨에 겪었을때 고생했는데 ㅠㅠㅠ혹시 또 이슈생기면 알려주셔요!

넵!! 감사합니다 ㅠㅠ

hi-hyein commented 3 years ago

@fora22 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ드뎌!!!!!!!!!!! 축하합니다 고생하셨어여 제가 다 후련하네요ㅋㅋㅋㅋㅋ 윤우님도 멘토님도 모두모두 고생하셨습니다 다들 좋은 주말 보내세요~

그리고 대원님 문서는 꼭 간략히...(저도 빵터짐) 😆

yoonucho commented 3 years ago

@fora22 아 그리고 혜인님이 아까 말씀하신 postman에서 api 테스트 하시면 브라우저에서 보이는 몬낸이(?)보다 훨씬 이쁘게 볼 수 있어요

ThinkAboutSoftware / OnlineSelfCodingGroup

9th online meetup, 2021-01-09 #17

접속 주소:

참여 방법:

Youtube 음악 재생목록:

계획 냥터레스트 회고록 작성 멘토님 comment

결과

계획

FINISH

Plan

Finish

EBS 수학과 함께하는 AI 기초

현재상황

궁금한 점

router.js는

사진에서

Reference

현재상황

궁금한 점

router.js는

사진에서

Reference

Q1

Q2

현재 상황

이해 내용

디버깅 상황