> 개발54 [React] '"vite-plugin-next-react-router"' 모듈에 내보낸 멤버 'reactRouterPlugin'이(가) 없습니다. 오류 해결하기 강의에서 Next.js 처럼 react에서도 편하게 라우팅을 해주는 게 있다고 해서 설치했다. Next.js처럼 페이지 폴더명을 라우팅 경로로 사용한다고 한다. 내가 설치한 버전이 강의에서 설치한 버전과 다른지 npmjs에 써져있는 설명도 내가 검색했을 땐 너무 짧았고 설치 후 어려움을 겪어서 나같이 헤매는 사람들을 위해 글을 쓴다! vite-plugin-next-react-router  ![npm](https://img.shields.io/npm/v/vite-plugin-n.. 2023. 5. 28. [Javascript] 스탑워치 만들기 스탑워치를 만드는 방법 스탑워치 구현 방법을 생각했을 때 가장 먼저 떠올랐던 생각은 시작 버튼을 클릭한 시간 - 현재 시간을 실시간으로 재면 되지 않을까? 였다. 이 방법을 사용하면 정지 버튼을 눌렀다가 시작 버튼을 눌렀을 때 멈춰있던 시간부터 다시 이어서 시간을 재기 어렵는 문제가 있었다. 그래서 0초부터 1씩 더하다가 정지를 하면 더하기를 멈추고, 다시 시작을 누르면 다시 1을 더하는 방식으로 구현하기로 했다. time = 0 으로 설정해주고, 시작 버튼을 누르면 time ++ 이 된다. 시간은 시간 단위, 분 단위, 초 단위로 쪼개져서 각각 hour, minute, second 에 저장된다. 그리고 그걸 화면에 나타내도록 구현했다. let time = 0; let timerState = null; .. 2023. 5. 21. [Javascript] 날씨에 따라 배경 이미지 변경하기 openweathermap 으로 얻어진 날씨 정보에 따라 배경 이미지를 변경하는 방법을 알아보자! 활용할 값을 변수에 담아주기 먼저 날씨 정보 중 내가 사용할 온도와 날씨 정보를 변수에 담아 저장하자. const temp = result.main.temp; const weather = result.weather[0].main; 날씨 정보 한글로 변환하기 weather는 날씨에 따라 Clear, Rain, Mist 등으로 표현된다. 나는 영어가 아닌 한글로 화면에 정보를 나타내고 싶어서 얻은 결과값을 weatherValue에서 찾아 한글로 변환할 수 있도록 코드를 작성했다. const weatherValue = { Clear: "맑음", Rain: "비", Thunderstorm: "뇌우", Snow: ".. 2023. 5. 20. [Javascript] geoloaction으로 내 위치 가져오기 이번에는 Geolocation API 를 이용해서 내 위치 정보를 가져오고, 그 다음에 내 위치의 날씨 정보를 가져올 것이다. Geolocation API 사용하기 - Web API | MDN Geolocation API는 사용자의 현재 위치를 가져오는 API로, 지도에 사용자 위치를 표시하는 등 다양한 용도로 사용할 수 있습니다. 이 글에서는 Geolocation API의 기초 사용법을 설명합니다. developer.mozilla.org 사용자의 현 위치 가져오기 : getCurrentPosition 매서드 사용자의 현재 위치는 getCurrentPosition() 메서드를 호출해서 가져올 수 있습니다. 이 메서드는 사용자의 위치를 탐지하는 비동기 요청을 시작하고, 위치 관련 하드웨어에 최신 정보를 요.. 2023. 5. 19. [Javascript] JSON과 open weather map API : 날씨 정보 가져오기 에고공 요새 자전거를 타느라 바빠서 블로그에 신경을 못 썼다. 오랜만에 글을 쓴다. 큐큐 코드를 작성할 때 통신 기능을 구현하는 경우가 많기 때문에 API 이해도가 높아야 한다. 그래서 open weather map API를 활용하면서 JSON 데이터를 다루는 법을 공부해보려고 한다. JSON 이란? JSON은 Javascript Object Notation의 줄임말이다. JSON은 문자 기반의 데이터 교환 형식이다. typeof 로 JSON의 데이터 타입을 확인하면 string이 나온다. JSON의 구조는 객체 리터럴 작성법을 따르기 때문에 마치 객체처럼 생겼다. 하지만 객체와 달리 키에 꼭 큰따옴표가 있어야 하며, 값에도 꼭 작은 따옴표가 아닌 큰따옴표를 사용해야 한다. 그리고 데이터를 교환하기 위해.. 2023. 5. 18. CLI와 터미널, 쉘 개발 공부를 시작하면서 내 인생 처음으로 맥을 구입했다. 공부를 하면서 맥에 있는 터미널을 이용할 기회가 많았는데 명령어가 무엇이 있는 줄도 모르고 나는 평생 살아왔기 때문에 한 단어 한 단어 치는 것이 너무 떨렸다. 한 번은 명령어를 잘못 입력하고서 어떻게 되돌려야할지 몰라 컴퓨터를 포맷한 적도 있다... 개발 분야에 진입할 때 나에게는 명령어들이 진입장벽으로 느껴질만큼 낯설었기 때문에 터미널에 대해 조금이라도 더 공부해두면 편리할 듯하여 공부해보려고 한다. 사용자 인터페이스 나는 사용자 인터페이스라고 표현하기 보다는 UI (User Interface) 라고 표현하는 것이 좀더 친숙하다. 사람과 컴퓨터 사이에 상호작용할 수 있도록 만들어진 매개체를 사용자 인터페이스라고 한다. 사용자 인터페이스에는 대표.. 2023. 4. 28. 이전 1 2 3 4 5 6 7 ··· 9 다음
