분류 전체보기 328

자바스크립트로 크롬 앱 만들기 - 노마드 코더 클론코딩 #13 위치 불러오기, API란 , Json viewer 크롬확장 프로그램 사용 방법

navigator.geolocation.getCurrentPosition() user의 위치(geolocation)를 켜준다. 성공했을 때 실행될 함수 에러가 발생했을 때 실행될 함수 API 란? application programming interface 프로그램들이 서로 소통하는 방법 / 코드들끼리 서로 소통하기 위해 만들어진 것 공공 API 날씨 API 각 어플들의 API 과거 날씨 API 공기 오염 API API 는 데이터, 서버를 가지고 있는 사람들이 원하는대로 디자인할 수 있다. 그래서 어떤 API는 접근권한이 정해져있다. 가끔은 API 사용에 제약이 있거나, 사용하기 위해 지불해야할때도 있다. web API = 브라우저를 위해 만든 API. ex) 구글 크롬, 파이어폭스 등등 https://..

10171. 고양이 출력하기

백준 10171 고양이 출력하기 문제입니다. 콘솔창에 고양이를 출력하는 문제 입니다. 구글링 해서 문제를 맞추기는 했지만 굉장히 비효율적으로 문제를 풀었기 때문에 다시 구글링해서 찾은 정답을 공유합니다. \ /\ ) ( ') ( / ) \(__)| var a = "\\ \/\\"; var b = " \) \( \'\)"; var c = "\( \/ \)"; var d = " \\\(\_\_\)\|"; console.log(a); console.log(b); console.log(c); console.log(d); console.log(`\\ /\\ ) ( ') ( / ) \\(__)|`) 우선 개행을 그대로 적용하기 위해서 백틱을 사용. ​ 그리고 자바스크립트에서 \(백 슬러시)를 문자열로 넣고 싶을 때..

자바스크립트로 크롬 앱 만들기 - 노마드 코더 클론코딩 #12 Date.now, filter 함수, 화살표 함수

const toDoForm = document.getElementById("todo-form"); const toDoInput = toDoForm.querySelector("input"); const toDoList = document.getElementById("todo-list"); const TODOS_KEY = "toDos"; const toDos = []; function saveToDos (){ localStorage.setItem(TODOS_KEY, JSON.stringify(toDos)); } function deleteToDo (event){ const li = event.target.parentElement; // 우리가 삭제하고 싶은 내용 li.remove(); } function p..

자바스크립트로 크롬 앱 만들기 - 노마드 코더 클론코딩 #11 localStorage, forEach, JSON.stringify, JSON.parse

to do list 만들기 const toDoForm = document.getElementById("todo-form"); const toDoInput = toDoForm.querySelector("input"); const toDoList = document.getElementById("todo-list"); function handleToDoSubmit (event){ event.preventDefault(); const newToDo = toDoInput.value; toDoInput.value = ""; } toDoForm.addEventListener("submit",handleToDoSubmit); const toDoInput = toDoForm.querySelector("input"); /..

원시 자료형(primitive type)과 참조 자료형(reference data type)를 알아보자

노마드코더 크롬 앱 만들기 클론코딩 강의를 보다가 궁금증이 생겨서 하는 정리글입니다. 처음에 배울 때 const로 변수를 생성하면 후에 값을 update할 수 없다고 배웠습니다. 그런데 강의 중간중간에 const로 변수를 선언하고도 push 함수로 array에 추가를 하는데요! 이유는 아래와 같습니다. 어레이나 오브젝트 자료형은 const로 선언해도 내부의 값을 할당하는것은 할 수 있습니다. Ex) const arr = ["a","b","c"]; arr.push("d"); // arr = ["a","b","c","d"] 그러나 arr = { name : "Kim" } 같이 자료형 자체를 새로 할당하는것은 const 특성상 되지 않습니다. 더 자세한 설명 👇 원시 자료형(primitive type)과 참조..

자바스크립트로 크롬 앱 만들기 - 노마드 코더 클론코딩 #10 quotes 함수, 이미지를 html body에 추가하는 방법

* quotes 함수는 배열이다! * 쉼표를 조심하자! Math 객체 기능 (Math Module) Math module은 JS에서 이미 load돼서 공짜로 제공되고 있다. ex) Math.PI Math.random()은 0부터 1 사이의 랜덤한 숫자를 제공한다. 응용도 가능!! Math.random() * 10 0.0 2 내림 해서 정수만 보여준다. 숫자를 바닥(floor)까지 내려준다. [1,2,3,4,5] 이렇게 생긴 array가 있을 때, Array.length를 사용하면 Array의 길이를 반환해준다. createElement("") 를 사용하자. 예를 들어, document.createElement("img")일 경우 html 내에 img 태그를 생성 const images = ["0.JPG"..

코드스테이츠 엔트리코스에 도전하다 1~5일차

코드스테이츠에서 백엔드, 프론트엔드 국비지원 과정을 내일까지 모집하고 있습니다. 저는 프론트엔드 쪽으로 마음이 기울었는데 또 모르니 엔트리 코스를 경험하며 저의 가능성을 찾아보고자 합니다. 엔트리 코스는 이름 그대로 초보자들이 참여할 수 있는 간단한 코딩 홈페이지 입니다. 이 엔트리 코스의 목적은요! 1. 프론트엔드 & 백엔드 부트캠프에서 배우게 될 학습 콘텐츠 맛보기 2. 24시간 함께 학습할 동기들과 미리 만나보기! 3. 부트캠프 학습 미리 접해보기 이 과정에 합격하게 되면 게더타운에서 학습하게 됩니다. 그래서 그 과정을 미리 보기 한다고 생각하면 됩니다. 게더타운에 입장 전 저만의 캐릭터를 꾸며주고, 이름도 붙여줍니다. 저는 목소리, 카메를 껐습니다. 오전에 들어갔는데 한분과 저 두명 뿐이였어요. ..

자바스크립트 return에 대해서 더 공부해보자

한 주동안 들었던 수업을 복습하면서 이해가 되지 않았던 return에 대해 공부하는 시간을 가졌다. 사실 공부를 했지만 100% 이해를 한게 아니라서 지금 적는 내용 중에도 미흡한 점이 있을 수도 있다. 나중에 내가 이 포스팅을 보고서 수정할 사항이 있다면 수정해서 재 업로드 할 예정이다..! 미래의 헬리야 실력아 쑥쑥 올라라!! return 이란 1. return은 말그대로 돌려준다는 의미. 내가 설정한 값을 결과값으로 돌려준다는 말입니다 2. return 뒤에오는 함수들은 즉시 종료가 됩니다. "dead code" 리턴값은 함수를 실행시킨 곳으로 돌려준다 그리고 함수가 끝까지 실행되지 않고 리턴하는 지점에서 끝난다. hello라는 function을 실행하는데 number1, number2를 넣어봐. ..

자바스크립트로 크롬 앱 만들기 - 노마드 코더 클론코딩 #9 interval, timeout, 시행착오, 초시계 만들기, padStart

const clock = document.querySelector("h2#clock"); const clock = document.querySelector("#clock"); const clock = document.getElementById("clock"); 모두 같다. 시계 만들기 default 값으로 00시00분 만들기 = 매번 일어나야 하는 무언가. ex) 매 주, 매 2초 등등 function sayhello() { console.log("hello"); } setInterval(sayhello, 5000); => sayhello 라는 function에 실현시키고자 하는 함수를 쓴다. 나는 이 함수를 매 2초마다 실행하고 싶어. setInterval() => 두 개의 argument를 받는다. ..

자바스크립트로 크롬 앱 만들기 - 노마드 코더 클론코딩 #8 preventDefault, string과 변수 합치기, 4강 super recap까지

const loginForm = document.querySelector("#login-form"); const loginInput = loginForm.querySelector(input); const loginButton = loginForm.querySelector(button); const loginInput = document.querySelector(“#login-form input”); const loginButton = document.querySelector(“#login-form button”); 출력되는 값은 같다!!! const loginForm = document.getElementById("login-form");​ const loginForm = document.querySel..