도담도담

브라우저창을 쭉 내리다 보면 맨 위로 올려주는 버튼을 본적이 많을 것이다. 그 부분을 만들어보자. 심플하게, ↑ 이거면 끝이다. 여기에 조금 모양을 덧 붙여 주자면, See the Pen goingTop by lsj5634 (@zinisang) on CodePen. 이런식으로 해서 원하는 위치에 존재하게 하여 언제든 클릭 한번으로 맨 위로 돌아올 수 있게 해준다.

에러코드 메시지 정리 프로젝트는 에러와의 전쟁이라는 생각이 든다. 초보 개발자로써 주로 보는 에러는 404 나 500 이 대부분 이지만, 다른 에러들에 대해서도 정리해두면 언젠간 쓸모 있을것 같아서 자료를 찾아보았다. HTTP 에러코드 에러 메시지 100 Continue 101 Switching Protocols 200 OK, 에러 없이 전송 성공 202 Accepted, 서버가 클라이언트의 명령을 받음 203 Non-authoritative Information, 서버가 클라이언트 요구 중 일부만 전송함 204 Non Content, 클라이언트 요구를 처리했으나 전송할 데이터가 없음 205 Reset Content 206 Partial Content 300 Multiple Choices, 최근에 옮겨진..

팝업창 팝업창이란 현재 열려있는 브라우저 페이지에 아예 새로운 페이지 하나를 더 띄우는 것을 말한다. 주로 자바스크립트의 window.onload = function(){ window.open("popup.html", "", "width=500, height=500"); } 를 통해 팝업창을 생성한다. (팝업창을 강제로 막아놓을 경우 보이지 않는다) 모달창 모달창은 현재 열려있는 브라우저 페이지 위에 새로운 레이어를 까는 것을 말한다. 모달창은 제거를 하지 않고도 페이지를 이동하면 자연히 사라진다. 기존의 페이지와 부모-자식 관계를 갖는다. 주로 부트스트랩을 통해 활용한다. 모달창의 기본 서식은 다음과 같다. × 모달 창 타이틀 여기에 필요한 텍스트 메시지 넣기 Close 모달창 사용하기는 아래 링크에서..

우선 기본적으로 modal 창이란 이런식으로 주변을 어두운 배경으로 만들면서 새로운 레이어가 나와서 주목시켜 확인할 수 있게 해준다. 또한 흔히 알듯이, 어두운 부분을 클릭하면 자동으로 화면을 닫아준다. modal 종류는 https://getbootstrap.com/docs/4.3/components/modal/ 에서 확인하며 사용할 수 있다. 모달창에 띄워줄 로그인 화면을 먼저 만든다. 아이디 또는 비밀번호를 잊으셨나요? 을 통해 모달창에 페이지 화면 전체를 replace 시킬 예정이다. modal 창 내부에 로그인 창 출력 LOGIN × 로그인 을 통해 위에서 만든 로그인 창 화면을 모달 창 안에 출력 부트스트랩의 모달 창을 사용하기 위해서는 아래의 라이브러리들을 포함시켜 줘야 한다. ~~~ 결과

게시글에 이미지 저장시켜서 올리기 이미지 파일을 올려서 폴더와 DB에 저장 시키고 나중에 다시 그 저장시킨 이미지를 불러오는 방법이다. 리뷰를 하는 게시글을 만드는 과정이다. 리뷰 작성 1 2 3 4 5 CSS 나 JS 내부까지 나타내지는 않았지만 결과적으로 얼핏 아래와 같은 화면으로 나오게 된다. 내용을 받는 컨트롤러는 아래의 과정을 통해 이미지의 이름을 날짜와 시간까지 확인하여 등록함으로써, 이미지의 이름이 겹치지 않게 DB에 저장시켜 준다. @PostMapping("/reviewWrite") public String reviewWrite(HttpServletRequest request, ReviewDTO dto, RedirectAttributes redirectAttributes, String co..

개발자 공부를 시작하면서 개발자 도구라는 것을 처음 알게 되었다. 근데 보면 뭐가 되게 많다. 개발자 도구를 보고 문제를 찾아서 수정하면 된다는데 어떻게 사용하는지 머리가 혼란스러워져 왔다. 그래서 내가 사용해본 기능들만 조금씩 정리를 좀 해보려 한다! 개발자 도구란? 일단 간단한 내용만 정리하고 넘어가자면, 개발자 도구란 웹 개발을 도와주는 다양한 도구들로써 HTML, CSS, JavaScript 등의 기능들을 확인해 가며 작업할 수 있어서 효율을 극대화 할 수 있다. 개발자 도구 열기 기본적으로 윈도우에서 사용할 때는, ctrl+shift+I 혹은 F12 를 클릭하면 개발자 도구 창이 나타난다. 자주쓰는 탭 우선 가장 자주 눌러보게 되는 탭들이다. 검사도구 : 검사하고 싶은 영역을 선택 디바이스 모드..

IntelliJ (인텔리제이) 배경이미지 세팅 별건 아니고 작업하다보면 어둡기만한 곳에서 눈이 심심할수도 있을 것이다 (아마도) 그래서 가끔 코드가 안떠오를 때 기분전환으로 툴의 배경화면을 설정해 주는 방법이있다. [File] - [Setting] 혹은 Ctrl + Alt + S 를 눌러서 Settings 로 들어간 다음 [Appearance & Behavior] - [Apperance] - [Background Image] 를 클릭한다. Image -> 원하는 이미지 경로 Opacity -> 이미지의 투명도 배열 종류 -> 원하는 배열 종류 선택 이 [Background Image] 창을 좀 늘리면 이렇게 미리보기도 가능하다! 설정된 이미지를 아예 삭제하고 싶으면, 우측 하단에 있는 [Clear and..

VCS란? → 우리는 파일 특정 파일들을 관리 할 때 파일의 이름을 조금씩 변경해서 (ex. test1.txt / test2.txt 등등) 관리할 수 있게 된다. → 그러한 경우 파일이 적은 경우에는 관리 할 때 용이할 수 있으나 점점 파일이 많아지게 될 경우 → 파일 관리가 어렵게 되는데, 그것을 조금이라도 손 쉽게 관리하기 위해 사용 하는 것이 → 버전 관리 시스템 이라 하고 다른 말로는 형상 관리 시스템이라 한다. → 버전관리 시스템에는 CVS, SVN, Mercurial, Git 등 다양하게 존재함 → VCS는 버전 관리 시스템이라는 뜻을 가지고 있음 Git이란? → Git은 로컬저장소의 버전 관리 시스템 (VCS)을 이야기하고, 소스코드나 파일의 버전을 관리하는 시스템을 뜻 함 GitHub란? ..