전체 글 (135) 썸네일형 리스트형 정적웹페이지 배포 터미널에서 내가 배포할 폴더의 경로로 들어간다. 1. React 앱 build 하기 # react app build 명령어 npx react-scripts build CRA(npx-create-react-aoo)으로 생성한경우 package.json의 build 스크립트를 바로 활용할 수 있다. # CRA로 앱 생성한 경우 package.json의 빌드 스크립트로 가능 npm run build build 하면 build 폴더가 생성되고 내부에 정적 웹 컨텐츠가 생긴다. 2. AWS S3 Bucket 생성하기 클라우드 스토리지 | 웹 스토리지| Amazon Web Services 닫기 이 다이어그램은 데이터를 Amazon S3로 이동하고, 저장된 데이터를 관리하며, 다른 서비스로 데이터를 분석하는 방법을 .. 배포(Deployment) 배포란? 배포는 개발된 소프트웨어나 웹 어플리케이션을 다른 사람들이 접근할 수 있는 환경으로 만들어 개발된 소프트웨어르 실제 사용가능 한 상태로 만드는것. 사람들이 항상 서비스를 이용하기 위해서는 서버와 인프라를 구축하고 24시간동안 가동되게해야한다. 하지만 내컴퓨터를 24시간 돌리는것은 말이 안되고.. 항상 가동되는 컴퓨터를 제3자가 제공할 수 있는데, 이를 클라우드 서비스라한다. 클라우드 서비스는 퓨터를 일정 비용을 내고 구입해서 하루종일 서버를 켜놓을 수 있으며, 다양한 형태와 모델을 제공한다. 클라우드 서비스의 특징 1. 확장성(Scalability): 필요에따라 리소스를 확장/축소 할 수 있다. 2. 유연성(Flexibility): 다양한 서비스와 모델을 사용할 수 있다. 3. 자동화(Autom.. 파일 확장자와 트리구조 1. 확장자(Extension) 컴퓨터가 어떻게 인식해야 할지 파일의 형식이나 유형을 알려주는 정보이다. .txt, .html, .mp3, .png 등 예를들어 .txt는 텍스트파일의 확장자로 .txt로된 확장자를 가진파일을 텍스트로 열 수 있다. 파일 확장자를 통해 운영체제나 응용프로그램이 파일을 인식하고 바르게 열 수 있기때문에 확장자를 잘 작성하여야한다. 2. 트리 구조(Tree Structure) 트리구조는 계층적으로 궛ㅇ된 데이터 구조로, 각 노드가 하나 이상으 자식노드를 가질수 있는 구조로, 파일시스템이나,조직도, 계층적인 데이터를 표현하는데 사용된다. 노드는 데이터를 저장하고, 부모 노드와 자식노드의 관계를 나타낸다. 부모/자식관계와 형제관계는 데이터를 조직화하고 표현할 수 있는 방법으로 트.. Cypress 이번에 프론트엔드로 테스트를 해보려고 하는데 Jest말고 다른 라이브러리가 써보고 싶어졌다. 몇달전에 cypress를 사용해서 테스트를 하면 빠르고 편하게 할 수 있다는 말을 들어서 cypress를 알아봤고 이걸로 테스트를 하기로 결심했다. 1. Cypress란? 1. 개념 자바스크립트 E2E(End to End test) 테스트를 자동으로해주는 프레임워크이다. 테스트 코드를 작성하고 실행하면 웹에서 어떻게 동작하는지 확인하고 검증 할 수 있다. 주로 E2E테스트를 사용하지만 Unit테스트나 Integration테스트도 할 수 있다. 2. 특징 실시간 리로딩: 코드 변경시 자동으로 테스트를 다시 실행하여 빠른 피드백이 가능하다. 간결하고 직관적인 문법을 사용하여 테스트 코드를 빠르게 작성할 수 있다. 디.. ERROR: Too many re-renders. 작업을하다가 백에서 회원탈퇴를 알람으로 알려주는 것이 아니라 github의 레포지토리를 지울때처럼 동의하는 문구를 입력해야 회원탈퇴게 되게하는게 어떻냐는 의견이 나왔다. 집에와서 바로 모달을 띄워봤는데 Uncaught runtime errors: × ERROR Too many re-renders. React limits the number of renders to prevent an infinite loop. at renderWithHooks (http://localhost:3000/static/js/bundle.js:31011:19) at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:34287:17) at beginWor.. kakaoMap 로딩 문제 카카오맵 현재위치로 로드되게만들었다. 하지만 로딩하는데 속도가 10초정도 걸리는 문제가 발생했다. 지하철에서 공식문서를 읽어보면서 오던중 맵의 사이즈를 변경할경우 반드시 relayout()이라는 함수를 써야한다는 글을 보았다. 내가 사이즈를 768px, 400px로 바꿔서 로딩이 느려진게 아닐까 생각이들었다. import React, { useEffect, useState } from 'react'; import styled from 'styled-components'; const KakaoMap = () => { const [map, setMap] = useState(null); const [marker, setMarker] = useState(null); const [state, setState] =.. Kakao map을 구현하며 겪은 에러 구글맵스로 작업을 진행하다가 백에서 지도 어플리케이션을 바꿀 수 있는지 전화가왔다. 비용문제때문에 카카오맵스로 오케이하고 카카오맵을 불러와봤다. 그리고 또 다시 마주친 script unAthrized... 에러1 : ERR_ABORTED 401 (Unauthorized) GET http://dapi.kakao.com/v2/maps/sdk.js?appkey=내토큰내용&libraries=services,clusterer, drawing net::ERR_ABORTED 401 (Unauthorized).env 파일에 REACT_APP_JS_KEY 로 저장을 해두었고 복사해서 붙여넣기를 했는데 위와 같이 떴다. 시도1 : JS key 재발급 => 여전히 같은 에러코드 발생 시도2 : 문자열 그대로 appkey= .. google maps 현재 위치 받기 리뷰 컴포넌트를 만들고보니 '가져올 가게에 있는 리뷰도 google maps에 등록된거잖아?' 라는 생각이 들었다. 우리가 할 일은 24시 카페의 위치와 내용들을 구글맵에서 그대로 받아오는거라서 내가 리뷰를 만들 필요가 없었다. 결국 구글맵스부터 만들고 데이터를 받아와서 작업을 했어야했다. 일단 구글맶는 띄워두었으니 유저가 접속했을때 그 위치를 받아오는 작업을 먼저 하기로 했다. import React, { useEffect, useState } from 'react'; import { GoogleMap, Marker, useJsApiLoader } from '@react-google-maps/api'; const MapContainer = () => { const { isLoaded, loadError.. git Untracked files 프로젝트, 이력서, 회고록, 대학교, 챌린지.. 매일매일 정신없이 살아가는데 갑자기 commit도 add도 안되는 문제가 발생했다. Untracked files 가 뜬 이유는 작업중인 디렉토리의 상위 디렉토리에 파일이 생성되어있어서였다. Git은 현재 디렉토리와 그 하위 디렉토리에 있는 파일만 추적하기 때문에, 상위 디렉토리에 있는 파일은 기본적으로 추적하지 않는다고한다. react-googleMap 을 띄우며 겪은 에러들 https://www.npmjs.com/package/@react-google-maps/api @react-google-maps/api React.js Google Maps API integration. Latest version: 2.19.2, last published: a month ago. Start using @react-google-maps/api in your project by running `npm i @react-google-maps/api`. There are 298 other projects in the npm registry using @react-google-ma www.npmjs.com npm의 라이브러리를 사용하려면 아래의 코드를 입력하면 된다. npm i @react-goo.. console.log의 결과값 λ 모달창을 다 만들고 닫힘 버튼을 만들었는데 반응이 없었다. props가 제대로 전달되지않는것 같아서 console.log를 찍어보니 처음보는 문자가 출력되었다. 내눈에는 들 입 자로 보이는 이게 대체 뭐지 λ는 정상인가 오류인가? console.log를 찍었을때 λ의 문자가 출력되는것은 정상이아니다, 함수가 상태를 업데이트할때 함수내부에서 자동적으로 생성되는 함수이기때문에 정상이다라는 글을 보았다. 에러는 아니지만 λ가 출력되는 문제를 해결하면서 느낀점은 에러이면서 옳은 출력값이다. 그렇다면 왜 λ 가 출력된걸까? 내경우 굉장히 복합적인 바보같은 이유가 있었다. 우선 처음에 만들때는 모달창을 메인페이지에 하나만 만들었는데 두개가 필요했다. 그래서 왼쪽,오른쪽으로 나누어서 선언해놓고 여전히 이전의 함수를 .. react 초기세팅 에러 다른사이트를 모방하는게 아닌 새로운 서비스를 만들어보자는 제의가들어왔고, 프론트개발자로 프로젝트를하게 되었다. 그런테 초기세팅부터 문제가 발생 할 줄이야.. 에러1 : [eslint] Cannot find module 'node:fs' eslint를 설치하고 실행을 햇는데 아래와 같은 에러문구가 떴다. Failed to compile. [eslint] Cannot find module 'node:fs' Require stack: - /Users/sj/Desktop/cafeeodi/node_modules/synckit/lib/index.cjs - /Users/sj/Desktop/cafeeodi/node_modules/eslint-plugin-prettier/eslint-plugin-prettier.js -.. 이전 1 2 3 4 5 6 7 ··· 12 다음
