반응형 React6 Naver map API를 이용하여 네이버 지도를 화면에 띄우기 페이지를 구성하면서 지도 API를 이용하여 무언가를 만들면 재밌는게 있지 않을까?하고 naver API를 이용해 페이지에 네이버 지도를 띄워보는 코드를 구성해보았다. 해당 작업을 수행하는 데 있어서 적어 놓으면 좋겠다는 생각이 들어 글을 남겨 본다. 계정 등록 Naver API를 사용하기 위해서는 가장 면저 API 사용에 대한 신청을 진행 해야한다. 아래의 사이트에 들어가 가장 아래로 스크롤하면 Open API 이용 신청버튼이 있는데 이를 클릭하여 클라이언트 아이디를 발급 받는다. 네이버 지도 API 홈페이지 클라이언트 아이디 발급 이제 우리는 클라이언트 아이디를 발급 받는데 대다수가 공공기관 및 금융기관이 아니기에 콘솔의 AI·Application Service > AI·NAVER API > Appli.. 2024. 1. 8. [React][Typescript] Dialog 기능 이용할 때 깜빡임 발생 해결 목차 개요 문제점 해결법 개요 이메일 회원가입 기능을 개발하면서 dialog를 이용하려다 보니 문제점이 하나 발생했다. 바로 한 글자를 칠 때 마다 깜박임이 발생하는 것이다. 혼자 해결하려고 했으나, 잘 되지 않아 커뮤니티에 질문을 하며 문제를 해결해나갔다. 문제점 Dialog 기능에서 email과 password를 useState를 통해 값을 받으니 자동으로 리렌더링이 발생하는 문제가 있었다. 코드는 아래와 같이 작성했다. import * as React from 'react'; import { useState } from 'react'; import { AppBar, Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton,.. 2023. 6. 25. [React][Typescript] Firebase console을 이용한 Login 기능 구현 목차 개요 Firebase Console 설정 Firebase protocol(?) Code Typescript Code Result 개요 현재 내가 만들어 놓은 페이지에 업데이트가 없는 것 같기도 하고, 회사에서 개발 호소인으로 사는 느낌이라 공부도 할 겸 이전에 적용한 Firebase를 이용해서 로그인 기능을 만들어 보기로 했다. Firebase를 이용하는 이유는 구글이나 깃허브를 이용한 로그인을 실행할 때, 계정 정보를 Firebase DB에 쉽게 저장할 수 있다고 판단되어 사용하게 되었다. Firebase Console 설정 먼저 firebase에 들어가서 프로젝트를 생성한다. 프로젝트에 접속해서 빌드 > Authentication을 클릭 Sign-In Method 탭에 들어가서 원하는 로그인 방.. 2023. 6. 16. 작심삼일 JavaScript 정리 - 1 목차 JavaScript란? 변수와 상수 데이터 타입 연산자 조건문 switch/case 문 함수 화살표 함수 객체 반복문 for while for...of 배열 내장함수 이번 JavaScript 정리 공부가 작심삼일이 될 수 도 있지만 최대한 열심히 해보자는 의미에서 진행하는 정리 노트이다. JavaScript란? 웹 브라우저에서 사용하기 위해 만들어진 프로그래밍 언어 90년대부터 주로 웹 브라우저 상에서 UI를 동적으로 보여주기 위해 사용 현재에 이르러서는 웝 브라우저에 국한되지 않고 node.js runtime 같은 툴을 통해 서버에서도 사용 변수와 상수 변수를 선언할 때, 하나의 태그 같은 걸 앞에 써주는 데 이걸 동태 병수인지 상수인지 구분을 한다. 변수의 경우에는 예전부터 let a = 1; .. 2023. 3. 2. DOM은 무엇인가? Document Object Model의 약자로 웹 페이지 내 모든 요소에 접근, 조작할 수 있는 표준 API 모델. -> 브라우저의 제작사, 버전, 플랫폼 언어에 의존하지 않고 객체 지향적으로 접근이 가능, -> 표준 프로퍼티 및 메소드를 통해, 접근 및 제어가 가능하도록 하는 기반 모델 DOM 설계 방침 -> 객체지향적 설계: HTML 문서 내 모든 요소를 객체화하여 표현하고 접근하도록 함. -> 문서를 트리 구조로 표현: HTML 문서를 텍스트가 아닌 트리 구조를 갖는 계층적 구조로 표현할 것. DOM 특징 * 웹 브라우저 등에 의존하지 않는 비의존적인 독립적 인터페이스를 제공 * 웹 페이지에 동적으로 접근 및 변경 가능. 스크립트를 사용하여 객체, 프로퍼티, 메서드, 이벤트를 통해 접근하고 컨텐츠.. 2022. 6. 13. react란 프로젝트를 진행하게 되면서 react를 이용하게 되었는데 해당 라이브러리를 사용하는 데 많은 어려움이 있었다. 보다 높은 품질의 프로젝트를 나중에 진행하게 됐을 때 다른 팀원들에게 피해를 주지 않기 위해서 리액트에 대해 간단히 공부한 내용을 작성해봤다. 자바스크립트 라이브러리의 하나로서 UI를 만들기 위해 사용됨 페이스북과 개별 개발자 및 기업 공동체에 의해 유지보수 되고 있음 주로 SPA나 모바일 App 개발에 사용됨 (App의 경우 React Native가 있음) 이를 이용해 동적인 웹 페이지를 쉽게 만들 수 있음 특징 - 데이터와 템플릿을 결합해 화면을 생성하는 것 - 장점: 데이터 변화에 따른 성능 저하 없이 DOM 객체 갱신이 가능, 데이터 흐름이 부모에서 자식이므로 코드 이해가 쉽고 서비스 규.. 2022. 6. 12. 이전 1 다음 반응형
