전체보기293

• 

  부트스트랩으로 로그인 화면 만들기 좀 보다 보니 익숙해지네요.ㅎㅎ 부트스트랩 홈페이지에 가서 괜찮은 레이아웃이 보이면 코드를 긁어와서 조금만 고쳐주면 됩니다. 예시로 로그인 화면을 만들어보겠습니다. 전체 페이지 구조 잡는 법과 여백 주는법 등은 이전글을 참조하시면 됩니다. [· 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.

• 

  프레임워크와 라이브러리의 차이 [ 프레임워크 ] 프로그램이 동작하는 기본 뼈대(Frame)를 제공 IOC (제어의 역전), 라이브러리, 디자인 패턴을 구현 [ 라이브러리 ] 특정 기능(알고리즘)을 미리 구현한 소스코드의 집합 프레임워크는 프로그램이 실행되는 기본 구조, 즉 뼈대를 미리 설계해둔 것을 말합니다. 단순화해서 생각해보면 인터페이스의 개념이 확장된 것이라고 생각합니다. 예를 들어 여러 명이 하나의 프로젝트를 시작한다면, 시작에 앞서 프로그램의 동작 구조를 먼저 설계해야 합니다. 주로 사용되는 방법 중 하나가 각 모듈별 기능을 수행할 인터페이스를 만들어두는 것입니다. 각 개발자는 지정된 인터페이스의 구조대로 필요한 로직을 짜게 됩니다. 또한 DB연결과 같이 프로그램 내 어디서든 공통적으로 적용돼야 할 코드도 미리 작성해둡니다... ▸Spring MVC/기본 상식 2020. 2. 26.

• 

  Git 로컬 저장소의 내용을 Github(깃허브)에 업/다운로드 하기 이전글에서 Git을 이용해 로컬 저장소에 프로젝트를 업로드 했었습니다. 이번에는 이 저장소의 내용을 가지고 깃허브의 클라우드 저장소에 업로드해 보도록 하겠습니다. Github에 업로드하면 다른 사람들에게 프로젝트 파일을 손쉽게 공유할 수 있고, 컴퓨터를 잃어버려도(?) 파일들을 복구할 수 있습니다. [ 깃허브(원격저장지)로 업로드하기 ] 원격 저장소 주소 등록 : git remote add 원격저장소이름 깃허브 저장소 주소 원격 저장소에 로컬 저장소 업로드 : git push 원격저장소이름 master(branch) 깃허브에 가입해서 저장소(Repository)를 하나 만들면 주소가 나옵니다. 해당 주소를 복사해서 가져옵니다. 'git remote add origin' 명령어 다음에 복사한 URL를 붙여.. ▸인프라/Git & Github 2020. 2. 24.

• 

  Git 으로 로컬 저장소에 프로젝트 업로드 및 되돌리기 [ Git Bash ] 리눅스 기반의 명령어 수행을 위한 콘솔 프로그램 리눅스 쉘(shell)과 같음 (MAC에서도 리눅스 쉘 기반으로 사용함) 윈도우 명령어 기반의 Git CMD도 제공되긴 하지만 대부분 Bash를 사용하기 때문에 정보가 많습니다. 아래와 같이 생긴 콘솔(쉘)입니다. [사용자]@[컴퓨터이름] [Bash이름] ~ [현재위치] [ 기본 명령어 ] cd : 폴더 이동 mkdir : 폴더 생성 touch 파일이름 : 파일 생성 (빈 파일 생성) ls : 현재 위치의 파일 및 폴더 보기 clear : 콘솔 창의 내용을 클리어해줌 git status : 현재 저장소 현황 보기 [Shift + Insert] : 붙여넣기 (Ctrl + v 안됨) [ Git 사용자 등록 ] 이메일 등록 : git co.. ▸인프라/Git & Github 2020. 2. 24.

• 

  Git과 Github(깃허브)의 차이 [ Git ] 로컬에서 관리되는 버전 관리 시스템 (VCS : Version Control System) 소스코드 수정에 따른 버전을 관리해주는 시스템 [ Github ] 클라우드 방식으로 관리되는 버전 관리 시스템(VCS) 자체 구축이 아닌 빌려쓰는 클라우드 개념 오픈소스는 일정 부분 무료로 저장 가능, 아닐 경우 유료 사용 간단히 Git은 로컬에서 버전 관리 시스템을 운영하는 방식이고 Github는 저장소를 깃허브에서 제공해주는 클라우드 서버를 이용한다는 것의 차이입니다. 따라서 다른 사람들과 협업할 경우, 오픈소스를 공유하고 다른 사람들의 의견을 듣고 싶은 경우 등은 Github를 써서 편리하게 기능을 사용할 수 있습니다. 만약 혼자 작업하거나 폐쇄적인 범위 내에서의 협업이라면 Git만 사용해도 무.. ▸인프라/Git & Github 2020. 2. 24.

• 

  MCV 패턴의 자동 로그인, 회원가입 만들기 [3/3] JSP와 서블릿을 이용한 간단한 로그인, 자동로그인 및 회원가입, 회원 정보조회 기능이 있는 웹페이지 만들기입니다. 이번글은 Command를 구현하는 클래스들에 대한 코드입니다. 뷰와 컨트롤러, DAO, DTO는 이전글들을 참조 부탁드립니다. [· JSP & Servlet/- 기본 문법] - MCV 패턴의 자동 로그인, 회원가입 만들기 [1/3] [· JSP & Servlet/- 기본 문법] - MCV 패턴의 자동 로그인, 회원가입 만들기 [2/3] 전체 코드는 깃허브에 올려놨습니다. 게시판 로직을 추가할 예정이라 commit 코멘트가 "First commit"인 부분으로 되돌리면 현재 코드로 돌아옵니다. https://github.com/codevang/hssweb.git [ Ctrl.Commad.ja.. ▸JSP & Servlet/기본 문법 2020. 2. 24.

• 

  MCV 패턴의 자동 로그인, 회원가입 만들기 [2/3] JSP와 서블릿을 이용한 간단한 로그인, 자동로그인 및 회원가입, 회원 정보조회 기능이 있는 웹페이지 만들기입니다. 이번글은 DAO, DTO에 대한 코드입니다. 뷰와 컨트롤러는 이전글을, Command 역할의 클스는 다음글을 참조 부탁드립니다. [· JSP & Servlet/- 기본 문법] - MCV 패턴의 자동 로그인, 회원가입 만들기 [1/3] [· JSP & Servlet/- 기본 문법] - MCV 패턴의 자동 로그인, 회원가입 만들기 [3/3] 전체 코드는 깃허브에 올려놨습니다. 게시판 로직을 추가할 예정이라 commit 코멘트가 "First commit"인 부분으로 되돌리면 현재 코드로 돌아옵니다. https://github.com/codevang/hssweb.git [ db.userInfoDT.. ▸JSP & Servlet/기본 문법 2020. 2. 24.

• 

  MCV 패턴의 자동 로그인, 회원가입 만들기 [1/3] JSP와 서블릿을 이용한 간단한 로그인, 자동로그인 및 회원가입, 회원 정보조회 기능이 있는 웹페이지 만들기입니다. 컨트롤러와 뷰에 대한 코드입니다. DAO, DTO와 Command 역할의 클래스들은 다음글들을 참조하시면 됩니다. [· JSP & Servlet/- 기본 문법] - MCV 패턴의 자동 로그인, 회원가입 만들기 [2/3] [· JSP & Servlet/- 기본 문법] - MCV 패턴의 자동 로그인, 회원가입 만들기 [3/3] 전체 코드는 깃허브에 올려놨습니다. 게시판 로직을 추가할 예정이라 commit 코멘트가 "First commit"인 부분으로 되돌리면 현재 코드로 돌아옵니다. https://github.com/codevang/hssweb.git [ /layout/headLayout.js.. ▸JSP & Servlet/기본 문법 2020. 2. 24.

• 

  쿠키 이용 시 유의 사항 (자동로그인 로직 구현 등) 실제로 자동 로그인을 구현하는 과정에서 문제가 생겨서 꽤나 헤맸습니다. 간단히 같은 루트 내에 뷰(JSP)파일들을 다 넣고 해보면 별로 느끼지 못할 수 있는데 실제로 패키지 및 폴더 구조를 복잡하게 구성해보면 쿠키 사용에서 생각지 못한 문제가 발생했습니다. 쿠키의 기본 개념과 사용법은 아래 링크에서 보시면 됩니다. 2020/02/18 - [· JSP & Servlet/- 기본 문법] - 쿠키(Cookie) 로그인 페이지에서 로그인을 할 때 자동로그인을 체크하면 쿠키를 생성하고, 메인화면에서 계속 쿠키 또는 세션을 확인하다가 로그아웃 버튼을 누르면 쿠키를 찾아서 제거해주는 간단한 로직입니다. 문제는 쿠키의 '저장 위치'에서 나왔습니다. 대략 로그인은 아래 로직과 같습니다. 로그인 정보를 담아서 전달해주는 .. ▸JSP & Servlet/기본 문법 2020. 2. 23.

• 

  sendRedirect 작동 방식 및 예외 처리에서의 사용 response 객체에서 제공하는 sendRedirect() 메소드는 응답 객체가 가진 헤더 정보에 클라이언트가 다음번에 어디로 갈지를 지정해주는 것이지 포워딩처럼 제어 흐름을 다른 곳으로 넘기는 방식이 아닙니다. 따라서 sendRedirect() 메소드가 실행된 이후의 코드 또한 계속 실행시키게 됩니다. 아래 코드를 한 번 보겠습니다. 리다이렉트 실행 후 일반적인 텍스트를 출력할 때는 아무 이상이 없습니다. 텍스트는 실제로 출력되지만 사용자가 인지하기도 전에 다른 페이지로 넘어가기 때문입니다. 출력출력 하지만 아래와 같이 입력받은 값으로 뭔가 로직을 수행하는데 null 값이 될 경우 리다이렉트가 돼 있더라도 예외가 발생하게 됩니다. sendRedirect() 에서 클라이언트가 이동할 페이지 정보를 re.. ▸JSP & Servlet/기본 문법 2020. 2. 23.

• 

  메소드 내 예외처리(try-catch-finally)에서의 리턴 처리 1. try 구문 내에서 리턴에 도달했을 경우 try 내에서 리턴에 정상적으로 도달하였으므로, 리턴시킬 값을 임시 저장한 뒤 바로 finally 문을 최종 실행시키고 메소드를 종료합니다. 실제 리턴은 finally문이 종료된 이후에 실행됩니다. 이경우에는 try-catch-finally 이후에 지정된 리턴문이 있어도 무시됩니다. 2. try 구문 내에서 return에 도달하지 못하고 예외 발생했을 경우 이경우에는 catch-finally문이 작동한 뒤, 이후 코드를 계속 실행해 나가다가 리턴값을 만나면 리턴해줍니다. 따라서 예외 발생 시에 리턴시킬 값을 지정할 때는 try-catch-finally문 바깥에 리턴문을 작성해주면 됩니다. finally안에서 리턴시키는 것은 경고가 뜨는데, 이는 만약 try문.. ▸JAVA/기본 문법 2020. 2. 23.

• 

  URL 매핑_'/' 와 '/*' 의 차이점 MVC 패턴의 구조를 짜기 위해 해당 개념을 이해해야 할 것 같습니다. [ / ] 직접 URL 매핑을 한 경우를 제외하고 모두 / 로 매핑된 서블릿(또는 JSP)에서 나머지 모든 요청을 받겠다는 의미입니다. 이 방식으로 URL 매핑된 서블릿을 디폴트 서블릿이라고 합니다. 디폴트 서블릿을 지정하더라도 JSP 파일의 경우 해당 파일로 바로 접속이 됩니다. 그 이유는 JSP가 'web.xml' 파일에서 자동으로 URL 매핑이 되어 있기 때문입니다. 'web.xml'에서 찾아보면 아래 코드에서 이미 jsp와 jspx 확장자에 대한 매핑을 해주고 있는 것을 볼 수 있습니다. 따라서 사용자가 JSP를 제외한 어떤 URL(정확히는 URI)주소로 입력을 하건간에 모두 디폴트 페이지로 가게 되지만, JSP 파일 위치를 .. ▸JSP & Servlet/기본 문법 2020. 2. 22.