728x90

Programming 151

[Javascript] export와 import

1) export(내보내기) -> export 하는 모듈은 "use strict" - named: 모듈을 특정 이름으로 export export {myFunction}; //먼저 선언한 함수 내보내기 export const foo = Math.sqrt(2); //상수 내보내기 - default: 모듈을 이름 없이 export export default function(){} //기본 함수 내보내기 export default class{} //기본 클래스 내보내기 +) 차이점 → 하나의 모듈(파일)에서는 하나의 default export만 가능 → named export는 동일한 이름으로 가져올 수 있고, 이름을 바꾸려면 as 사용 import {a as b} from "module.js" → {}구분으로..

[Javascript] var, let, const

var, let, const의 차이에 대해 알아보자. ● 변수 선언 방식에 따른 차이 1) var : 앞에서 선언된 변수명과 동일한 변수명으로 선언해도 에러가 발생하지 않는다. var name = "mimi"; console.log(name); //mimi var name = "citi"; console.log(name); //citi 2) let : 동일한 변수명으로 재선언은 불가능하지만 변수의 값을 재할당하는 것은 가능하다. let name = "mimi"; console.log(name); //mimi let name = "citi"; console.log(name); //Error!! name = "titi"; console.log(name); //titi 3) const : 동일한 변수명으로 재..

[ReactNative] async와 await

async와 await는 비동기 처리 방식의 대표적인 예시라고 할 수 있다. - 사용 형태 async function Function_Name(){ await 비공개처리메소드명(); } - 사용 예시(AsyncStorage를 이용하여 저장한 데이터를 불러올 때) const Save_Data = async ()=>{ const data_D = await AsyncStorage.getItem('Dday_Data'); if (this._isMounted) { this.setState({Dday: data_D}); //스토리지 데이터는 return으로 값을 못 넘겨주기 때문에 state 이용 } } 2번 줄을 보면, 로컬 스토리지에서 Dday_Date라는 이름으로 저장되어 있는 데이터를 불러오고 있다. 만약 이..

[프로그래밍] 동기 vs 비동기

● 동기 vs 비동기 * 동기 - 요청과 그 결과가 동시에(한 자리에서) 일어난다는 약속 - 요청을 하면 시간이 얼마가 걸리든 요청한 자리에서 결과 주어짐 - A노드와 B노드 사이의 작업처리 단위를 동시에 맞추겠다. * 비동기 - 요청과 결과가 동시에 일어나지 않을 거라는 약속 - 요청한 자리에서 결과가 주어지지 않음. - 노드 사이의 작업 처리 단위를 동시에 맞추지 않아도 됨. +) 장단점 * 동기 - 장점: 설계가 매우 간단하고 직관적임 - 단점: 결과가 주어질 때까지 아무 것도 못하고 대기 * 비동기 - 장점: 동기보다 복잡 - 단점: 결과가 주어지는데 시간이 걸리더라도 그 시간동안 다른 작업 가능 +) async와 await -> 비동기 [ReactNative] async와 await async와..

Programming/etc. 2021.03.06

[Node.js] Axios란?

● Axios: 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리. 백엔드와 프론트엔드의 통신을 쉽게 하기 위해 사용. ● Promise: 비동기 로직 처리에 유용한 자바스크립트 객체 ● API 연동1) axios.get('URL주소').then().catch(): 해당 URL로 get 방식으로 요청2) axios.post('URL 주소').then().catch(): 해당 URL로 Post 방식으로 요청3) axios({옵션}): Http 요청에 대한 속성을 직접 정의하여 보낼 수 있음 ● 동기 vs 비동기 [프로그래밍] 동기 vs 비동기● 동기 vs 비동기 * 동기  - 요청과 그 결과가 동시에(한 자리에서) 일어난다는 약속  - 요청을 하면 시간이 얼마..

Programming/Server 2021.03.06

[ReactNative 기초] StyleSheet 사용

리액트 네이티브에서는 StyleSheet를 이용하여 배치, 폰트 크기, 마진 등 다양한 스타일을 적용할 수 있다. 간단한 예시를 적어보고, 나중에 여유가 생기면 StyleSheet의 요소들을 정리해보도록 하자. const App = () => { return ( 안녕하세요 ); }; export default App; const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', }, text: { fontSize: 20, }, }); 위의 코드처럼 const styles = StyleSheet.create({});로 스타일을 지정하고, 적용하고 싶은 곳에 style={styles..

[ReactNative - flex] 앱 기능별 공간 크기 조정

크기를 조정할 때 숫자로 크기를 주면 기기의 크기, 비율에 따라 보이는 모습이 달라진다. 이때 flex를 이용하면 비율로 설정이 되기 때문에 기기의 크기에 맞춰 자연스럽게 구성된다. import { StatusBar } from 'expo-status-bar'; import { StyleSheet, View } from 'react-native'; import React from 'react'; export default function App() { return ( ); } const styles = StyleSheet.create({ YellowView: { flex: 1, backgroundColor: 'yellow' }, BlueView: { flex: 1, backgroundColor: 'blu..

[expo] 프로젝트 시작하기

* Node.js와 npm 이용 ●expo로 프로젝트 시작하기 1) 명령 프롬프트를 띄운다. 2) cd 폴더명 (프로젝트를 생성할 폴더로 이동한다.) 3) expo init 프로젝트명 (영어로) 4) blank 선택 5) 프로젝트 생성되는 동안 github에 repository 생성 (README 선택) 6) cd 폴더명 (프로젝트가 생성된 폴더로 이동. 폴더명을 따로 입력하지 않았다면 프로젝트명과 동일 7) code . (코드가 열림) 8) git remote add origin github_repo주소 (터미널에) 9) git pull origin master --allow-unrelated-histories (에러 나면 master를 main으로 바꿔서 해보기) 코드를 다 작성하고 expo에서 앱 ..

728x90