ZeroBin`s 개발일지

티스토리에 이미지를 첨부하면 기본적으로 테두리가 없어 글과 섞여 보기 불편할 때가 있습니다. 아주 간단하게 모든 이미지에 테두리를 설정하는 방법에 대해 알아보겠습니다. 1. /manage 페이지 접속 > "스킨편집" 클릭2. 오른쪽 상단에 "html 편집" 버튼을 클릭합니다.3. 내 글에서 이미지 선택자 찾기CSS 는 스킨마다 다르기 때문에 본인이 작성했던 포스팅으로 접근하여 F12를 통해 선택자를 찾습니다.저의 경우엔 "figure" 태그의 "imageblock" 클래스 하위 img 태그임을 알 수 있습니다.4. css 탭 > img 태그 찾기html 편집의 css 탭으로 이동하여 img 태그를 찾습니다.5. 테두리 수정#article-view figure.imageblock img { display..

Next.js 를 이용하여 매~~우 간단한 게시판을 만들어 보겠습니다. 혹시 Next.js 가 설치가 안되셨다면 [Next.js] Next.js 설치하는 방법 을 참고해주세요.1. 프로젝트 구조my-board/├── node_modules/├── public/│ └── favicon.ico├── src/│ ├── components/│ │ ├── Post.js│ │ └── PostList.js│ ├── pages/│ │ └── index.js│ ├── styles/│ │ └── globals.css│ └── utils/│ └── api.js├── .gitignore├── next.config.js├── package.json└── README.md..

Next.js를 이용하여 게시판을 만드는 방법에 대해 간략히 알아보겠습니다. Next.js 설치하기 위해선 nodejs를 먼저 설치하셔야 합니다. 1. nextjs 설치npx create-next-app@latest --typescriptworkspace 경로에 npx 명령어를 입력하여 nextjs를 설치합니다.2. 프로젝트생성3. vscode 실행npm run dev 명령어를 통해 앱을 실행시킵니다.4. 실행화면localhost:3000 접속위 페이지가 뜬다면 정상적으로 설치된 것 입니다.감사합니다.

GraphQL 이란 Graph Query Language의 줄임말로서, 서버 API를 구성하기 위해 만든 DB 쿼리 언어입니다. GraphQL 은 단일 endpoint를 사용하므로 단 한 번의 호출로 원하는 응답을 받을 수 있어, REST API에 비해 HTTP 요청 횟수를 줄일 수 있습니다. 그럼 SpringBoot와 Postman을 이용하여 간단하게 예제로 알아보겠습니다.1. 라이브러리 추가dependencies { // basic implementation 'org.springframework.boot:spring-boot-starter-web' implementation 'org.springframework.boot:spring-boot-starter-graphql' // l..

twelvemonkeys 라이브러리를 이용하여 jpg 파일을 webp 파일로 변경하는 방법에 대해 간단하게 알아보겠습니다.1. 라이브러리 추가// webp 파일로 변환implementation 'com.twelvemonkeys.imageio:imageio-webp:3.10.1'2. 소스작성public void downImage(String imageUrl, String destinationFile) { String destJpg = null; String destWebp = null; try { // URL 에서 jpg 파일 다운로드 URL url = new URL(imageUrl); URLConnection conn = url.openConnection(); ..

부모창에서 iframe을 이용해 자식 Modal 창을 띄우고, 자식 Modal 창에서 닫기 요청을 하는 방법에 대해 간략하게 알아보겠습니다.1. 부모창부모창 소스 작성(parent.html) Parent Window Open Modal openModal() 함수를 통해 iframe의 경로를 지정하고 modal 창을 활성화합니다.closeModal() 함수를 통해 modal 창을 비활성화합니다.message 이벤트 리스너를 통해 자식창으로 "closeModal"이라는 메시지를 받게 되면 closeModal() 함수를 호출합니다. 2. 자식창자식창 소스 작성(child.html) Child Window Close Mo..

리눅스 서버에 SVN을 이용해서 SpringBoot(gradle) war 파일 배포하는 방법에 대해 간략하게 알아보겠습니다.1. Repository 생성SVN에 deploy라는 폴더를 생성 후, checkout 을 진행합니다. 2. build.gradlebuild.gradle 파일 수정plugins { id 'java' id 'org.springframework.boot' version '2.6.15' id 'io.spring.dependency-management' version '1.0.11.RELEASE' id 'war'}apply plugin: 'war'bootWar { archiveBaseName = '-' archiveFileName = 'myApp.war' ..

Eureka 서버와 JPA로 아주 간단한 쇼핑몰 BackEnd 소스를 작성하였습니다. SpringBoot로 구현하였으며, MariaDB를 사용하였습니다.1. 테이블 생성CREATE TABLE `products` ( `id` bigint(20) NOT NULL AUTO_INCREMENT, `name` varchar(255) DEFAULT NULL, `description` varchar(255) DEFAULT NULL, `price` double NOT NULL, `stock` double NOT NULL, `created_at` varchar(255) DEFAULT NULL, PRIMARY KEY (`id`));CREATE TABLE `users` ( `id` bigint(20) NOT N..

Nexus를 이용하여 공통 jar 파일을 배포하고 SpringBoot 프로젝트에서 lib 사용하는 방법에 대해 간단히 알아보겠습니다.1. 설치https://help.sonatype.com/en/download.html 사이트에서 본인 상황에 맞는 Nexus를 설치한 후 적당한 경로에 압축을 해제합니다.2. 명령어cmd(관리자모드) 창으로 해당 bin 폴더로 이동후 아래 명령어를 입력합니다. nexus.exe/installinstall 이 완료되면 run을 입력합니다.nexus.exe/run한참뒤, 아래와 같은 문구가 뜨면 실행이 완료된것입니다.3. 접속http://localhost:8081/ 사이트로 접속합니다.초기 패스워드는 nexus-3.69.0-02-win64\sonatype-work\nexus3\..

SpringBoot 프로젝트를 war 파일로 만들어 리눅스서버에 Tomcat 을 이용해 배포하는 방법에 대해 간략하게 알아보겠습니다. IntelliJ + gradle 기준으로 작성되었습니다.1. build.gradleplugins { id 'java' id 'org.springframework.boot' version '2.6.15' id 'io.spring.dependency-management' version '1.0.11.RELEASE' id 'war'}apply plugin: 'war'bootWar { archiveBaseName = '-' archiveFileName = 'MyApp.war' archiveVersion = "1.0.0"}group = 'com..