728x90 반응형 웹개발109 Rest API 웹서버의 자원을 클라이언트에 구애받지 않고, 사용할 수 있도록 하는 설계방식. HTTP를 통해 서버의 자원을 다루게 하는 기술. 서버의 응답은 특정 기기에 종속받지 않고 모든 기기에 통용될 수 있는 데이터만을 반환함. @GetMapping("/api/articles") public List index(){ return articleRepository.findAll(); } @GetMapping("/api/articles/{id}") public Article index(@PathVariable Long id){ return articleRepository.findById(id).orElse(null); } Get요청시 보여줄 데이터만을 리턴한다. 특정id값의 데이터만 보여줄 때는 PathVariable로.. 2023. 3. 11. 글 삭제하기(DB 데이터 삭제하기) 글 삭제하기 기능을 추가해본다. 1. 상세페이지에 글 삭제 버튼을 추가하고, 버튼 클릭시 /articles/{{article.id}}/delete 로 이동하도록 한다. (이 때 경로에 {{article.id}}값을 넘겨서 GET요청에 삭제대상 글의 id정보를 넘길 수 있도록 했다) (HTML에서 DELETE요청을 할 수 없어서, GET요청을 하였다. 추후에 JS를 이용하여 DELETE요청 방식으로 해보겠다) 2. Controller에서 해당 경로로 @GetMapping을 한다. 3. repository를 이용하여 DB에서 삭제대상 Entity를 받아오고 4. 삭제대상이 존재하면(null이 아니라면) repository를 이용하여 해당 entity를 삭제함. (추가) 5. 삭제시, 삭제되었다는 알림창을 보.. 2023. 3. 9. 스프링부트 .sql 파일 실행오류, 엔티티 id자동생성 오류 강의를 따라하다, .sql파일에 sql스크립트를 적어 더미데이터를 넣는 과정이 있었는데, 똑같이 따라해도 오류가 발생했다. Article이라는 테이블에 값을 넣는 코드였는데, Article이라는 테이블을 찾을 수 없다는 오류가 발생했다. 오류는.. article테이블을 찾을 수 없다는 것 외엔 정보가 없어 이리저리 찾아봤는데.. hibernate가 초기화 되기 전 .sql이 실행되어서 그렇다는 답을 찾았다. 그리하여 해결을 위해 application.property 파일에 다음과 같은 코드를 작성하였다. spring.jpa.defer-datasource-initialization= true; 스프링부트에서는 기본적으로 애플리케이션을 실행할 때 데이터 소스를 즉시 초기화하는데, 위 코드를 작성하면 애플리케.. 2023. 3. 9. 게시물 수정하기(DB 갱신) 1.상세페이지에서 수정버튼을 누르면 /articles/글번호/edit으로 이동하고, 2. edit페이지에서 내용을 수정해 submit버튼을 누르면 /articles/update로 post요청을 한다. 3. /articles/update로의 post요청을 처리한다(DB 갱신) 우선, 글의 상세페이지를 보여주는 mustache파일에 수정하기 링크를 하나 추가한다. 링크는 /articles/{{article.id}} 로 해서 현재 글의 id값이 url주소에 사용되게 했다. Controller에서 /articles/{id}/edit 경로의 get요청을 처리한다. repository를 이용해 DB에서 해당id번호에 맞는 entity를 찾아, articleEntity변수에 저장한다. view로 데이터를 전달하기 위.. 2023. 3. 9. 리다이렉트 설정하기 글 작성버튼을 눌렀을 때, 해당 글의 상세페이지로 이동했으면 좋겠다. 리다이렉트를 해주면 된다. PostMapping하고있는 컨트롤러의 리턴으로 redirect:/경로 를 적어주면 된다. 여기서 글의 id는 saved.id에 있으므로 getter를 이용하여 id값을 꺼내 썼다. articles/index.mustache 에서는 타이틀을 누르면 해당 글의 상세페이지로 이동하도록 했다 간단하게 title을 a태그로 감쌌다. 2023. 3. 8. DB의 모든 데이터 목록 가져오기 저번시간 특정Id의 아티클 데이터를 가져온것에 이어, 이번에는 모든 아티클 데이터를 가져와, 글 목록을 보여주자. 방법은 지난시간과 매우 비슷하다. 컨트롤러에서 1. repository가 DB에서 모든 데이터를 가져옴 2. entity 리스트를 모델에 등록 3. 뷰페이지 설정 을 하면 된다. /articles로 GetMapping해주고, repository.findAll() 메소드를 이용하여 아티클 엔티티 묶음을 가져온다. 이 때, articleRepository.findAll()의 리턴타입은 Iterator인데, ArticleRepository클래스 파일에서 findAll메소드를 오버라이딩하여 ArrayList로 반환하게 해주었다. . 그렇게 가져온 값은 List 타입 변수에 저장해두고, 뷰로 데이터를.. 2023. 3. 8. 데이터 조회하기 DB의 데이터를 조회하여 웹 페이지로 확인해보자. 이전에, /articles/new 에 접속해서 데이터를 입력하면, DB에 해당 데이터를 저장하도록 했다. 이번에는 /articles/1000 에 접속시 id가 1000인 데이터를 꺼내 보여줘보자. 1. 사용자가 브라우저를 통해 데이터를 요청함. /articles/{id} 2. 요청 url을 컨트롤러가 받아, 받은 url에서, 찾고자 하는 데이터의 정보를 repository에 전달. 3.repository는 DB에 데이터 요청, DB는 entity를 repository에 전달. 4. entity를 Model을 통해 View로 전달. 우선 View부터 만든다. 표 형식으로 보이게 했고, id, title,content를 보여준다. article이라는 데이터를.. 2023. 3. 8. 롬복(Lombok) 사용하기(생성자 코드 줄이기, 로깅) 롬복을 사용하여 리팩터링하기. 리팩터링으로 코드를 압축시킬수도 있고, 출력시스템을 간단하게 로깅으로 바꿀 수도 있다. 우선 롬복을 사용하기 위해 build.gradle의 dependencies에 아래 두 줄을 추가한다 compileOnly 'org.projectlombok:lombok' annotationProcessor 'org.projectlombok:lombok' 이후, 화면 우상단에 있는 코끼리 모양을 눌러 롬복을 설치. lombok 플러그인도 설치한다. (설치후에는 Enable annotation processing을 체크해주어야 함) 생성자, toString 간단하게 생성하기 생성자와 toString.. 길던 코드를 다 지워버리고 클래스에 어노테이션을 붙이면 된다. 생성자는 @AllArgsCo.. 2023. 3. 8. h2 데이터베이스 insert, select 데이터베이스는 데이터를 테이블 형태로 관리한다. 테이블은 행과 열로 구성되어있다. 웹 콘솔 접근하기. resources 아래 application.properties파일을 열어보면 아무것도 적혀있지 않은데, 이곳에 spring.h2.console.enabled=true 를 적어주면 h2 DB를 웹 콘솔로 접근할 수 있게 된다. localhost:8080/h2-console 로 접속하면 이러한 로그인창이 뜨는데, 중간에 JDBC URL을 잘 적어줘야한다. 이것은 어디서 확인하느냐? 서버 실행시키고 터미널을 보면 값들이 주루룩 나와있는데, 여기서 jdbc로 검색해보면 나온다. 이것을 저 JDBC URL에 붙여넣고 로그인 하면 된다. 그럼 대략 이런 창이 나온다. select문을 이용하고 run을 눌러보면 아.. 2023. 3. 8. [Springboot] JPA를 이용하여 DB에 데이터 생성하기 JPA의 핵심 도구로는 Entity, Repository가 있다 Entity는 자바객체를 DB가 이해할 수 있게 규격화한 데이터임. 이렇게 잘 규격화한 데이터를 repository라는 일꾼을 통해 DB에 전달되고 처리됨. 우선, DTO인 ArticleForm 타입의 form을 toEntity()메소드를 이용하여 Entity인 Article타입으로 변환해야 한다. 이를 위해 1.entity패키지 내에 Article클래스를 만들어야하고 2.ArticleForm클래스 내에 toEntity()메소드를 만들어야 한다. 이것은 entity패키지의 Article클래스이다. 클래스를 JPA Entity로 지정하기 위해서 @Entity 어노테이션을 붙인다. title과 content필드에는 @Column어노테이션을 붙여.. 2023. 3. 8. [Spring boot] 폼 데이터를 받아 컨트롤러에서 확인하기 1. 폼이 있는 view페이지 생성. form태그의 action과 method설정. 여기서 보낸 데이터는 DTO에 담김. 2. dto 작성 3. controller 작성 templates 폴더 아래에 articles폴더를 만들고 그 아래 new.mustache 파일을 생성했다. 여기에 form태그를 만들었는데, title과 content 입력 input이 있고, submit 버튼이 있다. action 경로는 /articles/creates 이고 메소드는 post로 설정. 각 인풋태그는 name을 설정해주었는데, 여기서 설정한 name이 다음단계에 만들 dto의 필드명과 같아야 한다. 기본패키지 아래 dto패키지를 만들고, ArticleForm 클래스를 작성하였다. 아까 input태그에 있었던 name인 .. 2023. 3. 7. 뷰 템플릿 레이아웃 나누기 이러한 레이아웃이 있다. 상단 네비게이션 바, 하단 푸터, 중앙부에 콘텐츠가 자리잡고있다. 네비게이션 바와 푸터는 어느 페이지든 항상 있을터인데.. 매번 그 긴 코드를 다 적어주어야 할까? 조립식으로 사용하자. (header.mustache) Navbar Home (current) Link Dropdown Action Another action Something else here Disabled Search HTML파일의 맨 위~ nav바까지의 모든 코드를 header.mustache 파일에 저장하였고 (footer.mustache) @myPage link footer또한 footer부분부터 html의 맨 아래코드까지 따로 footer.mustache에 저장하였다. {{>layouts/header}} {.. 2023. 3. 7. [Spring boot] mustache템플릿, Controller, Model resources/static/에 저장한 파일은 /파일명 경로로 접속하면 해당 파일을 보여준다. .mustache 템플릿 엔진 사용하기. templates폴더 아래에 .mustache파일을 생성하고, 플러그인도 설치한다. (얼마전 Node.js강의에서 썼던 .ejs와 비슷하게 생각하면 될 것 같다) HTML인데 중간에 변수, 반복문 등을 넣을 수 있는 듯 하다. 변수는 {{변수명}} 으로 사용하면 된다. 그런데.. 이 파일을 어느경로로 접속시 보여줄건지, 변수는 뭘 줄건지... 를 정해야 하는데 그것을 각각 Controller, model이 담당하게 된다. Controller, Model java폴더 아래 디폴트폴더 아래에 controller라는 패키지를 하나 생성한다. @Controller를 입력하여 .. 2023. 3. 7. [Node.js] Socket.io를 이용하여 실시간 통신하기 저번에 채팅기능을 구현할 SSE방식을 사용했는데 서버->유저 방향으로만 실시간 통신이 된다. socket.io를 이용하여 양방향 통신을 해보자. 우선 socket.io를 설치한다. npm install socket.io 설치를 끝냈다면 const http = require('http').createServer(app); const {Server} = require("socket.io"); const io = new Server(http); server.js파일에 위와같은 코드를 추가하고, app.listen으로 작성했던 코드를 http.listen으로 수정한다. (express라이브러리를 이용하던 것을 http로 수정) 그리고 실시간 통신을 할 HTML파일을 하나 만든다. 여기서는 socket.ejs파일.. 2023. 3. 3. [Node.js] 채팅 기능 구현하기 당근마켓을 이용해본 적 있다면 익숙할 기능. 채팅하기 기능이다. 어떠한 게시물에서 '채팅하기'버튼을 누르면 글 작성자와 1대1 채팅을 시작할 수 있다. 그리고, /chat 접속시 내가 참여중인 채팅방을 보여주자. 채팅기능 구현을 위한 단계는 이렇다. 채팅방 개설. 1. list.ejs 에 '채팅하기'버튼을 추가하고, 버튼 클릭시 post요청(채팅방 개설) 2. server.js에서 1번의 post요청 처리 3. chat.ejs 디자인 4. server.js에서 /chat으로의 get요청 처리(이 때, 현재 로그인한 사용자가 속해있는 채팅방들의 정보를 전달) 여기까지 했다면 이제부터 채팅방의 메세지들을 처리하는 코드를 추가. 5. /chat에서 메세지 전송시 post요청(어떤 채팅방에서,언제,어떤 내용인지.. 2023. 3. 2. [Node.js] 환경변수로 민감한 정보 가리기(.env) 내 DB 주소나 포트번호 등 민감정보를 .env를 이용하여 숨겨보자. npm install dotenv 우선 터미널에 다음과 같이 입력해서 dotenv를 설치하자. 이제 .env라는 파일을 하나 생성해서 민감정보를 작성하자. (.env) PORT=8080 DB_URL="abcdefg/hijk.com" 이제 원래 파일로 돌아가서, 민감정보를 사용할 위치에 process.env.변수명 을 적어주면 된다. MongoClient.connect(process.env.DB_URL, function (에러, client) { 예를들면 이렇게. 원래 URL을 적는 곳에 process.env.DB_URL을 적어주었다. 그럼 끝이다. 깃허브 등에 올릴때는 gitignore에 .env를 등록해서 .env를 업로드하지 않으면.. 2023. 2. 26. [Node.js] 이미지 서버 만들기(multer 라이브러리 사용) 이미지를 업로드하고, 서버에서 이를 처리하여 이미지를 저장하고 사용할 수 있게 만들어보자. 우선 업로드를 할 페이지 /upload를 만들어보자. (upload.ejs) 업로드페이지 전송 간단하게 form태그 안에 input태그 하나와 button태그 하나를 추가해서 만들었다. form에서 method="POST", action="/upload"로 설정하였다. enctype은 서버로 폼 데이터를 전송할 때 인코딩 형식 설정을 하는것인데 일반적으로는 enctype="multipart/form-data"로 설정하면 된다. (server.js) app.get('/upload',function(요청,응답){ 응답.render('upload.ejs'); }) 우선 /upload로의 get요청을 처리해준다. 이제 p.. 2023. 2. 26. [Node.js] router 폴더 및 파일로 API관리하기 지금까지 하나의 서버파일에 여러가지 app.get(), app.post()등의 코드를 작성했다. 이런 코드들을 비슷한 요소들을 묶어 별도의 파일로 관리하고싶을 때는 어떻게 해야할까? 우선 route를 보관할 폴더를 하나 만들었다. /route 그리고 폴더 내부에 js파일을 생성한다. var router = require('express').Router(); router.get('/shop/shirts',function(요청,응답){ 응답.send('셔츠팔아요'); }) router.get('/shop/pants',function(요청,응답){ 응답.send('바지팔아요'); }) module.exports = router; (shop.js) 이 파일에는 /shop으로 시작하는 url들의 요청을 처리하는 .. 2023. 2. 26. [Node.js] 회원가입, 회원기능 만들기 저번에 로그인기능을 만든 것에 이어, 조금의 응용을 더하여 회원가입과 회원기능(글 쓴 사람만 글 삭제 가능 등)을 만들어보자. app.post('/register',function(요청,응답){ db.collection('login').findOne({id:요청.body},function(에러,결과){ if(결과!=null){ 응답.send('이미 존재하는 아이디입니다') console.log(결과); }else{ //아이디 생성 db.collection('login').insertOne({id:요청.body.id,pw:요청.body.pw},function(에러,결과){ 응답.redirect('/'); }) } }) }) 회원가입은 간단하게 만들었다. id중복이 있는지만 체크한 후 바로 아이디가 만들어지.. 2023. 2. 25. [Node.js] 검색기능 만들기(query string) 게시판의 검색기능을 만들어 보자. (list.ejs) 검색 게시판의 글을 보여주는 페이지인 list.ejs 이곳에 검색을 위한 input태그와 검색버튼을 만들어준다. (list.ejs의 script 태그) $('#search').click(function(){ var 검색어 = $('#search-input').val() window.location.replace(`/search?value=${검색어}`) }) 검색버튼을 눌렀을 때, `/search?value=${검색어}` 경로로 이동하도록 했다. 왜 이렇게 했을까? 검색을 하려면 서버에 검색어를 넘겨줘야하는데, POST요청으로 데이터를 보내도 되지만, 특정 url뒤에 데이터를 심어 GET요청을 보내는 것으로도 데이터를 보낼 수 있기 때문이다. 이를 q.. 2023. 2. 24. 이전 1 2 3 4 5 6 다음 728x90 반응형
