전체 글

coding, it, java, c, cpp, algorithm, javascript, frontend, backend
Javascript/React

Vite 리액트 카카오맵 다음 주소 조회 API 연동 및 컴포넌트 개발(TS)

Vite React Kakao Map Vite React Daum Address Api 이번 글을 통해 배워갈 내용 개요 기초세팅 리액트 카카오맵 다음지도 연동 컴포넌트 리액트 카카오맵 리액트 다음지도 API 개요 해당 프로젝트는 리액트에 카카오맵과 다음 지도 연동 기능을 같이 추가한 다음 연동해서 활용하는 미니 프로젝트입니다| 주소를 선택하면 지도에 자동으로 선택되는 컴포넌트를 만들었습니다 기초세팅 (카카오 데브에서 가입, CORS 등에 세팅은 스킵합니다) 먼저 카카오 Developers를 방문해서 https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API..

Java/Java 기타

초간단 윈도우에 SDKMAN 설치하는 방법 한가지

``` 윈도우에 SDKMAN 설치하는 방법 한가지 ``` 이번 글을 통해 배워갈 내용 윈도우에 SDKMAN 설치하는 방법 한 가지 git bash 설치 https://git-scm.com/downloads Git - Downloads Downloads macOS Windows Linux/Unix Older releases are available and the Git source repository is on GitHub. GUI Clients Git comes with built-in GUI tools (git-gui, gitk), but there are several third-party tools for users looking for a platform-specific exp git-scm.co..

Javascript/NextJs

NextJs 14.1.0에서 TailwindCss NotoSans Font 설정하기

이번 글을 통해 배워갈 내용 Next JS Tailwind css Font 설정 1. nextjs 설치 먼저 nextjs를 설치합니다 npx create-next-app@latest 2. NotoSans Font 다운로드 Noto Sans Korean Font를 다운로드합니다 https://github.com/bswsw/noto-sans-korean-webfont GitHub - bswsw/noto-sans-korean-webfont: Noto Sans Korean Webfont for Web Developer Noto Sans Korean Webfont for Web Developer. Contribute to bswsw/noto-sans-korean-webfont development by creat..

Spring

도커 컴포스활용 간단한 FTP 서버 설정과 파일 업로드/다운로드 기능을 갖는 스프링 부트 애플리케이션 만들기

이번 글을 통해 배워 갈 내용 Docker를 사용한 Alpine FTP 서버 설정 스프링 부트 애플리케이션 개발 포스트맨을 활용한 테스트 1. Docker를 사용한 Alpine FTP 서버 설정 먼저, delfer/alpine-ftp-server 이미지를 사용하여 간단한 FTP 서버를 설정합니다 docker-compose.yml 파일을 사용하여 서비스를 구성합니다 두 명의 사용자(one 및 two)를 생성하고, 각각의 홈 디렉터리를 지정하며, 포트 21 및 21000-21010을 매핑하도록 구성하였습니다 version: "3" services: ftp: image: delfer/alpine-ftp-server restart: always ports: - "21:21" - "21000-21010:21000..

DB

PostgreSQL16 pgadmin4 DB Backup and Restore 해보기

``` PostgreSQL16 DB Backup and Restore 해보기 ``` 이번 글을 통해 배워갈 내용 PostgreSQL16 DB Backup and Restore 해보기(Dump 파일 방식) 1. Backup Dump 파일 생성 2. Restore 읽어주셔서 감사합니다 무엇인가 얻어가셨기를 바라며 오늘도 즐거운 코딩 하시길 바랍니다 ~ :)

DevOps/Docker

Docker를 활용한 pgAdmin 설정하기

``` Docker를 활용한 pgAdmin 설정하기 ``` 이번 글을 통해 배워갈 내용 Docker Compose 파일 작성하기 pgAdmin 실행하기 db 추가하기 Docker Compose 파일 작성하기 먼저 도커 컴포즈가 없으시다면 아래 링크를 보고 설치해 주시면 됩니다 https://codemasterkimc.tistory.com/689 Docker Compose 파일을 작성해 줍니다 version: "3" services: pgadmin: image: dpage/pgadmin4:latest container_name: pgadmin-container ports: - "5050:80" environment: - PGADMIN_DEFAULT_EMAIL=admin@example.com - PGADMI..

DevOps/Docker

Docker Compose volume 권한 문제 해결: WSL을 활용한 효과적인 해결 방법

``` Docker Compose volume 권한 문제 해결: WSL을 활용한 효과적인 해결 방법 ``` 이번 글을 통해 배워갈 내용 상황 해결 방법 상황 새로 세팅한 컴퓨터 도커 컨테이너 환경에 Postgresql을 사용하려고 보니 volume 생성에 문제가 발생했습니다 Permissions should be u=rwx (0700) or u=rwx,g=rx (0750). 2024-01-14 15:15:17.597 UTC [83] FATAL: data directory "/var/lib/postgresql/data" has invalid permissions 2024-01-14T15:15:17.597261337Z 2024-01-14 15:15:17.597 UTC [83] DETAIL: Permissio..

Javascript/NextJs

Nextjs Tailwind 에서 aos tos 대신 scroll animation 직접 구현해보기

Typescript 기반 React에서 scroll animation 직접 구현하는 방법 이번 글을 통해 배워갈 내용 React에서 직접 isVisible 기반 스크롤 애니메이션 구현해 보기 개요 마치 스프링에 롬복처럼 aos는 편리하나 라이브러리를 설치해야 된다는 단점이 있습니다 Nextjs 13으로 업데이트하면서 aos 가 실행이 안 되는 버그가 발생해서 해결책은 찾았으나 https://stackoverflow.com/questions/75379440/the-aosanimation-on-scroll-is-not-working-in-next-13 The AOS(Animation on scroll) is not working in next 13 I Use next 13 , I wanna add AOS l..

kimc
김씨의 코딩 스토리