전체 글

화폐의 가치 - 미래가치와 현재가치 알아보기

화폐는 시간에 따라 가치가 달라지게 됩니다. 이렇게 들으면 어렵겠지만, 옛날에 500원이던 마이쮸가 지금은 1200원인걸 생각해 보면 우리 삶과 그렇게 동떨어진 개념은 아닙니다. 미래가치와 현재가치에 대해 알아보도록 하겠습니다. 미래가치 (FV, Future Value) : 현재 화폐를 미래의 가치로 표현하는 것 FV = PV X ( 1 + 할인율 )^기간 우리가 투자를 해야하는 이유를 미래가치로 부터 찾을 수 있습니다. 현재의 1억을 현금으로만 가지고 있게 된다면 인플레이션으로 인해 화폐의 가치는 점점 올라가게 되지만, 제가 가지고 있는 현금은 5년 뒤에도 1억 원 그대로겠죠. 인플레이션율을 2%라고 가정하고 5년뒤 1억 원의 미래가치는, FV = 100,000,000 X ( 1 + 0.02 )^5 =..

이자 계산 - 단리와 복리 차이 알아보기

투자시 이자를 산출하는 방법에는 단리, 복리 2가지가 있습니다. 단리 vs 복리 단리는 원금에 대해서만 이자를 계산합니다. 반면 복리는 이자를 포함해 계산합니다. 이 차이 때문에 시간이 지날수록 단리와 복리의 차이는 점점 벌어지게 됩니다. 즉 동일한 수익률인 경우에는 복리가 더 이득입니다. 단리 : 원금에 대해 이자를 계산 원리금 = 원금 X (1 + (금리 X 납입 연수)) 30,000,000원을 4%의 수익률로 3년간 단리로 저축하는 적금 상품에 가입한 경우, 원리금 = 30,000,000 X (1 + (0.04 X 3)) = 33,600,000 3년뒤에는 33,600,000원이 됩니다. 이자는. 3,600,000원을 받게 됩니다. 복리 : 원금에 이자를 포함해 계산 원리금 = 원금 X (1 + 금리..

[Framer X Code] Framer에서 쓸 수 있는 NPM 패키지

프로토타입을 React에서 Framer로 옮기니, 패키지를 못쓰는 게 제일 쉽지 않았어요 ㅎㅎ... 불꽃 검색 중 우연히 찾은 링크를 공유드립니다! 1. Framer에서 NPM 사용하기 보통 리액트에서는 터미널로 패키지를 설치하는데, Framer는 불가능합니다. 다행히도 Framer에서 쓸 수 있는 NPM 패키지가 몇 개 있더라고요! (앞에 올린 chart Component도 여기에 원래 Example이 있습니다.) 링크에 들어가면 example을 확인해볼 수 있습니다. 링크 : https://www.framer.com/npm/ Framer: Instant NPM Beta Endless possibilities with instant NPM support. www.framer.com 2. NPM 리스트 ..

[UX와 AI 사이] ChatGPT, 고도화된 챗봇(이라고 쓰고 새로운 검색 경험이라 읽는다)

chatGPT가 뭐야? ChatGPT는 OpenAI가 개발한 GPT-3.5 기반의 대형 언어 모델(large language model, LLM) 챗봇 ChatGPT는 대화 형태로 상호작용을 하며 놀라울 정도로 인간과 대화하는 것과 같은 반응을 제공하는 능력을 가지고 있습니다. 대형 언어 모델 (large language model, LLM)은 일련의 단어에서 다음 단어를 예측하는 작업을 수행합니다. chatGPT, 폭발적인 인기의 비결은! 이렇게 chatGPT에 열광하는 이유는 사람들이 chatGPT를 통해 엄청난 경험을 했기 때문입니다. 다르게 말하면, 특정한 문제를 기똥차게 해결했기 때문이고, 그 문제는 “검색(Searching)“인 것 같습니다. 사실 사람들은 "검색"에 불편함을 느끼고 있었던 것..

[Framer X Code] chart.js로 차트 컴포넌트 만들기

차트를 하나하나 디자인할 수 있겠지만, 귀찮을 때!!! 그냥 chart.js로 그래프를 넣어버리자!!! 0. 코드 파일 생성하기 오늘 만들 친구는 코드 컴포넌트입니다. Code component 파일을 만들어줍니다. 저는 파일 이름을 Chart라고 지었습니다. 그리고 오늘 저는 도넛 차트를 그릴 겁니다! 1. chart.js 사용 세팅 chart.js를 사용하기 위해서는 아래의 것들을 import 해야 합니다. import { Chart as ChartJS, LinearScale, ArcElement, CategoryScale, PointElement, LineElement, Tooltip, Legend, } from "chart.js" ChartJS.register( ArcElement, Tooltip..

[AI X Design] 마이크로소프트 디자이너 - AI 디자인 툴

The wait is over! You're in! 드디어 마이크로소프트 디자이너를 써볼 수 있게 되었습니다. 이에 리뷰를 한번... 시작해 보지요. 0. Intro? 좌측에는 prompt가 있고, 우측에는 이미지와 prompt 예시를 보여줍니다. 예시들은... 전형적인 PPT 디자인 같은 느낌을 많이 받았습니다. Pinterest에 PPT Design이라고 검색하면 나올 것 같은 이미지들이기도 하고... 어려운 디자인이 아니라서, 굳이 AI로 써야 하나? 하는 생각이 제일 먼저 들었던 것 같습니다. (물론 제가 Designer의 기능을 아직 모르는 상태였기 때문에 그렇기도 합니다. 그리고 AI로 저런 구성을 만들어 내는 것이 쉽지는 않다는 점은 알고 있습니다.) 1. Templete Try a prom..

[OpenAI API] 401 Error - Incorrect API key provided

Backgroundnext.js에서 chatGPT를 활용한 기능을 테스트하다가, 배포를 위해 github public repository에 올리고 github action으로 배포를 했다...근데 github에 push 하기 전엔 잘 돌아가던 키가.. push 하고 나서는 계속 401 error가 떠서 ㅠㅠ 하루종일 이유를 몰라서 미쳐버리는 줄... OpenAI api key를 환경변수로 넣고 gitignore까지 했는데... 왜 안 되지... 고민고민 했었다... 원인그냥 public repository에 올리면 안되는 듯싶었다. 원래 메일함 잘 안 보는데... 우연히 메일을 보니... OpenAI : 너 API Key 누출됐어!!!!!!! 새로 키 받고, 환경 변수에 바꾸고, 다시 테스트하고, 깃에 ..

[Framer X Code] Input값 바로 화면에 출력하기(createStore)

들어가기 앞서… React 경험자들에게: React를 써보신 분들은 알겠지만, React에서는 그냥 변수를 화면에 띄웠을 때 그 변수의 값이 바뀌어도 재렌더링이 안되기 때문에 useState를 씁니다. Framer에서도 마찬가지로 var로 선언된 변수는 화면에 바로바로 반영되지 않기 때문에, createStore를 써야 합니다. React 비경험자에게: React는 딱 1개의 페이지가 렌더링 되어 브라우저에서 보이게 됩니다. 그리고 필요할 때마다 재렌더링됩니다. 만약 특정 값이 변화하고 이를 화면에도 보여줘야 하는 상황일 때, React에서는 useState라는 훅을 사용합니다. 왜냐하면 var로 선언된 변수는 값이 변경되어도 다시 렌더링 되지 않기 때문이에요. var로 선언된 것과 같이 변수지만, 이 ..