WEB/Front-end13 어쩌다 Vue.js 02 _ 네이버 지도 api 1. 네이버 클라우드 플랫폼에서 애플리케이션 등록 2. index.html에 아래 코드 추가(클라이언트 아이디 바꿔서) 3. 구현(vue.js) 2024. 12. 10. 어쩌다 Vue.js 01 _ 환경설정 개발 외주 프로젝트를 맡게 되었는데, 초반에는 Vanilla JS로 개발을 요청받았으나, 유지보수 측면을 고려하여 최근 프론트 개발자가 많이 사용하는 Vue.js 프레임워크로 개발을 하게 되었다. (+반응형 web-app 개발) Vue를 많이 사용하는 이유가 궁금해서 찾아봤는데, (1) 문법이 직관적이고(html 형식에 더 가까운 듯) (2) 직관적인 디렉티브 DOM조작이 가능하여(v-if, v-for 등), (3) 더 명확한 가이드라인... 등의 이유라고 한다. 개발을 위해서는 node.js 설치 후 터미널에서 아래와 같이 실행시켰다. npm install vuenpm install -g @vue/clinpm create (프로젝트명) -- 이후 버전 선택가능. vue3 설치 cd (프로젝트명) +.. 2024. 11. 30. context, 페이지 라우팅 (React.js_04) #01. Context [Context]리액트에서 자식의 자식 컴포넌트에게 데이터를 직접 전달하지 못하는 문제(Props Drilling)를 해결하기 위해서 사용- createContext : 생성- Consumer : 소비자- Provider : 공급자 context가 여러 컴포넌트를 하나의 context로 묶을 수 있음(388p 그림 참고) - React를 import하여 사용, 컨텍스트 변수는 컴포넌트 바깥에 선언(App function 바깥에 선언)import React, { useReducer, useRef, useCallback } from 'react';const TodoContext = React.createContext(); // 컨텍스트 변수는 컴포넌트 바깥에 선언 - 감싸고자 하는 .. 2024. 10. 15. 웹 스토리지 (React.js) 웹 스토리지(Web Storage)웹 애플리케이션이 클라이언트(브라우저)에 데이터를 저장할 수 있게 해주는 API로컬 스토리지와 세션 스토리지 두 가지 형태가 있음 로컬 스토리지(Local Storage)브라우저 세션과 관계 없이 영구적으로 데이터를 저장함 -> 사용자가 브라우저를 종료해도 저장된 데이터는 남아있음.사용자 로그인 유지 or 기본 설정 저장 시 활용// 저장localStorage.setItem('key', 'value');// 조회let value = localStorage.getItem('key');// 삭제localStorage.removeItem('key'); 세션 스토리지(Session Storage)브라우저 세션 동안(브라우저 탭이 열려있는 동안)만 데이터 저장.일회성 로그인 .. 2024. 8. 23. 이전 1 2 3 4 다음
