전체 글
-
React - Native 폰트 적용하기 (Android)TIL 2020. 7. 5. 15:36
화면에 폰트를 추가하여 훨씬 보기 좋게 화면을 꾸밀 수 있습니다. 개발 중인 어플의 로그인 창에 앱의 이름에 폰트를 적용을 하기로 하였습니다. 1. 원하는 폰트 파일을 추가하기 1. 'android/app/src/main/assets/font' 를 찾아 폰트파일을 추가하세요. 2. (RN >= 0.6) 1. root 경로에 react-native.config.js 파일을 하나 생성해 줍니다. 2. 그 파일 안에 밑의 내용을 추가합니다. module.exports = { project: { ios: {}, android: {}, // grouped into "project" }, assets: ["./assets/fonts/"], // stays the same }; (RN < 0.6) 1. package..
-
express 에러 처리 하기자료 정리 2020. 6. 28. 14:34
간단하게 express 로 서버 예제를 만들어 보았습니다. post로 요청 오는 데이터 id 값을 타입에 따라 type이 number일 경우에는 상태로 201 과 id값을 내보내고 string일 경우에는 상태가 400이고 error message를 내보냅니다. 그 외의 타입일 경우에는 서버에러로 간주하여 500 상태와 error message를 내보내는 코드입니다. 1. 각 라우터에서 error를 처리하는 방법 const app = require("express")(); const logger = require("morgan"); const bodyParser = require("body-parser"); app.use(bodyParser()) app.use(logger("dev")) app.post("..
-
React-Native 와 React의 차이자료 정리 2020. 5. 12. 17:44
그러면 일단 React.js 와 React-Native가 무엇인지 알아야겠죠? React? 페이스북에서 만든 프론트엔드 JavaScript 라이브러리입니다. React-Native? React의 방식으로 네이티브 앱을 개발할 수 있는 페이스북의 오픈 소스 프레임워크입니다. React와 React-Native의 동작 React React는 Dom이 생성이 되고 난 뒤에 Virtual Dom 을 이용하여 변화된 곳을 캐치하여 변화된 Dom으로 변경합니다. 여기에 Dom의 작동 방식과 함께 Virtual Dom을 사용한 이용하는 이유를 친절하게 설명되어 있는 글입니다. -> https://velopert.com/3236 React-Native React Native 코드를 실행하게 되면 Bridge를 이용하여..
-
Cookie와 Storage 이란?자료 정리 2020. 5. 11. 20:15
이 쿠키 탐난다.. 그럼 웹 브라우저 상에서 말하는 cookie란 무엇일까요? 쿠키란? 쿠키는 유저의 정보가 들어가 있는 파일입니다. 이 파일은 유저가 웹사이트에 접속할 때 자동으로 생성이 됩니다. 마치 쿠키를 먹으면 많은 부스러기가 남아있는 모습이 때문에 쿠키라는 이름은 가지게 되었습니다. 유저의 정보를 key=value의 형태로 대부분 간단하게 저장합니다. 쿠키 종류 종류 기능 session cookie 만료일을 정해 놓아 보통은 브라우저가 종료 후에 삭제 됩니다. persistent cookie 장시간 저장하는 쿠키 파일로 저장하여 브라우저 종료 후에도 남아있습니다. secure cookie https에서만 사용하는 쿠키 value가 암호화되어 전송됩니다. third-party cookie 광고 베..
-
<TIL> React-Navigation header 꾸미기 - Trello(9)TIL 2020. 4. 24. 15:32
React-Nativgation을 사용하면 자동으로 header를 생성해 준다 Stack같은 경우에는 화면이 쌓이게 되면 뒤로 가기 버튼도 알아서 생겨서 간단한 헨더를 구성할 때에는 그냥 써도 된다. 하지만 헤더에 여러기능을 추가 하고 싶거나 꾸미고 싶다면 원하는 기능을 넣은 component를 header에 적용할 수 있습니다. Nav.js//라우터를 정의해 놓은 파일 ... import CPHs from './utils/CreatePageHeaders'; function StackHome() { return ( }} /> }} /> ({ headerTitle: (props) => })} /> //navigation의 기능을 header에 props로 넘겨주기 위하여 사용하였습니다. ({ headerT..
-
<TIL> React -Native LongPress 구현 - Trello(8)TIL 2020. 4. 16. 15:56
트렐로의 기능을 보면 boardlist에서 하나의 보드를 터치하면 그 보드의 정보를 볼 수 있는 InBoard component로 이동하도록 TouchableOpacity 사용하였습니다. 또한 onPress 옵션에 인자로 () => this.props.navigation.navigate('InBoard") 를 사용 InBoard component로 이동하게 만들었습니다. 또한 navigate로 이동할때에는 각각의 board의 id값을 props로 넘겨줘야 하기 때문에 () => this.props.navigation.navigate('InBoard", { id : board.id }) 이렇게 id 값을 넘겨주었습니다. 하지만 Trello의 모바일 앱을 보면 그냥 짧게 누르면 board안으로 들어가지만 길..
-
<TIL> redux 적용 로그인 인증 화면 만들기 - Trello(7)TIL 2020. 4. 13. 16:24
한동안 바빠 1일1커밋 지키지 못하였다... 로그인 인증 하는 부분에서 return 안에 인증하는 함수를 실행시켰더니 함수가 계속 작동되는 비효율적인 인증 방법이 실행이 되었습니다. 이러한 부분을 Redux 적용하여 훨씬 간단하게 인증할 수 있게 구현 하였습니다. 1. Reducer, action 함수 만들기 일단 그러면 redux에 action의 타입과 action 함수를 만들어 줍니다. redux를 사용할 component에서 action함수를 꺼내 사용해야 하기 때문에 export를 앞에 넣어 줘야 합니다. export const SaveToken = 'SAVETOKEN'; // 액션 타입 정의 export const saveTokenInStore = () => ({ type: SaveToken }..
-
CSS 기초 부터자료 정리 2020. 4. 7. 12:21
적용할 태그를 선택하는 방법 => id -> (.idName), className -> (#className) 을 지정하여 선택 : id는 유니크 한 값이여야 하지만 className은 공통 되게 쓸 수 있습니다. => span , div, p... 태그로 선택 -> (span{style}) : 선택된 태그를 사용하는 곳에 적용이 됩니다. => 다중 선택 -> (div span{style속성}, #{className} span div) : 선택된 것에 스타일을 한꺼번에 적용할 수 있습니다. 띄어쓰기로 구분해줘야 합니다. => 다중 조건 선택 -> (div.{idName} , div#{className}) : OR이나 AND(다중 선택 가능)를 조건으로 줄 수 있습니다. ex ) div.title => d..