JavaScript 24

[React Native] react-native-shadow-2로 shadow 효과 주기

드디어 react native로 퍼블리싱을 하는데.. 세팅부터 뭐하나 쉬운게 없다. 그중에서 shadow효과는 ios와 android에서 조정할 수 있는 속성 종류가 다르다. * ios -shadowColor -shadowOffset -shadowOpacity -shadowRadius * android -elevation android야..? 이게 다냐고.. https://www.npmjs.com/package/react-native-shadow-2 그래서 react-native-shadow-2를 사용해서 두 기종의 핸드폰에서 균일한 그림자를 만들 수 있다. npm 혹은 yarn을 이용해서 설치하고 컴포넌트로 그림자를 주고 싶은 요소를 감싸서 만든다. *주의할 점: borderRadius가 안먹는다?? ..

JavaScript/React 2024.02.26

[JavaScript] 백틱(``)으로 값을 작성하는 것에 대하여

백틱(``)을 배웠다..! 근데 쓰임새가 조금 어려운듯 하다. 편하라고 쓰는데 말이다. 오히려 그냥 문자열끼리, 변수끼리 단일 따옴표로 감싸고 +로 이어주기만 하면 되는 방식이 단순하게 생각해도 되서 더 편한 것 같기도 하다. 하지만 백틱을 쓰는 것이 번거러워도 꽤 코드를 단순화시킬 수 있을 때가 있는데 그것은 바로 삼항연산자를 쓸 때이다. 삼항 연산자는 어떠한 조건의 값이 true냐 false냐에 따라 원하는 값을 달리 작성하고자 할 때 요긴하게 쓰인다. 우선 백틱은 문자열과 변수를 함께 사용하고 싶을 때 변수이름은 ${}안에 넣어주고 그렇게 감싸준 변수명과 문자열을 다시 한 번 감싸줄 때 사용된다. 그리고 값을 작은 따옴표에 써줘야 할 때 백틱을 사용해서 써주고 싶다면 어떻게 해야 하나? 그것은 이렇..

JavaScript 2021.06.04

[JavaScript] 새로운 요소를 생성하고 텍스트 삽입하기

pick on.. 픽온.. 급 피곤하다. 사용자가 읽을 정보는 가급적 html안에 작성하는 것이 좋다고 생각하긴 하지만 자바스크립트를 연습할겸 새로운 요소를 만드는 법을 연습하였다. innerHTML로 생성하는 방법이 있고 createElement로 만드는 방법 두 가지 이상의 방법이 있다. (성능 비교해보면 innerHTML이 더 좋은 것 같다. 그러나 뭔가 표준은 createElement인듯..) createElement로 요소를 생성하는 방법이 좀 더 복잡하니까 먼저 알아보도록 하자. 일단 어디에 새로운 요소를 만들 것인지를 생각해야 한다. ┌ 이미 생성되어있는 요소 안에 넣을 것이라면 선택자로 불러와야하고 └ 아무것도 없는 body에 만들 것이라면 document를 불러와준다. 그 뒤에 .crea..

JavaScript 2021.06.03

[JavaScript] 예외 발생시키기 - try / throw / catch / finally

1. try / catch / finally var value; try{ value = ball; //1. ball이란 변수가 선언되어 있지 않으므로 에러가 발생됨. } catch(error) //2. catch문을 실행한다. error라고 꼭 고정해서 쓰지 않아도 된다. console.log("catch 실행"); }; //catch 실행 var sports; try{ sports = ball; } catch(error) { log("catch 실행"); } finally { log("finally 실행"); // try또는 catch문을 실행한 후 finally블록을 실행시킴. }; - try문에서 예외 발생을 인식 (주로 에러 상황인듯) : try문에 작성한 코드에 에러가 발생해도 프로그램은 죽지 ..

JavaScript 2021.03.24

[JavaScript] 반복문 (loop or iterate)

목록에서 2, 3을 반복해서 쓰고 싶다. 이럴 경우 단순히 복사해서 붙여넣기를 할 수도 있지만 그 반복의 횟수가 100000단위를 넘어서도 복붙을 할것인가? 반복문을 써서 더 쉽게 쓰는 법을 알아보자! 1. while //주로 변수를 정의하는 자리 while(조건문 - 주로 변수의 범위이다){ 반복해서 실행할 코드 - 변수가 늘어나는 규칙을 포함한다 } Loop while뒤에 오는 괄호안의 조건에 대해 boolean값이 오게 되고 그 값이 true면 코드를 반복실행하다가 false가 되면 반복을 멈춘다. while반복문은 사용하기 쉽지만, 변수와 관련된 자리에 다른 여러 가지 코드들이 개입될 수 있다는 단점도 있다. ​ ①. 태그에서 JavaScript를 작동시키기 위해 태그의 document.write..

JavaScript 2021.03.24

[JavaScript] 조건문 (Conditional statements)

1. IF //1. true if(true일 경우){여기에 있는 코드가 실행 } else{else뒤에 오는 코드는 실행되지 않는다 } //1. false if(false일 경우){false 바로 뒤에 오는 코드는 실행되지 않는다 } else{여기에 있는 코드가 실행 } 조건문 if 다음에 오는 괄호 안에는 분리연 값이 오고 그 값이 true냐 false냐에 따라 {}안의 코드가 실행되거나 무시된다. 따라서 자신이 원하는 조건에 따라 if뒤 소괄호에 오는 값(value)이 true나 false가 될 수 있게끔 조건문을 써야 한다. var a = 10; var b = 20; var c = 30; if(a>b){ document.write('a가 b보다 크다'); } else if(b>c){ document...

JavaScript 2021.03.24

[JavaScript] 연산자 (operator)

연산자는 규칙에 따라 계산하여 값을 구해주는 것이다. 연산자를 통해 표현식을 작성하면 자바스크립트 엔진이 그 JS코드를 기계어로 바꾸어(Compile) 해석하고 실행한다. 이를 표현식을 평가한다고 하며 그 반환값을 평과 결과라고 한다. 1. 대입 연산자 (할당 연산자) 오른쪽 항에 있는 숫자를 왼쪽에 있는 변수에 대입한다. ​ 1=2; 라고 하면 에러가 뜬다. 1에 2를 대입할 수 없어서 그런것이다. 변하지 않는 수인 1은 상수이다. ​ 2. 산술 연산자 종류 설명 예시 +, - *, / (기본 산술 연산자) 더하기, 빼기, 곱하기, 나누기 1+1 결과값 = 2 + 더하기로 연결된 문자를 이어서 붙여준다. var name1 = "java" var name2 = "script" name1+name2 결과값..

JavaScript 2021.03.23

[JavaScript] Nomad Academy, 바닐라 JS로 크롬 앱 만들기 - to do list만들기 / 20.06.08

출처 - Nomad Academy www.youtube.com/watch?v=wUHncG3VwPw&list=PL7jH19IHhOLM8YwJMTa3UkXZN-LldYnyK //1. 변수 작성 : 스크립트 파일이 따로 있어도 같은 변수를 정의하지 말자.. const toDoForm = document.querySelector(".js-toDoForm"), //form태그 뭐하는지 좀 봐라.. : 새로운 li추가해야 해서 정의한것. toDoInput = toDoForm.querySelector("input"), toDoList = document.querySelector(".js-toDoList"); //2. Function 실행 function init() { loadToDos(); toDoForm.addE..

JavaScript 2020.06.08

[JavaScript] Nomad Academy, 바닐라 JS로 크롬 앱 만들기 - local storage에 값 저장하기 / 20.06.06

출처 - Nomad Academy www.youtube.com/watch?v=wUHncG3VwPw&list=PL7jH19IHhOLM8YwJMTa3UkXZN-LldYnyK #3.3-3.4 Saving the User Name part 1-2 1). 기본개념 - local storage : 작은 정보를 개발자 유저 컴퓨터에 저장하는 방법이다. - localStorage.setItem("key", value); local storage에 데이터 입력하기 - localStorage.getItem("key", value); local storage에서 데이터 가져오기 - form을 제출하는 event가 발생하면 document까지 가서 다른 곳으로 그 데이터가 이동한다. 그리고 페이지는 새로고침이 된다. : 이것..

JavaScript 2020.06.06

[JavaScript] Nomad Academy, 바닐라 JS로 크롬 앱 만들기 - 시계만들기 / 20.06.05

출처 - Nomad Academy www.youtube.com/watch?v=wUHncG3VwPw&list=PL7jH19IHhOLM8YwJMTa3UkXZN-LldYnyK #3.1 Making a Js Clock part One - html, css, javascript에서 동일한 클래스명을 써주고 싶기 때문에 clock에 대한 div태그의 class명을 js-clock이라고 지정한다. - javascrpt에서 clockContainer와 clockTitle변수를 만들고 init라는 이름의 함수를 지정한다. const clockContainer = document.querySelector(".js-clock"), clockTitle = clockContainer.querySelector("h1"); fun..

JavaScript 2020.06.05