분류 전체보기 썸네일형 리스트형 Expo CLI 명령어 Expo CLI 명령어 Expo CLI는 React Native 앱 개발을 위한 다양한 명령어를 제공합니다. 주요 명령어는 다음과 같습니다: expo start: Expo 개발 서버를 시작하고 QR 코드를 표시합니다. 이를 통해 모바일 기기에서 앱을 실행할 수 있습니다. expo build:ios: iOS 앱을 빌드하고 Apple App Store에 업로드할 수 있는 IPA 파일을 생성합니다. expo build:android: Android 앱을 빌드하고 Google Play Store에 업로드할 수 있는 APK 파일을 생성합니다. expo publish: 개발 중인 앱을 Expo 서버에 배포합니다. expo eject: 프로젝트를 Expo 환경에서 분리하여 순수 React Native 프로젝트.. 더보기 Expo CLI를 이용한 react native 프로젝트 시작하기 1. node js를 설치한다. - node js 사이트에서 직접 클릭해서 설치해도 되고, nvm(node version manager) 을 이용해도 된다. - nvm 설치하기 : https://github.com/coreybutler/nvm-windows/releases Releases · coreybutler/nvm-windowsA node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windowsgithub.com - 위 git에서 nvm-setup.exe를 다운받아 설치한다. - node js 사이트에서 LTS 버전이 몇인지 알아본다. - cmd에서 nvm install 해당버전 (엔터).. 더보기 [VSCode] string 안에서 emmet 자동완성기능 활성화하기 js에서 백틱 기호 안에 css 코딩을 하는 경우 emmet 자동완성 기능이 활성화되지 않는데, 이를 활성화시킬 수 있다. vscode에서 ctrl + , 누르고 우측 상단의 '설정열기(json)' 버튼을 클릭하고 다음 코드를 추가한다. "emmet.includeLanguages": { "javascript": "javascriptreact", "typescript": "typescriptreact", "javascriptreact": "css" }, "emmet.triggerExpansionOnTab": true, "editor.quickSuggestions": { "other": true, "comments": false, "strings": true } "emmet.includeLanguages":.. 더보기 [프로젝트시작] NodeJS, reflex 1. NodeJS 설치하기 1) 웹사이트에서 찾아서 NVM-windows(node version manager) 설치하기 2) 터미널에서 nvm install 버전 으로 설치하기 : nodejs.org 사이트에서 LTS버전 확인 가능 3) nvm use 원하는버전 (사용하기를 원하는 버전을 사용상태로 만듦) - nvm list 를 통해 설치되어 있는 모든 버전 확인 가능 - nvm uninstall 원하는버전 : 해당 버전 삭제 가능 2. NodeJS 프로젝트 시작하기 1) 프로젝트를 시작할 폴더 생성하기 2) VSCode에서 폴더 열기 3) 터미널에서 npm init -y : package.json 파일 생성하면서 npm 프로젝트 시작 4) npm install 패키지명 : lodash, parcel .. 더보기 [CSS] div 안의 div를 가운데 배치하기, 수평&수직, position 이번에는 position을 이용하여 수평 가운데, 수직 가운데 배치를 하는 방법을 알아보겠습니다. 먼저 이전 글에서 말씀드렸던 width & margin:auto 를 이용한 코드를 보겠습니다. ----- HTML 코드 ----- ----- CSS 코드 ----- .container { background-color: yellow; } .item { background-color: gray; height: 100px; width: 200px; margin: auto; } 잠시 margin:auto는 삭제하겠습니다. 그리고 position 속성을 부모요소( .container )와 정렬될 요소( .item )요소에 넣으면 아래의 코드가 됩니다. .container { background-color: yell.. 더보기 [CSS] div 안의 div를 가운데 정렬하기, 수평&수직, display:flex 이 전 글에서 width와 margin:auto를 이용해 div 안의 div를 수평정렬하는 방법을 알아봤습니다. 그 코드를 다시 한번 살펴보겠습니다. ----- HTML 코드 ----- ----- CSS 코드 ----- .container { background-color: yellow; } .item { background-color: gray; height: 100px; width: 200px; margin: auto; } 그 결과는 아래와 같습니다. 이 방법은 수직 정렬에는 사용할 수 없습니다. display:flex 를 이용하여 수평 가운데 정렬을 하는 방법을 알아보겠습니다. ----- CSS 코드 ----- .container { background-color: yellow; display: f.. 더보기 [CSS] div 안의 div를 가운데 정렬하기, 수평만, width&margin:auto 위의 코드와 같이 div가 중첩되어 있을 경우 안 쪽(자식요소)의 div를 바깥쪽(부모요소)의 div의 가운데로 정렬할 때 필요한 CSS 코드를 알아보겠습니다. 이 때 필요한 CSS 코드는 width와 margin: auto 입니다. 우선 div 요소에 CSS에서 사용할 이름을 부여하고, 화면에 보이도록 배경색을 설정해보겠습니다. ----- HTML 코드 ----- ----- CSS 코드 ----- .container { background-color: yellow; } .item { background-color: gray; } 이 상태로 웹페이지에서 확인하면 화면에 아무것도 나오지 않습니다. div태그는 block요소이고, block요소의 상하 높이는 최대한 작아지려는 경향이 있기 때문입니다. div.. 더보기 [JS] array.forEach 이해하기, 배열의 반복문 arr.forEach(callback(currentvalue[, index[, array]])[, thisArg]) 배열의 forEach 함수를 이해하는 과정을 순차적으로 살펴보겠습니다. 이 글에서는 callback함수의 currentvalue와 index 매개변수에 대해서만 알아보겠습니다. 먼저 다음의 코드를 보겠습니다. function print(fruit) { const result = `제가 좋아하는 과일은 ${fruit}입니다.`; console.log(result); } const fruits = ['사과', '바나나', '파인애플', '오렌지', '딸기']; print(fruits[0]); print(fruits[1]); print(fruits[2]); print(fruits[3]); pri.. 더보기 이전 1 2 3 다음
