본문 바로가기

TIL

 (92)
<CSS> Flexbox 레이아웃 (1) - Flexbox란? CSS3의 새로운 레이아웃 방식으로, 비교적 최신 브라우저에서 사용이 가능하다. Flexbox 레이아웃을 이용하면 부모 태그 내 자식 태그들의 위치나 정렬 등의 레이아웃 설정을 보다 편리하게 할 수 있다는 장점이 있다. - Flexbox 레이아웃 구성 크게 flex container라는 부모 요소가 있고, 이 내부에 flex item이라 불리는 자식 요소들이 위치한 형태로 구성된다. 이러한 관계를 갖고 있기 때문에, Flexbox를 사용하려면 부모 요소에 display 속성의 값을 flex로 먼저 설정한 후 사용할 수 있다. 혹은 부모 요소가 inline이면 inline-flex로 display 속성의 값을 설정해주면 된다. 구성은 flex container과 flex item들이 ..
<자바스크립트 Javascript> mouseover, mouseout 이벤트 - 자바스크립트 mouseover, mouseout 이벤트 자바스크립트에서 마우스와 관련된 이벤트들을 활용하여 재미있는 효과를 만들었다. 사용한 이벤트는 mouseover와 mouseout인데, 선택한 영역에 마우스가 진입하는 이벤트가 나타나면 효과가 나타나고, 마우스가 영역 밖으로 벗어나는 이벤트가 나타나면 효과가 사라진다. 다음은 개인 프로젝트의 예시 사진이다. 프로그래밍을 위한 추천 도서를 소개하는 페이지에 나열된 목록 중 하나다. 도서의 사진 위로 마우스가 이동하면, mouseover 이벤트가 발생하면서 이미지는 흐려지고 '더 알아보기' 문구가 나타난다. 클릭하면 도서 소개 페이지로 이동도 한다! 그리고 마우스가 다시 사진 영역을 벗어나면, mouseout 이벤트가 발생한 것으로 인식하고 원본 도..
<자바스크립트 Javascript> 선택지 만들기(심리테스트 알고리즘 이용) (4) 결과 페이지를 위한 코드 구현 시, 방법이 없다고 판단하여 일일이 나열하는 것으로 마무리했었다. 그런데 다시 생각해보니 반복문으로 코드 길이를 줄이면서 더 효율적으로 코드 구현이 가능한 전제 조건은 이미 마련되어 있었다. 그것은 바로 반복분에서 사용하는 '인덱스'를 활용하는 것이었다. 따라서 차례로 다음과 같이 코드를 변경하였다. //변경 전 코드 function result() { const r1 = JSON.parse(localStorage.getItem('a1')); const r2= JSON.parse(localStorage.getItem('a2')); const r3= JSON.parse(localStorage.getItem('a3')); const result = [r1.a1, r2.a2, r..
<자바 Java> 쿠키(Cookie)와 세션(Session) - 세션 트래킹(Session Tracking) HTTP 프로토콜로 통신하는 웹 페이지들끼리는 그 특성상(stateless 방식) 서로의 상태나 정보에 대해 알 수 없다. 따라서 서버 단에서는 이를 포워딩이나 바인딩을 통해 처리해주는 것인데, 클라이언트 관점에서는 이를 '세션 트래킹(Session Tracking)' 기능으로 개발자가 구현하고, 웹 페이지들간에 서로의 상태를 알고 정보 공유를 할 수 있도록 만들어준다. 보통 이러한 정보 공유는 DB를 통해 이루어지지만, 동시 사용자 수가 많아지는 경우 속도가 느려질 수 있어 보다 빠른 속도로 이용하기 위해 세션 트래킹 방법을 사용한다. *데이터 연동 : DB 저장 세션 트래킹 - 클라이언트 PC, 서버 메모리 등 저장 가장 큰 예로 한 웹 서비스에 회원가..
<자바 Java> 포워딩(forwarding)과 바인딩(binding) - 포워딩이란? 서블릿 프로그래밍 시 서블릿끼리, 혹은 서블릿과 JSP 사이에 정보를 공유하거나 정보를 전달하는 등의 연동 작업이 필요할 때 사용하는 기능이다. 한마디로 포워딩이 없다면, 서로 다른 서블릿이나 JSP는 정보 교환이나 요청 전달 등의 연동 작업이 불가하다. 따라서 프로그래밍 시 포워딩은 필수적이며 핵심적인 기능이라 할 수 있다. - 포워딩 방법 1. 웹 브라우저를 거쳐 전송되는 방법 1) redirect // response 객체의 sendRedirect 메서드 이용 response.sendRedirect("요청할 서블릿 매핑주소 혹은 JSP?전송할 데이터의 이름=값"); // GET방식으로 데이터 전달 가능 2) Refresh // response 객체의 addHeaher 메서드 이용 r..
<자바스크립트 Javascript> 선택지 만들기(심리테스트 알고리즘 이용) (3) 8) 선택된 값들을 저장하고 이를 각각에 맞는 결과 페이지로 전송해주기 위해 함수(아래 코드의 result 함수)를 새로 만든다. 그리고 그 안에서 첫 번째로, 앞에서 로컬스토리지에 저장한 클릭된 버튼들의 인덱스를 JSON의 parse 함수를 통해 변환하여 새로운 객체에 각각 저장해준다. function result() { const r1 = JSON.parse(localStorage.getItem('a1')); const r2= JSON.parse(localStorage.getItem('a2')); const r3= JSON.parse(localStorage.getItem('a3')); r1, r2, r3은 각각 질문1에 대한 답, 질문2에 대한 답, 질문3에 대한 답으로 선택한 버튼의 인덱스다. 물론..
<자바스크립트 Javascript> 선택지 만들기(심리테스트 알고리즘 이용) (2) (5) 4번에서 버튼들에 클래스명을 추가하여 선택자로 CSS 효과 등을 줄 수 있도록 한다고 했는데, 이 부분을 수정하게 됐다. 추후에 각 질문에서 선택한 버튼들을 모아 결과지를 만들어야 하는데, 그러려면 버튼에 개별적으로 이름을 붙여 하나씩 가져올 수 있도록 해야하는 부분인지라 button이라는 클래스명으로는 구분이 어려웠던 것이다. 따라서 판다코딩님의 강의를 참고하여, 비슷하게 인덱스를 활용하였다. //버튼 추가 function begin1() { for(let i=0;i
<자바스크립트 Javascript> 선택지 만들기(심리테스트 알고리즘 이용) (1) - 자바스크립트로 선택지 기능 구현 개인 프로젝트로 개발중인 웹 프로젝트에서, 총 3개의 문답 페이지가 존재하며 차례로 1개씩 버튼을 클릭하여 모두 답을 하고 나면, 결과로 3개 문답에 대해 데이터를 받아 이에 대한 결과 페이지로 넘겨주는 작업을기획하였다. 비슷한 알고리즘이 어떤 것이 있을까 생각해보았더니 최근에 유행이었던 다양한 심리테스트들이 생각나서, 심리테스트를 만들 때의 코드를 응용하였다. 코드는 인프런 판다코딩님의 를 참고하였다. 무료로 이런 좋은 강의를 공개해주심에 매우 감사! 순서는 다음과 같다. 1) html에 버튼을 넣을 영역의 태그를 만들어준다. qbox 영역이 질문 내용이 들어갈 영역이고, abox가 그 질문에 대한 선택지들을 나열할 영역이다. qbox와 abox 모두 자바스크립트로 ..
<스프링 부트 Spring boot> 인터셉터(Interceptor)로 관리자, 일반회원 구분 기능 구현 - 인터셉터(Interceptor)로 관리자, 일반회원 구분 기능 인터셉터는 Filter보다 더 넓은 범위의 일종의 제어 장치라고 볼 수 있는데, 그 이유는 Filter와는 다르게 원하는 위치에 자유롭게 인터셉터를 걸 수 있기 때문이다. 이러한 인터셉터 기능을 통해 홈페이지에서 로그인 시 관리자와 일반회원을 구분하여 관리자일 때, 일반회원일 때 홈페이지에 접근할 수 있는 권한을 다르게 부여해줄 수 있다. 순서는 다음과 같다. 1) InterceptorConfig 클래스를 생성하여 인터셉터 기능을 넣어준다. 이 때, InterceptorConfig는 반드시 WebMvcConfigurer를 상속 혹은 확장하여 사용한다. @Configuration public class InterceptorConfig imp..
<스프링 부트 Spring boot> 게시판 구현 - 답글 기능 - 게시판 답글 기능 게시판의 답글 기능은 DB에서 게시판을 생성할 때 기본적인 컬럼에 추가적으로 답글 기능과 관련된 컬럼들을 함께 만들어주어야 한다. *기본 컬럼 - num(번호), title(글제목), contents(글내용), writer(글쓴이), hit(조회수 - 없어도 됨), date(작성날짜 - 없어도 됨) *답글 기능 관련 컬럼 ref : 원글과 원글에 대한 답글을 하나의 그룹으로 묶어줌, 원글의 번호를 참조하여 설정됨 step : 원글과 답글들을 한 그룹으로 묶었을 때 해당 그룹 내의 순서 depth : 답글이 원글에 대한 답글일 수 있고, 답글에 대한 답글일 수 있는데 이 때 이러한 답글의 계층을 나타냄 위 내용을 바탕으로 DB에서 게시판을 생성하였다면, 프론트와 백엔드 부분을 차례로 ..

티스토리툴바