• 개발

[React] 리액트 장고 연동#2, 리액트 한 파일에서 두개 컴포넌트 만들기, 구조분해를 사용하여 props쉽게 받기

[React] 리액트 장고 연동#1 , input태그 여러개한번에 관리하기, React에서 form사용하기 앞전에 node.js를 한참 공부했었는데, 공부해보면서 나한테는 사실 뭔가 잘 맞는거 같지가 않았다. 조금 체계적이지 않다할까? 너무 선택적지도 많고.. 대신 장고공부를 계속 했었다. 장고내에서 devforyou.tistory.com 리액트장고 연동#1 에서는 Post를 입력하는 Form태그를 만들었다. 추가 버튼을 누르면 아이템들이 촤르륵~ 떠야한다. 그러기 위해서 ItemList와 그속에 존재하는 Item을 만들어보자! //Post.js const result = [ { id : 1, name : "감자", price : 3000, }, { id : 2, name : "피자", price : 1..

[React] 리액트 장고 연동#1 , input태그 여러개한번에 관리하기, React에서 form사용하기

앞전에 node.js를 한참 공부했었는데, 공부해보면서 나한테는 사실 뭔가 잘 맞는거 같지가 않았다. 조금 체계적이지 않다할까? 너무 선택적지도 많고.. 대신 장고공부를 계속 했었다. 장고내에서 CRUD가 되는 게시판을 만들었는데, SSR 즉, 장고내에서 MVT를 이용하여 구성했고 프론트는 기본 HTML에 장고템플릿 엔진을 사용했다. 그렇게 게시판을 끝마치고 든 생각은, 이걸 리액트 즉 CSR에서는 어떻게 사용해야 할까? 이었다. 그래서 일단 머리박치기느낌으로 해보기로 했다. 이 프로젝트에 끝은 나만의 토이 프로젝트를 만들어 보는 것이다. 일단 이것은 1단계 어떻게 리액트를 꾸려야 백엔드API로 장고를 활용할 수 있는지 알기 위해서이다. 간단한 제품 등록 및 삭제를 만들어 보도록 하겠다. 리액트 정말 오..

[node.js] Passport를 이용한 local-login 전략

Node.js 교과서'라는 책을 통하여 공부. 22.01.19(수)까지 공부한 내용을 기록. ~ 428p 내가 공부하는 책에서 프론트의 전반적인 코드는 다 제공 됐고, 백엔드 서버에 관해서만 다룬다. 그래서 프론트 코드는 따로 블로그에 올릴 생각은 없다. 그리고 여기 코드를 이렇게 올리면 되나 싶은데, 책 저자분의 깃허브에가면 모든 실습코드가 다 공개 되고 있다 그러니 괜찮을 것 같다! 익스프레스를 공부하면 공부할 수록, 이게 뭔가 자율성이 너무 많고 딱딱 체계화 된거 같지가 않은 느낌이 든다.. 그래서 그런지 헷갈리기도 하고... 장고공부하는 것도 포스팅 할 생각인데 장고는 엄청 체계적인 느낌이 든다. 그래도 칼은 뽑았으니까 이책은 완독해볼 생각이다. 이번에는 로그인처리 하는방법에 대해서 공부했는데,..

[node.js] 익스프레스(express) 사용하기, 미들웨어란, 미들웨어 순서

Node.js 교과서'라는 책을 통하여 공부. 22.01.14(금) ~ 22.01.16(일)까지 공부한 내용을 기록. 227p ~ 256P #익스프레스(express)와 노드몬(nodemon) 설치하기 npm을 통해서 익스프레스를 설치해준다. 또 개발의 편의를 위해 nodemon을 설치해주는데 앞선 포스팅에서 배웠던 것처럼 npm -D 옵션을 주어 개발자용으로 사용한다. nodemon은 서버를 재시작할 필요없이 서버.js을 저장하면 알아서 반영해준다. 마치 윕개발할때 live serever이나 리액트를 사용할때 처럼 말이다! npm i express node i -D nodemon #익스프레스로 서버 시작해보기 const express = require('express'); const app = expr..

[node.js] npm 기본개념 및 package.json 과 package-lock.json에 대해서

Node.js 교과서'라는 책을 통하여 공부. 22.01.12(수) ~ 22.01.13(목)까지 공부한 내용을 기록. 208p ~ 226p 웹개발이나 리액트를 쓰면서 npm을 많이 사용했었다. npm으로 리액트 관련 모듈들도 설치하고 리액트를 npm run start로 시작시키기도 했는데, 사실 그냥 따라치는 느낌이었고 npm이 무엇인지 잘 몰랐다. 이번 단원 공부를 통해 npm에 대해서 알 수 있었다. 또 협업을 하면서 노드모듈들과 package.json파일을 어떻게 깃허브에서 관리해야하는지 정확한 개념을 이해하지 못했었는데 이번기회를 통해 그것들 또한 알 수 있었다. 내용들을 간단히 정리해보고자 한다. #npm이란? npm은 Node Package Manager의 약어로 말그대로 노드 패키지 매니저라..

[node.js] http모듈을 이용해 서버를 시작해 보기, Cookie와 Session알아보기

Node.js 교과서'라는 책을 통하여 공부. 22.01.09(일) ~ 22.01.011(화)까지 공부한 내용을 기록. 170p ~ 198p 요즘 멘토링 수업이랑 파트타임때문에 바빠서 공부할 시간이 별로 없었지만 최대한 시간을 내보려고 노력해 봤다. 저번까지는 기본적인 개념과 모듈들을 배웠는데 4장부터 직접 서버를 열어보기 때문에 무척 기대됐는데, 기대만큼 공부 할 수 없어서 조금 아쉬웠다. 지금도 일 끝나고 왔는데 무척 피곤하지만 후딱 정리해놓고 자야지 마음이 편할 것 같다! # 요청과 응답, 본격적인 http 시작 ##http모듈을 이용하여 서버 만들기 const http = require('http'); http.creatServer( (req,res) => { }) .listen(8080, ()=..