▸JSP & Servlet/프론트엔드10

• 

  게시물 삭제 시 확인창 띄우기 (부트스트랩 Modal(모달)) 백엔드 공부하면서 프론트는 대충 테스트로 사용하는 분들 전용입니다. 간편하게 부트스트랩4를 사용하고 있습니다. 게시물을 삭제할 때 확인창을 띄운 뒤 확인 버튼을 누르면 Form 태그 안의 파라미터를 submit 하는 방법입니다. 좀 더 고급진 방법이 많겠지만 가장 간단한 방법으로 진행합니다. 부트스트랩 홈페이지에서 Modal을 찾아보면 여러 스타일들이 있습니다. 창 자체를 띄우는 것에 자바스크립트도 필요 없는 것들이 있기 때문에 바로 가져와서 사용해주면 됩니다. 창이 보여지거나 사라지는 기능은 이미 있으므로 우리가 해야할 것은 '삭제하기' 버튼을 눌렀을 때 실제 form 태그안의 파라미터들이 지정된 URL로 전송되도록 하는 것입니다. 부트스트랩4 공식 홈페이지 Modal 가이드 먼저 모달 버튼과 창을 만.. ▸JSP & Servlet/프론트엔드 2020. 4. 12.

• 

  ajax를 이용한 게시물 공감/비공감 기능 만들기 (Form 데이터 전송) 가장 기초적인 버전의 ajax 사용법입니다. 저처럼 서버쪽 공부하면서 테스트용으로 프론트를 만드는 분들에게 도움이 될 것 같습니다. ajax는 간단히 전체 페이지가 아닌 일부분의 내용만 고쳐주도록 해주는 자바스크립트의 기능입니다. 서버에서는 요청받은 내용에 대해 처리하고 데이터를 JSON이나 XML 형식으로 리턴시켜주면 됩니다. REST API의 형식과 비슷합니다. 다만 외부에서 요청하는 데이터가 아닌만큼 완전한 REST API 형식이 아닌, 단순하게 데이터 교환만 해주도록 작성했습니다. 먼저 트리거가 될 버튼을 만들어줍니다. 그냥 텍스트도 상관없습니다. 자바스크립트에서 해당 링크를 찾을 수 있도록 id를 부여할 수 있으면 됩니다. 저는 부트스트랩4를 사용했습니다. 공감 그리고 버튼을 눌렀을 때 서버에 .. ▸JSP & Servlet/프론트엔드 2020. 4. 12.

• 

  화면 전환 시 경고창 띄우고 리다이렉트하기 프론트는 하나도 몰라서 엄청 헤맨 부분입니다. 뷰에서 어떤 자료를 요청했을 때 서버에서 처리 후 결과를 리턴할 때, 처리 결과에 대한 메세지를 어떻게 전달할까에 대한 문제입니다. 원래 JSP에서 처리할 때는 컨트롤러에서 최종적으로 처리 결과를 확인한 뒤 request나 session에 Attribute로 메세지 내용을 담아 뷰에 전달하고, 뷰에서 해당 Attribute가 있다면 메세지를 출력해주는 식이었습니다. 하지만 이걸 굳이 서버단에서 해야하나 싶어 단순한 결과 확인은 뷰단에서 하기로 했습니다. 뷰 페이지에서는 요청한 정보에 대한 객체가 있다면 출력해주면 되고, 없다면(null) 경고창을 띄우고 다른 화면으로 리다이렉트 시켜주면 될 것 같습니다. 이렇게하면 서버에서는 그냥 처리 결과만 뷰에 회신해주면.. ▸JSP & Servlet/프론트엔드 2020. 4. 12.

• 

  부트스트랩으로 게시판 만들기_게시물 보기 화면 [3/3] 부트스트랩을 이용한 게시물 내용 출력 화면입니다. 다른 페이지의 뷰 및 로직은 아래 링크를 참조하시면 됩니다. [· JSP & Servlet/- 부트스트랩] - 부트스트랩으로 게시판 만들기_리스트 화면 [1/3] [· JSP & Servlet/- 부트스트랩] - 부트스트랩으로 게시판 만들기_글쓰기 화면 [2/3] [· JSP & Servlet/- 부트스트랩] - 부트스트랩으로 게시판 만들기_게시물 보기 화면 [3/3] [· JSP & Servlet/- 기본 문법] - MVC 패턴의 게시판 만들기_계층형 게시판 로직 설계 [1/5] [· JSP & Servlet/- 기본 문법] - MVC 패턴의 게시판 만들기_페이징 처리(오라클DB) [2/5] [· JSP & Servlet/- 기본 문법] - MVC 패턴.. ▸JSP & Servlet/프론트엔드 2020. 3. 2.

• 

  부트스트랩으로 게시판 만들기_글쓰기 화면 [2/3] 이번에는 부트스트랩을 이용한 글쓰기폼과 글보기 화면 구성입니다. 다른 페이지의 뷰 및 로직은 아래 링크를 참조하시면 됩니다. [· JSP & Servlet/- 부트스트랩] - 부트스트랩으로 게시판 만들기_리스트 화면 [1/3] [· JSP & Servlet/- 부트스트랩] - 부트스트랩으로 게시판 만들기_글쓰기 화면 [2/3] [· JSP & Servlet/- 부트스트랩] - 부트스트랩으로 게시판 만들기_게시물 보기 화면 [3/3] [· JSP & Servlet/- 기본 문법] - MVC 패턴의 게시판 만들기_계층형 게시판 로직 설계 [1/5] [· JSP & Servlet/- 기본 문법] - MVC 패턴의 게시판 만들기_페이징 처리(오라클DB) [2/5] [· JSP & Servlet/- 기본 문법] .. ▸JSP & Servlet/프론트엔드 2020. 3. 2.

• 

  부트스트랩으로 게시판 만들기_리스트 화면 [1/3] 부트스트랩을 이용한 계층형 게시판 목록 만들기입니다. 로직은 JSP/서블릿 게시판에서 별도로 다루도록 하고, DB에서 데이터가 정상적으로 넘어온다는 가정하에 뷰를 구성합니다. 기존 로그인 화면을 만들었던 웹페이지에 계속 이어서 붙이도록 하겠습니다. 다른 페이지의 뷰 및 로직은 아래 링크를 참조하시면 됩니다. [· JSP & Servlet/- 부트스트랩] - 부트스트랩으로 게시판 만들기_리스트 화면 [1/3] [· JSP & Servlet/- 부트스트랩] - 부트스트랩으로 게시판 만들기_글쓰기 화면 [2/3] [· JSP & Servlet/- 부트스트랩] - 부트스트랩으로 게시판 만들기_게시물 보기 화면 [3/3] [· JSP & Servlet/- 기본 문법] - MVC 패턴의 게시판 만들기_계층형 게시판.. ▸JSP & Servlet/프론트엔드 2020. 3. 2.

• 

  부트스트랩으로 로그인 화면 만들기 좀 보다 보니 익숙해지네요.ㅎㅎ 부트스트랩 홈페이지에 가서 괜찮은 레이아웃이 보이면 코드를 긁어와서 조금만 고쳐주면 됩니다. 예시로 로그인 화면을 만들어보겠습니다. 전체 페이지 구조 잡는 법과 여백 주는법 등은 이전글을 참조하시면 됩니다. [· JSP & Servlet/- 부트스트랩] - 부트스트랩으로 전체 웹 사이트 틀 잡기 'input group'으로 검색하면 input 스타일들이 있습니다. 생각보다 많이는 없지만요. 나중에 직접 배워서 만들거나 다른 스타일을 찾아서 적용하면 될 것 같습니다. 일단 가장 위에 있는 타입의 코드를 가져와 적용해봅니다. ID PW 두줄이니까 두 번 복사하면 되고, 코드는 그대로 둔 채 없는 것만 추가해줍니다. input 태그 안에는 파라미터명인 name값을 추가해줍니다... ▸JSP & Servlet/프론트엔드 2020. 2. 27.

• 

  부트스트랩으로 전체 웹 사이트 틀 잡기 백엔드를 공부하면서 프론트까지 하기엔 시간이 없는 관계로.. 일단 부트스트랩 템플릿 중 마음에 드는 틀을 가져와서 조금씩 바꿔보는 것으로 진행하고 있습니다. 구글에서 '무료 부트스트랩 템플릿'으로 검색하면 안내가 잘 돼있으니 괜찮아 보이는 코드를 가져와서 이리저리 만져보면 됩니다. 다만 커스터마이징 템플릿을 제작할 경우 기본 부트스트랩 라이브러리 외에도 만든 사람이 추가한 여러 라이브러리를 사용하고 있을 수 있습니다. 일단 틀을 잡기 위해 정확히는 모르더라도 대략적인 개념만 이해해야 고칠 수 있을 것 같습니다. 제가 이해한 구조는 아래와 같습니다. 저도 오늘 처음 본 것들이라 정확하지 않은 점 참고 부탁드립니다.ㅎㅎ 일단 부특스트랩을 이용한 전체적인 화면 구성은 아래와 같습니다. 1. nav 가장 윗줄에.. ▸JSP & Servlet/프론트엔드 2020. 2. 27.

• 

  JSP에서 부트스트랩 CSS 스타일 적용되지 않는 문제 부트스트랩을 셋팅하고 사용을 해봤는데 CSS 스타일이 적용되지 않고 있습니다. 뭐가 문젠지 보기 위해 익스플로러를 켜봅니다. F12를 눌러서 네트워크탭을 킨 뒤 새로고침을 한 번 하면 오고가는 페이지의 정보를 볼 수 있습니다. 저장해둔 bootstrap.css 파일을 불러오는데 '결과/설명'란에 "302 Found"라는 메세지가 떠 있습니다. 의미는 리다이렉션을 시도했다는 뜻입니다. 서버에서 HTML 코드를 브라우저에 전송할 때 참조할 CSS 파일 위치에 대한 URL 정보를 넣습니다. 이전 글에서 셋팅했던 아래 코드 부분입니다. 브라우저 입장에선 CSS 스타일 코드를 읽어오기 위해 한 번 더 저 주소에 접속에서 해당 코드를 읽어와야 합니다. 문제는 여기서 발생합니다. 현재 MVC 패턴을 사용하기 위해 디.. ▸JSP & Servlet/프론트엔드 2020. 2. 26.

• 

  부트스트랩의 개념 및 사용법(초기 설정) [ 부트스트랩 ] 반응형 웹 어플리케이션 제작에 특화된 풀스택 웹 프론트엔드 프레임워크 무료로 사용 가능한 오픈 소스 (상업적 용도도 사용 가능) 2020/02/26 - [· Spring/- 기본 상식] - 프레임워크와 라이브러리의 차이 부트스트랩은 웹 프론트엔드 개발에 대한 구조를 미리 만들어둔 프레임워크입니다. 트위터의 모 직원들이 만들어 발전되어 왔는데 초반 트위터에서 각자 맡은 웹페이지들을 제각각 개발하다보니, 시스템이 커질 수록 점점 제각각의 구현 방식들이 혼잡해져서 이를 해결하기 위해 만들었다고 합니다. 트위터 부트스트랩은 프레임워크의 기능과 버튼 스타일 등 여러 라이브러리들을 내장하고 있습니다. 또한 오픈소스로 모든 코드를 공개하고 있기 때문에 이를 커스터마이징한 여러 무료/유료 템플릿들이 .. ▸JSP & Servlet/프론트엔드 2020. 2. 26.