zejeworld

반응형

React-native로 앱 만들기를 시작하면서 수많은 오류를 맞딱뜨렸지만 이 것만큼 세고 해결도 잘 안되는 오류는 첨봤다.

pod install이 잘 안된건가 싶어서 다시 해봤고, yarn도 다시 깔아보고 구글에 나와있는 에지간한거 다 해봤는데 결국 실패..

 

누구는 프로젝트를 다시 깔았다고 했는데 나는 귀찮아서 그거까진 안했다. 

해봤던 방법들을 나열해보자면

 

1. watchman 재설치

brew install watchman

실패!

 

2. cocoapod 재설치

sudo gem install cocoapods

vi ~/.bash_profile

.bash_profile에 가서 i버튼을 눌러 insert기능을 활성화 한 뒤

export GEM_HOME=$HOME/.gem
export PATH=$GEM_HOME/bin:$PATH

입력 후 esc 누르고 :wq 입력

 

프로젝트 폴더에 들어가서 cd ios로 이동하여 pod install 해보았지만 실패!

 

 

3. yarn 재설치

 

//node_modules && yarn 캐시 제거
rm -rf node_modules && yarn cache clean

//yarn 재설치
yarn install

//ReactNative의 캐시 제거
rm -rf ~/.rncache

실패!

 

 

 

4. Xcode 상의 [CP] 어쩌고 삭제 ((성공함))

Xcode를 실행한 후 내가 작업하고 있는 프로젝트를 연다.

프로젝트 이름을 선택하면

이렇게 가운데에 General 부터 Build Rules까지 소메뉴가 뜨는데

Build Phases에서 [CP] Copy Pods Resources를 삭제하고 ⌘+shift+k 누른 뒤 ⌘+b로 새로 빌드하면 됨 

 

아 너무 오랜 시간을 고생해서 이렇게 고생하는 사람들을 위해 포스팅 남겨본다.

나의 25시간이여..

반응형
  1. jason 2021.04.15 16:35

    횽... 고마워 ㅠㅠㅠ

반응형

이놈의 리액트는 진짜 짜증난다.

뭐 하나씩 하다보면 당연하게도 설치를 필요로 하는 것들이 있는데 이번엔 react-icon 설치하다가 갑자기 오류를 맞이하게 됐음..

 

mac Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (88)

 

이번에는 이런 오류였는데 아 느무느무 짜증나는 오류였다.

잘 되다가 갑자기 왜 이런 오류가 뜨는건지 모르겠는데 하튼 나의 맥새끼랑 버전이 뭐 안맞는다는 거겠죱..

 

그래서 또 구글링 하다가 node-sass를 다시 까셈 이라는 말들을 보고선 열심히 삭제하고 다시깔고를 반복했는데도 계속 안되더이다.

 

내가 잘못생각한게 나는 그냥 내 컴터 ,그니까 터미널 켰을 때 기본적으로 설정되어있는 그 위치에서 하면 다 되는거라고 생각했는데 진짜 똥멍청이같은 생각이라는 걸 문득 깨달았다.

 

내가 현재 리액트를 작성하고 있는 그 폴더!에서 실행해야 된다는 것, 이렇게 몸소 체험했넴 후후

npm uninstall node-sass&& npm install node-sass

리액트를 작성중인 폴더에 들어가서 이거 그대로 실행했더니 알아서 잘 설치가 된 모양이다. 

기대를 품고 다시한번 yarn start를 쓴 뒤 엔타를 딱 내리쳤는데!!

 

 

Error: Node Sass version 5.0.0 is incompatible with ^4.0.0

 

또 다시 마주한 node sass 버전문제..

이거 왜 자꾸 뜨는지 모르겠는데 누구 아시는 분 

 

아 ㅁㅇㄴ;ㅏㅓㅁㄹㅇㄴ

 

다시 심호흡하고 리액트 작성중인 폴더에 가서

npm uninstall node-sass
npm install node-sass@4.14.1

입력하고 설치 다 끝내고 내니 아주 잘 매우 잘 yarn start가 실행되었다.

 

 

아 학원을 다니는 것도 아니고..

혼자 때려박기 식으로 하다보니 이런데서 시간 너무 많이 잡아먹고ㅠㅠ

이유도 모른채로 삭제했다 깔았다를 반복하는 느낌이다.

반응형
  1. 진짜로 2021.05.18 16:15

    이런걸로 시간 잡아먹는거 너무 짜증나요 ㅠ 검색을 해봐도 뭐가 뭔지 잘 모르겠고 진짜! 흑흑

반응형

블로그 개발을 앞서 어떤 메뉴들을 생성하고 어떤 내용들을 다룰지 한참을 고민했다.

뭐 내용이 알차고 나뿐만 아니라 많은이들에게 도움이 될만한 사이트라면 꼼꼼히 만들겠지만 지금은 넘나 머릿속에서 뒤죽박죽+혼돈의카오스인 내용들을 정리하면서 포트폴리오에 넣어볼만한 작은 사이트를 만드는거라 한시간 넘게 고민했는데 겨우 메뉴 두개 생각해냈음 \^0^/

 

나는 우선 메인페이지 포함 세 개의 메뉴를 다루려고 한다.

 

맨 처음 대문에 들어서면 대략 이런 식의 디자인으로 보여지게 하고 싶었고, 이 내부는 왼쪽 헤더는 고정인 상태로 우측에서만 스크롤이 가능하게 하려고 했다.

 

따라서 컴포넌트 폴더를 따로 만들고 드디어 컴포넌트를 각각 나눠서 사용해보는 것이 내 첫 번째 목표라고 할 수 있다.

리액트로 넘어오면서 맨 처음에 헷갈렸던 것이 바로 컴포넌트, 스테이트 이런 개념들이었는데 하나의 html 파일에서 메인 페이지를 다 짜는 것만 연습했던터라 모든 내용을 쿠키 조각내듯 다 쪼개고 그걸 각각의 파일에서 관리한 다음 하나의 js 파일에서 합친다는 개념이 너무 헷갈렸다.

 

특히 어떤 인강을 듣더라도 이거 하다가 저거 하다가 좀 그런 편이라서 (개념마다 설명을 해야하는 부분이 다르니까!) 

내 머릿속도 계속해서 내용이 팝콘 튀듯 이리저리 튀어다니는 느낌이었다. 

적절한 때에 잘 써야하는데 그 때도 잘 모르겠공 ㅠㅠ

 

물론 컴포넌트 많이 만들면 관리 힘들고 어쩌구 꼭 그렇게 안해도 되는데 어쩌구 이럴 수 있겠다만..

기왕 배운거 배운 개념 잘 활용해서 써먹어보자는게 목표였기 때문에 (그리고 너무 어려워서 하기 싫다는 생각을 넘 많이 했음) 나와의 싸움이다 생각하고 하는 중이다.

 

components라는 폴더 생성 후 그 안에 Diary라는 컴포넌트와 Works라는 컴포넌트를 만들었다.

import React from 'react';

function Works(){
    return(
        <>

        </>
    )
}

export default Works

 

까먹지 않고 export도 잘 했공..

App.js파일에서 

 

import Diary from './compononets/Diary';
import Works from './compononets/Works';

function App() {
  return (
    <div className="App">
      
      ...헤더 및 배경 등등

      <Route path="/diary">
        {Diary}
      </Route>

      <Route path="/works">
        {Works}
      </Route>
    </div>
  );
}

요렇게 연결을 해주었다.

 

그 다음 메뉴 이동을 위해 index.js에 가서 

import {BrowserRouter} from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

BrouwserRouter를 데꼬왔음!

 

라우팅을 하기 위해서 데꼬온거고 App.js에서 사용할거라 App.js를 <BrowserRouter>로 감싸주었다.

후에 다시 App.js에서 페이지 이동을 하고 싶은 애들한테 다 <Route>로 감싸주면 된다. 

Route에서 path는 어떤 주소를 입력하면 그 페이지가 보이게 하고 싶느냐 라고 하는건데 나는 가라로 걍 아무렇게나 지어줬다.

 

그런데 페이지 이동할때 누가 주소쳐서 가...?

를 해결하기 위해 메뉴 버튼에다가도 무언가를 해주어야 하는데 이 때 <Link>를 사용하면 된다.

 

import {Link,Route,Switch} from 'react-router-dom';

function App() {
  return (
    <div className="App">
      
        <ul class="dMenu">
          <li><Link to="/">Uptated</Link></li>
          <li><Link to="/diary">Diary</Link></li>
          <li><Link to="/works">Works</Link></li>
        </ul>

상단에 Link를 데꼬와주고, 원하는 곳에 Link to=""로 주소랑 연결해주면 된다.

원래 html 짤 때 ul>li*3>a[href="#"] 이렇게 짰었는데 이제는 a태그를 다 Link로 쓰면 된다니..! 

 

반응형
반응형

나는 여태 리액트가 그냥 제이쿼리 다운받듯이 스크립트로 연결해서 쉽게 쓸 수 있는 거라고 생각했다.

정말 무식했어..

 

일주일 전에 본격적으로 리액트라는걸 맛보기라도 해볼까 싶어서 책도 사고 인터넷에 검색도 해봤는데 1. node.js를 다운받는다. 2.갑자기 npm 어쩌구를 친다. 이 순서로 이어지는게 아니겠는가.

 

node.js 다운받으라고 할때만 해도 진짜 식은죽먹기넴~ㅋ 이정도야 모~~ㅋ 했었는데..

문제는 2번. 

그냥 밑도 끝도 없이 npm 어쩌구라는데 도대체 저걸 어디다 입력하라는건지 뭔지 모르겠고 점차 인내심은 바닥 나기 시작했다.

 

'아.. 

이렇게 리액트는 시작도 못해보고 포트폴리오를 마쳐야하는가' 하면서 자기 전에 조금 많이 고민을 하다가 결국 포기하지 않고 열심히 더 구글링을 해보았고 드디어 저 npm은 터미널이란 곳에 가서 입력하면 된다는 것을 알았다.

 

 

0. Homebrew 설치

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

 

1. nodejs.org/ko/

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

node.js를 각 운영체제에 맞는 버전으로 설치한다.

여기서 버전은 사람마다 말이 다 다른데 나는 안정적인 버전으로 설치했는데.....누구는 무조건 최신버전 설치하라고 하고(오류 많이 난다고).. 뭐 하튼 말이 많다. 그냥 하고싶은거 하면 될 것 같음.

 

 

2. 터미널을 킨다!!!!!!

터미널은 런치패드나 위에 돋보기 눌러서 ter까지만 검색해도 앱이 바로 나온다.

 

3. 터미널에 brew install node 입력

 

4. 막 # 왔다갔다 하면서 설치 되면 버전 확인하기 위해  입력

node -v
npm -v

각각 node.js와 npm 설치 버전을 확인할 수 있다.

 

 

5. 리액트 프로젝트를 시작할 폴더로 이동한다.

말 그대로 내가 홈페이지 만들 폴더로 이동하면 된다. 

나는 쉽게 바탕화면에 있는 나만의 폴더 안에 있는 리액트 폴더에 넣고 싶었는데 쉽게 생각하면 바탕화면>내폴더>리액트니까 

cd desktop/내폴더/react

라고 입력하면 이동이 됨.

cd는 머 디렉토리인가 이동할 수 있다는 뜻이라고 했다.

 

이동 후에

 

6. cra라는 create-react-app을 활용하여 리액트 프로젝트를 생성한다.

npx create-react-app 프로젝트명

프로젝트명은 원하는거 아무거나 입력하면 된다.

리액트가 세팅된 라이브러리임..

이건 원하는 웹사이트 만들때마다 이런식으로 만들면 된다. 

 

후에 vs code나 브라켓 등등 원하는 에디터를 켠 뒤에 열기를 눌러 내 리액트 폴더를 열고 터미널에서 또한 내 리액트 폴더로 이동한 뒤에

npm start

넣어주면 이제 서버 시작이당.

 

초반엔 어디서부터 어떻게 해야하는지 몰랐는데 (설치부터 리액트 프로젝트를 만들 때까지 어디가 설치부분이고 어디가 프로젝트 만드는 부분인지를 몰랐음) 이제는 척하면 척 npx create-react-app website1 등으로 쉽게 프로젝트를 만들어서 작성하고 있다.

반응형
반응형

오늘 처음으로 리액트를 설치해서 실행해보았다.

 

우선 나는 여러모로 복잡한 상황에 놓여있었는데

  1. 컴알못
  2. 코딩 잘 못함
  3. 맥 사용

 

총체적 난국..

 

그래서 여기저기 사이트 돌아다니며 힌트를 얻어서 설치까지 완료했다.

윈도우랑 다르게 맥은 터미널로 나에겐 생소하고 어려웠던 명령어를 사용해 설치를 해야했기 때문에 거의 복붙으로 해결봤던 것 같다.

 

바벨이고 얀이고 뭐가 뭔지 하나도 몰라서 이거도 해보고 저거도 해보고 다 했는데 설치가 다 된 후에 yarn start를 치니 연결이 안 되고 오류가 계속해서 뜨는 것이었다. 

대략 내용은 바벨 버전이 높아서 안된다는 것 같은 느낌?

here might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

"babel-loader": "8.1.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-eslint was detected higher up in the tree:

Users\username\node_modules\babel-loader (version: 8.2.2)

Manually installing incompatible versions is known to cause hard-to-debug issues.

If prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "babel-eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
This may help because npm has known issues with package hoisting which may get resolved in future versions.

6. Check if c:\Users\useranme\node_modules\babel-loader is outside your project directory.
For example, you might have accidentally installed something in your home folder.

7. Try running npm ls babel-eslint in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed babel-eslint.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

 

뭔가 .env 파일을 만들어서 SKIP_PREFLIGHT_CHECK=true 이 문구를 넣으면 이런 오류를 무시하고 실행할 수 있다는 것 같은데, 문제는 env 파일을 어떻게 만드는건지 모른다는 것이었다..^0^.....

 

그래서 내가 찾은 방법은

1. babel-loader 라는 것을 저기서 앞서 알려준 8.1.0 버전으로 준비한다.

2. 다 지우고 새로 깐다 (이것 또한 모험)

3. 포기한다

 

역시 가장 무난한 방법이 1이 아닐까 싶어 알아보니 수동으로 파일을 바꾸면 디버깅하기 어려워진다고 하지 말라고 하더라. 

 

그래서 또 구글구글 하다가 다시 꼼꼼히 저 글을 읽어보니 package.json 파일에서 어쩌구 하는거 보니 그걸 바꾸면 되지 않을까 싶어서 맥 전체 검색으로 package.jsond을 검색하니.... 오마갓 너무 같은 이름의 파일이 많음을 발견..

 

하나하나 폴더를 눌러보니 하단에 

이런식으로 주소가 뜨길래  8.2.2로 적혀있다는 파일을 직접 찾아 들어가기 시작했다.

 

그래서 package.json 파일을 킨 다음 맨 밑에 있는 버전을 수기로 수정하기 시작함..

152번에 원래는 8.2.2로 적혀있던 것을 터미널에서 알려준 버전으로 바꾸고 저장한뒤 다시 터미널에서 yarn start를 쳐서 실행을 해보려 했으나......!

 

이번엔 웹팩? webpack 버전이 다르다며 5.11.0을 4.44.2로 바꿔야 한다고 써있길래 또 해당 과정을 반복해서 바꿈.

 

그리고 터미널에서 yarn start를 실행해보니 아주 잘 연결이 되었다! : ) 히히 

나중에 어마무시한 일이 생길지라도 당장은 해결이 되었으니 기분이 좋다.

 

반응형