JavaScript

DOM과 JavaScript

DOM : Document Object Model javascript를 통해서 DOM을 조작하여 HTML을 변경할 수 있다. js -> DOM -> HTML 조작 script의 위치에 따라서 실행결과가 달라질 수 있다. script 요소를 만나면 웹브라우저는 HTML 해석을 잠시 멈춘다. script 요소는 등장과 함께 실행되기 때문에 만약 head 부분에 script가 존재하고, 이 script가 HTML의 body의 내용을 수정한다면, 오류가 발생할 수 있다. 따라서 이럴경우 script는 반드시 body의 마지막 부분에 존재해야 한다. JS에서 DOM은 document 객체에 구현되어 있다. -> DOM 구조를 조회할 때는 console.dir()을 통해서 확인할 수 있다. (Object처럼 볼 수..

javascript 정렬 알고리즘

정렬 알고리즘으로 버블, 선택, 삽입, 퀵, 합병 정렬을 배웠었다. 하지만, C언어로만 이 코드들을 작성했었기에 자바스크립트로도 정렬 알고리즘을 기록하기로 하였다. 물론, 자바스크립트에서는 arr.sort((a, b) => a - b) 알고리즘으로 손쉽게 배열을 정렬할 수 있다. 🍇 버블 정렬 가장 쉽게 생각할 수 있는 정렬 방법으로 앞뒤의 숫자를 비교하여 정렬이 필요하다면, 앞뒤의 숫자를 바꾼다. 이미 정렬된 상태라면, 중간에 반복문을 중단할 수 있다. 평균적으로 O(N^2) 시간복잡도를 가진다. (큰 배열을 정렬할 때 부적합하다) const bubbleSort = function (arr) { let sorted; for(let i = 0; i < arr.length; i++){ sorted = fa..

javascript 순열과 조합 알고리즘

조합은 배열에서 n개를 선택하는 것으로 순서가 바뀌어도 같은 것으로 취급한다. 순열은 배열에서 n개를 선택해 나열하는 것으로, 순서가 바뀌면 다른 것으로 취급한다. 자바스크립트 조합 알고리즘 const combination = (arr, select) => { const answer = []; const dfs = (idx, num, tmp, visited) => { if(idx === arr.length){ return; } if(num === 0){ answer.push(tmp); } for(let i = idx; i < arr.length; i++){ if(!visited[i]){ // 미방문 visited[i] = true; dfs(i, num - 1, tmp.concat([arr[i]]), vi..

ky와 got으로 API 호출하기

ky는 브라우저, got은 node.js 환경에서 사용된다. axios에 비해서 가볍다. (다만, axios는 서버/클라이언트 모두 호환된다.) import React, {useEffect, useState} from 'react'; import ky from 'ky'; export default function App() { const [data, setData] = useState(null); useEffect(() => { ky.get('url 주소').then((response) => (setData(response))) }, []); return ( {JSON.stringify(data)} ); } React에서 ky를 사용하여 post 요청을 보낼 수 있다. json 객체 내부에 json 데이..

상태관리 라이브러리 Redux

Redux는 자바스크립트 어플리케이션에서 예측 가능한 상태의 관리를 해주는 container이다. 상태 관리를 위한 전역 상태의 저장소를 제공한다. Redux는 react의 하위 라이브러리가 아니고, 자바스크립트 어플리케이션이라면 사용이 가능하다. 컴포넌트간의 정보 공유가 필요할 때, 복잡성을 줄이기 위해서 상태관리 라이브러리인 redux를 사용한다. // NPM 으로 설치 npm install redux // Yarn 으로 설치 yarn add redux 참고 자료 : https://ko.redux.js.org/introduction/getting-started Redux 시작하기 | Redux 소개 > 시작하기: Redux를 배우고 사용하기 위한 자료 ko.redux.js.org Redux의 세 가지..

text-shadow 적용하기

html의 텍스트를 강조하기 위한 스타일로 text-shadow를 사용할 수 있다. text-shadow : none | text-shadow : text-shadow : hi // css .hi { text-shadow: 1px 1px 5px red; } 참고 자료 : https://developer.mozilla.org/ko/docs/Web/CSS/text-shadow text-shadow - CSS: Cascading Style Sheets | MDN text-shadow CSS 속성은 텍스트에 그림자(shadow)를 추가합니다. 텍스트와 그 장식에 적용 할 쉼표로 구분 된 그림자 목록을 허용합니다. 각 그림자는 요소, 흐림 반경 및 색상의 X 및 Y 오프셋 조합으로 developer.mozilla..

간단한 calc() 사용하는 법

calc는 css함수로 css 속성값에 계산식을 지정할 수 있게 해준다. 더하기, 빼기, 곱하기, 나누기 연산이 가능하다. 연산자 좌우에 공백이 필요하다. 0으로 나누면 HTML 구문분석기에서 오류가 발생한다. 곱셈과 나눗셈에는 피연산자에 하나 이상의 숫자가 있어야 한다. 중첩해서 사용할 시 내부의 calc()은 ()로 취급된다. width: calc(50% - 8px); scss에서 calc 내부에 변수를 넣고 싶다면, #을 사용해야 한다. $len: 8px; width: calc(50% - #{$len});

forEach와 async await (for of 사용하기)

🥝 forEach는 promises를 기다리지 않기에 async await 구문 역시 동작하지 않는다. const setTimeoutPlus = (num1, num2) => { return new Promise((resolve, reject) => { try { setTimeout(() => { resolve(num1 + num2); }, 3000); } catch (e) { reject("ERROR", e); } }) } const asyncForEachFuc = (data) => { let tmp = []; console.log("start", tmp); data.forEach(async function(element,index,array){ tmp.push(await setTimeoutPlus(el..