# 강사 정보 - 박상원 강사 - 이메일 : qoro33@naver.com # 수업 - [주소, https://www.slog.gg/p/13985](https://www.slog.gg/p/13985) # 유용한 사이트 - [https://www.mycompiler.io/ko](https://www.mycompiler.io/ko) - [gitignore](https://www.toptal.com/developers/gitignore) ## gitignore 붙여넣기 ``` target/ !.mvn/wrapper/maven-wrapper.jar !**/src/main/**/target/ !**/src/test/**/target/ ### IntelliJ IDEA ### .idea/modules.xml .idea/jarRepositories.xml .idea/compiler.xml .idea/libraries/ *.iws *.iml *.ipr ### Eclipse ### .apt_generated .classpath .factorypath .project .settings .springBeans .sts4-cache ### NetBeans ### /nbproject/private/ /nbbuild/ /dist/ /nbdist/ /.nb-gradle/ build/ !**/src/main/**/build/ !**/src/test/**/build/ ### VS Code ### .vscode/ ### Mac OS ### .DS_Store ### log ### logs *.log ### tomcat ### conf .smarttomcat work work/ ``` # 프로젝트 관련 사이트 - [인텔리제이](https://www.jetbrains.com/ko-kr/idea/) - [메이븐리포지터리](https://mvnrepository.com/) # JSP 문서에서 HTML, Emmet(자동완성) 기능 사용방법 ![사용법](https://ifh.cc/g/kYADCC.png) # 0강 - [영상 - 25 01 14, slog 13985, JSP 게시판 만들기, 0강, 수업 개요](https://youtu.be/EZKtcPmZuHE) # 1강 - [영상 - 25 01 14, slog 13985, JSP 게시판 만들기, 1강, 톰캣 10 설치 및 기본 세팅](https://youtu.be/JxgM0ZHRgko) - [다운로드](https://tomcat.apache.org/download-10.cgi) - 톰캣10의 경로 : C:\works\apache-tomcat-10.1.34 # 2강 - [강사 GIT](https://github.com/SangWon7242/jsp_board_25_01_14) - [영상 - 25 01 14, slog 13985, JSP 게시판 만들기, 2강, 인텔리제이 프로젝트 세팅 후 깃허브에 연결](https://youtu.be/yxLzPE_VVXs) - git init - git config --global user.name "아이디" - git config --global user.email "이메일" - git remote add origin '깃허브 프로젝트 주소' - git add . - git commit -m "세팅" - git push origin master # 3강 - [GIT](https://github.com/SangWon7242/jsp_board_25_01_14/commit/6a4008f0e10f0a6476c8659f76d032b050e5d8a5) - [영상 - 25 01 14, slog 13985, JSP 게시판 만들기, 3강, 프로젝트에 톰캣 등록, src/webapp/index.html 파일 생성](https://youtu.be/IeoX15QCMlc) ![톰캣 등록](https://ifh.cc/g/7MRTCV.jpg) ### Tomcat 사용중 8080포트 사용중이라는 에러가 발생하는 경우 1. cmd에서 포트를 죽이는 명령어를 사용하여 해결 2. cmd 창에 `netstat -a -o` 명령어 입력 3. `taskkill /f /pid PID번호` 4. `성공 프로세스가 종료되었습니다.` 메시지 나오면 성공! # 4강 - [영상 - 25 01 14, slog 13985, JSP 게시판 만들기, 4강, 톰캣은 건물주이고, 우리 프로젝트는 그 건물의 입주민 입니다.](https://youtu.be/jWf3wq3EZLo) # 5강 - [GIT](https://github.com/SangWon7242/jsp_board_25_01_14/commit/a9ba65b10f647077a547a540cd53bb29b928c986) - [영상 - 25 01 14, slog 13985, JSP 게시판 만들기, 5강, 자카르타 API 추가, HomeServlet 추가](https://youtu.be/X03aYWPAOxs) - [Jakarta Servlet » 6.0.0](https://mvnrepository.com/artifact/jakarta.servlet/jakarta.servlet-api/6.0.0) ```xml jakarta.servlet jakarta.servlet-api 6.0.0 provided ``` # 6강 - [영상 - 25 01 14, slog 13985, JSP 게시판 만들기, 6강, 톰캣 버전을 10.1.34로 변경](https://youtu.be/2u7NUT5Fk3g) # 7강 - [GIT](https://github.com/SangWon7242/jsp_board_25_01_14/commit/6d9319583de60682613f960089945b05a03f145c) - [영상 - 25 01 14, slog 13985, JSP 게시판 만들기, 7강, 서블릿으로 구구단 구현](https://youtu.be/zXi6ADCA7s4) - 5단 요청 : [http://localhost:8030/gugudan?dan=5](http://localhost:8030/gugudan?dan=5) - 5단을 5까지 곱하는 요청 : [http://localhost:8030/gugudan?dan=5&limit=5](http://localhost:8030/gugudan?dan=5&limit=5) # 8강 - [영상 - 25 01 14, slog 13985, JSP 게시판 만들기, 8강, resp.getWriter().append("내용"); 의 의미](https://youtu.be/o9yUlhAIRAM) # 9강 - [GIT](https://github.com/SangWon7242/jsp_board_25_01_14/commit/4abd378f9715e973ab789fc1e8ac20f44bdb9711) - [영상 - 25 01 14, slog 13985, JSP 게시판 만들기, 9강, req와 resp를 직접 다루기 귀찮으니, Rq 도입](https://youtu.be/33Tj0zNa6cg) # 10강 - [GIT](https://github.com/SangWon7242/jsp_board_25_01_14/commit/b400c84ac5c2f6d0029bdbc0726873a983079030) - [영상 - 25 01 14, slog 13985, JSP 게시판 만들기, 10강, JSP 방식으로 구구단 구현](https://youtu.be/GU9KT6KK8K4) ### 접속링크 - [http://localhost:8030/gugudan.jsp?dan=5&limit=3](http://localhost:8030/gugudan.jsp?dan=5&limit=3) # 11강 - [영상 - 25 01 14, slog 13985, JSP 게시판 만들기, 14강, JSP 내장객체](https://youtu.be/p5STpHXalmI) # 12강 - [GIT](https://github.com/SangWon7242/jsp_board_25_01_14/commit/5a590f978f31795404c8d43d2b72fb0fc8a89ac0) - [영상 - 25 01 14, slog 13985, JSP 게시판 만들기, 15강, JSP에서 ＜%와 ＜%=의 차이](https://youtu.be/YnEMplmyEWo) # 13강 - [GIT](https://github.com/SangWon7242/jsp_board_25_01_14/commit/63d279fdbbad52ee1ac9990668a12118f46b8d01) - [영상 - 25 01 16, slog 13985, JSP 게시판 만들기, 15강, JSP에 Rq 클래스 도입](https://youtu.be/IHdclRujpYk) # 14강 - [GIT](https://github.com/SangWon7242/jsp_board_25_01_14/commit/8623dc7e2e7ad4f445d63e065cbc89008aee2884) - [영상 - 25 01 16, slog 13985, JSP 게시판 만들기, 14강, 구구단에 model2 방식 적용](https://youtu.be/r-dPjjGJs0g) # 15강 - [GIT](https://github.com/SangWon7242/jsp_board_25_01_14/commit/e2ae0dad2e001d36504cc3f692c67d0911a5fd32) - [영상 - 25 01 16, slog 13985, JSP 게시판 만들기, 15강, JSP에 EL문법을 도입하여 스클립틀릿 문법 제거](https://youtu.be/EH0fBrbBJ9c) # 16강 - [GIT](https://github.com/SangWon7242/jsp_board_25_01_14/commit/54d60aac7afdec18f29c56a071bd46db815d7f2b) - [영상 - 25 01 16, slog 13985, JSP 게시판 만들기, 16강, JSP에 JSTL CORE 적용하여 유연한 코드 작성](https://youtu.be/lX-ah_FRyvU) ```xml org.eclipse.jetty apache-jstl 11.0.0 ``` # 챕터 2. 기본 프레임워크 구현 ## 1강, 라우팅 기능 구현 - [GIT](https://github.com/SangWon7242/jsp_board_25_01_14/commit/3393ce5d75ae512ffcca1bdcb83ea5986f8cf953) - [영상 - 25 01 16, slog 13985, JSP 게시판 만들기(기본 프레임워크 구현), 1강, 라우팅 기능 구현](https://youtu.be/GhZ9msnGFgU) #### 시나리오 1. 요청 : `/usr/article/list` - '게시물 리스트' 출력 2. 요청 : `/usr/member/list` - '회원가입' 출력 ## 2강, 게시물 5개 노출 - [GIT](https://github.com/SangWon7242/jsp_board_25_01_14/commit/f9f96cef233d749bd61f03a1645eb02773f3d56e) - [영상 - 25 01 16, slog 13985, JSP 게시판 만들기(기본 프레임워크 구현), 2강, 게시물 객체 5개를 노출](https://youtu.be/Oryh12A4qe4) #### 시나리오 - 요청 : `/usr/article/list` ``` 게시물 리스트 1번 : 제목1 2번 : 제목2 3번 : 제목3 4번 : 제목4 5번 : 제목5 ``` ## 3강, 게시물 리스트를 역순으로 출력 - [GIT](https://github.com/SangWon7242/jsp_board_25_01_14/commit/62345f37880263ef2281cf15b801b51d9245f3ee) - [영상 - 25 01 16, slog 13985, JSP 게시판 만들기(기본 프레임워크 구현), 3강, 게시물 리스트를 역순으로 출력](https://youtu.be/ji4JtyvOcQw) #### 시나리오 - 요청 : `/usr/article/list` ``` 게시물 리스트 5번 : 제목5 4번 : 제목4 3번 : 제목3 2번 : 제목2 1번 : 제목1 ``` ## 4강, 게시물 작성 폼 구현 - [GIT](https://github.com/SangWon7242/jsp_board_25_01_14/commit/e6559715cd6bb2dd3e2f90cecdd688ae05fe8160) - [영상 - 25 01 16, slog 13985, JSP 게시판 만들기(기본 프레임워크 구현), 4강, 게시물 작성 폼 구현](https://youtu.be/SMaoEny4lR4) #### 시나리오 - 요청 : `/usr/article/write` ``` 게시물 작성폼 노출 ``` ## 5강, 폼 학습, 네이버 검색폼 구현 - [CODEPEN](https://codepen.io/sangwon7242/pen/mybKLbr) - [영상 - 25 01 16, slog 13985, JSP 게시판 만들기(기본 프레임워크 구현), 5강, 폼 학습, 네이버 검색폼 구현](https://youtu.be/KpB9BtMBnco) ## 6강, 폼 학습, 자바스크립트 폼 체크 - [CODEPEN](https://codepen.io/sangwon7242/pen/dPbKePY?editors=1011) - [영상 - 25 01 16, slog 13985, JSP 게시판 만들기(기본 프레임워크 구현), 6강, 폼 학습, 자바스크립트 폼 체크](https://youtu.be/hKDzO6TUvsc) ## 7강, 게시물 작성폼에 자바스크립트 폼체크 적용 - [GIT](https://github.com/SangWon7242/jsp_board_25_01_14/commit/9df42f5e690982c07a15964b0fe3b91196ce307b) - [영상 - 25 01 16, slog 13985, JSP 게시판 만들기(기본 프레임워크 구현), 7강, 게시물 작성폼에 자바스크립트 폼체크 적용](https://youtu.be/26nRmjvLmh4) ## 8강, REST API에 대한 간단 설명 - [영상 - 25 01 21, slog 13985, JSP 게시판 만들기(기본 프레임워크 구현), 8강, REST API에 대한 간단 설명](https://youtu.be/Y9qvHGH6sag) ### REST API란? ``` REST : API를 설계하는 방법 - 웹에서 데이터를 주고 받는 규칙 - 기본 원친(HTTP 프로토콜)을 따름 - Request(요청), Response(응답) REST API : 데이터를 주고받는 방법 HTTP 메서드 - GET : 글 작성 페이지 가져오기 -> http://localhost:8030/usr/article/write -> http://localhost:8030/usr/article/modify/1 - POST : 글 추가 -> http://localhost:8030/usr/article/write - PUT : id가 1번 글을 수정 -> http://localhost:8030/usr/article/modify/1 -> http://localhost:8030/usr/article/modify?id=1 - DELETE : id가 1번 글을 삭제 -> http://localhost:8030/usr/article/delete/1 -> http://localhost:8030/usr/article/delete?id=1 ``` ## 9강, POST 방식으로 입력된 게시물 작성 데이터 확인 - [GIT](https://github.com/SangWon7242/jsp_board_25_01_14/commit/17ae623c62d2db46ecd16419a3ba1490af921e0e) - [영상 - 25 01 21, slog 13985, JSP 게시판 만들기(기본 프레임워크 구현), 9강, POST 방식으로 입력된 게시물 작성 데이터 확인](https://youtu.be/ZLOSonpcMHA) ## 10강, 게시물 서비스와 리포지터리 도입 - [GIT](https://github.com/SangWon7242/jsp_board_25_01_14/commit/01b4bcb4dbe29449daebf334861e95549c00e488) - [영상 - 25 01 21, slog 13985, JSP 게시판 만들기(기본 프레임워크 구현), 10강, 게시물 서비스와 리포지터리 도입](https://youtu.be/Lf-veXSG0X0) ## 11강, 게시물 작성에는 GET 방식으로 폼 노출, POST 방식으로 폼 데이터 처리, 둘다 필요 - [영상 - 25 01 21, slog 13985, JSP 게시판 만들기(기본 프레임워크 구현), 11강, 게시물 작성에는 GET 방식으로 폼 노출, POST 방식으로 폼 데이터 처리, 둘다 필요](https://youtu.be/IXQGXeG1-MU) ## 12강, 서비스와 리포지터리가 작동하는 방식을 코드 수준에서 설명 - [영상 - 25 01 21, slog 13985, JSP 게시판 만들기(기본 프레임워크 구현), 12강, 서비스와 리포지터리가 작동하는 방식을 코드 수준에서 설명](https://youtu.be/j1h4KEoJMiA) ### 게시물 작성시 실행되는 코드 ``` 프로그램 실행 컨테이너에 있는 리포지터리, 서비스, 컨트롤러 순으로 객체 생성 요청 : /usr/article/write DispatcherServlet::doGet 메서드 - Rq 객체 생성 - rq.getMethod() -> 'GET' 할당 - rq.getUrlPath() -> '/usr/article/write' 할당 - articleController::showWrite(rq) 메서드 - write.jsp 폼 노출 - subject, content 작성 DispatcherServlet::doGet 메서드 - Rq 객체 생성 - rq.getMethod() -> 'POST' 할당 - rq.getUrlPath() -> '/usr/article/write' 할당 - articleController::doWrite(rq) 메서드 - subject, content 입력 확인 - articleSerivce::write(subject, content) 메서드 - articleRepository::write(subject, content) 메서드 - Article 객체 생성 - 생성 된 Article 객체 List 저장 ``` # 13강, getActionPath 도입 - [GIT](https://github.com/SangWon7242/jsp_board_25_01_14/commit/b2ea9c8ce346b3aa4ee6f9566b60734c365a5ae9) - [영상 - 25 01 21, slog 13985, JSP 게시판 만들기(기본 프레임워크 구현), 13강, getActionPath 도입](https://youtu.be/FY0caCloTsk) # 14강, 게시물 상세페이지 - [GIT](https://github.com/SangWon7242/jsp_board_25_01_14/commit/3b1092828ce8e21957bea4b7f3f42bee9e9cf215) - [영상 - 25 01 21, slog 13985, JSP 게시판 만들기(기본 프레임워크 구현), 14강, 게시물 상세페이지](https://youtu.be/qMjr2MEQya8) # 15강, 게시물 리스트에 상세보기 링크 걸기 - [GIT](https://github.com/SangWon7242/jsp_board_25_01_14/commit/d7e322ce9f96f04cc0f3dd50b4dcf5de9827875e) - [영상 - 25 01 21, slog 13985, JSP 게시판 만들기(기본 프레임워크 구현), 15강, 게시물 리스트에 상세보기 링크 걸기](https://youtu.be/pnpBEaVpfKA) # 16강, getLongPathValueByIndex 도입하여, 상세페이지에 적절한 게시물 노출 - [GIT](https://github.com/SangWon7242/jsp_board_25_01_14/commit/cd056cd8d5e9e28f1b923b7c9e6bccfc231f2672) - [영상 - 25 01 21, slog 13985, JSP 게시판 만들기(기본 프레임워크 구현), 16강, getLongPathValueByIndex 도입하여, 상세페이지에 적절한 게시물 노출](https://youtu.be/h2TRmS25sW8) # 17강, 리스트페이지를 테일윈드로 꾸미기 - [Daisy UI](https://daisyui.com/) - [테일윈드 css](https://tailwindcss.com/) - [테일윈드 cheet sheet](https://nerdcave.com/tailwind-cheat-sheet) - [눈누](https://noonnu.cc/) - [GIT](https://github.com/SangWon7242/jsp_board_25_01_14/commit/a212a4f10e748050b7dc80b99cdca06831192b2d) - [영상 - 25 01 21, slog 13985, JSP 게시판 만들기(기본 프레임워크 구현), 17강, 리스트페이지를 테일윈드로 꾸미기](https://youtu.be/BogsJlTmh5s) # 18강, 게시물 상세보기 꾸미기, 수정&삭제버튼 추가 - [GIT](https://github.com/SangWon7242/jsp_board_25_01_14/commit/fb0846f89f1e5e635659bd5776e91ccd5c6b7a48) - [영상 - 25 01 23, slog 13985, JSP 게시판 만들기(기본 프레임워크 구현), 18강, 게시물 상세보기 꾸미기, 수정&삭제버튼 추가](https://youtu.be/g-moaDdpmas) # 19강, 게시물 삭제 처리 -[GIT](https://github.com/SangWon7242/jsp_board_25_01_14/commit/8008cdcd21d222e5674916759d3f31794438fc81) - [영상 - 25 01 23, slog 13985, JSP 게시판 만들기(기본 프레임워크 구현), 19강, 게시물 삭제 처리](https://youtu.be/wDSNpf5tQDc) # 20강, 삭제하기 전에 삭제할지 confirm -[GIT](https://github.com/SangWon7242/jsp_board_25_01_14/commit/ed27ff9d42222864048c41dabd3a441d7777c400) - [영상 - 25 01 23, slog 13985, JSP 게시판 만들기(기본 프레임워크 구현), 20강, 삭제하기 전에 삭제할지 confirm](https://youtu.be/pEFJHDyW5Ro) # 21강, 게시물 삭제폼, 수정폼 UI 테일윈드로 디자인 - [GIT](https://github.com/SangWon7242/jsp_board_25_01_14/commit/9308044d7b6be7e737199002cf321b3f0ad28d16) - [영상 - 25 01 23, slog 13985, JSP 게시판 만들기(기본 프레임워크 구현), 21강, 게시물 삭제폼, 수정폼 UI 테일윈드로 디자인](https://youtu.be/G38atL3L2cc) # 22강, 수정폼 처리 - [GIT](https://github.com/SangWon7242/jsp_board_25_01_14/commit/89327f920bc50b684757ee6004e54b17a054aed1) - [영상 - 25 01 23, slog 13985, JSP 게시판 만들기(기본 프레임워크 구현), 22강, 수정폼 처리](https://youtu.be/eHBkqRatljw) # 23강, 공통상단템플릿 head.jspf, 공통하단템플릿 foot.jspf 구현, 각각의 페이지에 적용 - [GIT](https://github.com/SangWon7242/jsp_board_25_01_14/commit/1fa1957cffbc373c9d3838c1d4757e5b2d6c14c6) - [영상 - 25 01 23, slog 13985, JSP 게시판 만들기(기본 프레임워크 구현), 23강, 공통상단템플릿 head.jspf, 공통하단템플릿 foot.jspf 구현, 각각의 페이지에 적용](https://youtu.be/nOMnJGn8Zak) # 24강, head.jspf 에 title명을 각각의 페이지에 이름에 맞게 수정 - [GIT](https://github.com/SangWon7242/jsp_board_25_01_14/commit/e40f7e839aa59d86ba30b793a7d0541d0a9ac302) - [영상 - 25 01 23, slog 13985, JSP 게시판 만들기(기본 프레임워크 구현), 24강, head.jspf 에 title명을 각각의 페이지에 이름에 맞게 수정](https://youtu.be/DgODLkEApM8) # 25강, root url로 접속하면 자유게시물 리스트로 location.replace 처리 - [GIT](https://github.com/SangWon7242/jsp_board_25_01_14/commit/1c3779742ece2d5a6a236fc4c20412f40707a36f) - [영상 - 25 01 23, slog 13985, JSP 게시판 만들기(기본 프레임워크 구현), 25강,root url로 접속하면 자유게시물 리스트로 location.replace 처리](https://youtu.be/VFJyV8OO-AU) # 26강, rq에 location.replace, history.back을 이용하여 알맞는 페이지로 이동할 수 있도록 처리 - [GIT](https://github.com/SangWon7242/jsp_board_25_01_14/commit/f5ba03515106b9c4e7a60e8e379e63d0d5f8c80e) - [영상 - 25 01 23, slog 13985, JSP 게시판 만들기(기본 프레임워크 구현), 26강, rq에 location.replace, history.back을 이용하여 알맞는 페이지로 이동할 수 있도록 처리](https://youtu.be/Ds9lExYmdH8) # 27강, CSS 경로 수정으로 style이 모든 jsp파일에 적용되도록 - [GIT](https://github.com/SangWon7242/jsp_board_25_01_14/commit/62cfd633e00774e2f00c2346f949b9a5fad214e2) - [영상 - 25 01 23, slog 13985, JSP 게시판 만들기(기본 프레임워크 구현), 27강, CSS 경로 수정으로 style이 모든 jsp파일에 적용되도록](https://youtu.be/x7fZ0DnK-K0) # 28강, 게시물 삭제를 GET이 아닌 POST로 보내는게 좋지만, 그게 안되기에 차선으로 별도의 form을 구현해야 한다. - [GIT](https://github.com/SangWon7242/jsp_board_25_01_14/commit/0d988c38f71ffcf258d0a413f43e48155797df01) - [영상 - 25 01 23, slog 13985, JSP 게시판 만들기(기본 프레임워크 구현), 28강, 게시물 삭제를 GET이 아닌 POST로 보내는게 좋지만, 그게 안되기에 차선으로 별도의 form을 구현해야 한다.](https://youtu.be/WF1W1ejAx3c) # 29강, 브라우저에서 HTTP METHOD를 쉽게 조작가능 하도록 routeMethod 개념을 도입 - [GIT](https://github.com/SangWon7242/jsp_board_25_01_14/commit/ce7f3e241ffce51cb4bf00c1b94079981b422235) - [영상 - 25 01 23, slog 13985, JSP 게시판 만들기(기본 프레임워크 구현), 29강, 브라우저에서 HTTP METHOD를 쉽게 조작가능 하도록 routeMethod 개념을 도입](https://youtu.be/HTC9KGSHOZo)

25_01_14, 웹 프로그래밍 - JSP 기초