YoonDev

웹 브라우저? 웹 브라우저란 사용자가 URL을 통해 웹 사이트에 접근을 하면 해당 서버에 데이터를 요청해 그 데이터를 렌더링하고 화면에 웹을 보여주는 프로그램이다. 웹 사이트를 개발할 때 사용자가 요청을하면 서버에서 데이터를 보내주는 것과 같이 브라우저도 동일한 방식을 하고있다. 브라우저 구성요소 브라우저는 다음과 같이 구성되어있다. User Interface - 뒤로가기, 새로고침 버튼 같은 브라우저의 UI Browser Engine - 브라우저 UI와 렌더링 엔진 사이의 동작을 제어 Rendering Engine - HTML과 CSS를 해석하여 표시해주는 역할 Networking - 웹 서버와 통신하게 해주는 네트워크 JavaScript Interpreter - 자바스크립트를 해석하여 실행 UI Ba..

MyBatis를 이용해 쿼리를 작성할 때 리턴 타입이나 파라미터 타입 등을 지정할 때가 있는데, 위 사진처럼 패키지 명을 모두 작성해야 하는 번거로움이 있다. 이를 개선하기 위해 MyBatis는 typeAlias를 지정할 수 있는 설정기능을 제공하고있다. 위 사진과 같이 typeAilas를 지정하면 해당 패키지의 객체를 지정한 별칭으로 파라미터를 지정할 수 있다. mybatis-config.xml파일을 만들어 위 코드를 넣으면 되는데, application.properties에도 mybatis-config.xml을 설정파일로 쓰겠다고 명시해줘야한다. (설정 xml파일 이름을 꼭 mybatis-config로 안해도된다.) mybatis.config-location = classpath:mybatis-con..

equals()? 자바의 String 객체가 제공하는 equals함수는 객체끼리의 내용을 비교하여 (문자열끼리의 비교) 같으면 true, 다르면 false를 반환하는 함수이다. 주로 문자열을 비교할때 위 함수를 이용한다. 사용 예시 사용법은 간단하게 equals함수를 이용하여 비교할 문자열을 지정해주면 된다. NullPointerException 주의 equals함수를 사용할 때 주의해야할 점이 있는데, equals함수를 사용하려는 객체, 즉 첫번째 비교대상의 값이 null이면 NullPointerException 예외가 발생하게 된다. 위 예시처럼 null값을 다른 문자열과 비교하려고 하였을 때 NullPointerException이 발생하는 것을 볼 수 있다, 그러나 null이 되는 값을 비교 대상으..

페이징 함수화 저번 포스팅에서 작성한 페이징 로직 코드를 함수화하여 웹 페이지에 페이징 기능을 적용할 수 있도록 하였다. 페이징 함수를 사용한 서비스 로직이다. 페이징을 위해 필요한 변수를 생성자를 통해 세팅을하고, Paging pg = new Paging(한 페이지에 보여줄 글의 개수, 총 콘텐츠 개수, 이동할 페이지, 한 페이징 목록에 보여줄 페이지 개수, 요청 URI) makePagingHTML 함수로 페이징 문자열을 가져온다. 저번 포스팅에서 작성한 페이징 코드 중 콘솔로 페이징을 출력했던 부분을 페이징 HTML 코드를 문자열 형태로 만들어 반환하는 형식으로 변경하였다. (페이징 로직의 전체 코드와 상세 설명은 아래 글에서 다뤘다.) https://rthfickro3.tistory.com/entr..

Thymeleaf? Thymeleaf란 서버 템플릿 엔진의 종류 중 하나이다. 즉 Thymeleaf라는 서버 템플릿 엔진은 서버에서 가져온 데이터를 만들어둔 템플릿에 넣어 html을 만들고 그것을 클라이언트(사용자)에게 보여준다. 서버 템플릿 엔진인 만큼 타임리프를 이용하여 확장된 html 템플릿을 만들 수 있다. Thymeleaf의 대표적인 특징으론 html문법을 크게 벗어나지 않았단 점이다. Thymeleaf의 문법을 이용하여 html 태그의 속성을 추가해 더 동적인 html 템플릿을 만드는 방식이 대부분이라 별도의 서버 없이 html 템플릿만 독립적으로 실행하여도 똑같은 웹 화면을 띄울 수 있다는 것이 장점이다. 공통 레이아웃 만들기 org.springframework.boot spring-boot..

Toggle? 토글이란 두가지 상태 값을 가지고 있으며 동작 시 다른 값으로 전환되는 것을 말한다. 이를 이용해 토글 형식의 사이드 메뉴를 만들어봤다. 관리자 페이지를 만드려고 간단하게 작성한 코드이다. 처음엔 depth2의 메뉴가 접혀있도록 하기 위해 display 속성을 none으로 지정해줬다. 토글 기능이 적용된 부분은 34~49LINE이다. 리스트 형식이며 depth를 1, 2로 나눴고 36LINE의 a태그를 보면 알 수 있듯이 depth1의 메뉴를 클릭하면 함수를 호출하는데 특정 id 값을 파라미터로 넣어 클릭한 메뉴에 대해서만 이벤트가 발생하도록 하였다. 먼저 특정 id를 가진 요소의 다음 요소를 가져오는데 이 요소는 depth2가 될 요소인 을 가져온다. 이 요소를 animte함수를 이용하여..

Sass(SCSS)? Sass(SCSS)란 CSS작업의 한계를 개선하고 더욱 더 편리하게 CSS작업을 할 수 있도록 도와주는 전처리기다. Sass(SCSS)코드를 작성하여 HTML 요소에 대한 스타일 코드를 작성하면 그 코드를 CSS파일로 컴파일을하고 그 컴파일한 CSS파일이 HTML에 적용되는 방식이다. (Sass와 SCSS 둘 다 css 확장 스크립트 언어이다. SCSS가 CSS와 문법 차이가 더 좁아 더 편리하게 사용할 수 있다고 한다.) IntelliJ에서 SCSS사용하기 Sass(SCSS)를 사용하기 위해 먼저 node.js를 설치해야한다. https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 Ja..

페이징 웹사이트를 이용하다보면 많은 양의 글들이 페이지로 나누어져 있는 것을 볼 수 있다. 이번 포스팅에서 웹 페이징의 원리와 구현 방법에 대해 다뤄볼 예정이다. 페이징 기능 구현 페이징 기능을 웹에 적용하기 전에 페이징의 원리를 이해하기 위한 테스트 코드를 작성하였다. 21~28 LINE의 변수 목록 ShowContentSize - 한 페이지에 노출될 글의 개수 contentSize - 페이징 처리할 콘텐츠의 총 개수 movePage - 이동할 페이지 번호 totalPage - 페이지의 총 개수 pageListSize - 한 페이지 목록에 노출될 페이지 개수 tmpPage - 이동할 페이지 목록의 위치(페이지 목록의 시작, 끝 페이지 번호를 구하기 위한 임시 변수) pageStart - 페이지 목록의 ..

입소 전 통지서를 받았을 때 아직도 입영통지서를 받았을 때 기분을 잊지 못합니다.. 산업기능요원으로 군 대체복무를 하면서 최근에 훈련소를 빨리 갔다와야 마음이 편할텐데라고 생각할 때 쯤 회사에 우편이 도착했다하여 확인해보니 논산훈련소 입영통지서인것을 봤을때 좋으면서도 믿기지 않고 그런 복잡한 감정이 들었습니다. 통지서 받고 30일 뒤 입소 예정이였는데 그 30일이라는 시간이 정말 빠르게 갔습니다. 입소하기 전까지 그래도 공부할건 해야지,,하면서 스터디를 계속 하려했으나 입소 날이 점점 다가올 수록 놀기만 했습니다..ㅋㅋㅋ 훈련소 준비물 어차피 3주만 갔다올거 뭐하러 짐 싸들고 가나 생각했지만 그래도 없는 것보단 낫겠지 싶어 준비물들을 챙겨봤는데 훈련소에서 정말 도움이 됐습니다. 제가 챙겼던 물품들은 0...

스케줄러 주기 설정 기능 추가 스케줄러의 주기를 cron탭 형식으로 설정할 수 있도록 apscheduler 모듈을 추가하였다. 주기 설정은 시, 분, 초로 설정 가능하도록 라벨과 콤보 박스, 체크박스 요소를 추가하였다. 콤보박스 안에 시, 분, 초의 숫자들을 반복문으로 넣어주고 체크박스의 체크 여부를 통해 설정한 시간에 대해 매번 실행될 수 있도록 구성하였다. 주기 설정 체크박스를 체크했을 때의 함수 호출도 각각 다르다. 체크박스를 체크하여 "매N시간마다" 주기를 설정하려고하면 N이 0보다 커야하기 때문에 콤보 박스의 0 값을 없애고, 라벨의 문구도 설정 가능한 숫자 범위로 업데이트 시켜주도록 되어있다. 백업 스케줄러 실행 전에 주기 설정 값들을 각 변수에 넣는 부분이다. 311~316LINE을 보면 각..