본문 바로가기
리액트 - 카카오 Map API 이번에는 카카오 지도 api에 대한 글이다. 저번에는 네이버를 이용해서 지도 api를 연동하였다.나의 개인적인 생각이지만, 지도 api에서는 네이버가 1황이라고 생각이 든다. 다만, 한 가지 단점이 "유료"라는 점이다. 그 점에서 카카오 지도 api는 한 달 30만 회의 호스팅을 무료로 버틸 수 있기에 비용 절감의 측면에서 꽤 매력적이다.또한, 저번에 했던 네이버 지도 api의 "API 키 오픈" 문제를 어느 정도는 해결한 글이기도 하다. 시작해 보자.카카오 api 키 받기https://apis.map.kakao.com/여기로 들어가서 애플리케이션을 등록해줘야 한다. 그러면 api 키를 받을 수 있다. 리액트는 자바스크립트 기반이니깐 자바스크립트 api의 키를 쓰면 된다. (강조한다. api 키는 함부로.. 2024. 10. 9.
리액트 - 환경 변수 관리하기 [API key] [React] .env 파일로 환경 변수 관리 하기 (Feat. API Key)환경 변수란 컴퓨터 시스템에서 프로그램이 실행될 때 동작을 제어하거나 설정하기 위해 사용되는 값들의 모임입니다. 개발 환경에서의 환경 변수로는 API Key, 비밀키, 서버 URL, DB URL, DB Passwordrominlamp.tistory.com 환경 변수란 컴퓨터 시스템에서 프로그램이 실행될 때 동작을 제어하거나 설정하기 위해 사용되는 값들의 모임이다. 개발 환경에서의 환경 변수로는 API Key, 비밀키, 서버 URL, DB URL, DB Password 등이 존재한다.이런 환경 변수를 세팅해서 노출하고 싶지 않은 key 아이디나 시크릿을 관리할 수 있다.자세한 것은 글을 참고하자. 영상은 밑의 영상을 참고하자.h.. 2024. 10. 9.
리액트 - 네이버 Map API 리액트에서 네이버 지도 api를 쓰는 법에 대해서 글을 써본다. 여러 차례, 삽질을 끝에... 어느 정도는 해결이 되었다.(어느 정도라는 건, 완벽히는 해결되지 않았다는 뜻... 돈이나.. 가끔 에러가 뜨기도 하고...)https://velog.io/@qldudgh/React-%EB%84%A4%EC%9D%B4%EB%B2%84-%EC%A7%80%EB%8F%84-api-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 [React] 네이버 지도 api 사용하기react에서 네이버 지도 api를 통해 지도를 구현하는 데 어려움을 겪어서 사용법을 남겨본다.회원가입 및 등록은 건너뛰고 사용법에 대해 알아보자.index.html에 script를 작성하고 YOUR_CLIENT_ID에 등록한velog... 2024. 10. 3.
리액트 Routing으로 페이지 이동하는 법 리액트에서 라우팅 방식은 좀 다르게 된다. 리액트는 SPA, 즉 단일 페이지인 html 하나로 돌아가게 된다. 그래서 경로 이동에 따라서 Ul을 바꾸고 싶다면 라우팅 기능을 해주는 react-router-dom을 깔아야 한다. npm을 이용해서 깔아주면 된다.npm install react-router-dom(참고로 리액트로 안 만들고 일반적인 HTML / CSS / JavaScript으로 만들게 되면 그냥 html 파일을 연동해 주면 끝이다.)// Router.jsimport React from 'react';import { BrowserRouter, Routes, Route } from 'react-router-dom';import Main from './pages/Main';import Main f.. 2024. 10. 2.
Netlify으로 리액트 배포 Netlify이라는 사이트를 이용해 주면 웹사이트를 배포할 수 있다.실제로 이 사이트를 이용해서 기존에 만들었던 리액트 사이트를 배포해 두었다.https://codingworld2002.tistory.com/162 9. 리액트로 포트폴리오 사이트 만들기 (마무리)사실상 이미 저번 리액트 문법으로 모든 빌딩은 끝난 셈이다. 다만, 전체적인 스무스 효과와 가로 모드, 배포 정도가 남았기에.. 이런 저런 부분을 마무리하고자 한다.참고하고 싶다면 다음 사이codingworld2002.tistory.com(관련 글)근데 Netlify에 대한 디테일한 설명은 없어서 이렇게 글을 남겨본다.영상은 다음 영상을 참고하자.https://www.youtube.com/watch?v=WJtetccrv3o참고로 Netlify 사.. 2024. 10. 2.
우피란 무엇인지, 사용방법은 무엇인지? 노션을 이용해서 마치 웹서비스처럼 open을 할 수 있다.다만 이러면 링크도 깔끔하지 않고, 제한 사항이 많다. 이 점을 극복하기 위해서 "우피"를 이용하는 것이다.우피를 이용해서 매우 빠르게 랜딩 페이지 혹은 웹서비스를 만들 수 있어서, 꽤 많은 기업들이 사용하고 있다.당연히 개인들도 많이 쓰인다. 우피를 이용하면 빠르게 mvp를 만들어 볼 수 있다.https://www.oopy.io/ 1분 만에 만드는 노션 웹사이트, 우피!우피는 노션 페이지를 최적화된 웹사이트로 바꿔드립니다. 원하는 주소를 연결하여 나만의 홈페이지를 시작해 보세요.www.oopy.io(사이트) - 광고 아닙니다.https://youtube.com/playlist?list=PLkfUwwo13dlVFVZqs_npJG8kPckQiXkyW.. 2024. 9. 29.
노션 입문 무료 강의 https://youtube.com/playlist?list=PL1jdJcP6uQtv5YRnm1j50rbLW4TRuBrBh&si=FGk7H9jDhj7M1ZlN 노션(Notion) 초급, 입문 사용자로 시작해서 전문가가 되는 날까지!! www.youtube.com노션은 정말 쓰임새가 많은 툴이다.이 노션으로 개인 페이지를 만들 수 있고, 메모도 가능하다.업무에도 사용가능하고, 심지어 랜딩 페이지도 만들 수 있다. (우피와 결합하게 되면.)지금 나도 쓰고 있지만, 디테일한 부분은 더 배워야 한다. 위 재생목록을 이용해서 학습하고자 한다. 2024. 9. 29.
32. 최대공약수와 최소공배수(2609) 문제.두 개의 자연수를 입력받아 최대 공약수와 최소 공배수를 출력하는 프로그램을 작성하시오.답:import matha, b = map(int, input().split())print(math.gcd(a, b)) #최대공약수를 찾는 함수print(math.lcm(a, b)) #최소공배수를 찾는 함수문제에서 제시한 그대로 최대공약수와 최소공배수를 찾기 위하고 싶다면 "파이썬 내장 함수"를 이용해서 쉽게 풀 수 있다.먼저 math를 임포트를 해준다. 이후 a, b를 input를 받는다.이후 파이썬에 내장된 수학 함수를 이용한다.gcd는 최대공약수를 찾는 함수이고, lcm은 최소공배수를 찾는 함수이다.참고로 최대공약수는 두 수의 공통인 약수 중 가장 큰 자연수를 말하고, 최소공배수는 두 수의 공통인 배수 중 가.. 2024. 9. 28.
31. 나머지(10430) 문제.(A+B)%C는 ((A%C) + (B%C))%C 와 같을까?(A×B)%C는 ((A%C) × (B%C))%C 와 같을까?세 수 A, B, C가 주어졌을 때, 위의 네 가지 값을 구하는 프로그램을 작성하시오.답:A, B, C = map(int, input().split())print((A+B)%C)print(((A%C)+(B%C))%C)print((A*B)%C)print(((A%C)*(B%C))%C)a,b,c을 입력받는다. map함수를 이용하면 한 줄에 다 받을 수 있다.이후 문제에서 제시한대로 print문을 구현해주면 된다. 굉장히 쉬운 문제이다! 2024. 9. 27.
큰돌님이 보는 개발자 채용공고 사이트 그곳은 바로 "직행"이다.사이트는 다음과 같다.https://zighang.com/ 직행 - 전국민 채용 정보 플랫폼직행은 모든 직군의 최신 채용 정보를 제공하는 플랫폼으로, 구직자와 기업 모두에게 최적의 솔루션을 제공합니다.zighang.comhttps://youtu.be/qaMicjbF2yo?si=HBLpSb80EeKqY3y7(관련 영상) 2024. 9. 25.
9. 리액트로 포트폴리오 사이트 만들기 (마무리) 사실상 이미 저번 리액트 문법으로 모든 빌딩은 끝난 셈이다. 다만, 전체적인 스무스 효과와 가로 모드, 배포 정도가 남았기에.. 이런 저런 부분을 마무리하고자 한다.참고하고 싶다면 다음 사이트를 참고하자.https://webstoryboy.co.kr/1943 20. 포트폴리오 사이트 만들기 : React-Site : 마무리 영역Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 09 포트폴리오 사이트 만들기 : 마무리 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보webstoryboy.co.kr전체적인 코드는 다음과 같다.https://github.com/kss2002/PortfolioWebsite-be.. 2024. 9. 25.
30. 접미사 배열(11656) 문제.접미사 배열은 문자열 S의 모든 접미사를 사전순으로 정렬해 놓은 배열이다.baekjoon의 접미사는 baekjoon, aekjoon, ekjoon, kjoon, joon, oon, on, n 으로 총 8가지가 있고, 이를 사전순으로 정렬하면, aekjoon, baekjoon, ekjoon, joon, kjoon, n, on, oon이 된다.문자열 S가 주어졌을 때, 모든 접미사를 사전순으로 정렬한 다음 출력하는 프로그램을 작성하시오.답:s = input()answer = []for i in range(len(s)): answer.append(s[i:])answer.sort()for i in answer: print(i)어떻게 input()으로 받은 문자열의 맨 앞 글자 한 자씩 빼서 저장.. 2024. 9. 23.
프드프 구매 현황 따라해봄. https://pudufu.co.kr/ 프드프상위 1%만 아는 고급 스킬을 알려드립니다. - 돈버는방법, 창업, 돈버는법, 쇼핑몰제작, 위탁판매, 인터넷투잡, 남자소자본창업, 상가분양, 자기계발, 전자책, ebookpudufu.co.kr유명한 사이트까지는 아니지만, 자기계발하시는 분들에게는 조~금 유명할 사이트인(?) 프드프 사이트입니다.그중 "구매 현황"이라는 카테고리를 한번 따라 해서 만들어봤습니다.  (이걸 구현한다는 뜻.)완전 구현은 아니지만, 핵심적인 요소. 즉, 아래에서 위로 무한히 계속되는 애니메이션이 들어가 있습니다.마지막 리스트부분과 첫 리스트 부분에는 약간의 mask가 들어가 있습니다.관련된 코드는 다음 깃허브 페이지에 들어가면 볼 수 있습니다.https://github.com/kss2.. 2024. 9. 23.
8. 리액트로 포트폴리오 사이트 만들기 (푸터 영역) https://webstoryboy.co.kr/1942 19. 포트폴리오 사이트 만들기 : React-Site : 푸터 영역Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 09 포트폴리오 사이트 만들기 : 푸터 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리webstoryboy.co.kr(관련 사이트)https://github.com/kss2002/PortfolioWebsite-beta GitHub - kss2002/PortfolioWebsite-betaContribute to kss2002/PortfolioWebsite-beta development by creating an account on.. 2024. 9. 22.
29. 네 수(10824) 문제.네 자연수 A, B, C, D가 주어진다. 이때, A와 B를 붙인 수와 C와 D를 붙인 수의 합을 구하는 프로그램을 작성하시오.두 수 A와 B를 합치는 것은 A의 뒤에 B를 붙이는 것을 의미한다. 즉, 20과 30을 붙이면 2030이 된다.답:a, b, c, d = input().split()a = a+bc = c+dprint(int(a)+int(c))너무 쉽다.일단 input을 a, b, c, d 다 받아준다. 그냥 받으면 문자열로 받는다는 것을 기억하자.이후a에 a와 b를 합치게 만든다. (더 정확히 표현하자면 "붙인다"가 된다.) 어차피 문자열로 취급을 하기에, 예를 들어 a가 10이고 b가 20이라면 10과 20을 문자열처럼 합치게 되어서 1020이 된다.c도 똑같다.이후 다 합쳐진 문자열 .. 2024. 9. 22.
7. 리액트로 포트폴리오 사이트 만들기 (연락처 영역) https://webstoryboy.co.kr/1941 18. 포트폴리오 사이트 만들기 : React-Site : 연락처 영역Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 08 포트폴리오 사이트 만들기 : 연락처 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토webstoryboy.co.kr(관련 사이트)https://github.com/kss2002/PortfolioWebsite-beta GitHub - kss2002/PortfolioWebsite-betaContribute to kss2002/PortfolioWebsite-beta development by creating an account o.. 2024. 9. 20.
6. 리액트로 포트폴리오 사이트 만들기 (포트폴리오 영역) https://webstoryboy.co.kr/1940 17. 포트폴리오 사이트 만들기 : React-Site : 포트폴리오 영역Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 07 포트폴리오 사이트 만들기 : 포트폴리오 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹webstoryboy.co.kr(관련 사이트)https://github.com/kss2002/PortfolioWebsite-beta GitHub - kss2002/PortfolioWebsite-betaContribute to kss2002/PortfolioWebsite-beta development by creating an account.. 2024. 9. 20.
28. ROT13(11655) 문제.ROT13은 카이사르 암호의 일종으로 영어 알파벳을 13 글자씩 밀어서 만든다.예를 들어, "Baekjoon Online Judge"를 ROT13으로 암호화하면 "Onrxwbba Bayvar Whqtr"가 된다. ROT13으로 암호화한 내용을 원래 내용으로 바꾸려면 암호화한 문자열을 다시 ROT13하면 된다. 앞에서 암호화한 문자열 "Onrxwbba Bayvar Whqtr"에 다시 ROT13을 적용하면 "Baekjoon Online Judge"가 된다.ROT13은 알파벳 대문자와 소문자에만 적용할 수 있다. 알파벳이 아닌 글자는 원래 글자 그대로 남아 있어야 한다. 예를 들어, "One is 1"을 ROT13으로 암호화하면 "Bar vf 1"이 된다.문자열이 주어졌을 때, "ROT13"으로 암호화한.. 2024. 9. 20.
5. 리액트로 포트폴리오 사이트 만들기 (사이트 영역) https://webstoryboy.co.kr/1939 16. 포트폴리오 사이트 만들기 : React-Site : 사이트 영역소개 안녕하세요! 웹스토리보이입니다. 이번에는 사이트 영역을 작업하겠습니다. 크게 어려운 점이 없으니 잘 따라해주세요! 인덱스 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기webstoryboy.co.kr(관련 사이트)https://github.com/kss2002/PortfolioWebsite-beta GitHub - kss2002/PortfolioWebsite-betaContribute to kss2002/PortfolioWebsite-beta development by creating an account on GitHub.github.. 2024. 9. 19.
4. 리액트로 포트폴리오 사이트 만들기 (스킬 영역) https://webstoryboy.co.kr/1938 15. 포트폴리오 사이트 만들기 : React-Site : 스킬 영역Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 05 포트폴리오 사이트 만들기 : 스킬 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리webstoryboy.co.kr(관련 사이트)이것 또한 코드가 길기에 다음 깃허브 사이트를 참고하자.https://github.com/kss2002/PortfolioWebsite-beta GitHub - kss2002/PortfolioWebsite-betaContribute to kss2002/PortfolioWebsite-beta develo.. 2024. 9. 18.