전체 글
-
ReactJS - #5 기초 및 실습 (1주차)React 2020. 12. 17. 14:31
Class Component [Class.js] import React, { Component} from 'react' // state 기능 및 라이프 사이클 기능을 사용 // render 함수가 반드시 필요(class형 Component에서) class ClassComponent extends Component{ // 생성자 함수 // 생성자가 이유는 props나 state같은 상태값들을 초기화하기 위해서 constructor(props){ // constructor를 사용하면 항상 병용, this를 초기화, props를 넣어줘야 this.props 사용가능 // suepr(props)를 통해서 this를 초기화 해주지 않으면 다른 component에서 사용했던 this와 충돌이 발생할 가능성이 있다...
-
ReactJS - #4 기초 및 실습React 2020. 12. 16. 21:01
#4 기초 및 실습 생성된 my-app 폴더 밑에 여러개의 파일이 생기는데 [package.json] name, version, private 같은 자신이 만든 App에 대한 설명들이 있고 script 부분이 우리가 쓰는 명령어라고 생각하면 된다. 보통 우리가 next를 만드는 과정은 bulid 명령어를 통해 bulid하고 start 명령어를 통해 실행한다. 이 둘을 통합하는 느낌이 dev 명령어 이다. 나중에 deploy(배포) 할때는 bulid 명령어와 start명령어를 따로 써야 되겠지만 개발환경에서는 dev 명령어를 사용해도 무관한다. aeho@jaehoiui-MacBookPro react % cd my-app jaeho@jaehoiui-MacBookPro my-app % npm run dev 이..
-
ReactJS - #3 기초 및 실습React 2020. 12. 16. 20:47
#3 기초 및 실습 node.js 설치 node.js 설치 후 terminal에서 node -v, npm -v 로 잘 설치 되었으면 위의 화면과 같이 설치된 버전이 출력됨 npm은 node.js를 설치하면 자동으로 설치됨 React를 빌드하는 방법은 순수 webpack이나 babel 를 설정해서 직접 빌드하는 방법, create-react-app을 통해 빌드하는 방법, next.js를 통해 빌드하는 방법이 있는데 여기서는 next.js를 이용해서 빌드 페이지 명명으로 라우팅이 쉽게 가능하고 seo라는게 원활하게 가능하고, SSR이 보다 쉽게 지원해주기 때문에 여기서는 next.js를 사용 next js검색 후 여기서 관련된 document들을 확인할 수 있는데 우리는 npm으로 설치할거니까 jaeho@j..
-
ReactJS - #2 기초 및 실습React 2020. 12. 16. 17:28
#2 기초 및 실습 react가 재사용성도 좋고 퍼포먼스도 좋지만 개발자끼리 정의된 표준이 없기 때문에 여러 개발자들마다 좀 많이 다를 수 있다. React JS의 등장 - 웹 앱의 중요도가 높아지면서 Single Page Application이 등장 - 구글에 의해 Angular.js 프레임워크 등장 -> 데이터 흐름 파악이 쉽지 않음 - 기존 문제 해결을 위해 페이스북에 의해 React.js 프레임워크 등장 - 웹 프론트엔드 개발을 위한 효율적인 자바스크립트 프레임워크 - 가상 DOM(Virtual DOM) 을 통한 빠르고 효율적인 렌더링 - 재사용이 가능한 컴포넌트 구조 - 일방향적인 데이터 흐름 구조 (state와 props) * 가장 상위에 있는 데이터만 바꿔도 하위의 모든 데이터에 영향이 감 ..
-
ReactJS - #1 기초 및 실습React 2020. 12. 16. 14:04
#1 기초 및 실습 리액트를 왜쓰나.. ? jsp 쓰고 jquery로 해도 상관없는데 그러면 퍼포먼스가 잘 안나와서 웹이 버벅거릴 수 있다 근데 이러면 사용자들이 어? 이 사이트 느리네? 안써야지 .. 빨리빨리 민족.. 퍼포먼스가 좋다 리액트는 하나의 libraray 리엑트가 프레임워크처럼 보이는 이유는 여러개의 보조 모듈들이 생겨서 그렇게 보임 javascript란? - 웹 페이지를 동적으로 제어하기 위해 고안된 스크립트 언어 (독립된 시스템에서 사용자가 직접 동작 시키는 프로그래밍 언어) - 웹 브라우저에서 유일하게 사용할 수 있는 프로그래밍 언어 - 대부분의 웹 브라우저가 javascript 엔진(인터프리터) - 크로스플랫폼인 웹의 중요성의 확대와 함께 중요 - ECMAScript 를 준수하는 범용..
-
iOS - memo 앱 만들기 # 11 DB구현2iOS 2020. 12. 16. 11:38
DB구현2 [DataManager.swift] func addNewMemo(_ memo:String?){ // 메모는 Core Data가 만들어준 데이터기 때문에 생성자 파라미터로 context를 던져줘야 한다. // 이렇게하면 DB에 메모를 저장하는데 필요한 비어있는 인스턴스가 생성 let newMemo = Memo(context:mainContext) // 비어있으니까 값을 채우자 // 이렇게 한다고 바로 db에 저장되는 것이 아니고 저장하려면 context를 저장해야 한다. newMemo.content = memo newMemo.insertDate = Date() // context를 저장하는 메소드는 아래쪽에 saveContext()로 구현되어 있기때문에 가져다 쓰면됨 saveContext() }..
-
iOS - memo 앱 만들기 #10 DB 구현 1iOS 2020. 12. 15. 22:49
DB 구현 1 iOS에서 database를 구현할때는 Core Data를 사용한다. 우리가 프로젝트를 만들때 처음에 Core Data를 체크했기 때문에 기본적인 파일들이 프로젝트에 추가되어 있다. [KxMemo.xcdatamodeld] 모델 파일은 데이터를 저장할 방식을 표현하는 설계도 여기에서 메모가 어떤 형식으로 저장되는지 설계도를 만들어야 한다. 하단에 add Entity 버튼을 클릭하면 새로운 Entity가 생긴다. 더블클릭해서 이름을 Memo라고 바꾸자 + 버튼을 누르면 Attribute가 추가된다. 아래 화면과 같이 두개의 Attribute를 추가하자 이제 메모와 날짜는 Memo라는 Entity로 묶여서 DB에 저장된다. 모델 파일은 DB의 설계도이고 Entity는 table의 설계도라고 비유..