실천하기46 09. 라우터로 복잡한 코드 분리하기 / express 코드가 길어지다보니 슬슬 헷갈리기 시작한다. 라우터로 코드를 분리해서 사용해보자. 라우터에 관한 설명은 아래를 참고하자. https://hancoco.tistory.com/88 [220208] 라우터와 미들웨어, 매개변수 next, 라우터 매개변수 목록 1. 라우터와 미들웨어 2. 미들웨어 매개변수 next 3) 라우터 매개변수 미들웨어와 라우터의 정의 미들웨어는 양쪽을 연결하여 데이터를 주고 받을 수 있도록 중간에서 매개 역할을 하는 소프 hancoco.tistory.com https://hancoco.tistory.com/89 [220209] 라우터 2개 사용하기, 라우터를 폴더화 시키는 2가지 방법 목록 1) 라우터 2개 사용하기 2) 다른 파일에 있는 코드를 불러오기 3) 라우터를 폴더화 시키기 .. 2024. 3. 19. 08. 쿠키를 이용한 로그인기능 만들기 / cookie-parser cookie와 cookie-parser에 관한 설명은 아래글을 참고하자. https://hancoco.tistory.com/126 [220314] 미들웨어 body-parser와 cookie-parser body-parser node.js의 모듈 중 하나이며, post request body에서 파라미터를 편리하게 추출해주는 미들웨어다. app.post('/login',(req,res)=>{ console.log(req.body) } 가장 흔하게 쓰는 예시인 req.body는 사실 body-parser를 hancoco.tistory.com https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%BF%A0%ED%82%A4Cookie-%EB%8B%A4%EB%A3%A8%EA.. 2024. 3. 18. 07. CRUD - TO DO LIST 만들기 / nodemon, chokidar 기본적인 설치를 끝마친 후에 다음으로 진행하자. 잘 모르겠다면 이 시리즈의 처음부터 다시 보고오면 된다. npm init npm install express npm install nunjucks https://hancoco.tistory.com/392 00. 개발환경 만들기 개발 기억을 복구하기 위해서 만드는 시리즈. 아무것도 없는 지식부터 홈페이지를 만들 수 있도록 진행할 예정이다. 개발환경 : 맥북에어(실리콘칩) 개발환경 만들기 https://hancoco.tistory.com/68 [2201 hancoco.tistory.com 1. nodemon 설치 우선 매번 서버를 껐다켰다하면서 사이트 새로고침하기 귀찮으니까, 자동으로 수정된 코드를 업데이트 해주는 nodemon을 설치했다. https://ha.. 2024. 3. 18. 06. CRUD - 글 수정기능 만들기 상세페이지 안에 들어가서 글을 수정할 수 있는 기능을 만들어보자. app.get('/view',(req,res)=>{ const index = req.query.index const test = list.list const view = test[index-1] res.render('board/view',{ data:view, index:index }) }) /view에서 이미 몇번째 글인지 알려주는 index 정보값을 가지고 있는 상태다. 수정하기 이 index값을 수정페이지로 넘어갈때 query 값으로 넘겨준다. app.get('/update',(req,res)=>{ console.log('수정한다!',req.query) }) 받은 쿼리값을 바탕으로 수정페이지를 구성하자. app.get('/update.. 2024. 3. 17. 05. CRUD - 삭제 기능 만들기 {% for item in list %} {{loop.index}} {{item.subject}} {{item.username}} {{item.date}} {% endfor %} 삭제버튼을 누르면 반응하는지 알아보겠다. app.post('/delete',(req,res)=>{ console.log('삭제한다!!',req.query) console.log('삭제한다!!',req.body) res.redirect('/list') }) app.post('/delete',(req,res)=>{ //인덱스를 찾아야하므로 1을 뺀다 const index=req.body.index-1 //list안의 배열을 test로 옮기고 const test = list.list //인덱스부터 시작해서 1개 제거하는 splice .. 2024. 3. 17. 04. CRUD - 상세페이지 만들기 상세페이지 틀 만들기 제목을 클릭하면 상세페이지로 갈 수 있게 만들고 싶으므로, 제목에 링크를 걸겠다. {% for item in list %} {{loop.index}} {{item.subject}} {{item.username}} {{item.date}} {% endfor %} 상세페이지인 view.html도 만든다. 제목 : 작성자 : 작성일 : 데이터 끌어오기 {% for item in list %} {{loop.index}} {{item.subject}} {{item.username}} {{item.date}} {% endfor %} 여기서 우리가 주소로 이동한것뿐만 아니라, 주소에다가 query 값을 보낸 것을 알아야한다. 이동한 주소를 잘 보면 http://localhost:3000/view.. 2024. 3. 17. 03. CRUD - 글쓰기 게시판 만들기 간단한 글쓰기 게시판을 write.html로 만들자 제목 : 작성자 : 작성일 : list.html에는 write.html로 갈 수 있는 버튼을 만들어줬다. 글쓰기 server.js에 write.html과 연결해준다. app.get('/write',(req,res)=>{ res.render('board/write') }) 글 쓴 내용을 응답 받을 수 있도록 만들자 우리는 이미 위에서 post 명령문을 날리는 form 을 사용했다. 그러면 정말 post 응답을 하고 있는건지 확인하기 위해서 server.js에서 다음 코드를 입력해준다. app.post('/write',(req,res)=>{ console.log('post문 응답합니다!') }) 입력란에 입력하고, 다음처럼 코드를 바꿔서 실행을 해보면 엄청.. 2024. 3. 17. 02. CRUD - 게시물 리스트 만들기 홈과 연결되는 게시물 리스트 페이지를 만들자. 저번엔 홈을 만들어 봤다면 이번엔 게시물 리스트를 만들어보자. index.html에서 이미 게시글로 갈 수 있는 링크를 걸어놓았다. Logo 게시판 가기 게시판 가기를 누르면 다음과 같은 주소로 이동하면서 오류가 뜬다. 우리는 이 주소에다가 list가 뜨도록 만들것이다. 우선 list.html을 작성하고 Logo 번호 제목 작성자 작성일 1 이 곳은 제목 나는야 작성자 오늘은 작성일 server.js에서 list.html파일을 불러올 수 있도록 연결코드를 작성해준다. //views안에 있는 board폴더 안에 있는 list.html을 실행시켜주는 명령어 app.get('/list', (req, res) => { res.render('board/list') }.. 2024. 3. 17. 01. 홈 만들기 / express, nunjucks 우선 눈에 보이는 홈부터 만들자. html에 대해서는 html 목록에 있는 기존 글들을 보면 된다. 나는 꾸미는 것보다 기능 구현을 우선시 할것이므로 이대로 진행하겠다. index.html 만들기. Logo 게시판 가기 저장을 했다면, 저장한 html 파일을 끌어서 인터넷창에 던져놓자. 그럼 이런 화면이 보인다. 아주 잘했다. html 파일이 굴러간다는 소리다. 이제 직접 인터넷창에 던지지 않고도 코드로 실행시켜보도록 하겠다. 우선 인터넷 창이 굴러가려면 서버가 응답해야하고 이를 위해서는 express와 nunjucks를 실행시켜야한다. express와 nunjucks에 관한 설명은 다음글을 참고하자. https://hancoco.tistory.com/78 [220128] express 모듈로 서버 시작.. 2024. 3. 17. 00. 개발환경 만들기 개발 기억을 복구하기 위해서 만드는 시리즈. 아무것도 없는 지식부터 홈페이지를 만들 수 있도록 진행할 예정이다. 개발환경 : 맥북에어(실리콘칩) 개발환경 만들기 https://hancoco.tistory.com/68 [220125] NODEJS, 무작정 맥에서 시작하기 (M1칩) ( 맥북을 사용하는 관계로 맥OS 기준으로 작성.) 윈도우와 다르게 맥OS는 터미널만 켜서 설치가 가능하다고 한다! dock에 등록해서 실행하는 법도 있겠지만, 귀찮아서 단축키를 만들어서 쓰고 있다 hancoco.tistory.com https://hancoco.tistory.com/70 [220125] 맥북에서 터미널, nodejs 개발환경 세팅하기 (M1칩) + 용어설명, npm, nvm, express 목차 1. 터미널 명.. 2024. 3. 17. 이전 1 2 3 4 5 다음
