Programming (80) 썸네일형 리스트형 [React] Kakao Map API 사용하기 저번에 이어 오늘은 코드 구현까지 해보았다~! 나중에 셀렉트 박스를 통해 정보를 불러올 것이기 때문에, MUI 필드를 임포트 하여 적용해놓았다. 스타일링은 Styled-components로 하였다. 전체 코드 Map.js import { useEffect } from "react"; const { kakao } = window; const Map = () => { useEffect(() => { var mapContainer = document.getElementById('map'), // 지도를 표시할 div mapOption = { center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표 level: 3 // 지도의 확대 레벨 }; var .. [Python] 2진수, 8진수, 10진수, 16진수 변환하기 10진수 → 2진수, 8진수, 16진수 1. bin(숫자), oct(숫자), hex(숫자) : 접두어 포함된 문자열 반환 2. format(숫자, '#b'), format(숫자, '#o'), format(숫자, '#x') : 접두어 포함된 문자열 반환 3. format(숫자, 'b'), format(숫자, 'o'), format(숫자, 'x') : 접두어 제외된 문자열 반환 1. bin(숫자), oct(숫자), hex(숫자) 각 내장함수를 통해 진수를 변환할 수 있으며, 반환 값은 문자열(str)이다. bin() : 10진수 → 2진수 oct() : 10진수 → 8진수 hex() : 10진수 → 16진수 print(bin(6))# '0b110' print(oct(6))# '0o6' print(hex(6).. [Python] 문자와 아스키코드 변경하기 백준 문자열 문제를 풀다가 알게된 함수이다. 간단하게 내장 함수를 통해서 결과를 얻을 수 있었다. 문자를 아스키코드로 변경하기 print(ord('A'))// 65 아스키코드를 문자로 변경하기 print(chr(65))// 'A' 참고 이미지 [React] Kakao Map API 사용하기 : API KEY 발급 받고 적용하기 Kakao Map API를 적용하여 우리 동네 사이트를 보여주고자 했다. 그렇게 하기 위해선 먼저 Kakao 사이트에서 API KEY를 발급 받아야 한다. 그리고 내 프로젝트에 발급받은 키를 등록하면 사전 준비는 완료가 된다! 다음 글에서는 구현까지 해보겠다. Kakao Map API 사용하기 : API KEY 발급 받고 적용하기 1. APP KEY 발급 클릭하기 2. 애플리케이션 추가하기 3. 플랫폼 등록하기 4. 프로젝트에 발급받은 앱 키 등록하기 1. APP KEY 발급 클릭하기 https://apis.map.kakao.com/ 에 접속하여 오른쪽 상단에 있는 APP KEY 발급을 클릭한다. 2. 애플리케이션 추가하기 앱 이름에는 프로젝트 이름을, 사업자명에 내 이름을 적고 저장한다. 3. 플랫폼 .. [JavaScript] 비동기적 방식 처리 방법 : Callback, Promise, async/await 자바스크립트에서의 비동기적 구현 방식에는 Callback, Promise, async/await의 3가지를 들 수 있다. 또한, 이러한 비동기 처리 방식을 동기 처리처럼 가능하게 해줄 수 있다. Callback 다른 함수가 실행을 끝낸 뒤 실행되는 함수를 말한다. 함수를 등록해놓은 후 어떤 이벤트가 발생하면 호출하는 함수로써, 파라미터로 함수를 전달받아 함수의 내부에서 실행된다. 아래의 예처럼 setTimeout 함수 안에 함수를 전달하여 3초 뒤에 실행되는 모습이다. setTimeout(function() { ... }, 3000); 이를 동기 처리 방식으로 구현하려면, 비동기 함수의 콜백 내부에서 다음 작업(비동기 함수를 호출 등)을 하면 된다. 그런데 이러한 콜백을 이용한 비동기 처리는 아래와 같이.. [JavaScript] this this this가 가리키는 것은 환경에 따라 변할 수 있지만(dynamic binding(동적 바인딩) : this가 환경에 따라 바뀌는 것), 객체의 메서드인 경우에는 해당 객체를 가리키게 된다. 이 때, 객체의 메서드가 화살표 함수 () => {}로 호출된다면 this는 함수가 생성된 환경을 가리키고, 일반함수 function() {}는 this가 함수를 호출한 환경을 가리키게 된다. 아래 코드를 보면 test1()는 실행될 때 새로운 컨텍스트를 생성하기 때문에 this가 global을 가리킨다. 반면, test2()는 함수 컨텍스트를 생성하며 this는 자신을 호출한 환경인 부모 o를 가리키게 되는 것이다. let o = { name: "An", test1: () => { console.log(t.. [Next.js] TypeScript + 공통 레이아웃 적용하기 인스타그램 클론 코딩을 하면서 상단에 고정적으로 들어갈 내용이 있었다. 이를 페이지 변경 시에도 하나의 레이아웃으로 재사용하기 위하여 을 구현하여 유지하기로 하였다! 공통 레이아웃 적용하기 1. 상단에 공통으로 적용될 컴포넌트 구현하기 2. 페이지 변경 시에도 같은 모양을 유지할 수 있게 레이아웃 컴포넌트 구현하기 3. _app.tsx 구현하기 전체 코드 pages > _app.tsx import '../styles/globals.css' import Layout from '../components/Layout' function MyApp({ Component, pageProps }) { return ( ) } export default MyApp components > Layout.tsx import .. [CSS] Styled-components + 터치 스크롤 구현하기 여러 장의 카드를 가로로 놓고, 터치 스크롤 형식으로 자유롭게 좌우로 움직이고 싶었다! 좌우로 움직이는 터치 스크롤 구현하기 1. 스크롤 영역 내 내용을 줄 바꿈 하지 않고 표시하기 위해서 white-space: nowrap; 2. 스크롤 영역 벗어나는 부분 가리기 위해서 overflow-x: auto; 3. 스크롤 영역 내 들어갈 아이템 카드에 display: inline-block; 전체 코드 import React from "react"; import styled from "styled-components"; const CardScroll = () => { return ( ) } export default ScrollCard; const CardView = styled.div` width: 100%.. 이전 1 2 3 4 5 6 7 8 ··· 10 다음 목록 더보기