본문 바로가기

전체 글59

[JS] 자바스크립트 동작원리 자바스크립트는 Single thread방식으로 한번에 한줄의 코드가 실행된다. console.log('1') console.log('2') console.log('3') 코드를 실행하면, 당연히 아래와 같은 결과로 출력될 것이다. 만약, 바로 실행할 수 없는 setTimeout함수를 사용하면 위 코드처럼 순서대로 실행될까? 아니다. 자바스크립트는 setTimeout과 같이 바로실행 할 수 없는 Ajax, eventListener함수를 만나면 제외하고 바로 실행가능한 코드를 먼저 실행한다. console.log('hello') setTimeout(() => { console.log('timeout')},2000) console.log('bye') 코드를 작성한 순서대로 실행되지 않는 것을 확인할 수 있다... 2021. 12. 2.
[React] error: useRoutes() may be used only in the context of a <Router> component. 페이지 라우트 처리를 다 완료 했는데 이런 에러가 발생했다. 최종적으로 src index.js 에 BrowserRouter 처리를 해주지 않았기 때문에 발생한 문제이다. import React from "react"; import ReactDOM from "react-dom"; import { BrowserRouter } from "react-router-dom"; import App from "./components/App"; import reportWebVitals from "./reportWebVitals"; import { Provider } from "react-redux"; import { store } from "../src/redux/store"; ReactDOM.render( {" "} .. 2021. 11. 27.
[React][side project] mbti궁합 테스트(3) - aws Amplify 배포 & 가비아 도메인 붙이기 🎈이전글과 이어지는 글입니다 - 마지막 7. 배포 준비(1) - SNS로 링크 전달 시 썸네일, 타이틀 변경을 위한 metadata 수정 📂 public index.html 수정 -meta 태그를 추가해서 링크 공유시 썸네일 이미지, 웹사이트 명, 간단한 소개, url 주소를 표시하고자 한다. 📂 manifest.json 수정 - src를 원하는 이미지로 수정해줌 "icons": [ { "src": "./heart.png", "sizes": "64x64 32x32 24x24 16x16", "type": "image/x-icon" }, { "src": "./heart.png", "type": "image/png", "sizes": "192x192" }, { "src": "./heart.png", "type.. 2021. 11. 26.
[React][side project] mbti궁합 테스트(2) 🎈이전글과 이어지는 글입니다. 5. MeinputPage & YouinputPage - 2,3번째 화면 & 모달 🥚 MeinputPage - 나의 정보 입력 플랫폼 - 입력한 정보 ⏩ 리덕스 스토어에 저장 - 성별 Click ⏩ 둘 중 한개만 클릭 가능 - 인풋창 공백 ⏩ 다음페이지로 넘어갈 수 없음 - 혈액형 & MBTI Click ⏩ 모달창에서 선택한 값으로 입력(직접입력 불가) - 다음으로 Click ⏩ 다음페이지 이동 (정보 모두 입력시) 🥚 MeinputPage에 입력값 들어갈 state 만들기 //MeinputPage.jsx import React, { useState } from "react"; const MeinputPage = () => { const [name, setName] = us.. 2021. 11. 26.
[React][side project] mbti궁합 테스트(1) 나와 상대의 별자리, mbti, 12지신, 혈액형을 입력하면 두사람의 궁합에 대해 알려주는 사이트를 만들었다. 화면 뷰는 총4개로 첫화면 / 내 정보 / 상대 정보 / 결과 화면 으로 구성되어있다. 제플린으로 제작된 화면을 그대로 따라서 구현하려고 노력했다. 사용 기술 - react(function components) - style component - react redux - axios 1. 컴포넌트 생성 & 폴더 구조 -> 액션은 삭제해도 되는데 실수로,, 남아있다,,,ㅎㅎ ->인풋 값을 저장할 리덕스 생성 -> 컴포넌트 폴더를 생성해서 필요한 페이지들을 만들어줌 ( 폴더에 있는 jsx파일을 RootRouter를 통해 페이지 전환을 해줄 것이다.) -> 모달창 폴더 -> RootRouter -> 이.. 2021. 11. 25.
[Aws]error: aws Amplify 배포할 때 이미지 유실 문제 리액트 프로젝트를 amplify 배포할 때 배경이미지가 나오지 않고 흰색으로만 배포가 되는 문제가 생겼다. 분명 localhost3000으로 테스트 화면을 볼 때는 멀쩡히 잘 나오던게 배포만 하면 없어지는,,ㅠㅠㅠㅠ!! 이 문제로 구글링을 하다가 아래의 링크를 참고해서 수정해봤더니 잘 적용이 됐다!! 1번) 문제가 있는 파일의 확장자 변경하기 / 2번) img 폴더명을 images로 변경- 확장자 변환시에도 문제 발생시 하기 'check' 라는 파일만 자꾸 유실이 됐는데 확장자가 대문자여서 그런가 하고 소문자로 해봤는데도 똑같았다. 그래서 파일 속성에서 문제가 없는 파일들과 확장자명을 비교해봤는데 소문자로 확장자가 바뀐걸 인식을 못하는 듯해서 그냥 아예 확장자 변경하는 사이트에서 jpg로 확장자를 변경해.. 2021. 11. 25.

티스토리툴바