Programming321 React에서 Kakao 지도 api 사용하기 1. App key 발급 https://apis.map.kakao.com/web/guide/ 사이트에 접속해서 순서대로 진행합니다. 우선 카카오 개발자사이트 (https://developers.kakao.com) 접속하여 회원가입을 하고, 애플리케이션 추가하기를 통해 앱 생성을 합니다. 생성된 앱(mymap)을 클릭해 들어가면 사용할 수 있는 앱 키가 제공됩니다. 이렇게 간단히 앱키 발급이 완료되었습니다. 2. Sample React App 생성 리액트 앱을 생성하고, 간단히 소스를 추가해보겠습니다. 1) public/index.html 아래 코드를 /public/index.html 파일의 내부에 붙여넣습니다. 2) 지도를 띄우는 코드 작성 import React, { useEffect } from 'r.. 2021. 8. 10. Javascript 주요 팁 1. 조건이 필요할 때 => 3항 연산자 score > 5 ? 'Good': 'Bad'; // 조건이 true이면 'Good', false이면 'Bad' 2. 조건이 필요할 때 => nullish coalescing const message = text ?? 'Nothing to display'; //text가 있으면 text, 없으면(null, undefined) 'Nothing to display' //함수 default parameter : null 인 경우에는 null을 출력 function printMessage(text = 'Nothing to display'){ console.log(text); } // Logical Or || leftExpr ?? right Expr // falsy(nul.. 2021. 8. 7. Oracle 여러행의 데이터를 하나의 행에 가로로 합치기(LISTAGG) SELECT LISTAGG(필드명, 구분자) WITHIN GROUP ( ORDER BY 정렬기준필드 ASC 또는 DESC) FROM 테이블 2021. 7. 27. Gatsby 시작하기 (with Typescript) 0. Gatsby-cli 설치 npm install -g gatsby-cli 1. Gatsby 프로젝트 생성 gatsby new [프로젝트명] or npx gatsby-cli new [프로젝트명]// gatsby-cli설치 없이 수행할 때 yarn remove gatsby-plugin-manifest gatsby-plugin-gatsby-cloud // 필요없는 라이브러리 삭제 2. 타입스크립트 설치 yarn add typescript --dev yarn add gatsby-plugin-typescript 3. gatsby-config.js 파일 수정 module.exports = { siteMetadata: { title: `Gatsby Default Starter`, description: `Kick.. 2021. 7. 4. Recoil을 활용한 비동기 요청 예제 1. Library 설치 yarn add recoil 2. 구성 /src ㄴ components * UserList.jsx ㄴ recoil * state.js *App.js *Index.js 3. 코드 (1) src/App.js import React, { ErrorBoundary } from "react"; import { RecoilRoot } from "recoil"; import UserList from "./components/UserList"; function App() { return ( ); } export default App; (2) src/recoil/state.js import { atom, selector } from "recoil"; export const userListStat.. 2021. 6. 30. SWR을 활용한 비동기 요청 예제 1. Library 설치 yarn add swr 2. 폴더 구성 Counter는 참고로 작성했는데, 본 포스트에서 구성하지는 않겠습니다. 비동기로 서버에서 User목록만 불러와서 보여주는 부분만 코드로 남김니다. /src ㄴcomponents *Users.jsx ㄴcustomHooks *useUsers.js *App.js *index.js 3. 코드 (1) App.js import Users from "./components/Users"; import Counter from "./components/Counter"; function App() { return ( ); } export default App; (2) src/customHooks/useUsers.js import useSWR from "swr.. 2021. 6. 29. 이전 1 ··· 23 24 25 26 27 28 29 ··· 54 다음
