전체 글
-
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 : 웹 브라우저의..
-
자바스크립트 공부(8) - 폼(Form)개인 공부/JavaScript 2021. 2. 8. 03:43
1. 폼 요소 접근하기 (1) id 또는 class 값을 사용해 접근하기 querySelector() 함수 또는 querySelectorAll() 함수를 사용한다. id 값을 사용할 때는 폼 요소 하나에, class 값을 사용할 때는 여러 요소를 가져와 배열 형태로 저장한다. 텍스트 필드에 있는 값을 가져올 때는 텍스트 필드에 접근하는 코드 맨 뒤에 .value를 붙여준다. (2) name 값을 사용해 접근하기 폼 요소에 id나 class 속성이 없고 name 속성만 있을 때 사용하는 방법이다. id, class는 CSS를 사용하면서부터 등장했지만 name은 HTML 초기부터 자바스크립트에서 값을 참조할 수 있도록 사용하던 방법이다. (* 폼 요소의 name 값은 주로 id 값과 같게 지정한다.) doc..
-
자바스크립트 공부(7) - 문서 객체 모델(DOM) (2)개인 공부/JavaScript 2021. 2. 6. 18:25
DOM 요소의 속성 노드에 접근하면 HTML 요소의 속성 값을 원하는 값으로 수정할 수 있다. 1. HTML 태그 속성을 가져오거나 수정하기 getAttribute() : 속성에 접근하기 setAttribute() : 접근한 속성의 값 바꾸기. 괄호 안에 속성 이름과 값을 넣는다. 지정한 속성이 없다면 새로 추가하고, 지정한 속성이 있다면 괄호 안에 넣은 속성 값으로 수정한다. document.querySelector("#prod-img > img").setAttribute("src", "images/coffee-blue.jpg") 🔺 setAttribtue() 함수를 사용하여 이미지 경로 수정하는 예시 위의 태그에서 querySelectorAll("img")로 접근한 후 인덱스를 지정할 수도 있지만 이..
-
자바스크립트 공부(7) - 문서 객체 모델(DOM) (1)개인 공부/JavaScript 2021. 2. 6. 17:17
문서 객체 모델(DOM)이란 웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법이다. 자바스크립트를 이용해 웹 문서의 텍스트, 이미지 등의 요소를 제어하기 위해서는 반드시 이해해야 하는 개념이다. 1. DOM 트리 DOM은 웹 문서의 요소를 부모 요소와 자식 요소로 구분한다. 이런 구조는 나무를 거꾸로 뒤집은 것 같은 모양을 가지고 있어 'DOM 트리'라고 불린다. DOM 트리는 가지와 노드로 표현하는데, HTML 요소만 표현하지 않는다. HTML 요소 내에 속한 텍스트, 이미지도 자식으로 간주하고 DOM 트리에 표현한다. 요소(Element) 노드 : 웹 문서의 태그 텍스트(Text) 노드 : 태그가 품고 있는 텍스트, 요소 노드의 자식 노드이다. 속성(..
-
자바스크립트 공부(6) - 배열(Array)개인 공부/JavaScript 2021. 2. 3. 17:09
배열(Array)은 여러 개의 항목을 하나의 변수에 저장해야 할 때 사용한다. 1. Array 객체로 배열 만들기 자바스크립트에서는 1. 리터럴을 사용하거나 2. Array 객체를 사용해서 인스턴스를 만들어서 배열을 만들 수 있다. (자바스크립트 내에 미리 Array 객체가 만들어져 있다.) var numbers = [1, 2, 3, 4]; // 리터럴 사용 var numbers = new Array(1, 2, 3, 4); // Array 객체 사용 length 속성을 사용하면 배열에 있는 요소의 개수를 확인할 수 있다. 2. Array 객체의 함수들 concat() : 기존 배열에 또 다른 배열이나 값을 합쳐서 새로운 배열을 만든다. 기존 배열의 값에는 영향을 주지 않는다. join() : 배열의 요소..