자바스크립트

자바스크립트(JavaScript) - 이벤트 버블링이란?

자바스크립트(JavaScript) - 이벤트 버블링이란? 이벤트 버블링이란 무엇일까? - 어떤 하나의 요소에 이벤트가 발생하게 되면, 해당 이벤트가 동작한 뒤에 부모 요소의 이벤트 핸들러가 이어서 작동하게 되는데, 이 현상은 부모요소를 계속 거슬러 올라가 윈도우 객체를 만날때까지 진행되고, 자식요소부터 부모요소, 그 부모요소의 부모 요소 로 계속 올라가는 현상이 마치 거품이 올라가는 현상과 비슷하여 이것을 이벤트 버블링이라고 한다. 한 번 확인해보자. 다음과 같은 html 코드와 js 코드가 있다. 여기서 빨강,주황,노랑,초록,파랑 버튼을 클릭하게 되면 콘솔에 어떻게 나타날까? 이렇게 세개의 텍스트가 출력되는 것을 확인할 수 있다. 아니 item Event 가 출력되는건 이해하겠어. 근데 list Eve..

Object 를 Array로 바꾸기 (React, JS)

Object 를 Array로 바꾸기 (React, JS) 졸업 프로젝트를 진행하면서 머신러닝 쪽을 통해서 데이터 받을 일이 생겼었다. (원래는 머신러닝 > 백엔드 > 프론트엔드 순으로 전달했어야 했지만, 백엔드팀에서 기한내 구현을 못해가지고 프론트인 내가 직접 데이터를 받아 처리했다.) 대충, JSON 형식으로 캠핑장 데이터들을 전달 받는거였는데, 내가 짜둔 로직은 map 을 사용해서 JSON id 값에 따라 처리하는 코드이다. 근데 이 과정에서 머신러닝 파트 분이 Object 형식으로 데이터를 그대로 전달을 하였고, 내가 이걸 Array로 바꿔서 처리를 해야하는 상황. 대충, { { "id": 1, ... }, { "id": 2, ... }, .... ,{ "id": 50, ... } } 이런식으로 데..

백준 JavaScript 문제풀이 , 백준 자바스크립트 10172 , 백준 10172번

백준 JavaScript 문제풀이 , 백준 자바스크립트 10172 , 백준 10172번 출처 https://www.acmicpc.net/problem/10172

백준 JavaScript 문제풀이 , 백준 자바스크립트 10171 , 백준 10171번

백준 JavaScript 문제풀이 , 백준 자바스크립트 10171 , 백준 10171번 출처 https://www.acmicpc.net/problem/10171 10171번: 고양이 아래 예제와 같이 고양이를 출력하시오. www.acmicpc.net 단순 출력문이지만 유의해야할 점이 있다. \ 와 " 는 " " 안에 넣는다고 그냥 출력되지 않는다. 이 문제에서 \를 출력시키기위해선 \앞 \를 또 써줘야 한다. ------------------------------------------------------------------------------------------------ 정답

백준 JavaScript 문제풀이 , 백준 자바스크립트 10718 , 백준 10718번

백준 JavaScript 문제풀이 , 백준 자바스크립트 10718 , 백준 10718번 출처 https://www.acmicpc.net/problem/10718 10718번: We love kriii ACM-ICPC 인터넷 예선, Regional, 그리고 World Finals까지 이미 2회씩 진출해버린 kriii는 미련을 버리지 못하고 왠지 모르게 올해에도 파주 World Finals 준비 캠프에 참여했다. 대회를 뜰 줄 모르는 지박 www.acmicpc.net 그냥 두줄만 출력해주면 되는 단순 출력문 문제이다. ------------------------------------------------------------------------------------------------------- 정답 ..

백준 JavaScript 문제풀이 , 백준 자바스크립트 2557 , 백준 2557번

백준 JavaScript 문제풀이 , 백준 자바스크립트 2557 , 백준 2557번 출처 https://www.acmicpc.net/problem/2557 2557번: Hello World Hello World!를 출력하시오. www.acmicpc.net Hello World! 만 출력시키면 되는 간단한 문제이다. console.log 출력문을 사용하자 ----------------------------------------------------------------------------------------------- 정답

React-Native ES6 기초문법

React-Native 는 JavaScript를 기반으로 하여 JavaScript를 잘다룬다면 React-Native를 다루기에 보다 더 수월할 것이다. 또한 ES6, React의 기초적인 문법정도는 알고있어야 한다. ES6 기초문법(1) Var, let, const ES6에서 함수를 선언하는데는 여러가지 방법이 있는데 크게 var, let, const 가 꼽힌다. 하지만, var 함수는 사용안하는걸 권장한다. var 함수는 치명적인 오류가있는데 바로 같은 블록의 같은 변수에 다른걸 선언해도 오류를 일으키지 않는다는 점이다. ex) var country = 'korea'; var country = 'USA'; 이게된다 그러므로 let 함수를 사용하는 것을 권장한다. (블록이 달라지면 변수 변경 가능) c..

React-Native 환경 설치 (안드로이드 Android, Window 환경)

React-Native를 활용해 어플을 만들기위해서 필수적으로 거쳐야하는 환경설치가 있다. 참고로 나는 윈도우를 사용하기에 ios는 다루지 않는다. 우선적으로 설치할것들은 - Android Studio - Node.js - Android SDK - Android- Virtual Device - JDK 이것들을 모두 다 설치했다면 이제, Android Studio 에서 File - Settings - Appearance & Behavior - System Settings - Android SDK 에서 Android SDK Location 의 Directory 설정 경로를 복사하여 내컴퓨터 - 시스템속성 - 환경변수 설정 - 변수 이름을 'ANDROID_HOME' 으로 설정, 변수 값에는 방금 복사한 경로를..