안녕하세요 JJini 입니다. 오늘의 주제는 State에 대해 알아 보겠습니다 State - 컴포넌트의 내부에서 변경 가능한 데이터를 관리 할때 사용 React는 단방향 데이터 바인딩을 지원 하고 이는 데이터와 템플릿을 결합 하면 화면을 생성 합니다. 변경 되는 데이터를 위해 React에서 지원 하는 State를 사용 할 수 있는데 State를 사용 하면 자동으로 관련된 하면을 리랜더링 할 수 있다. Props - 부모로 부터 전달 받는다 - 읽기 전용 데이터 immutable State Props 해당 컴포넌트 에서 관리 부모로 부터 전달 받는다 읽기 전용 데이터 import { useState } from "react"; function App() { const [data, setData] = use..
[javascript] 이론 Reference(참조)
- object type은 객체 타입 또는 참조 타입 이라고 한다. - 참조 타입이란 실제 값이 아닌 참조값으로 처리 됨을 의미 한다. - 객체 타입은 동적으로 변화가 가능 하므로 메모리 영역을 동적으로 변화 할 수 있기 때문에 메모리 공간을 확보 하고 메모리의 힙 역역에 저장 된다. var off = { val :10 } var off1 = { val :10 } var off2 = off console.log(off === off1) -> false console.log(off === off2) -> true - 위 와 같이 나온 이유는 off와 off1의 내용은 같지만 별개의 객체를 생성하여 참조값에 할당 하여서 변수의 off와 off1 의 어드레스는 동일 하지 않는다 - 변수 off2는 변수 off..
[javascript] 이론 Object(객체)
1. Object란 - 원시 타입을 제외한 나머지 값들(함수, 배열, 정규표현식)등들 객체 라고 한다. - key와 value로 구성 된 프로퍼티 이다. const obj = { data1(){ console.log("안녕") } } obj.data1() // 메서드 2. 객체를 생성 하는 방법 - 객체를 생성 하는 방법에는 두가지의 방식이 있다. 1. 객체 리터럴 방식 2. 생성자 함수 방식 - 객체 리터럴 방식이 가장 일반 적인 방식이다. var aa = { key: 0, value: "hi" } - 생성자 함수 방식은 객체 리터럴 방식을 풀어 놓은 방식이라고 생각 하면 된다. 즉 생성자 함수로 객체를 생성한 것을 함축 해놓은 것이 객체 리터럴 방식이다. var aa = new Object() aa...
React-Native-Cli Firebase 연동
1. 템플릿 설치아래의 명령어를 사용 하여 Firebase용 템플릿을 만들어 줍니다.1 npx react-native init --template @react-native-firebase/template MyAwesomeApp2. npm & yarn 설치 1 2 3 4 5 # Using npm npm install --save @react-native-firebase/app # Using Yarn yarn add @react-native-firebase/app3. Firebase 콘솔 설정 3.1 Android 설정3.1.1 firebase 프로젝트를 추가 아래의 firebase 홈페이지에 접속 하여 시작하기를 누르고 프로젝트를 추가 합니다.firebase 홈페이지 => https://firebase.g..
React-Native Navigation
React-Native에서 Route역활을 해주는 react-navigation에 관하여 알아 보려고 합니다.react-navigation의 공식 사이트는 아래의 URL로 접속 하시면 됩니다.react-navigation 공식 홈페이지 => https://reactnavigation.org/react-navigation V5 설치아래의 명령어로 라이브러리를 설치 해줍니다.1 npm install @react-navigation/nativeExpo, React-native-cli를 각각 자신에게 맞는 버전을 설치 해줍니다.Expo를 사용 하시는 분은 아래의 코드로 의존성을 설치 해줍니다.1 expo install react-native-gesture-handler react-native-reanimated..
React-Native-Cli 개발 환경 구성
1. Node.js 설치Node.js 가 없다면 Node.js를 먼저 설치 한다.윈도우 이신 분들은 공식 홈페이지 에서 받으시면 됩니다!.! => Nodejs: https://nodejs.org/ Mac 이신 분들은 Homebrew 명령어를 통해 Node.js를 설치 하시면 됩니다 !.!1 brew install node설치가 완료 되시면 Node.js가 제대로 설치 되었는지 확인 하셔야 겠죠?1 node -v설치가 되셨다면 Node.js 버전을 확인 할 수 있습니다. 1 v12.16.1Node.js 의 패키지 매너지인 npm도 같이 설치 되는데 잘 설치 되었는지 확인 해보셔야 겠죠?1 npm -vnpm도 잘 설치 되셨으면 버전을 확인 할 수 있습니다1 6.13.42. Ios 필수 환경 설정2.1 Wat..
[Node.js] 02. Passport 로그인
안녕하세요 Web 개발자 Jji_ni 입니다. 오늘은 Node.js에서 로그인을 쉽게 도와주는 Passport를 이용해 보려고 합니다. 일단은 우선 passport와 passport-local을 받아 주세요. 전 이전에 미리 받아서 받는건 pass할께요 ㅎㅎ 그래도 쓰시기 귀찮으신 분들이 있으시니(저 같으신 분들... 전 복붙이 제일 편하더라구여... ㅎㅎ) npm install passport --save npm install passport-local --save powerShell 에서 받으시면 됩니다. 앞서 제 블로그 2. Node.js ejs base 템플릿 에서 보시면 로그인 템플릿이 하나 있습니다. 그걸 사용 하셔두 되고 전 앞에서 만든 템플릿을 토대로 만들어 보겠습니다. form 태그를 이..
[Node.js]01-1 ejs 템플릿 base (express-ejs-layouts)
안녕하세요 Web 개발자 Jji_ni 입니다. 오늘은 Node.js ejs base 템플릿의 두번째 파일 입니다. 1. 에서는 Node.js의 웹서버를 만드는 것을 했습니다. 오늘은 실질적으로 base를 만드는 작업을 해보려고 합니다. 1. 폴더 구성 저는 폴더 구성을 크게 4가지로 만들어 주었습니다. 그중 이번 프로젝트에서 크게 사용 될 views안에는 우선 적으로 base가 될 layout.ejs가 있고 login페이지에는 base파일의 body안에 들어갈 각각의 템플릿 파일들이 들어 가 있습니다. 이렇게 폴더 구성을 마쳤으면 어떻게 base를 사용하고 템플릿 화를 했는지 한번 보겠습니다. 2. layout.ejs express-ejs-layouts는 express에서 ejs의 다양한 layout 기..