꾸준하게 거북이처럼

순전히 앱을 만들어보고 보고 싶었는데 드디어 앱을 완성했다..!! 노마드 코더의 니콜라스 쌤의 가르침 덕분에 만들어 낼 수 있었다. 간단하게 To-Do List를 Work과 Travel 이 두 가지 주제를 테마로 만들었고 정말 가볍게 만들었고 CRUD 기능이 있다. 이런 식으로 할 일을 추가할 수 있고 체크 표시 모양을 누르면 끝냈다는 걸로 간주하고 검은색 글씨로 변하며 중간에 Dinner 표시가 생긴다. 삭제하려면 휴지통 모양의 아이콘을 눌러야 삭제를 할 수 있다. Travel 글씨를 누르면 이렇게 가고 싶은 여행지를 추가 해놓을 수 있다. 기능은 같다. Travel를 누르면 Object JSON 데이터에서 working 상태가 false가 되어 위와 같이 travel 목록만 보이게 만들었다. 삭제를 ..

앱 개발을 한 번 해보고 싶다는 생각이 들어서 찾아보니 React Native로도 앱 개발을 할 수 있다는 것을 알고 이게 무엇인지 알아보았다. 일반적으로 앱 개발을 하기 위해서는 안드로이드 또는 IOS를 사용해야 한다. 이 때 시장에서는 이 두 가지 개발을 따로 개발하기에 시간 소모도 있고 빠르게 동시에 개발 할 수 없을까? 해서 나온 것이 React Native 라는 하이브리드 앱이다. React Native은 어떤 흐름을 가지고 동작할까? 어떤 이벤트가 발생하면 ios와 안드로이드는 bride를 통해서 JS에게 메시지 전달을 한다. 즉 react native가 그 정보를 가지고 JSON 메시지 생성한다. JS가 그 메시지를 다시 받고 그에 맞게 코드를 실행하고 나서 bridge를 통해 다시 nati..

create-react-app 을 이용해서 React 프로젝트를 만들었는데, 깃허브 페이지(gh-pages)를 이용해서 배포를 하려 했지만 흰화면과 함께 별다른 오류가 콘솔창에 나타나지 않았다. 이리저리 구글링 하다 알게된 것 중 왜 안됐을까,, 이유는 1. 깃허브 repository에 수정한 코드 업로드를 업데이트 안함. 2. Router Component 수정 3. 버전 업데이트 때문에 Switch -> Routes 컴포넌트명 변경 Router component 를 수정하고 레포지토리에 수정한 코드를 업데이트를 해야한다는 사실은 잊고 있었다. ㅠㅠ금방할 수 있었던 배포를 몇 시간 낭비했다. basename={process.env.PUBLIC_URL} 이 코드를 추가를 해주고 -> 깃허브에 리포에 코드..

React.js는 아주 간단한 방법으로 작동된다. state를 변화시킬 때 component를 재실행시키는 것. 모든 코드가 재실행 된다. 문제는, 어떤 코드들은 이렇게 계속 계속 실행되면 안될 수도 있는데, useEffect을 통해 우리는 언제 코드를 실행할 지 선택권을 가질 수 있다. useEffect는 실행하려는 코드, dependecy로만 이루어져 있다. If dependency exists, effect will only activate if the values in the list change. 해당 리스트의 값이 변화할 때만 실행된다.

비슷한 함수형 Component를 사용하게 됬을 때 재사용할 수 있는 방법이 없을까? 비슷한데, 각 함수형 안에 몇 가지 변수만 다르다고 생각해보자. 이럴 때는 함수형을 하나만 두고 React의 Prop이라는 특징을 이용해서 컴포넌트 재사용을 할 수 있다. 모든 컴포넌트 들은 argument를 받는다. 이 인자의 이름은 Props 라고 부른다. 즉 부모 컴포넌트에서 자식컴포넌트로 전달받는 인자이다. prop은 object이기 때문에 두번째 인자가 없고 오직 하나의 인자로만 존재한다. prop의 이름도 아무거나 정해도 된다. 따라서 text의 값을 보여주고 싶다면 그저 {prop.text}를 쓰면 간단히 해결할 수 있다. 하지만 보통 shortcut을 사용해서 간단히 할 수 있다. prop은 object ..

Babel은 JSX 를 브라우저가 읽을 수 있는 언어로 바꿔서 보여주는 것. 자바스크립트 컴파일러이다. Babel에서 중요한 문법! 내가 직접 만든 요소는 전부 대문자로 시작해야 한다. 왜냐하면 JSX와 React는 html button 요소로 착각할 수 있기 때문! 바벨 문법으로 이런식으로 코드를 썼다면! 실제로 크롬에서 페이지 검사를 보면, 다음과 같이 변환되어 있는 코드가 head 안에 있다. 확실히 개발자입장에서는 JSX문법으로 쓴 코드가 훨씬 편한거 같다.