전체 글

모달을 페이지 내에서 호출하고 싶지만 모달이 메세지만 보여주는 게 아니라 모달 내에서 검색을 하여서 데이터 리스트를 보여주는 등 데이터의 양이 많았다. 그래서 UI가 자꾸 틀어졌고 새 창으로 띄우기로 했다. window.open() 함수를 쓰면 팝업을 띄울 수 있다. window은 생략 가능하다. open(url, option)으로 이루어져 있다. url은 "" 공백으로도 넣을 수 있고 그럴 경우에는 빈 창이 뜬다. "_blank" 라고 값을 주면 새 창으로 뜬다. url이 표시되는 주소표시줄은 생략할 수 없다. 브라우저 정책이라고 한다. 그런데 url이 노출되면 의도와 다르게 모달 주소로 바로 접속하는 등의 문제가 있을 수 있다. 그래서 감추고 싶다! 그러면 꼼수가 있다. 빈 팝업을 띄우고 부모 페이지..

text/json은 dto에 곧바로 매핑할 수 없다. JSON파싱을 먼저 거쳐야 한다. RestTemplate에 text/json이 응답으로 담기는데도 dto에 매핑하려해서 에러가 났다. String.class로 담으면 잘 담긴다. String.class로 담았더라도 곧바로 리턴해줄 수 없고 JSON으로 파싱해야 한다. 재밌는 점은 RestTemplate으로는 header에 application/json을 세팅해주더라도 text/json을 응답해줬는데 HttpURLConnection에 직접 content type을 application/json으로 세팅해주면 그건 또 application/json으로 응답해준다. URIComponentBuilder는 queryParam이 없으면 없는대로 값이 추가되지 않..

도서관리 사이트는 국비 교육 당시 프로젝트의 예시로 배운 것이었다. 다만, 제대로 된 프로젝트라고 할 수는 없고 대출/반납의 로직이 어떻게 이루어지는가, 관리자 입장에서 어떻게 다량의 데이터를 변경하는가에 대해서 팁을 들은 수준이었다. 그리고 근 n년간 개인 프로젝트를 원하는 주제로 시도하였으나 성과가 좋지 못했고 특히나 혼자서 프론트엔드와 백엔드를 구분하면서 작성해야 하고, React의 개념을 학습하면서 프론트엔드를 잘하고자 하는 것이 비용이 너무 컸다. 구현하지 못한 기능이나 한계점도 많았다. 그래서 내가 배웠던, 혹은 바로 쓸 수 있는 기술 중에서 thymelef tailwindcss alpine.js springboot 를 활용하여서 다시 도서관리 사이트를 제작해보게 되었다. 연초 2월쯤에 국립중..

table : 요소처럼 표현합니다. table-caption : 요소처럼 표현합니다. table-column-group : 요소처럼 표현합니다. table-header-group : 요소처럼 표현합니다. table-footer-group : 요소처럼 표현합니다. table-row-group : 요소처럼 표현합니다. table-cell : 요소처럼 표현합니다. table-column : 요소처럼 표현합니다. table-row : 요소처럼 표현합니다. table에 스타일링하다 보면 마주하는 테이블 깨짐 그것은 display에 적절한 속성을 주지 않았기 때문이다! 부모요소 table 자식요소 table-cell 이러면 자식요소가 일정한 너비를 갖게 된다. 가끔 헤더를 숨겼다가 보여줘야 할 때가 있는데 이 때는..

페이지네이션은 배열 형태로 데이터를 가져와서 일정 크기로 잘라서 보여주는 것이다. 이를 구현하기 위해서 필요한 것은 총 게시물 갯수 totalCount 총 페이징 그룹 갯수 totalPages = Math.ceil(totalCount / limit) 한 페이지당 게시물 수 limit (viewPerPosts) 페이지당 보여줄 버튼 수 viewPerPages 현재 페이지 번호 currPage 페이지 첫째 번호 firstNum = currPage - ( currPage - 1 % viewPerPages) + 1 페이지 끝 번호 lastNum = currPage - (currPage % viewPerPages) + 5 정도가 필요하다 장점은 데이터를 가공하기가 한결 쉽다! DB단에서 SQL문으로 트리구조로 데..

Faker.js는 더미 데이터를 생성해주는 라이브러리다. 이미지도 숫자도 텍스트도 모두 생성해준다. React에 넣을 더미 데이터를 이미지 따로, 글 따로~ 무료 공개 API를 검색해서 일일이 붙이느라 덕지덕지 코드가 붙어 힘들었는데, 이제는 실제 서버 API를 붙이기 전까지 faker.js로 간편하게 더미데이터 뭉치를 만들 수 있다. 실 서버에서는 API에서 응답받은 데이터를 객체로 받아서 컬럼마다 떼어 쓸 것이므로 이쪽이 좀 더 적절해 보인다. npm install @faker-js/faker --save-dev import { faker } from '@faker-js/faker' const example = () => { const dummyData = { name: faker.name.first..

https://m3.material.io/ Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences. m3.material.io 1. Material Design 머티리얼 디자인은 Google 디자이너와 개발자가 구축하고 지원하는 디자인 시스템. 2014년에 Google은 "플랫폼과 기기 크기에 관계없이 통합된 경험을 제공하는 단일 기반 시스템 개발"을 목표로 하는 프로젝트인 Material을 시작했습니다. 종이와 잉크에서 영감을 얻은 Googl..

2년 묵혀둔 정보처리기사 개편 이래 첫 출간된 교재를 이제서야 공부한다. 필요한가 아닌가 고민도 길었고 다른 것에도 신경을 썼으니 순서가 밀린 탓도 있다. 그런데 자격증이 원래 들어갈 땐 필요하지만 일할 때는 별 의미가 없어지는 것이고 자격을 증명한다는 의미대로 내 지식수준을 상정할 수 있는 지표가 되기에 따는 것이 좋겠다고 생각했다. 참고로 한달 정도 설렁설렁 공부했는데 문제풀이 점수가 저번이랑 큰 차이가 없다... 정보처리기사 시험은 개편 이래로 22년도 3회차부터는 문제은행식으로 출제되어 공개되지 않는다고 한다. 그래서 어디를 검색해도 22년도 2회차까지가 공개된 출제 문제이고, 기출 문제도 3개년까지만 볼 것을 권장하는 듯하다. 이전 기록은 30점이었는데 그래도 평균이 19점은 올랐다. 마지막 과..

Swiper는 캐러셀 슬라이드를 쉽게 사용할 수 있는 라이브러리다. 하지만 CSS 파일을 import해야 스타일이 입혀지고 다양한 설정값이 있어서 원하는 대로 설정할 수 있으나 동시에 복잡하다는 단점이 있다. npm i swiper Swiper를 사용하려면 다음과 같이 작성한다. 공식 문서를 참고하여 자주 사용하는 기능 위주로 작성하였다. //Swiper컴포넌트와 슬라이드 컴포넌트를 불러온다 import { Swiper, SwiperSlide } from 'swiper/react' //Swiper의 기본 css import 'swiper/css' //navigation과 pagination은 import 해야 그려준다. import 'swiper/css/navigati..

CORS에 대한 설명 CORS(Cross-Origin Resource Sharing)은 동일한 출처에 대한 리소스를 공유할 수 있다는 제한 정책이다. 추가적인 Http 헤더를 사용하여서 실행 중인 웹 어플리케이션이 다른 출처의 리소스에 접근할 권한을 부여하도록 한 것이다. 웹 어플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 Http 요청을 실행한다. 교차 출처 리소스 공유 표준은 웹 브라우저에서 해당 정보를 읽는 것이 허용된 출처를 서버에서 설명할 수 있는 새로운 http헤더를 추가함으로써 동작한다. preflight한 request는 먼저 options 메서드를 통해서 다른 도메인의 리소스로 HTTP 요청을 보내 실제 요청이 전송하기에 안전한지 확인합니다. cross..

application.properties Springboot 프로젝트 생성 시에 기본적으로 존재하는 설정파일. 공백이 있을 경우 에러가 난다. 리스트로 작성해야 할 경우에 배열처럼 [0] , [1]을 붙여주어야 한다. ex) 아래처럼 써주면 이게 하나로 취급된다. application.servers[0].ip=127. 0. 0. 1 application.servers[0].path=/path1 #DB spring.datasource.type=com.zaxxer.hikari.HikariDataSource spring.datasource.driver-class-name=net.sf.log4jdbc.sql.jdbcapi.DriverSpy spring.datasource.url=jdbc:log4jdbc:mysq..

slf4j-log4j12 log4j를 slf4j로 처리할 때 필요하다. log4j-1.2 log4j를 사용하는 컴포넌트가 존재할 때 이 라이브러리로 log4j2로 넘겨줄 수 있다. log4j-slf4j-impl log4j2를 slf4j로 처리할 때 필요하다. log4j-over-slf4j log4j를 직접 사용하지만 log4j와 다른 slf4j 바인딩을 사용하려는 경우 log4j-to-slf4j jcl-over-slf4j jakarta common logger를 연동(spring에서 사용하는 기본 로깅) jul-to-slf4j java.util.logger를 연동