개인 공부
-
리액트 네이티브를 위한 자바스크립트 문법 정리개인 공부/React Native 2021. 3. 27. 21:30
리액트 네이티브를 공부하면서 보이는 낯선 자바스크립트 문법들을 정리하려고 한다. 계속 추가할 예정! 1. Object.values() 파라미터로 받은 객체가 가진 속성의 값들로 이루어진 배열을 리턴한다. for...in과 동일한 순서를 갖는다. const object1 = { a: 'somestring', b: 42, c: false }; console.log(Object.values(object1)); // expected output: Array ["somestring", 42, false]결과 : > Array ["somestring", 42, false]
-
처음 배우는 리액트 네이티브 : 6장 Hooks개인 공부/React Native 2021. 3. 27. 21:22
Hooks는 리액트 16.8 버전에서 새롭게 추가된 기능으로, 리액트 네이티브 0.59 버전부터 사용할 수 있다. 이전에는 컴포넌트 상태 관리나 생명 주기에 따른 특정 작업 수행을 위해 클래스형 컴포넌트를 사용해야 했지만 Hooks 덕분에 함수형 컴포넌트에서도 가능하게 되었다. 1. useState const [state, setState] = useState(initialState);useState 함수를 호출하면 파라미터로 전달한 값을 초깃값으로 갖는 상태 변수와 그 변수를 수정할 수 있는 세터 함수를 배열로 반환한다. 관리해야 하는 상태의 수만큼 여러 번 사용할 수 있다. 상태를 관리하는 변수는 반드시 세터 함수를 이용해 값으 ㄹ변경해야 하고, 상태가 변경되면 컴포넌트가 변경된 내용을 반영하여 다시..
-
처음 배우는 리액트 네이티브 : 4장 정리개인 공부/React Native 2021. 3. 17. 20:55
1. 스타일링 리액트 네이티브에서의 스타일링은 CSS와 약간의 차이가 있다. 리액트 네이티브에서는 자바스크립트를 이용해 스타일링할 수 있다. 컴포넌트에는 style 속성이 있고, 이 속성에 인라인 스타일을 적용하는 방법과 StyleSheet에 정의된 스타일을 사용하는 방법이 있다. 1) 인라인 스타일링 HTML의 인라인 스타일링처럼 컴포넌트에 직접 스타일을 입력하는 방식. 단, 객체 형태로 입력해야 한다. 2) 클래스 스타일링 스타일시트에 정의된 스타일을 사용하는 방법. 3) 여러 개의 스타일 적용 여러 개의 스타일을 적용해야 할 때는 배열을 이용하여 style 속성에서 적용한다. 이때 뒤에 오는 스타일이 앞에 있는 스타일을 덮는다는 것에 주의해야 한다. 클래스 스타일뿐만 아니라 인라인 스타일을 혼용해서..
-
처음 배우는 리액트 네이티브 : 1장~3장 정리개인 공부/React Native 2021. 3. 10. 23:59
1장 리액트 네이티브는 2015년 3월 페이스북에 의해 공개된 오픈소스 프로젝트로, 리액트에 기반을 두고 제작되었다. 하지만 리액트와 달리 iOS, 안드로이드에서 동작하는 네이티브 모바일 애플리케이션을 만드는 자바스크립트 프레임워크이다. 장점 코드 대부분이 플랫폼 간 공유가 가능하여 iOS와 안드로이드 개발을 동시에 할 수 있다. 패스트 리프레쉬 기능을 제공하여 즉각적으로 변경된 모습을 확인할 수 있다. 각 플랫폼에서 그에 알맞은 네이티브 엘리먼트로 전환되기 때문에 큰 성능 저하 없이 개발이 가능하다. 단점 네이티브의 새로운 기능을 사용하는 데 오래 걸린다. 유지보수가 어렵다. 업데이트가 잦다. 동작 방식 브릿지 : 자바스크립트 코드를 이용해 네이티브 계층과 통신할 수 있게 연결하는 역할을 한다. 가상 ..
-
React Native CLI 실행 관련 오류 해결법개인 공부/React Native 2021. 3. 9. 08:20
1. CocoaPods 설치 관련 오류 앱 제작을 위해 소모임 팀원들과 '처음 배우는 리액트 네이티브' 책으로 리액트 네이티브를 공부 중인데, 설치부터 난관에 부딪혔다. Expo는 정상적으로 실행되는데, React Native CLI는 프로젝트 생성부터 에러가 뜨는 것이다. ㅠㅠ (* 필자는 M1 맥북 프로를 사용 중이다) 혹시나 해서 저자분 깃허브에 들어가봤는데, 나와 같은 상황이신 분이 질문을 이미 올려주셨다. (github.com/Alchemist85K/my-first-react-native/discussions/4) cd ios rm Podfile.lock pod deintegrate pod install --repo-update cd .. 그러나 나는 이 과정조차 제대로 진행되지 않았다. ios..
-
자바스크립트 공부 - 엔티티 이름, 숫자 반올림개인 공부/JavaScript 2021. 2. 11. 17:35
1. 엔티티 이름(Entity Name) HTML 예약어를 기존에 사용하던 의미 그대로 사용하기 위해 별도로 만든 문자셋을 엔티티(entity)라고 하며, 웹 문서에서 특수 문자나 기호를 삽입할 때 엔티티 이름을 사용한다. 엔티티 이름이나 코드 뒤에 있는 세미콜론은 반드시 붙여주어야 한다. 참고 : http://tcpschool.com/html/html_text_entities 코딩교육 티씨피스쿨 4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등 tcpschool.com https://dev.w3.org/html5/html-author/charref Character Entity Reference Chart dev.w3.org 2. 숫자 반올림하기 toFixed(..
-
자바스크립트 실습(1) - 숫자 맞히기 게임개인 공부/JavaScript 2021. 2. 10. 16:55
컴퓨터가 랜덤으로 1~100 사이의 숫자를 생성하고, 사용자가 그 숫자를 맞히는 게임이다. 사용자가 입력한 숫자가 정답보다 작다면 DOWN, 크다면 UP, 같다면 맞혔다는 문구를 출력한다. 더보기 var comNum = Math.floor(Math.random() * 100 + 1); // 컴퓨터가 만든 숫자 var userLabel = document.querySelector("#try"); var display = document.querySelector("#display"); var counter = document.querySelector("#counter"); var tryCount = 0; // 시도 횟수 userLabel.onkeydown = function(e) { if (e.keyCode..
-
자바스크립트 공부(9) - 브라우저 객체 모델(BOM)개인 공부/JavaScript 2021. 2. 10. 02:46
브라우저 객체 모델(BOM)이란 웹 브라우저 전체를 객체로 관리하는 것을 말한다. BOM을 통해서 자바스크립트 프로그램이 브라우저 창을 관리할 수 있다. Window 객체는 브라우저 창이 열릴 때 가장 먼저 만들어지는 객체이다. 이 객체는 최상위에 존재하며 그 하위에 브라우저 각 요소에 해당하는 객체들이 존재한다. DOM에 속하는 Document 객체 역시 Window 객체 안에 속해있다. 웹 페이지 '내'에 존재하는 요소들을 관리할 때는 DOM, '밖'에 존재하는 요소들을 관리할 때는 DOM을 사용한다고 생각하면 될 것 같다. 1. Window 객체 (1) 속성 innerWidth, innerHeight : 웹 사이트 내용 부분의 너비와 높이 outerWidth, outerHeight : 웹 브라우저의..