분류 전체보기

NodeBird 복습/node.js

react nodeBird 2-8 (multer, express static, 해시태그 완성하기)

이미지 업로드를 위한 multer encType="multipart/form-data" 이미지를 올리게되면 multipart 라는 form-data로 데이터가 전송이 되게 됩니다. 하지만, 지금의 백엔드에서는 json 형식과 이미지나 비디오 같은 데이터를 받을 수 없는 일반적인 Form 데이터만 받을 수 있기 때문에 multer를 설치합니다. multer는 app.js에서 미들웨어로 전체 라우터에 연결해줄 수 있지만 어떤 게시글은 text, 이미지만 올릴 수 있기때문에 라우터에 적용합니다. storage: 파일이 저장될 위치를 설정함 diskStorage: 파일을 디스크에 저장함 destination: 파일이 어떤 디렉토리(폴더)에 저장될 것인지 설정하는 메서드 filename: 폴더 내 저장될 파일의 ..

NodeBird 복습/node.js

react nodeBird 2-7 (좋아요, 게시글 삭제, 닉네임수정하기)

게시글 좋아요 완성하기 데이터의 흐름을 기억하면서 코드를 작성하는 것이 좋습니다. dispatch한 postCard.js → 리듀서 → 사가 →백엔드 라우터순으로 작성하면 됩니다. axios.patch(`/post/${data}/like`, data);로 data를 2번쓰게 되면 불필요한 용량만 차지하기 때문에 axios.patch(`/post/${data}/like`)로 줄여주는 것이 좋습니다. 없는 게시글에 좋아요를 누를 수는 없으니 백엔드에서는 게시글의 존재유무를 한번 더 검사하여 안전하게 서비스를 이용할 수 있도록 해주는 것이 좋습니다. 또한, 시퀄라이즈는 MySQL을 사용하므로 관계 메서드가 생성됩니다. 예를 들면, post.addLikers : 추가 post.removeLikers : 삭제 p..

NodeBird 복습/node.js

react nodeBird 2-6 (게시글 불러오기, morgan 도입하기)

게시글을 불러오기 위해 posts.js를 만들어 줍니다. findAll로 여러개의 항목을 DB에서 찾아올 수 있습니다. 시퀄라이즈의 find 메소드는 SELECT 쿼리문으로 이해하면 됩니다. findOne : 특정된 하나의 레코드만 찾는다 findAll: 모든 레코드를 찾는다 보통의 SNS를 보면 1~20까지의 게시글이 있다면 최신게시글이 최상단에 위치하는것을 볼 수 있습니다. order를 통해 'DESC' 내림차순으로 설정을 하면 20~1로 최신 게시글이 제일 위에 나타나게 할 수 있습니다. 또한, 모든 게시글을 불러오기에는 컴퓨터 용량의 무리가 될 수 있으므로 인피니트스크롤 할 때 limit, offset 방식과 limit, lastId 방식으로 일정부분 게시글을 불러온 후 그 다음 게시글이 불러올 ..

NodeBird 복습/node.js

react nodeBird 2-5 (게시글 댓글 완성, 로그인정보, credentials 이해하기)

게시글, 댓글 완성하기 데이터가 어떻게 이동하는지 잘봐야 됩니다. 그래야 코드를 짤 때 수월하게 할 수 있습니다. PostForm에서 Submit → dispatch({ addPost(text) }) reducers/addPost의 data로 text 데이터를 받음 sagas/addPost로 가서 action.data로 addPostAPI의 { content: data } axios가 백엔드로 요청함 routes/post.js에서 req.body.content로 데이터를 받고 처리해서 프론트로 전달 User의 DB 모델을 만들 때 Post항목이 없기때문에 에러가 발생합니다. 그래서, 관계를 맺고 있는 항목이기 때문에, include를 이용하여 작성해주도록 합니다. 댓글 기능 완성하기 `/post/${da..

NodeBird 복습/node.js

react nodeBird 2-4 (로그인완성 & 쿠키, 세션 이해하기)

로그인 기능 완성하기 이전 user saga의 코드들을 보면 'http://localhost:3065'가 중복되는것을 볼 수 있는데, 이것을 axios를 이용하여 sagas/index.js에 한꺼번에 묶어서 중복된 코드들을 줄일 수 있습니다. passport라는 라이브러리를 통해 로그인기능을 완성시킵니다. passport와 passport-local을 설치합니다. passport: 카카오, 네이버 로그인 등 여러 로그인 전략들을 한꺼번에 관리할 수 있음. passport-local: email 또는 id로 로그인할 수 있게 도와줌. local.js에서 usernameField, passwordField에서 각각 email, password 값을 전달받는데, 이 데이터들은 프론트에서 넘어온 req.body..

NodeBird 복습/node.js

react nodeBird 2-3 (회원가입, CORS 적용하기)

회원가입 프론트엔드, 백엔드 완성하기 이제 회원가입에 대한 백엔드 서버에 구성을 해줍니다. 시퀄라이즈의 create 메소드를 통해 req.body에 들어있는 email, nickname, password 데이터를 받아옵니다. 또한, 데이터가 어떤 흐름으로 전송되는지를 먼저 알아야됩니다. 회원가입 폼에서 email, nickname, password 객체 데이터를 가지고 submit을 하게 되면, saga의 signUp의 SIGN_UP_REQUEST가 실행되고, signUp의 action데이터(email, nickname, password의 데이터들이 객체로 들어있음) signUpAPI의 data로 백엔드 서버로 데이터가 전송됩니다. 프론트서버에서 전송받은 데이터를 req.body로 백엔드서버에서 받게됩니..

NodeBird 복습/node.js

react nodeBird 2-2 (My SQL, 시퀄라이즈 적용하기)

MySQL을 쓰는 이유 현재 복습하고 있는 Nodebird는 사용자가 쓴 게시글은 User와 Post 간의 관계가 있고, 사용자가 쓴 댓글은 User와 Comment간의 관계가 있습니다. 각 모델간의 관계가 많이 있기 때문에 관계형 데이터베이스인 MySQL을 이용하였습니다. Sequelize 세팅하기 자바스크립트 코드를 SQL으로 바꿔주는 라이브러리인 sequelize와 노드와 MySQL을 연결해주는 드라이버인 mysql2을 설치합니다. npx sequelize init 명령어로 실행하면 seeder : 테스트에 필요한 정보를 정의함 models : DB 모델 정보를 저장 migrations : 마이그레이션에 필요한 정보를 자동으로 저장함 디렉토리와 config/config.json : DB 연결 정보등..

NodeBird 복습/node.js

react nodeBird 2-1 (노드 서버, express 적용하기)

https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Node.js는 자바스크립트 코드를 실행하는 런타임입니다. http는 노드에서 http라는 모듈을 적용해주기 때문에 서버구동시에는 꼭 써야됩니다. createServer 함수도 지원해주기때문에 서버설정 시에 꼭 필요합니다. listen(포트번호)를 해주면 해당 포트로 서버가 구동되기 때문에 작성해주는 것이 좋습니다. 프론트서버와 백엔드서버를 나누는 이유 프론트엔드 서버와 백엔드 서버를 나누는 이유는 나중 대규모 서비스가 되는것을 대비하기 위함인데요. 만약 한개의 컴퓨터에 프론트엔드 서버에 1000이라는..

맑쇼
'분류 전체보기' 카테고리의 글 목록 (2 Page)