[TIL] 2022년 2월 5주차 ~ 3월 1주차

 

 

• 코드는 깃헙에 올리므로 여기서는 공부한 내용을 요약하는 식으로 정리합니다.

 

 

2월 28~ 3월 1일

 

• 28일은 학원수업이 없는 날이어서 그동안의 복습과 개인공부를 했다.
• 1일은 하루 나들이를 다녀왔다.

 

 

 

 

 

3월  2일

 

• 회원가입 웹페이지를 jQuery 를 이용해서 만들었다.
  • form 태그를 이용해서 회원가입 정보를 입력하게끔 만들고, 회원가입 정보를 다 입력한 후, type="submit" 인 버튼을 누르면 action="" 에 입력된 곳으로 이동, 즉 여기에서 그 이후의 기능들을 수행하게 된다.
  • 선택자.blur(() => {}); 은 선택자에 포커스가 있다가 그 포커스를 잃어버렸을 때 발생하는 이벤트를 처리할 때 사용된다. 
  • 아이디, 비밀번호, 비밀번호 확인, 이름, 이메일 형식에 대한 판별은 정규표현식을 사용했다. 
• jQuery 애니메이션 효과를 주는 것을 다루었다. 자세한 것은 깃허브에 있는 코드를 활용하자.

---

• BootStrap4 공부를 시작했다. 훨씬 예쁘고 자연스러운 웹페이지 표현과 UI 가 가능해졌다.
  • 부트스트랩은 반응형 웹이나 모바일에서 예쁘고 편리하게 프로젝트 개발을 하게 해주는 HTML, CSS, JS 프레임워크이다. 
  • 부트스트랩을 사용하기 위해서는 <link rel="stylesheet" href="../css/bootstrap.min.css" type="text/css"> 처럼 다운받은 부트스트랩 파일의 경로를 입력해주거나, 부트스트랩 사용 웹경로를 입력해주면 된다.
  •  https://getbootstrap.com/ 에 가면 부트스트랩 API 가 자세히 나와있고, 여기서 소스를 보고 사용하면 된다.

 

 

 

 

 

3월  3일

 

• 부트스트랩의 Components 들을 하나씩 사용하며 이해하는식으로 공부했다. 나중에 웹페이지를 만들 때, 부트스트랩 Docs 를 보고 원하는 것을 가져다 활용하자.
• 부트스트랩을 활용해서 서로 다른 형태의 시작 홈페이지를 4개 만들었다.
  • class 에 무엇을 주느냐에 따라 어떤 부트스트랩 기능을 사용할 지 선택하는 것이다. 아래의 내용은 class 에 무엇을 주었는지 기술한 것이다.
  • navbar 로 상단 네비게이션을 만들었다.
  • navbar-toggler 로 휴대폰 크기의 디바이스에서는 아코디언같은 navbar 이 생성되게 만들었다.
  • 구역별로 컨텐츠를 만들고자 할 때는 row 를 사용한다.
  • 여러 페이지들을 탐색하고, 이전 페이지, 다음 페이지를 선택하는 데는 pagination 을 사용한다.
  • Carousel 로 슬라이드쇼처럼 계속 변하는 컨텐츠를 만들었다.
  • jumbotron 으로 고정된 컨텐츠를 만들었다.
  • card 로 아이템을 각각을 표시하고 간단한 설명을 달았다.
• 부트스트랩을 활용해서 게시판 페이지, index 페이지를 만들고, 로그인 페이지와 회원가입 페이지를 만들었다.
  • list-group 으로 목록의 기능을 하는 인덱스를 만들고, badge 를 주었다.
  • col-md-숫자 를 줌으로써 페이지를 가로로 12등분하고, 준 숫자만큼 영역을 사용했다.
  • alert 로 경고 메시지를 줄 수 있다.
  • form 태그로 로그인 폼을 생성할 수 있다.

 

 

 

 

3월  4일

 

• 부트스트랩으로 쇼핑몰을 만드는 세미프로젝트의 시작페이지를 만들었다. 단일 상품을 판매하는 쇼핑몰이다.
• 공부한 것을 토대로 깔끔하고 눈에 확 들어오는 페이지를 만들고자 노력했다.
• 조금 더 다듬고, 회원가입이나 로그인 등의 페이지도 구성해야겠다.

---

• 제일 기다렸던 JSP/Servlet 공부를 시작했다.
• 이전까지는 Java 로는 console 창에만 결과물을 찍어냈었다. 웹페이지에 결과물을 나타냈던 경우는 HTML 과 JS, jQuery, bootstrap 을 사용해서 바로 웹에 띄웠던 것 뿐이었다. 이제는 Java 를 실행시켜서 웹페이지에 보여주는 JSP/Servlet 을 공부한다.
• Servlet 은 웹서비스 기능을 해주는 자바객체를 말한다.
• JSP 는 Java 코드를 실행시켜서 결과물을 웹페이지에 보여주는 것으로, 직접 Servlet 을 작성하는 것보다 유용하고 편리하게 효율적인 코드를 만들게 해준다. 
• 간단한 Java 코드를 웹페이지에 띄우는 실습을 반복했다.
• JSP/Servlet 을 정리하는 글을 작성중인데 더 자세한 예시가 필요할 것 같아서 다음주에 완성될 것 같다.
• html 은 소스가 공개되는 반면, jsp 는 공개되지 않아서 자바코드의 보안성이 높다.

 

 

 

 

3월  5-6일

 

• 한주간의 공부를 복습했다.
• 쇼핑몰 세미프로젝트 시작페이지 디자인을 수정했다.