개발자R의 삶

스벨트 프로젝트 시작 npm install -g degit npx degit sveltejs/template 프로젝트이름 cd 프로젝트이름 npm install npm run dev 라우터 사용 npm install --save svelte-spa-router App.svelte list.svelte 음악 차트 {dateString} setChartType("domestic")} class={currentType === "domestic" ? "selectedType" : ""}>국내 setChartType("overseas")} class={currentType === "overseas" ? "selectedType" : ""}>해외 {#each chartList as chartData, idx} {c..

index.html 음악차트 국내 해외 index.js window.onload = function(){ let today = new Date(); let date = '${today.getFullYear()}년 ${today.getMonth()}월 ${today.getDay()}일 ${today.getHours()}:00'; let p_date = document.getElementById("date"); p_date.append(date); let domestic = document.getElementById("domestic"); let overseas = document.getElementById("overseas"); domestic.addEventListener("click", function..

1. 날짜 Date() 활용하기 2. ajax 로 api 불러오기 list.html 음악 차트 국내 해외 detail.html

문제 좌표평면위에 여러 개의 점이 찍혀있다. [x, y]형식으로 주어진다. 이 점들을 이어서 직사각형을 만들 수 있는 모든 경우에 대해 가장 넓은 직사각형의 넓이를 구하여라. 만약 직사각형을 만들 수 없다면 -1을 리턴하라. 단, 직사각형이 x, y축에 평행한 경우만 고려한다. 입출력 예시 1) input = [[1,1], [4,1], [4,6], [1,6] ,[4,3], [2,3], [2,1], [2,0] ,[4,10], [1,10], [6, 10]] output = 27 입출력 예시 2) input = [[4,1], [1,1], [4,6], [1,6] ,[4,3], [2,3], [2,1]] Output = 15 입출력 예시 3) input = [[2,1], [2,0] ,[4,10], [1,10]] O..

문제는 어렵지 않다. 차근차근 풀면 어떻게든 풀 수 있는 문제. 다만 코드를 짜다보니 점점 더러워지는 나의 코드....ㅜㅜ 문제 설명 주차장의 요금표와 차량이 들어오고(입차) 나간(출차) 기록이 주어졌을 때, 차량별로 주차 요금을 계산하려고 합니다. 아래는 하나의 예시를 나타냅니다. 만약 출차기록이 없다면 23:59에 나간 것으로 간주한다. 기본요금 적용 시간보다 적은 시간 머물렀다면 당연히 기본요금으로 매긴다. 단위시간이 10분인데 8분 머물렀다면 10분으로 간주한다. 상식적인 주차요금을 계산하면 된다. 아래는 내가 짠 코드... (더러움 주의ㅜㅜ) import math def solution(fees, records): answer = [] dic = {} #key: number, value: {mi..

내가 파이썬으로 코딩테스트를 보는 이유는 매우 간단하다. 코드를 적게 써도 되기 때문. 문자열과 리스트 등을 직관적으로 다룰 수 있기 때문이다. 문제 5개를 보면서 예를 들어보려고 한다. 문제는 프로그래머스에서 가져옴 문제 1. 정수를 담은 이차원 리스트, mylist 가 solution 함수의 파라미터로 주어집니다. mylist에 들은 각 원소의 길이를 담은 리스트를 리턴하도록 solution 함수를 작성해주세요. 엄청 쉬운 문제다. 아마 보통은 어떤 언어로 풀든 for문을 돌면서 중첩된 리스트의 길이를 구해서 새로운 빈 리스트에 한 개씩 값을 넣는 형태로 코딩을 할 것이다. (아래처럼) def solution(mylist): answer = [] for m in mylist: answer.append..

Click! 이러한 html 요소들이 있다고 해보자. 보라색 부분을 클릭하면? 노란색 부분을 클릭하면? 버튼을 클릭하면? 어떻게 될까? 보라색 부분을 클릭하면 당연히 hello! 라고 알림창이 뜬다. 노란색 부분을 클릭하면 hi!가 뜨고, 이어서 hello! 가 뜬다. 분명 노란색 div에는 alert('hi!')밖에 없는데 왜 그 부모의 이벤트까지 실행되는걸까? 그게 바로 버블링이다. 이벤트가 발생한 요소부터 루트 요소에 갈 때까지 차례대로 이벤트가 실행된다. 버블링이 있기 때문에 이벤트를 발생시킨 최초의 요소와 이벤트리스너가 있는 원래 요소가 다를 때가 생긴다. 그래서 이벤트의 타겟을 가져올 때 구분해야 하는 점이 있는데.... currentTarget과 target 이다. .addEventListe..

리액트의 가장 큰 특징 중 하나는 가상 DOM을 사용한다는 것이다. ReactDOM이 "실제 브라우저에 그려진 DOM"과 가상DOM을 비교하여 동기화 한다. 실제 DOM을 직접 다시 그리면 안좋은걸까? DOM을 조작하는 것이 비효율적인 걸까? 여러 문서들을 본 결과, DOM을 직접 조작하는 것 자체가 비효율적인 건 아니다. 다만 DOM을 한번 수정하게 되면 지난 번에 공부한 것 처럼 ( https://life-of-erin.tistory.com/48?category=1035457 ) 브라우저에서 화면이 그려지는 원리 브라우저를 구성하고 있는 요소 렌더링 엔진의 동작 원리 파싱 - HTML 파싱 HTML 파서의 특징 1. 오류에 너그럽다. HTML Tag가 정확하게 쓰여있지 않더라도 브라우저가 자체적으로 ..

Promise란? 비동기 작업의 최종 성곡 혹은 최종 실패를 나타내는 객체 왜 사용하는가? 비동기 메소드를 동기 메소드처럼 처리할 수 있기 때문 예를 들어 피자를 만드는 프로그램을 개발한다고 가정해보자. /** * 피자만들기 시작! * 3초 후에 피자 도우를 깔고, * 3초 후에 소스를 바르고, * 4초 후에 토핑을 올리고, * 2초 후에 치즈를 올리고, * 4초 후에 오븐에 넣고 * 1분 후에 꺼낸다. */ 이런 프로그램을 만드는데에는 두 가지 방법이 있을 것이다. 1. 콜백을 사용 2. 프로미스를 사용 콜백을 사용했을 때 setTimeout(() =>{ console.log("도우를 깔았습니다.") setTimeout(() => { console.log("소스를 발랐습니다.") setTimeout((..

우선 비동기를 설명하기 전 콜백함수를 먼저 알아야 한다. 콜백함수(Callback)란? * 다른 함수의 인자로 사용되는 함수 * 이벤트에 의해 호출되는 함수 콜백함수의 예 // 다른 함수( setTimeout() )의 인자로 사용되고 있음 setTimeout(() => { console.log("Hello world!") }, 500) function printHello() { console.log("Hello world!") } setTimeout(printHello, 500) //이벤트에 의해 호출되고 있음 CLICK! let objBtn = document.getElementById("my-btn") objBtn.addEventListener("click", () => { console.log("H..