전체 글287 MVC 패턴의 게시판 만들기_글작성 로직 [4/5] 로그인 페이지 만들기에 이어 이번에는 MVC 패턴을 적용한 웹 어플리케이션에서 게시판을 만들어봅니다. Spring 없이 순수 JSP와 서블릿으로 구성되며, 기존 로그인과 회원가입, 정보조회를 만들었던 웹페이지에 기능을 붙여서 구현합니다. [· JSP & Servlet/- 부트스트랩] - 부트스트랩으로 게시판 만들기_리스트 화면 [1/3] [· JSP & Servlet/- 부트스트랩] - 부트스트랩으로 게시판 만들기_글쓰기 화면 [2/3] [· JSP & Servlet/- 부트스트랩] - 부트스트랩으로 게시판 만들기_게시물 보기 화면 [3/3] [· JSP & Servlet/- 기본 문법] - MVC 패턴의 게시판 만들기_계층형 게시판 로직 설계 [1/5] [· JSP & Servlet/- 기본 문법] -.. ▸JSP & Servlet/기본 문법 2020. 3. 3. MVC 패턴의 게시판 만들기_리스트 출력 로직 [3/5] 로그인 페이지 만들기에 이어 이번에는 MVC 패턴을 적용한 웹 어플리케이션에서 게시판을 만들어봅니다. Spring 없이 순수 JSP와 서블릿으로 구성되며, 기존 로그인과 회원가입, 정보조회를 만들었던 웹페이지에 기능을 붙여서 구현합니다. [· JSP & Servlet/- 부트스트랩] - 부트스트랩으로 게시판 만들기_리스트 화면 [1/3] [· JSP & Servlet/- 부트스트랩] - 부트스트랩으로 게시판 만들기_글쓰기 화면 [2/3] [· JSP & Servlet/- 부트스트랩] - 부트스트랩으로 게시판 만들기_게시물 보기 화면 [3/3] [· JSP & Servlet/- 기본 문법] - MVC 패턴의 게시판 만들기_계층형 게시판 로직 설계 [1/5] [· JSP & Servlet/- 기본 문법] -.. ▸JSP & Servlet/기본 문법 2020. 3. 2. MVC 패턴의 게시판 만들기_페이징 처리(오라클DB) [2/5] 로그인 페이지 만들기에 이어 이번에는 MVC 패턴을 적용한 웹 어플리케이션에서 게시판을 만들어봅니다. Spring 없이 순수 JSP와 서블릿으로 구성되며, 기존 로그인과 회원가입, 정보조회를 만들었던 웹페이지에 기능을 붙여서 구현합니다. [· JSP & Servlet/- 부트스트랩] - 부트스트랩으로 게시판 만들기_리스트 화면 [1/3] [· JSP & Servlet/- 부트스트랩] - 부트스트랩으로 게시판 만들기_글쓰기 화면 [2/3] [· JSP & Servlet/- 부트스트랩] - 부트스트랩으로 게시판 만들기_게시물 보기 화면 [3/3] [· JSP & Servlet/- 기본 문법] - MVC 패턴의 게시판 만들기_계층형 게시판 로직 설계 [1/5] [· JSP & Servlet/- 기본 문법] -.. ▸JSP & Servlet/기본 문법 2020. 3. 2. 부트스트랩으로 게시판 만들기_게시물 보기 화면 [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 자동정렬 옵션 수정 자동정렬(Ctrl+Shift+F)은 자바 파일에서는 깔끔하게 잘 되는데 JSP에서는 오히려 더 지저분하게 되는 것 같습니다. 특히 태그는 가시성 좋게 한줄씩 넣고 싶은데 한번에 뭉치기도 하고 여러모로 맘에 안들 경우가 있습니다. 이 경우에는 "window - preferences - web - HTML Files - Editor" 탭으로 들어가서 옵션을 수정해줍니다. 이것저것 만져보면서 테스트해보면 입맛에 맞게 고칠 수가 있습니다. 저 같은 경우의 아래와 같이 옵션을 조정하니 조금 쓸만해졌습니다. 1. Align final bracket in multi-line element tags 체크 2. Inline Elements에서 "input", "select", "td" 항목 제거 (줄바꿈 하지 않을 항목.. ▸JSP & Servlet/개발 TIP 2020. 3. 1. MVC 패턴의 게시판 만들기_계층형 게시판 로직 설계 [1/5] 로그인 페이지 만들기에 이어 이번에는 MVC 패턴을 적용한 웹 어플리케이션에서 게시판을 만들어봅니다. Spring 없이 순수 JSP와 서블릿으로 구성되며, 기존 로그인과 회원가입, 정보조회를 만들었던 웹페이지에 기능을 붙여서 구현합니다. [· JSP & Servlet/- 부트스트랩] - 부트스트랩으로 게시판 만들기_리스트 화면 [1/3] [· JSP & Servlet/- 부트스트랩] - 부트스트랩으로 게시판 만들기_글쓰기 화면 [2/3] [· JSP & Servlet/- 부트스트랩] - 부트스트랩으로 게시판 만들기_게시물 보기 화면 [3/3] [· JSP & Servlet/- 기본 문법] - MVC 패턴의 게시판 만들기_계층형 게시판 로직 설계 [1/5] [· JSP & Servlet/- 기본 문법] -.. ▸JSP & Servlet/기본 문법 2020. 2. 28. git add 취소 / commit 취소하기 [ git add 취소 ] git reset (전체 파일 add 취소) git reset HEAD 파일 (특정 파일 add 취소) [ git commit 취소 ] git reset HEAD^ (가장 최신 커밋 1개 취소(삭제)) git reset HEAD^^(가장 최신 커밋 2개 취소(삭제)) 꺽쇠 갯수에 따라 최신 커밋을 필요한만큼 순서대로 삭제할 수 있음 굳이 커밋이 필요 없는 시점에 커밋했다거나, 커밋하고 약간 수정했는데 별도 커밋으로 두기 싫다거나 할 때는 위 명령어로 최신 커밋들을 취소할 수 있습니다. 과정을 한번 살펴보면 아래와 같습니다. 1. "git status" 현재 comiit 상태 확인 마지막 커밋 시점을 기준으로 수정(modified)된 파일들과, 새로 만들어진 파일(untracke.. ▸인프라/Git & Github 2020. 2. 27. 부트스트랩으로 로그인 화면 만들기 좀 보다 보니 익숙해지네요.ㅎㅎ 부트스트랩 홈페이지에 가서 괜찮은 레이아웃이 보이면 코드를 긁어와서 조금만 고쳐주면 됩니다. 예시로 로그인 화면을 만들어보겠습니다. 전체 페이지 구조 잡는 법과 여백 주는법 등은 이전글을 참조하시면 됩니다. [· 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. 이전 1 ··· 5 6 7 8 9 10 11 ··· 20 다음 💲 추천 글 반응형