카카오 지도를 띄우려고 하다보면, 위와 같은 에러메시지를 만날 수 있다. 어떻게 해결 할 수 있는지 알아보자. 이전에, 내가 어떻게 지도를 띄우는지 정리한 글을 포스팅 한적이 있다. 그 방식대로 완전히 따라 했다면, 위와 같은 에러가 생기지 않았겠지만, 여기서는 어떻게 해결하는지 알아보자. 원인 원인은 script가 완전히 로드 되기 전에 map 관련 메소드를 실행 시키려고 하기 때문에 생기는 에러이다. kakao에서 제공하는 api script는 sdk.js가 모두 로드 된 이후, kakao.js라는 파일을 로드하게 되는데, kakao.js가 완전히 로드 되기 전에 kakao.js 안에 있는 함수를 호출하려고 하여 생기는 문제이다. 해결책 방법은 매우 간단하다. kakao에서 제공하는 load라는 메소..
전체 글
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fpnxqo%2FbtrNvimxMql%2Fcd4jrQYXjbW4ob1blPbs5K%2Fimg.png)
Next.js 기반 프로젝트에서 카카오 맵 api를 사용하여 지도를 화면에 띄우는 방법에 대해 순서대로 정리해보자. [ 목차 ] 카카오 맵 Api key 받기 지도 화면 출력 지도 출력 영역 설정 script를 이용하여 Api 불러오기 지도 띄우는 코드 작성 전체코드 참고로 이 글은, NextJS 프로젝트를 만들 줄은 알고, Next.js 혹은 React에 대한 최소한의 지식은 가지고 있다는 가정하에 작성하였다. (Next.js 프로젝트를 처음 만드는 방법은 공식문서를 참고하자.) 또한 Openlayers라는 라이브러리를 통해서 지도를 그리는 방법도 있는데, 이 부분은 Openlayers 지도 포스팅을 참고하자. 1. 카카오 맵 Api key 받기 우리가 kakaoMap Api를 이용하기 위해서는 kak..
nextjs 프로젝트에서 tailwind를 설치하고 테스트를 해봤는데, 아래와 같은 에러가 발생하거나 에러가 뜨지 않으면 아예 정상적으로 작동이 되지 않았다. Error: Cannot find module 'tailwindcss' stackoverflow를 참고해보니, .next 폴더와 node_modules를 다시 지우고, 다시 install 해보라는 조언이 있었다.(인스톨 참고링크 - tailwind) Install Tailwind CSS with Next.js - Tailwind CSS Documentation for the Tailwind CSS framework. tailwindcss.com 우선, 아래 명령어로 기존에 설치한 것들을 지우고, npm uninstall autoprefixer po..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F6G6u3%2FbtrNf9py3zD%2F14wgnTxEhs7E0c10pJx9vK%2Fimg.png)
리눅스에서 tar파일 혹은 tar.gz으로 압축하고, 압축을 해제 하는 방법에 대해 간단히 정리해보자. [ 목차 ] 1. tar로 압축하기 2. tar 압축풀기 3. tar.gz으로 압축하기 4. tar.gz 압축 풀기 5. tar.gz 압축시, 특정파일 제외하기 1. tar로 압축하기 tar cvf [아웃풋 파일명.tar] [압축대상] e.g.) tar_test.txt 라는 파일을 tar_test.tar 파일로 만들고자 한다면, -> tar. -cvf tar_test.tar ./tar_test.txt 2. tar 압축 풀기 tar xvf [대상 tar 파일명.tar] e.g.) tar_test.tar 의 압축을 풀고 싶다면, -> tar -xvf tar_test.tar ./tar_test.txt 3. ..
TypeORM을 이용해서 어떻게 bulk Insert를 할 수 있는지 정리해보자. 방법은 바로 "In" 함수를 이용하는 것이다. 매우 간단하니 바로 예시를 보며 이해해 보자. // ... import { In } from 'typeorm'; // update할 대상을 배열로 저장한다. const userId = [2, 3, 5, 7]; const result = await this.userRepository .createQueryBuilder('u') .update() .set({ active: 0 }) // In 함수를 이용하여 update를 해준다. .where({ idx: In(userId) }) .execute(); //...
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FvUX2R%2FbtrMVclLUn1%2FDnwr8MQHOanyqAbDImJaH0%2Fimg.png)
지난 포스트에서 Dockerfile과 Image, Container의 관계에 대해서 알아봤다. 이번 포스트에서는 실제로 Dockerfile을 이용하여 어떻게 Docker Image를 만들 수 있는지 알아보자. Docker build Process DockerImage가 생성되는 과정은 아래와 같다. (하지만, 우리는 1번 2번 부분만 작업을 하면 docker가 나머지는 알아서 다 해준다.) Dockerfile을 작성한다. "docker build [경로]" 명령어를 입력한다. e.g) docker build . docker가 해당 경로에 있는 Dockerfile을 자동적으로 찾는다. Dockerfile에 있는 명령어를 실행시킨다. Docker Image가 완성된다. Dockerfile 작성 이미지 생성을..