[바닐라 JS 기초] 크롬앱 클론코딩 ( 시계 구현, Local Storage, Math 모듈로 난수생성, API로 유저 위치와 날씨 받아오기 )

시계 만들기 특정요소에서 찾기 document에서 어떤 요소를 찾을 때는 document.querySelector을 사용했지만, 어떤 요소에서 찾고 싶다면 해당 element에서 element.querlySelector을 하면 된다. 00:00 const clockContainer = document.querySelector(".js-clock"), clockTitle = clockContainer.querySelector("h1"); function getTime() { const date = new Date(); const minutes = date.getMinutes(); const hours = date.getHours(); const seconds = date.getSeconds(); // 아래..

[바닐라 JS 기초] 조건문 ( + ClassList, Toggle )

조건문 If-else If-else는 조건문이다. 조건에 따라 수행할 내용을 쓸 때 사용한다. 사용방법은 아래와 같다. if(condition){ // block (조건이 참일 때 수행할 내용) }else{ // block (조건이 거짓일 때 수행할 내용) } block은 JS의 expression들을 말하며 console.log, alert와 같은 코드를 말한다. 예시 if(10 > 5){ console.log("Hi"); }else{ console.log("ho"); } JS에서 '같다'와 '같지 않다' 기호 JS에서 조건문을 사용할 때 '같다'는 ===이고 '같지 않다'는 !== 이다. if('10'=== 10){ console.log("Hi"); }else{ console.log("ho"); } ..

[바닐라 JS 기초] DOM, Event

JS DOM Functions Document document도 object이다. console.log(document); 를 통해 해당 웹페이지의 html 전체를 받을 수 있다. 즉, document를 console.log 하면 문서 전체가 출력된다. DOM (Document Object Module) JS는 HTML에 있는 모든 요소를 가져올 수 있으며, 가져온 요소의 내용을 객체로 바꾼다. document , 즉, 모든 HTML은 객체가 되는 것이다. 그리고 객체는 많은 키(=이름, label....)을 가지고 있다. ex) .log, .error, .name, .handsome, .age 아래와 같은 방식으로 HTML를 JS로 가져오거나 JS를 통해 HTML요소를 쓸 수 있다. 1. JS로 HTM..

[바닐라 JS 기초] 함수

함수 어떤 것을 수행하려는 로직의 한 부분이다. 함수로 정의하고 나면 해당 로직 부분을 필요한데서 원하는 만큼 사용할 수 있게 된다. 즉, 원하는 만큼 쓸 수 있는 코드의 부분을 말한다. JS에서 함수를 만드는 방법 function sayHello(){ console.log('Hello!'); } sayHello(); //function 함수이름(argument인자){ //코드 } 주석으로 쓰여진 코드와 같은 방식으로 함수를 만들 수 있다. Argument ( or parameter ) (인자) function sayHello(name){ console.log('Hello!', name); } sayHello("grit"); 인자를 받을 수 있는 함수를 만드려면 ()안에 argument (인자)를 써줘야..

[바닐라 JS 기초] JS와 바닐라JS, 출력, 변수, 데이터타입

JS와 바닐라 JS Javascript versions ECMAScript는 Specification(설명서)의 명칭 같은 것이다. ECMAScript의 예로 ES5, ES6 등이 있다. ES5 = ECMAScript5, ES6 = ECMAScript6 위와 같이 계속 Specifiacation을 업데이트 한다. Specification Specification은 일종의 매뉴얼로 어떤 것을 적었을 때 브라우저에서 출력되는방식이나 어떤 경우에 에러가 뜨는지 등등에 대해 알려주는 안내책자 같은 것이다. Javascript에서는 ECMAScript(이그마스크립트)가 Specification이다. Javascript는 중앙집중화 되어 있어서 누군가 업데이트를 했을 때 모든 브라우저에서 작동하게 된다. 브라우저는..

[영화 웹 서비스 만들기] #2 JSX & PROPS (2) (Key prop , alt, PropTypes)

본 포스팅은 리액트 JS를 다루고 있습니다. #2.3 map Recap Key prop (키 속성) 위의 에러에 따르면 list내의 child는 unique한 key prop을 가져야 한다고 말하고 있다. 즉, 모든 react element들은 유일해야하고있다. 즉, 모든 react element들은 유일해야한다. list 안에 넣으면서 유일성을 잃어버리게 되므로 배열의 각각의 item에 id를 추가하고 component에 key라는 prop을 줌으로써 해결할 수있다. 위의 예시로 설명하면 배열에 있는 정보들은 모두 Food component 함수를 통해 Food component가 되고 우리에게 보여진다. 이렇게 모두 Food component가 되어버려 유일성을 상실한다. 결국 모든 element들이..

[영화 웹 서비스 만들기] #2 JSX & PROPS ( Component, forEach(), filter(), map() )

본 포스팅은 리액트 JS를 다루고 있습니다. # 2.0 Creating your first React Component Localhost Localhost를 게속 유지하고 창을 계속 띄운 상태로 실행시키고 싶다면 npm start 를 하고 console을 종료하지 않아야 한다. x를 눌러서 숨기는 경우는 계속 작동한다. console만 종료시키지 않으면 된다. JSX (1) JS와 HTML의 조합을 JSX라고 한다. React에서 나온 거의 유일한 개념이다. 위의 는 HTML이 아니다. 아래의 return 안에 있는 내용들은 HTML이다. Component 위의 과 같은 것들을 Component라고 한다. react는 component와 함께 동작한다. component를 만들고 보기좋게 만들며 comp..

[영화 웹 서비스 만들기] #1 SET UP (React란?, React App 만드는 법)

본 포스팅은 리액트 JS를 다루고 있습니다. #1.0 Creating your first React App 파일 생성 React app을 사용하기 위해서 콘솔창을 통해 폴더를 생성한다. 위의 순서대로 입력하고 엔터를 치면 해당 이름의 폴더가 자동적으로 생성된 파일과 함께 만들어진다. 명령어 대표적인 명령어에는 start, build, test, eject가 있다. 하지만 start와 build를 중점적으로 알아두면 된다. 실행 Local은 사용하고 있는 컴퓨터에서 실행시키고 싶을 때 주소로 사용될 수 있고, On Your Network는 Wi-Fi를 사용할 때의 주소이다. 따라서 같은 Wi-Fi를 연결하고 해당URL을 통해 폰에서 테스트 해볼 수 있다. 실행이 완료되면 아래와 같은 초기 화면이 뜬다. #..

[내맘대로 투자일지] 리플, 스톰엑스, 메디블록.... 코린이는 투자 연습중...!✍🏻

안녕하세요!! 그릿입니다!! 😊 [내맘대로 투자일지 -비트코인편]에서는 코린이 대학생의 투자 기록을 남기는 포스팅입니다. 투자를 배워가며 적용해본 이론, 가설과 실험 투자 내용을 기록합니다. [내맘대로 투자일지 -비트코인편] 포스팅은 수익률이 좋던 나쁘던 관계없이 포스팅하며 투자하는 사람들과 의견을 나누고 소통하는 목적으로 하고 있습니다. 티스토리 이미지 깨짐 문제와 개인사정으로 2일 동안 포스팅을 못했습니다ㅠㅠ 죄송합니다😢 지난 이틀동안 저는 비트코인 지표보는 방법에 대해 배웠는데요. 현재는 이를 적용하여 투자하는 방법을 실험해보고 있습니다. 최근에 운이 좋아 좋은 수익률로 60만원에서 90만원 대와 100만원 대 정도로 불릴 수 있었는데요. 그 때 벌은 수익을 최대한 잃지 않으면서 새로운 종목을 탐색..

[코린이의 공부노트] 매수와 매도의 타이밍 잡기, RSI 지표와 MACD 지표로 고점과 저점 파악, 업비트에서 지표 활용하기

본 포스팅은 제가 여러 곳에서 공부한 내용을 한눈에 볼 수 있고 좀 더 쉽게 정리해 저와 같이 비트코인 투자를 시작하시려는 분들께 도움을 드릴 수 있었으면 해 시작한 포스팅입니다. 아직 초보라 혹시 맞지 않은 내용을 발견하면 댓글로 알려주세요! 또한 더 깊은 이해를 위해 다른 분들의 자료들도 꼭 참고해 주시기 바랍니다. 안녕하세요!! 그릿입니다. 😀 오늘은 어떻게 저점을 잡아 매수하고 고점을 잡아 매도할지 그 방법을 알아보도록 하겠습니다. 사실 저점, 고점 파악, 지지와 저항 알아보기, 과매도와 과매수 구간 파악하기 등을 위한 방법과 이론은 꽤 여러가지가 있습니다. 사실 오늘 포스팅에서 피보나치 되돌림에 대해 알아보려 했는데, 이를 설명하기 앞서 제가 요즘 쉬우면서도 즐겨쓰고있는 RSI 지표와 MACD ..

[내맘대로 투자일지] 비트코인 15일차, 수익률이 70% 돌파?!

안녕하세요!! 그릿입니다!! 😊 [내맘대로 투자일지 -비트코인편]에서는 코린이 대학생의 투자 기록을 남기는 포스팅입니다. 투자를 배워가며 적용해본 이론, 가설과 실험 투자 내용을 기록합니다. [내맘대로 투자일지 -비트코인편] 포스팅은 수익률이 좋던 나쁘던 관계없이 포스팅하며 투자하는 사람들과 의견을 나누고 소통하는 목적으로 하고 있습니다. 엊그제 부터 비트코인이 상승을 유지해주고 있습니다!! 그래서 그런지 많은 알트코인이 상승세 있는 것 같아 기쁘네요!! 제가 어제 100% 수익률을 돌파한 메디블록과 10%~15% 정도의 수익률을 가졌던 스톰엑스, 9%대의 수익률 가졌던 리플과 이더리움을 익절해야 하는지 엄청 고민에 빠졌다고 했죠? 🤔 어제 저의 선택은 일단 기다려보자! 였다가 어제 새벽쯤 살짝 하락했을..

[코린이의 공부노트] 비트코인 거래소, 수수료 비교, 업비트 투자 기본 알아보기

안녕하세요!! 그릿입니다. 😀 비트코인 시작하려고 찾아보면서 혹은 뉴스에서 업비트, 빗썸, 바이낸스, 거래소 등등 이런 단어들을 들어본 적이 있으신가요? 오늘은 비트코인 거래소란 뭘 의미하고 대표 거래소와 거래 수수료, 그리고 업비트 사용시 알아두면 좋은 내용에 대해 포스팅 해보도록 하겠습니다. 본 포스팅은 제가 여러 곳에서 공부한 내용을 한눈에 볼 수 있도록 정리해 저와 같이 비트코인 투자를 시작하시려는 분들께 도움을 드릴 수 있었으면 해 시작한 포스팅입니다. 아직 초보라 혹시 맞지 않은 내용을 발견하면 댓글로 알려주세요! 또한 더 깊은 이해를 위해 다른 분들의 자료들도 꼭 참고해 주시기 바랍니다. 암호화폐 거래소란? 쉽게 말하면 코인을 사고 팔 수 있는 곳입니다. 좀 더 정확하게 말하면 암호화폐와 화..

[내맘대로 투자일지] 비트코인 14일차, 총 수익률 40% 달성!!

안녕하세요!! 그릿입니다! 😄첫 [내맘대로 투자일지 -비트코인편] 포스팅으로 돌아왔습니다!![내맘대로 투자일지 -비트코인편]에서는 코린이 대학생의 투자 기록을 남기는 포스팅입니다.투자를 배워가며 적용해본 이론, 가설과 실험 투자 내용을 기록합니다. 다가온 4월 1일은 비트코인 투자를 시작한지 딱 2주일이 되는 날입니다!! 짧다면 짧은 14일이지만 코린이인 저에게는 멘탈흔들리는 일이 많았는데요..🥺 같이 투자하시는 분들과 의견 나누며 공부하려고 조금 부끄럽지만 제 투자 기록을 올리려합니다! 혹시 비트코인 투자를 처음 시작하려는 분들은 아래비트코인 용어도 정리해놨으니 참고해주세요!!~[코린이의 공부노트] 비트코인 기초 용어 정리안녕하세요, 그릿입니다!! 오늘은 제가 비트코인 투자를 시작한지 딱 2주가 되는 ..