Programing

[JS] 구조 분해 할당

알고리즘 문제를 푸는데 구조 분해 할당을 잘 사용하면 코드를 많이 줄일 수 있었다. 구조 분해 할당에 대해 잘 정리해두고 문제에 활용하려 한다. 구조 분해 할당(destructuring assignment) 구조화된 배열과 같은 이터러블 또는 객체의 구조를 파괴하려 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 배열과 객체에서 필요한 값만 추출하여 변수에 할당할 때 유용하다. 1. 배열 구조 분해 할당 배열 구조 분해 할당의 대상(할당문의 우변)은 이터러블이어야 하며, 할당 기준은 배열의 인덱스이다. 즉 순서가 중요하다. 이때 변수의 개수와 이러터블의 요소 개수가 반드시 일치할 필요는 없다. const [x,y] =[1,2]; console.log(x,y)//1 2 const [x,y] =[1];..

<JS> 자바스트립트로 HTML수정

자바스크립트에서 태그, id, class 등을 생성하거나 수정할 수 있다. 이를 위해 DOM과 메서드, 프로퍼티의 범위에 대해 정확하게 이해해야 한다. 오늘 연습해 볼 부분은 사실 CSS에서 충분히 작성 가능함은 물론, CSS로 작성하는 편이 일반적으로 깔끔하나 DOM과 이벤트리스너를 연습해본다는 개념으로 접해본다. 1. HTML 온전히 자바스크립트로 문서를 수정할 것이기 때문에, 추후 자바스크립트 연결을 위한 태그 외에는 비워둔다. 2. Javascript let h2 = document.createElement("h2"); // 1. HTML에 없는 태그를 생성 h2.innerHTML = "Hello!"; // 2. 생성한 태그에 넣을 내용 기입 h2.style.color = "white"; docu..

<JS> for문 탐색

for문을 이용해 조건에 맞는 문자열 혹은 배열을 만든다. 1. 입력된 단어에 포함된 'A'를 모두 '#'으로 바꾸기 let str="BANANA"; function solution(s) { let answer = ""; for(let x of s) { if(x==='A') answer+='#' else answer +=x; } return answer; } console.log(solution(str)); // B#N#N# let str="BANANA"; function solution(s) { let answer = s; answer=answer.replace(/A/g, '#'); // g는 전역을 뜻함. return answer; } console.log(solution(str)); //B#N#N#..

<JS> 최솟값, 최댓값

반복문을 이용한 방법과, 내장함수를 이용한 방법을 알아보았다 1. 반복문 arr = [5,7,1,3,2,9,11]; function solution(arr) { let answer, min=Number.MAX_SAFE_INTEGER; for(let i=0;i

[JS] 객체

객체에 대한 이해 1. 왜 객체를 쓰는지 const userName = "poylib"; const userAge = "26"; const userCheck = true; const userAddress = "changwon"; // 'user'가 반복되는게 보기 불-편하다 const user = ["poylib", 26, true, "changwon"]; // array로 정렬하면 간단해지지만 userName이 "poylib"인지 "changwon"인지 알기어렵다 // 객체로 해결 ! const userObj = { name : "poylib", age : 26, check : true, address : "changwon" } // 읽기쉬워지고, 원하는 값을 불러오기 편하다 // ex) console..

[JS] 날씨 API

API 배우고 연습할만한 주제를 찾다가 날씨 위젯을 만들어 보려다가 괜찮은 코드를 발견했다 따라 만들어보면서 몰랐던 부분이나 안 되는 부분에 대한 피드백을 해보려 한다 html / css로 위젯을 구성 https://openweathermap.org/ 에서 API 생성 자바스크립트로 API 받아오고 구현 1. html 작성 1) head head 부분에 가져올 링크들을 넣어주고 시작했다 /// 폰트는 css에서 불러올 수 있지 않았나..