Project.log

바닐라 JS로 크롬 앱 만들기 - 노마드코더를 하다가 OpenWeatherMap API 401에러가 출력되었습니다. API 키가 잘못되었습니다. 자세한 내용은 https://openweathermap.org/faq#error401 을 참조하십시오. (Invalid API key. Please see https://openweathermap.org/faq#error401 for more info.) 아무리 봐도 계정을 만들고 My API Keys에서 잘가져왔는데 실행이 안되서 검색을 좀 해봤습니다. https://stackoverflow.com/questions/33091948/using-openweathermap-api-gives-401-error

깃 부터 깃허브까지 쉽게 하는 방법을 올려보겠습니다. 1. info라는 폴더를 만들어서 이 폴더를 git으로 관리하고 깃허브까지 올려보겠습니다. 2. 대충 test.txt을 만들어서 내용을 입력해보겠습니다. % ls -al 3. ls -al 을 해보면 test.txt파일은 존재하고 아직 git으로 관리되고 있진 않습니다. % git init % ls -al 4. git init 으로 깃을 초기화하고 ls -al를 다시해서 .git(숨김폴더)가 있는지 확인합니다. 5. GitHub홈페이지에 https://github.com/ 들어가 New를 눌러 Repository를 만들어 줍니다. Respository name은 원하시는 이름으로 넣으면 됩니다. 저는 여기서 test로 했습니다. 마지막으로 Create ..

HTTP 개요 HTTP는 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜입니다. HTTP는 웹에서 이루어지는 모든 데이터 교환의 기초이며, 클라이언트-서버 프로토콜이기도 합니다. 클라이언트-서버 프로토콜이란 (보통 웹브라우저인) 수신자 측에 의해 요청이 초기화되는 프로토콜을 의미합니다. 하나의 완전한 문서는 텍스트, 레이아웃 설명, 이미지, 비디오, 스크립트 등 불러온(fetched) 하위 문서들로 재구성됩니다. 클라이언트와 서버들은 (데이터 스트림과 대조적으로) 개별적인 메시지 교환에 의해 통신합니다. 보통 브라우저인 클라이언트에 의해 전송되는 메시지를 요청(requests)이라고 부르며, 그에 대해 서버에서 응답으로 전송되는 메시지를 응답(responses)이라고 부릅니다. 1990..

노마드코더 니꼴라스와 만드는 트위터 서비스를 만들면서 오류를 발견했습니다. 바로 export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' 입니다. import { useState } from "react"; import { HashRouter as Router, Route, Switch } from "react-router-dom"; import Auth from "../routes/Auth"; import Home from "../routes/Home"; const AppRouter = () => { const [isLoggedIn, setIsLoggedIn] = useState(false); return ( {isLogged..

노마드코더 니꼴라스와 만드는 트위터 서비스를 만들면서 오류를 발견했습니다. 바로 firebase.js파일에서 다음과 같은 오류가 생깁니다. import firebase from "firebase/app"; const firebaseConfig = { apiKey: process.env.REACT_APP_API_KEY, authDomain: process.env.REACT_APP_AUTH_DOMAIN, projectId: process.env.REACT_APP_PROJECT_ID, storageBucket: process.env.REACT_APP_STORAGE_BUCKET, messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID, appId: proce..

Git Git은 분산형 버전 관리 시스템입니다. 버전 관리 시스템은 코드 및 파일의 변경사항을 추적하고, 여러 사람이 협업하여 작업할 때 버전 충돌을 방지하고 이전 버전으로 쉽게 복원할 수 있도록 도와줍니다. Step 1. 로컬에서 Git으로 관리할 저장소(폴더, 파일) 생성 Step 2. 내가 작업하고 있는 Working Directory에서 $git init .git(숨김폴더)확인 (ls -al 명령어로 확인) 깃을 초기화 하는 곳이 내 프로젝트가 위치한 곳인지 확인 Step 3. .gitignore 파일추가 데이터베이스계정이나 클라우드 시크릿 키 혹은 각종 민감정보가 git저장소에 업로드 되지 않게 해야한다. .gitignore .gitignore 파일과 같은 위치에 있는 hello.txt는 git..

Kakao에서 지원하는 지도API를 이용하여 지도를 생성해보겠습니다. 1. 카카오 개발자(developers)사이트에 방문합니다. https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 2. 상단에 내 애플리케이션을 클릭합니다. 클릭 한 뒤에 로그인 창이 나오면 로그인 해줍니다. 3. 애플리케이션 추가하기 버튼을 눌러 줍니다. 4. 애플리케이션 추가하기 앱아이콘, 앱 이름, 사업자명을 넣고 하단 체크박스를 체크해 준 뒤에 저장버튼을 누릅니다. (앱 아이콘은 안넣어도 무방합니다) 성공적으로 만들어 지면..

Next.js 12를 공부하고 프로젝트를 진행하는 중에 2022년 10월26일 Next.js Conf에서 Next.js 13을 발표했습니다. 이제 막 알아가던 중인데 벌써 13이 나오니 당황스럽네요.. 바로 본론으로 가보겠습니다. (위 글은 nextjs.org 공식문서를 번역한 글입니다.) Next.js Conf에서 발표한 바와 같이 Next.js 13은 제한 없이 역동적인 기반을 제공합니다. - app/ 디렉토리(베타): 더 쉽고, 더 빠르고, 더 적은 클라이언트 JS. - 레이아웃 - 리액트 서버 컴포넌트 - 스트리밍 - 터보팩(알파): 최대 700배 빠른 Rust 기반 웹 팩 교체 - 신규 next/image (안정적): 네이티브 브라우저의 느린 로딩으로 고속화. - 신규 @next/font (베타..