ram2 🚗

react로 만든 프론트를 배포하기 위해 netlify를 가입하고, 깃허브로 프로젝트를 연동하였다.

하지만, 자꾸 알 수 없는 에러들이 뜨는 것이었다.

나는 react를 잘 알지 못하기 때문에, 뭘 해야하는지 알지 못했다.

그래서 내가 겪었던 시행착오들을 정리해보려 한다.

🐻  build 폴더 생성하기

npm run build

해당 코드를 실행하면 자동으로 build 파일이 생성된다.

🐻  Failed during stage "Reading and parsing configuration files": When resolving config: Base directory does not exist: /opt/build/repo/velog_front 에러 해결하기

해당 에러는 나의 실수로 발생한 에러였다.

깃허브 레파지토리를 연동해서 배포하였는데, 그렇게 하면 깃허브에 있는 폴더명을 적어줘야 하는데, 나는 내가 원하는 이름을 적고야 말았다....

이렇게 내 레파지토리에는 client와 server가 있는데, 나는 Client만 배포하고 싶으므로 설정할 때 해당 이름을 적어줘야 한다.

이렇게 Base directory에 깃에 있는 폴더명을 적어줘야 한다는 것 !!

🐻  Manifest: Line: 1, column: 1, Syntax error. 에러 해결하기

netlify로 deploy를 계속 시도했으나, deploy는 성공해도 빈 화면이 자꾸 떴다.

fn + F12를 눌러 개발자 도구의 콘솔창을 확인하니 다음과 같은 두 개의 에러가 떴다.

Manifest: Line: 1, column: 1, Syntax error.

이를 해결하기 위해서는, build 폴더의 index.html 코드를 수정해주면 된다.

# 기존 코드
<link rel="manifest" href="/velog/manifest.json" />

# 수정 코드
<link rel="/manifest" href="/velog/manifest.json" /> #manifest 앞에 / 붙이기

# 기존 코드
<link rel="icon" href="/velog/favicon.ico" />

# 수정 코드
<link rel="icon" href="./velog/favicon.ico" /> # 앞에 . 붙이기

# 수정 전
<link href="/velog/static/css/main.cfa5924d.css" rel="stylesheet" />

# 수정 후
<link href="./velog/static/css/main.cfa5924d.css" rel="stylesheet" /> # 앞에 . 붙이기

🐻  Failed to load resource: net::ERR_HTTP2_PROTOCOL_ERROR 에러 해결하기

/%PUBLIC URL%/favicon.ico:1

이 에러를 해결하기 위해서는 app.js에서 router에 basename을 지정해주면 된다.

function App() {
  return (
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <Router basename={process.env.PUBLIC_URL}/> // basename 추가
    </ThemeProvider>
  );
}

이렇게 basename을 추가해주면 해결 된다 !

앱 개발을 하다 보면 Simulator에서 다크모드, 라이트 모드를 번갈아가며 확인이 필요한 경우가 있다.

이때, 매번 설정에 들어가서 확인하는 것은 너무너무너무 비효율적이다...

아주 간단한 단축키로 쉽게 모드전환을 할 수 있다니 !!

command + shift + a

단축키를 사용하면, 아주 쉽게 모드를 바꿀 수 있다 !!

결과 예시

결국... m2 air를 샀다.

이전에 쓰던 맥과 같은 환경으로 두고 싶어서 이것저것 설치하고, 환경을 세팅했다.

마지막으로, 블루투스를 상단에 고정하고 싶었는데, 기존 방법대로 시스템 설정에 들어가 찾아보니, '상단바에 고정'이 존재하지 않았다.

관련 검색으로 유튜브 영상까지 찾았으나, 해결방안은 찾지 못했다.

너무 답답해서 제어센터에 있는 블루투스 아이콘을 끌어 상단에 두었다.

.

.

.

엥..? 왜 되지...

내가 원하던 상단 고정이 되었다... 뭘까..

어쨌든 오예이다.

m2 air를 쓰고 있거나, 블루투스 상단 고정이 되지 않는다면, 제어센터에서 끌어오도록...

🔗  출처 링크

https://techneedle.com/archives/42484

📆  발행일 : 2022-06-03

💻  요약

Brickit은 바닥에 흩어져 있는 레고 조각들을 스캔하면, 인공지능이 이를 분석하여 만들 수 있는 작품을 보여주고, 어떻게 만드는지를 알려주는 유료 앱이다. 이는 컴퓨터 비전과 인공지능 기술을 접목하여 다량의 레고 조각들을 인식하여 작품을 만들 수 있도록 도와준다.

특히 새롭게 추가된 'finder' 기능을 통해 특정 브릭을 하이라이트 하여 사용자가 쉽게 찾을 수 있도록 도와주며, 'scan feedback' 기능을 통해 사용자가 자동 인식 결과를 수정할 수 있게 해준다. 현재 Brickit의 브릭 인식률은 92%로 알려져 있으며, 스캔 결과 피드백을 사용자에게 직접 받음으로써 성능을 높여가고 있다.

💡 생각 정리

이러한 앱이 있다는 사실이 너무 신기했다. 인공지능 기술과 컴퓨터 비전을 접목하여 바닥에 흩어진 많은 레고 조각들을 스캔하고, 이를 활용하여 만들 수 있는 작품을 여러 개 제공한다는 점이 놀라웠다. 더 나아가 선택한 작품 만드는 과정을 차근차근 알려줘서, 사용자가 쉽게 원하는 작품을 만들 수 있다는 점이 인상 깊었다. 

인공지능 기술이 다양한 분야에서 활발하게 사용되고, 효과적으로 활용되고 있음을 확인할 수 있었다.

🔗  출처 링크

https://www.technologyreview.kr/ai-reinvents-the-metaverse-world/

📆  발행일 : 2021-11-18

💻  요약

💡 생각 정리

평소 메타버스에 관심이 많이 있었는데, AI가 메타버스를 현실화 시킬 수 있음을 확인하게 되었다.

AI와 메타버스가 과연 어떻게 관련이 있으며, 이를 통해 어떤 결과가 나타날 수 있는지 궁금증을 가지고 있었는데, 두 분야는 꽤나 밀접한 관련이 있음을 알게 되었다. 

앞으로 두 분야가 융합하여 메타버스를 실현하기 위한 과정과 필요한 것들은 무엇이 있는지를 경험을 통해 확인하고 싶다.