티스토리

날아라김지원

검색하기

블로그 홈

날아라김지원

flykimjiwon.tistory.com/m

-깃허브 https://github.com/flykimjiwon

구독자: 2

방명록 방문하기

반응형

주요 글 목록

Ollama에 허깅페이스에서 다운받은 모델 적용하기 meta에서 공식으로 풀어준 llama3 말고도 사람들이 튜닝? 같은걸해서 여러 버전으로 특화해 놓은게 있다. 그중에서도 한국어 잘 알아먹게 데이터 넣어주시고 여러모로 잘 말아주셔서? 공개해주신 감사한 분들이 있음https://huggingface.co/MLP-KTLim/llama-3-Korean-Bllossom-8B/tree/mainhttps://huggingface.co/teddylee777/Llama-3-Open-Ko-8B-Instruct-preview-gguf 대표적으로 이 두개가 있는데 아래것을 사용해보도록하자. 왜냐하면 .gguf 확장자로 되어있어야 어케저케해서 모델로 잘 만드는데 이미 그렇게 되어있기 때문이다. 첫번째 링크것처럼 safetensors 확장자로 되어있으면 다시 gguf로 변환.. 공감수 0 댓글수 0 2024. 6. 22.
Ollama 사용해서 로컬 모델 구축하기 (Private GPT) https://ollama.com/ 아주짧게 요약하면 오픈소스로 공개된 여러 LLM모델들을 쉽게 사용할 수 있게 해주는 녀석인거같다. 대표적으로 meta에서 공개한 llama가 유명한데 llama2, llama3 두개 사용해보고 싶어서 설치해봤다. 지금 M3 MAX사용중인데 결론적으로 8B모델의경우 거의실시간으로 답변이온다. ollama 사이트 접속해서 우측 상단에 모델을 보면 엄청 많은데 역시 라마가 대표적이다. 여튼 결론적으로 내 기억을 위한 설명부터들어간다. (맥북기준, 윈도우도 아마 다를건 없음) 1.메인화면에서 다운로드를 누르고 들어가 운영체제에 맞게 설치해준다. 2.설치 다하면 터미널을 실행해주고 명령어 입력해주면되는데ollama run llama3:8b 라고입력하면 대표적인 경량화 모델을 설.. 공감수 0 댓글수 0 2024. 6. 22.
Next.js .env설정 및 Nextauth URL설정하기, 포트변경 1.Next.js .env파일 사용하기 프로젝트 최상단에 .env파일을 설정한뒤사용할 수 있다. 그중 순서대로 나열해보면 1-1)로컬 환경에서 env사용하기 : .env.local DB_HOST=localhost DB_USER=myuser DB_PASS=mypassword //서버에서 사용할 시는 위와같이 사용한다. NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk //브라우저에서 사용할시는 NEXT_PUBLIC_키워드를 사용해준다. 사용하는방법 아래와같이 process.env.변수명 으로 사용할 수 있다. //서버에서 사용할시 export async function getStaticProps() { const db = await myDB.connect({ host: process.env.. 공감수 2 댓글수 1 2023. 11. 9.
우분투(Ubuntu)에 몽고DB설치하기 https://www.mongodb.com/docs/manual/tutorial/install-mongodb-on-ubuntu/ Install MongoDB Community Edition on Ubuntu — MongoDB Manual Docs Home → MongoDB Manual MongoDB AtlasMongoDB Atlas is a hosted MongoDB service option in the cloud which requires no installation overhead and offers a free tier to get started.Use this tutorial to install MongoDB 7.0 Community Edition on LTS (long-te www.mongod.. 공감수 1 댓글수 1 2023. 11. 9.
우분투(Ubuntu) 사용하지 않는 포트 종료하기 현재 개인 PC남는거에 우분투 20.0.4 LTS 버전으로 테스트를 하고 있다. # 실행중인 포트확인 netstat -tnlp # 포트번호로 종료하기 sudo fuser -k 80/tcp # pid번호로 종료하기 sudo kill -9 pid번호 # 실행중인 포트확인 netstat -tnlp 즉 종료하려면 sudo fuser -k 80/tcp와 같이 입력하면된다. 공감수 0 댓글수 0 2023. 11. 9.
파이썬 전역변수 global에 대해서 (DFS 재귀함수와 함께) def recur(i): if i==100: return print(i,'번째 재귀 함수를 호출합니다') recur(i+1) print(i,'번째 재귀종료') recur(1) 이와같은 재귀함수가 있다고 치자 만약 4번째줄에 재귀함수가 호출 될 때마다 카운트를 하고싶다면 어떻게 해야할까? 다른언어들처럼 그냥 함수밖에 변수하나를 선언하고 카운팅을 하려고했는데 알고보니 파이썬은 그게 먹히지가 않더라... 종료직전에 return으로 카운트를 맥여도 될거같은데 적어도 나에게 직관적이진 않았다. 여튼 방법은 아래와 같다. 1.파이썬 전역변수 설정하는방법 global cnt cnt = 0 def recur(i): if i==100: return print(i,'번째 재귀 함수를 호출합니다') global cnt cn.. 공감수 0 댓글수 1 2023. 9. 18.
Day.js (dayjs) 라이브러리 사용하기 "라이브러리에 패배한 나" 라는 말과 함께 시작하고 싶다. 윤달과 윤년에 대해 아는가...? 그냥 한참 전인가 언젠가 C언어 수업에서 윤달과 윤년까지 고려해 달력을만드는 알고리즘을 짰던 기억이있다. 뭐 사실 까다로울 뿐이지 불가능한 수준의 구현은 아니었다. 하지만 이런기억.. 이제는 잊는게 좋다. 프론트엔드 화면 구현중 datePicker를 사용해야 하는 상황이 있었다. 결론만 말하면 2023.07.17 - 2023.08.17 의 형태로 정확히 한달 간격의 선택을 해야하는 상황이 있었다. 시나리오로 따지면 오늘로부터 정확히 한달전 참 모호하다. 오늘이 17일이면 월만 1을 빼면되나..? 만약 31일이면 2월 31일은 없는데? 날짜가 의외로 여러 예외사항이 매우많았다. let day1 = '2023.07... 공감수 0 댓글수 0 2023. 8. 17.
Next.js에 폰트 바꿔서 적용하기 (ttf파일 사용) - 서론 (Next.js에서 폰트 바꿔서 사용하는 대략적인 가이드) 보통 인터넷이 연결 되어있는 상황에서는 패키지나, 구글폰트를 이용해 폰트적용을 많이 합니다. 아래와 같이 말이죠 layout.js import './globals.css' import { Inter } from 'next/font/google' const inter = Inter({ subsets: ['latin'] }) export const metadata = { title: 'Create Next App', description: 'Generated by create next app', } export default function RootLayout({ children }) { return ( {children} ) } 위 코드는.. 공감수 2 댓글수 0 2023. 8. 7.
Next.js 13에서 React Markdown Preview 사용 (2가지 에러해결 포함) https://uiwjs.github.io/react-markdown-preview/ React Markdown Preview uiwjs.github.io - React Markdown Preview 라이브러리 마크다운, 코드블럭 등을 자동으로 만들어 주는 라이브러리다. 리액트에서는 사용하는데 문제가 없겠지만 Next.js 13에서 사용했을 때 작은 문제가 2가지 있었다. - 1번째 Module not found: (ESM packages .....) 에러 Next.js 공식문서를 보면 이와같은 경우에 아래와같이 해결하라고 나와있다. https://nextjs.org/docs/messages/import-esm-externals import-esm-externals | Next.js ESM package.. 공감수 1 댓글수 0 2023. 6. 30.
[VSCODE] 익스텐션 오프라인으로 설치하기 사내망이나 기타 오프라인 환경에서 익스텐션 설치파일을 받아 설치해야 하는 경우가 있을 수 있다. 1.아래사이트로 들어간다. https://marketplace.visualstudio.com/ Visual Studio Marketplace Extensions for Visual Studio family of products on Visual Studio Marketplace marketplace.visualstudio.com 2.원하는 익스텐션을 검색한다. 3.우측 중간쯤에 Download Extension을 클릭한다. 4.다운로드후 저장 5.VSCODE 좌측하단에 톱니바퀴 클릭후 명령 팔레트를 실행한다. 6.install from VSIX 를 검색 7.다운받은 확장프로그램, 익스텐션을 클릭하면 바로 설치.. 공감수 2 댓글수 4 2023. 6. 8.
JSP 리다이렉트 하는방법, 시작페이지 설정 - JSP페이지에서 특정페이지로 리다이렉트하거나, 첫페이지를 바꿔야 하는 경우 ex) www.test.com 이 도메인 주소인데 www.test.com/user/login.vis 이런 페이지가 첫 화면이 되어야 한다면? 1. javascript이용하기 - index.html을 만들고 이와같이 설정 2. jsp 문법 이용하기 혹은 3.web.xml 파일에서 welcome-file-list 설정하기 위와같이 1,2번을 사용하려고 해도 web.xml에 설정이 필요하다. 1,2번 방법은각각 html 파일과 jsp 파일을 이용하는 방법인데 아래와같이 web.xml에 먼저 설정해줄 필요가 있다. 그리고 web.xml파일은 tomcat서버쪽에 있기도하니 비교해서 사용하면 된다. 어느쪽에 넣어도 잘 작동하더라 inde.. 공감수 0 댓글수 0 2023. 6. 8.
Git 자주쓰는 명령어 정리 - 현재 디렉토리를 기준으로 깃 저장소 생성하기 git init -현재 깃 상태보기 git status -깃에 파일 추가하기 ex)변경된 파일 전체추가 git add . -커밋 메시지 남기기 git commit -m "메세지내용" -원격 저장소에 올리기 git remote add origin https://github.com//프로젝트이름 git push -u origin master - 브랜치 이동하기 git checkout ex)현재 master에 있는데 dev로 이동? git check out dev - 새로운 브랜치 만들기 git branch ex) dev브랜치 만들기 git checkout master git branch dev 마스터 브랜치로 이동후 그곳에서 dev브랜치를 만드는 과정 - 브랜.. 공감수 0 댓글수 0 2023. 6. 7.
opener - popup관련, 자식 부모창 제어하기 - opener 브라우저에는 메인 화면과 팝업창이 존재할 때 가 있다. 이때 팝업창과 메인 화면에서 데이터를 서로 이용하거나 이벤트를 전달해야할 때 가 있다. 이럴 때 사용할 수 있는 개념이 'opener'다. - 사용법 어차피 필요하면 찾아서 사용하게 되는데 내가 오늘 사용한 개념만 간단히 정리하자. 자식에서 부모값을 사용할 수 있고 부모에서 자식값을 사용할 수 있다. 부모란 메인페이지를 말하고 자식이랑 팝업창을 말한다. - 실습 노란창이 부모고, 빨간창(팝업)이 자식이다. var a = 10 window.open() // 팝업 열기 위한 명령어 이와같이 부모창의 콘솔에서 변수를 만들어주고 팝업을 열어주었다. opener.a window.opener 라고 사용해도되지만 자식창에서 opener.a를 입력.. 공감수 0 댓글수 0 2023. 5. 26.
502 error - 502 에러란? HTTP 502 오류는 서버와 클라이언트 간의 통신 중에 발생할 수 있는 오류 이 오류는 "Bad Gateway"라고도 알려져 있으며, 일반적으로 프록시 서버나 게이트웨이 서버가 클라이언트의 요청을 처리할 때 발생하는 문제를 나타낸다. 즉 서버간에 통신이 잘 안되는 상황인데 개발중에 발생 했다면 임시적으로 처리하는 방법이 있다. ->통신하는 부분을 주석처리하거나 return처리! 공감수 0 댓글수 0 2023. 5. 26.
Multiple annotations found at this line 에러 (이클립스) JSP 메인 화면이 불러오지 않는 오류가 발생했다. 일단 오류 메세지는 Multiple annotations found at this line .... 내용이었고 찾아본 결과 2가지 해결방법이 있었다. 1.@NoArgsConstructor 추가하기 파라미터가 없는 기본 생성자를 만들어준다. 이것을 추가해준것만으로도 해결은 되었는데 다른 PC환경에서는 없이도 잘 되었기 때문에 다른방법도 찾아봐야했다. 그리고 사실 @NoArgsConstructor 는 기본으로 넣어주는게 정석이라고 하는데 관련해선 공부를 해봐야겠다. 2.lombok build문제 해결 repository\maven\repository\org\projectlombok\lombok 경로 관련해서 build()문제라고 나왔는데 라이브러리를 삭제했.. 공감수 0 댓글수 0 2023. 5. 24.
elipse에서 tomcat 서버실행 오류 날 때 -자식 컨테이너를 시작 중 실패 했습니다. -왜냐하면 만료된 캐시 엔트리들을 없애버린 이후에도 여유 공간이 충분하지 않기 때문입니다 이와같은 오류가 났을 때 해볼 수 있는방법 1.프로젝트 클린 2.서버클린 3.톰캣 워크디렉토리 클린 4.아래 문구 추가해서 캐쉬사이즈 늘려주기 톰캣의 context.xml파일 톰캣 설치경로 -> conf -> context.xml ps. 나의 경우에는 git ignore의 classpath설정 문제였다. - 참고한링크 https://yongku.tistory.com/entry/%ED%86%B0%EC%BA%A3Tomcat-%ED%86%B0%EC%BA%A3Tomcat-orgapachecatalinaLifecycleException-%EC%9E%90%EC%8B%9D-%EC%BB%.. 공감수 0 댓글수 0 2023. 5. 24.
Javascript 기초 - 셀렉터, 돔조작, 웹js 기본, Alert UI만들기 - Javascript로 html 조작하기 글씨, 색, 사이즈 등 html, style, class등 필요한거 모두 찾아서 바꿀 수 있다. 안녕하세요 김지원 입니다. - UI만드는 단계 1.HTML/CSS로 미리 디자인 원하는 UI를 만들고 none으로 해놓음(alert의경우) 2.이벤트가 발생할경우(버튼클릭등) UI를 보여달라고 자바스크립트 코드 짜기 알림창 UI보이기 닫기 .alert-box { background-color: skyblue; padding:20px; color:white; border-radius: 5px; display: none; /* 평소에는 숨겨두기 */ /* 보여줄때는 display:block; */ } 공감수 0 댓글수 0 2023. 4. 22.
HTML, CSS pseudo-class, class작명 - pseudo-class :를사용해 원래클래스의 스타일 변화를 줄 수있는 셀렉터 그리고 hover > focus > active순으로 사용해야 정상 작동한다. input과 link(클릭 전후)태그에도 사용이 가능하다. /* pseudo-class 수도클래스 순서 hover > focus > active 로 사용해야 정상작동*/ .btn:hover{ background-color: chocolate; } .btn:focus{ /* 커서 찍혀있을 때 */ background-color: grey; } .btn:active{ /* 누르고 있는 상태일 때 */ background-color: brown; border:2px solid black; } .input-test{ font-size:20px; } .i.. 공감수 0 댓글수 0 2023. 4. 22.
HTML, CSS Table태그 (colspan, nth-child) - table 태그 구성 내용 내용 row, col로 구성되어있는데 tr은 row, td는 col이다. 즉 tr안에 td를 넣어서 table만들면되는데 보통 만들어진 템플릿을 사용한다. thead와 tbody는 그냥 헤드부분 영역 구분용으로 사용하는거고 기능상 차이는 없다. th는 td의 글씨를 굵게 처리한다. - 테이블 셀 내에서 상하정렬 vertical-align 사용 테이블에서는 top, bottom, middle사용가능하다. td, th { vertical-align : middle; } 아래와같이 글씨크기가 차이가 나는경우에도 vertical-align을 사용해 정렬할 수있다. 김지원 입니다 -------- 김지원 입니다 아래에 vertical-align:top같은 경우는 다르게 정렬된다. - .. 공감수 0 댓글수 0 2023. 4. 22.
HTML, CSS form&input - form 입력에 사용하는 태그 여러가지가 있지만 필요한거 검색해서 사용하자. 옵션1 - input 속성 placeholder는 배경 글자, value는 입력된 값 (미리), name 은 백엔드 개발할때 필요한 인풋 이름 그리고 HTML속성으로 CSS셀렉터로 사용가능하다. input[type=email] { color : grey } 그리고 아래와 같이 submit 타입을줘서 "폼태그안에서" 사용가능하다. 전송 - 셀렉터사용시 여러개 한번에 가능 /* 여러태그에 한번에 속성주는법 .class도 가능*/ div,input,textarea{ box-sizing: border-box; } - 재사용가능하게 class만들기 기존의 클래스 사용한다음 추가적으로 클래스 추가해서 사용이 가능하다. Message -.. 공감수 1 댓글수 0 2023. 4. 21.
HTML, CSS z-index, witdh, box-sizing - z-inex (높을 수록 앞에 온다) 여러 오소중에 위에 오고싶은게 다르다면 z-index값을 바꿔가면서 넣어보면 된다. .explain-box{ width: 400px; margin:auto; padding:20px; text-align: center; background-color: #eee; /* 붕띄우면되지 */ position:relative; top:-40px; z-index:100; } - max-width (최대폭 지정, 반응형 같은데서 쓰기 좋다) min-width,, min-height, max-height 등... 다만 이런 속성은 content영역의 너비를 의미하고, border, padding등과는 상관없다. 즉 padding등에 따라 maxwidth보다커질 수 도 있음 - b.. 공감수 0 댓글수 0 2023. 4. 21.
HTML, CSS 배경관련, margin collapse, position - 배경 이미지삽입하기 (background-image) - margin collapse (테두리가 겹쳐질 때 div margin이 합쳐지는 현상) ->하나의 혹은 바깥 div에 padding 1px라도 주면됨 - 박스가 붙어 있을 때도 마찬가지(위아래로) 이럴때는 margin collapse가 합쳐지는게 아니라, 더 큰 margin을 따라가게 된다. (우측 그림처럼) - 배경관련 CSS속성 .main-background { background-image : url(../img/shoes.jpg); background-size : cover; background-repeat : no-repeat; background-position : center; background-attachment : fixed;.. 공감수 0 댓글수 0 2023. 4. 21.
HTML, CSS 셀렉터, Navbar만들기 - clear:both 사용팁 float속성때문에 div에서 clear:both를 사용하는경우 빈 div태그를 하나 더만들어서 그곳에 사용해 주는것 이렇게 하면 추후 사용하는 div태그에서 margin을 사용하기 편하다. ...... 블로그 글 블로그 글 내용 본문 ......... - CSS 셀렉터 .클래스명 태그 : 해당 클래스 바로밑에 있는 해당태그 .클래스명>태그 : 해당 클래스 밑에있는 모든 해당태그 .navbar li{ /* 셀렉터 문법 .navbar안에있는 li태그 */ /* >는 안에있는 모든자식 ex)밑에있는 모든 li */ display: inline-block; width: 60px; text-align: center; background: #eee; padding:10px; bord.. 공감수 0 댓글수 0 2023. 4. 21.
HTML, CSS 기초 float, inline-block - float을 이용한 레이아웃 만들기 이와같은 레이아웃을 만들기위해 먼저 크게 Container를 만들어준다. 그리고 그안에 순서대로 header, left-menu, right, footer를 만들어주는데 div를 사용하게되면 기본 display:block 속성이기때문에 원하는대로 만들 수 없음 이때 float을 사용한다.float을 사용해 중간에 좌측 메뉴바, 우측 content 공간을 만들어주고 최종적으로 footer쪽은 clear:both를 이용해 float의 영향을 받지 않은체 레이아웃을 만들 수 있다. .container{ width: 800px; } .header{ width: 100%; /* 부모 태그 width의 100% */ height: 100px; background:aquamar.. 공감수 0 댓글수 1 2023. 4. 21.
HTML, CSS 기초(간단 프로필제작) p, span, 셀렉터, div, 정렬등.. 이상하리만큼 다시 HTML,CSS 공부를하게되면 내가 작아지는 느낌이든다. 기초라고 생각하지만 늘 잊어먹는 언어들..심기일전 하는 마음으로다시 기초부터 한번싹 공부를 하고 기록해보자. 특히 사소하지만 잊고 있던거, 주요한 내용들 최대한 한번더 봐보도록하자 - HTML은 마크업언어 자료의 구조를 표현하기 위한 언어 안녕하세요2 글자는 p안에 써야한다. - 태그 스타일 1)스타일은 각 태그에 인라인으로 줄 수 있다. 스타일 속성은 매우 다양함 하지만 그때 그때 검색해서 찾아쓰는게 맞다. 김지원 Front-end Developer 태그는 글자안에 쓰는 의미없는태그, inline 속성을 가지고 있다. inline을 가지고 있는 요소는 폭, 높이등을 단독으로 조절할 수 없어서 겉에 태그 등에 주어야 한다. 그리고.. 공감수 1 댓글수 2 2023. 4. 21.
REST API https://flykimjiwon.tistory.com/190 HTTP의 상태코드와 메서드, REST API - HTTP의 상태코드 1xx (정보) : 요청을 받았으며 프로세스를 계속한다. 2XX (성공) : 요청을 성공적으로 받았으며 인식했고 수용한다. - 200OK : 요청이 성공적으로 되었습니다. - 201 created: 요청이 성공 flykimjiwon.tistory.com 내가 과거에 썼던 글이다. 대략적인 개념을 어렴풋이만 알고 있었지만 자세히 알고 있어야 할거같다. - REST API란? REST는 Representational state Transfer의 약자 Representational 상태 전송 대표? 표현적인? 상태전송 이것만 봐선 뭔가 애매하다. HTTP 설계의 우수성에비해 제.. 공감수 0 댓글수 0 2023. 4. 6.
Spring Boot 데이터 삭제하기 - 데이터 삭제 (DELETE) 삭제버튼을 show.mustache (상세게시글)에 추가해준다. 수정때와 마찬가지로 id를 url 파라메터로 전송해준다. {{>layouts/header}} ID title content {{#article}} {{id}} {{title}} {{content}} {{/article}} Edit Delete Go To Article List {{>layouts/footer}} 그리고 컨트롤러에서 삭제 요청을 받는다. 1) 주소를 매핑하고 2)삭제 대상을 아이디 값으로 가져온다. 3)삭제한뒤 최종 게시글목록 페이지로 리다이렉트 시킨다. // @DeleteMapping("articles/{id}/delete") @GetMapping("articles/{id}/delete") p.. 공감수 0 댓글수 0 2023. 4. 5.
Spring Boot 수정 폼 만들기 (Update), 데이터 수정하기 - Update : 수정폼 만들기 아래와 같이 게시판의 글을 수정하고 싶다. 먼저 글 상세페이지로 들어가고 글의 상세페지로 들어가 Edit을 누르면 수정으로 들어가게 되는데 그러려면 상세 페이지를 담당하는 show.mustache파일을 수정해야 한다. 테이블밑에 Edit을 추가해주고 아이디를 파라메터로 같이 전송해주는 링크를 만들어준다. show.mustache {{>layouts/header}} ID title content {{#article}} {{id}} {{title}} {{content}} {{/article}} Edit Delete Go To Article List {{>layouts/footer}} 그리고 컨트롤러에 edit와 update를 아래와 같이 만들어준다. 그리고 위그림같이 기존의.. 공감수 0 댓글수 0 2023. 4. 5.
Spring Boot 링크, 리다이렉트 - 링크 : 요청을 위함 - 리다이렉트 : 응답을위함,클라이언트에게 다시 재요청을 한다. 기존 사이트의 문제점 새글 작성창도 없다. 이곳에 링크와 리다이렉트를 적용해야 한다. 1)글 전체 목록에서 새 글작성 페이지로 링크를 걸어준다. 왼쪽 아래에 New Article을 추가했다. 그리고 각제목을 클릭하면 상세페이지로 가게 링크도 여기서 걸어주었다. show.mustache {{>layouts/header}} ID title content {{#articleList}} {{id}} {{title}} {{content}} {{/articleList}} New Article {{>layouts/footer}} 2) 목록 페이지로 돌아가기를 추가 Submit옆에 Back 링크를 추가했다. {{>layouts/h.. 공감수 0 댓글수 0 2023. 4. 4.
Spring Boot 데이터 조회하기 (웹에서) - 데이터 조회하기 (웹에서) 1)웹에서 URL요청을 먼저 받기 위해 GetMapping을 추가한다. 주소/articles/id 그리고 @PathVariable을 통해 URL 변수를 가져온다. 2)처리흐름 id로 데이터를 가져온다 -> 가져온 데이터를 모델에 등록한다 -> 그리고 보여줄 페이지를 설정한다. (show.mustache) ArticleController.java .......... @GetMapping("/articles/{id}") //변하는 수에 따라 게시글 받아오기 public String show(@PathVariable Long id, Model model){ log.info("id = " + id); // 1: id로 데이터를 가져옴 Repository가주체이다. Article a.. 공감수 0 댓글수 0 2023. 4. 4.

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.