자급자족 공장장

이번 게시글에는 리액트 내비게이션에 관한 내용이 주 다. 앱 만들기 영상을 참고하다가 꽤 내용이 맘에 들어서 따라 했는데 리액트 내비게이션에 관한 내용이었다. 리액트 내비게이션이 뭔지도 모르고 따라 했다가 궁금해서 블로그 글을 읽고 정리해 보았다. 참고 블로그 링크도 걸어두었다. 아직 허공에 떠다니는 글자 같지만 필요해서 사용하게 되면 그때 제대로 이해하게 되겠지. 리액트 네비게이션 라이브러리는 리액트 내비게이션을 쉽게 관리할 수 있도록 도와준다. 내비게이션 종류는 stack navigation / tab navigation / drawer navigation 세 가지가 있다. 리액트 네비게이션에는 NavigationContainer 컴포넌트, Navigator 컴포넌트, Screen 컴포넌트로 구성되어..

리액트 네이티브 어플 만들기 두 번째 과정입니다. ios 시뮬레이터를 실행할 수 있도록 설치해 보았습니다. 시뮬레이터란 가상실행을 해볼 수 있는 프로그램인데요. 컴퓨터 속에 아이폰 하나를 만들어놓고 만든 어플을 실행해 볼 수 있는 장치라고 할 수 있겠습니다. 리액트 네이티브 어플 만들기 첫 번째 설치와 세팅과정은 아래 링크를 참고하세요. 첫번째 과정과 두 번째 과정이 반드시 차례를 지켜야 하는 것은 아닙니다. 다만 저는 준비물을 다 갖춰놓고 시작하지 않고 진행하며 필요한 준비물을 챙기는 과정으로 진행해 보았습니다. 2023.05.15 - [IT/개발] - 리액트 네이티브 앱만들기 시작 설치 및 셋팅 react native install 리액트 네이티브 앱만들기 시작 설치 및 셋팅 react native ..

이번 여행 이후 만들고 싶은 앱이 생겨 어플 만들기를 시작했다. 제일 먼저 리액트 네이티브로 앱을 만들기 위한 기본적인 설치와 세팅 방법을 담았다. 유튜브에 검색하여 따라하다가 난관에 부딪혔지만 오류들을 파파고 영어번역기를 돌려가며 해결하여 완성했다. 결국은 유튜버 'hatemogi'님의 영상과 번역기의 도움을 많이 받았다. 1년 전 세팅영상이라 지금과 좀 다른 점은 있으나 따라 하는데 큰 문제없다고 본다. 참고영상은 맨 아래 첨부해 두었다. 리액트 네이티브 어플만들기 - 설치 세팅 하기 React Native install 우선 터미널 켜기 폴더를 만들고 그 안에 리엑트네이티브를 설치한다. 1. 폴더 만들기 mkdir 만들폴더명 mkdir reactnative 2. 폴더로 이동하기 cd 이동할폴더명 3..

잘만 push하던 분들도 안되면 키체인 로그인을 삭제하고 키체인을 다시 등록한다. 나는 시작부터 안되어서 키체인 로그인을 삭제했고 해결되어 정상적으로 github에 push까지 완료했다. Github push 오류 해결과정 1. 키체인 로그인 삭제하기 난 맥 사용중이다. 키체인 접근을 열고 github Acess key를 삭제한다. 키체인 항목에 로그인이라고 써있는 걸 삭제한다. 'github.com Access Key for ~' 2. github 웹사이트 접속 > Settings > Developer settings > Generate a personal access token 3. Note 부분은 빈칸은 허용이 안되기 때문에 뭐라도 써준다. 아래 체크 사항은 전부 선택하고 Generate token..

소스트리는 github에 쉽고 편리하게 commit과 push등의 작업을 할 수 있는 GUI(grapic user interface)프로그램 중 하나다. 소스트리는 Atlassian사에서 만들었다. Bitbucket 비트버켓 이라는 github같은 버전관리프로그램도 함께 운영한다. 비트버켓을 포함해 github, gitlab등 타사유저도 이용할 수 있도록 만들어졌다. 보기만해도 비위에 안좋은 까만 화면의 터미널은 접어둘 수 있어서 너무 좋다. 소스트리 설치과정 아래 사이트에 접속해 다운로드 받으면 된다. https://www.sourcetreeapp.com/ Sourcetree | Free Git GUI for Mac and Windows A Git GUI that offers a visual repre..

Node js 설치하는 방법 1. nodejs.org 들어간다. https://nodejs.org/ (클릭) Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. 두개의 녹색 버튼 중 Recommended For Most Users 버튼 클릭하여 다운로드 받는다. (사용하는 버전은 vscode의 터미널에 node -v 치면 알 수 있다.) * LTS 와 Current 차이 왼쪽 LTS는 Long Term Support. 오른쪽 Current는 최신 기능을 탑재한 버전이다. 최신기능은 어떤 건 작동하지 않을 수도 있다. 본인이 사용할 패키지들이 새로운 node js버전에 맞게 업데이트가 되..

7.0 todo list 만들기 15~18번, 28번 라인을 추가작성한다. 15~18번열 - todo 입력 폼 안에 input 태그 있음. 28번열 - 입력받은 todo 값을 리스트로 나열할 ul 태그 toDoForm 이 제출submit 될 때 브라우저가 기본 동작으로 새로고침 되는 것을 막기 위해 preventDefault() 함수를 사용한다. newTodo 라는 변수를 만들어 toDoInput에서 입력받은 값을 저장한다. 입력 후 input 창이 비워져야 또 값을 입력할 수 있기 때문에 toDoInput.value = ""; 하여 input창에 입력된 값을 지워준다. 7.1 화면에 표출시키기 위한 painToDo() 함수를 만들어준다. html의 엘리먼트를 javascript에서 만들어준다. 입력받은..

#6.0 Quotes 명언과 작가 랜덤하게 표출시키기 Math.random()과 Math.floor() 배열A[Math.floor(Math.random() * 배열A.length)]; Math.random() 0~1 사이의 랜덤 숫자를 제공하는 자바스크립트 함수 Math.round() 반올림 함수 Math.ceil() 올림 함수 Math.floor() 내림 함수 배열 길이 알려줌 .lenth const quotes = [ { quote: "abcdefg", author: "a" }, { quote: "hahahahahahahahaha", author: "banana" }, { quote: "hi!!!!!!!!", author: "apple" }, { quote: "good morning", author:..

#5.0 Intervals interval은 매번 일어나야 하는 무언가를 의미한다. 매 2초마다 무슨일이 일어나길 원할 때 사용. 이미 자바스크립트에 내장되어 있음 setInterval() 두개의 argument를 받는다. 첫째는 내가 실행하고자 하는 function 함수. 두번째는 function을 몇ms 간격으로 할지 5000ms = 5s(5초) function sayHello() { console.log("hello"); } setInterval(sayHello, 5000); 5초마다 콘솔에 hello가 나타난다. ========================== #5.1 Timeouts and Dates function을 딱 한번 호출하는데, 일정 시간이 흐른 뒤에 호출하는 것. setInterva..

#1.6 Online IDE 프로그램 설치할 수 없는 상황이라면 Replit 사용하면 된다. 브라우저에서 무엇이든 코딩 가능. 프록램 설치 가능한 상황이라면 vscode설치 ======================================================== #1.7 VS code에서 프로젝트 시작하기 Documents 에 mkdir momentum 이라고 입력한다. 걍 문서나 바탕화면에 momentum 이라는 이름의 폴더를 만든 후 비주얼코드에서 만든 파일을 연다. #4.0 [index.html] DOCTYPE html> Momentum App Log In [app.js] const loginInput = document.querySelector("#login-form input"); ..