티스토리

<Changjun.dev/>

검색하기

블로그 홈

<Changjun.dev/>

changjundev.tistory.com/m

박창준 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

requestAnimationFrame에 대해 알아보기 requsetAnimationFrame이란? requestAnimationFrame()은 브라우저에서 애니메이션을 최적화하여 실행할 수 있도록 제공하는 JavaScript API이다.주로 CSS 애니메이션이나 setTimeout(), setInterval()을 사용하는 것 보다 성능이 뛰어나기 때문에 웹 애니메이션을 구현할 때 많이 사용된다. requestAnimationFrame()의 목적은 애니메이션을 위한 프레임 렌더링을 브라우저의 화면 갱신속도(리페인팅)에 맞추는 것이다.이 API를 사용하면 브라우저의 리프레시 속도(초당 60프레임, 60FPS)를 고려하는데 이 갱신 주기를 맞추어 콜백을 실행해 부드럽고 효율적인 애니메이션을 만들 수 있다. 이를 통해 브라우저가 최적의 시점에 프레임을 렌더링하도록.. 공감수 1 댓글수 0 2025. 3. 18.
자바스크립트 함수의 특징 자바스크립트 함수에는 여러가지 특징들이 있다. 1.일급 객체일급 객체(First-Class Object)는 프로그래밍 언어에서 특정 타입의 데이터가 아래 조건을 만족할 때 사용하는 용어이다.변수에 할당할 수 있다.함수의 인자로 전달할 수 있다.함수의 반환값으로 사용할 수 있다. 자바스크립트에서 함수는 값처럼 취급될 수 있으며, 변수에 할당하거나, 다른 함수의 인자로 전달하거나, 함수의 반환값으로도 사용할 수 있다.const sayHello = function() { return 'Hello'; };console.log(sayHello()); // 'Hello'const executeFunction = function(fn) { return fn();};console.log(executeFunction.. 공감수 0 댓글수 0 2024. 12. 3.
[프로그래머스 Lv1] 가장 많이 받은 선물 https://school.programmers.co.kr/learn/courses/30/lessons/258712 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr Sol먼저 준 선물과 받은 선물에 대해서 사용자별로 객체를 만들어서 아래처럼 초기값을 만들어주었다.muzi:{ ryan : [0,3], frodo: [2, 1], neo: [0, 1]},ryan:{ muzi:[3,0], frodo:[0,1], neo: [0,0] },frodo:{ muzi:[1,2], ryan:[1,0], neo:[0,0]}neo:{ muzi: [1,0], ryan:[0,0], frodo:[0,0] }그리고 각 객체를 .. 공감수 0 댓글수 0 2024. 12. 2.
[SQL Lv3] 특정 조건을 만족하는 물고기별 수와 최대 길이 구하기 https://school.programmers.co.kr/learn/courses/30/lessons/298519 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 문제 해석평균 길이가 33CM 이상인 물고기들을 종류별로 분류해서 잡은 수, 최대 길이, 물고기의 종류를 출력한다.10CM 이하인 물고기들은 10CM로 취급하여 계산한다. 먼저 물고기 길이가 NULL인 칼럼을 10으로 만들어주기위해 서브쿼리를 활용했다.인라인 뷰에서 IFNULL절로 LENGTH가 NULL인 칼럼을 10으로 만들었고,해당 테이블에서 데이터를 조회한 뒤 HAVING절로 평균 길이가 33CM 이상인 칼럼만 추출했다.그리고 FISH_.. 공감수 0 댓글수 0 2024. 12. 2.
[SQL Lv3] 자동차 대여 기록에서 대여중 / 대여 가능 여부 구분하기 https://school.programmers.co.kr/learn/courses/30/lessons/157340 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 문제 해석2022년 10월 16일에 대여 중인 자동차인 경우에는 대여중으로 표시하고 아니면 대여 가능이라고 표시한다. 문제 풀이CAR_ID가 여러개여서 대여중인 CAR_ID가 있더라도 다른 날짜와 겹치면 대여 가능으로 출력되었다.그래서 먼저 대여중인 테이블을 먼저 뽑아야겠다고 생각했고 해당 테이블과 LEFT JOIN을 하면 대여 가능한 CAR_ID도 같이 뽑을 수 있으니 해당 방식으로 풀어봤다. SELECT T.CAR_ID, C.. 공감수 0 댓글수 1 2024. 12. 2.
[SQL Lv3] 대여 횟수가 많은 자동차들의 월별 대여 횟수 구하기 https://school.programmers.co.kr/learn/courses/30/lessons/151139 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 문제 해석1. 2022년 8월부터 2022년 10월까지의 차량 대여 회수 구하기2. 총 대여회수가 5회인 CAR_ID만 추출하기 문제 풀이1. 2022년 8월부터 2022년 10월까지의 총 대여회수가 5회인 CAR_ID를 인라인 뷰에서 테이블로 추출2. 해당 인라인뷰를 CAR_ID 와 INNER JOIN하여 연결3. 그룹바이로 MONTH와 CAR_ID를 묶어서 월별, CAR_ID별로 집계 SELECT MONTH(A.START_DATE) AS .. 공감수 0 댓글수 0 2024. 11. 26.
[SQL Lv4] 입양 시각 구하기(2) 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 문제 풀이1. 0부터 23시까지 hour을 출력해야는데 hour의 범위가 0부터 23까지가 아니였다.2. 어떻게 만들어야할까 고민하다가 우선 무작정 0부터 23까지의 임시 테이블을 만들었다.3. 그리고 이걸 LEFT OUTER JOIN을 통해서 hour가 일치하는 테이블의 count를 뽑아냈고 null은 COLESCE로 처리하였다. WITH T1 AS ( SELECT 0 AS HOUR UNION ALL SELECT 1 UNION ALL SELECT 2 UNION ALL SELECT 3 UNION ALL SELECT 4 UNION .. 공감수 0 댓글수 0 2024. 11. 26.
[SQL Lv2] 입양 시각 구하기(1) 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 문제 해석1. 입양 시간이 9시부터 19시까지를 그룹화 하여 각 시간별로 입양된 동물 수를 카운트한다. 문제 해결1. HOUR 함수를 써서 DATETIME의 "시"를 뽑아낸 후 이 값을 GROUP화 한다.2. HAVING절에서 BETWEEN 연산자로 9부터 19까지의 범위를 지정하여 COUNT를 집계한다. SELECT HOUR(DATETIME) AS HOUR , COUNT(ANIMAL_ID) AS 'COUNT'FROM ANIMAL_OUTS GROUP BY HOUR(DATETIME)HAVING HOUR BETWEEN 9 AND 19ORDER BY HOUR 공감수 0 댓글수 0 2024. 11. 26.
[SQL Lv3] 즐겨찾기가 가장 많은 식당 정보 출력하기 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 문제 해석1. 음식 분류별로 GROUP BY를 하기2. GROUP BY의 max값을 활용해서 가장 많은 좋아요를 받기3. 주의점은 GROUP BY로 MAX(FAVORITES)를 뽑는다고 해서 이 최대값이 어떤 REST_ID와 연결되어있는지 알 수 없다. 문제 풀이1. where절 서브쿼리로 각 음식 타입마다 가장 많은 좋아요를 테이블을 뽑아와서 IN절로 비교한다.SELECT FOOD_TYPE, REST_ID,REST_NAME,FAVORITESFROM REST_INFO WHERE (FOOD_TYPE, FAVORITES) IN ( SELECT FOOD_T.. 공감수 0 댓글수 0 2024. 11. 26.
[SQL Lv4] 주문량이 많은 아이스크림들 조회하기 https://school.programmers.co.kr/learn/courses/30/lessons/133027 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 문제 해석1. TOTAL_ORDER 상위 랭킹 3개를 출력하는 문제이다 문제 풀이1. CTE를 이용해 미리 FIRST_HALF과 JULY 테이블의 총합을 구해서 정렬한 파생 테이블을 만들었다.2. 그리고 LIMIT을 활용해 상위 3개만 뽑아오도록 구현했다. WITH RANKDATA AS ( SELECT F.FLAVOR, SUM(F.TOTAL_ORDER + J.TOTAL_ORDER) AS TOTAL_ORDER .. 공감수 1 댓글수 1 2024. 11. 18.
[SQL Lv4] 특정 세대의 대장균 찾기 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr문제 해석3레벨 노드의 개체 ID를 출력하는 문제. 문제 해결계층형 쿼리로 푸려고 했으나 SQL문법에서는 START WITH랑 CONNECT BY절을 지원하지 않아 JOIN으로 해결했다.INNER JOIN으로 각 레벨별 계층을 만들어서 3레벨 노드랑 JOIN시키는 형태로 풀었다. SELECT ED3.IDFROM ECOLI_DATA AS ED1INNER JOIN ECOLI_DATA AS ED2ON ED1.ID = ED2.PARENT_ID AND ED1.PARENT_ID IS NULLINNER JOIN ECOLI_DATA ED3ON ED2.ID = ED3.PAR.. 공감수 0 댓글수 0 2024. 11. 18.
[SQL Lv3] 대장균의 크기에 따라 분류하기 1 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 문제 해설스칼라 서브쿼리를 통해 푸는문제이다.서브쿼리 내에서 where절로 ID값이 일치한지 먼저 뽑아낸다음 CASE문으로 SIZE를 조회해서 각 사이즈에 맞게 출력하면 된다. SELECT A.ID, (SELECT CASE WHEN B.SIZE_OF_COLONY 공감수 0 댓글수 0 2024. 11. 18.
[SQL Lv3] 대장균들의 자식 수 구하기 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 문제 해석1. 대장균 개체의 ID와 자식의 수를 출력하는 SQL문을 작성해야한다.2. 스칼라 서브쿼리로 부모의 ID와 자식의 PARENT_ID가 같을 경우 COUNT를 세기로했다. SELECT A.ID,( SELECT COUNT(*) FROM ECOLI_DATA B WHERE A.ID = B.PARENT_ID) AS CHILD_COUNTFROM ECOLI_DATA A; 공감수 1 댓글수 1 2024. 11. 14.
[SQL Lv4] 오프라인/온라인 판매 데이터 통합하기 문제 해석1. 오프라인 데이터와 온라인 데이터를 통합2. 2022년 3월 데이터만 출력3. 상품 판매 일, 상품 ID, 유저 ID 순으로 내림차순 정렬 문제 풀이1. UNION을 사용해서 온라인, 오프라인 데이터를 통합한 테이블을 만든다.2. 서브쿼리를 활용해 위에서 만든 테이블을 인라인 뷰에서 활용한다.3. 판매일이 2022-03-01일부터 2022-03-31일 인 데이터를 뽑는다.4. 정렬한다. SELECT DATE_FORMAT(SALES_DATE,'%Y-%m-%d') AS SALES_DATE, PRODUCT_ID, USER_ID, SALES_AMOUNTFROM ( SELECT SALES_DATE, PRODUCT_ID, USER_ID, SALES_AMOUNT FROM ONLINE_SALE UNIO.. 공감수 0 댓글수 0 2024. 11. 14.
[SQL Lv4] 서울에 위치한 식당 목록 출력하기 문제 해석 1. 리뷰테이블에서 "서울"에 위치한 식당 정보를 출력한다.2. 이때 리뷰 평균점수는 소수점 세번째 자리에서 반올림한다.3. 결과는 평균점수를 기준으로 내림차순, 그렇지 않다면 즐겨찾기수를 기준으로 내림차순한다. 문제 풀이1. 리뷰테이블과 식당 테이블을 INNER JOIN한다.2. "%서울"로 LIKE연산자를 사용해서 ADDRESS를 추출3. ROUND함수를 사용해서 AVG(리뷰.점수,2)으로 세번째 자리까지 평균 점수를 반올림한다. SELECT R.REST_ID, R.REST_NAME,R.FOOD_TYPE, R.FAVORITES,R.ADDRESS, ROUND(AVG(S.REVIEW_SCORE),2) AS SCORE FROM REST_INFO R INNER JOIN REST_REV.. 공감수 1 댓글수 0 2024. 11. 14.
Lighthouse로 프론트엔드 성능 개선하기 해당 글은 Velog에서 옮겨온 글 입니다.문제점1. 첫 화면 컨텐츠 렌더링시 버벅거리는 문제첫 화면에서 AOS 라이브러리를 사용하여 이미지에 flip 효과를 주는 애니메이션을 적용했다.하지만 해당이미지가 렌더링 될 때 커튼처럼 버벅거리며 렌더링되었고 깜빡거리면서 보여지는 문제가 발생했다.해당 문제는 두 가지의 방법으로 해결했다.CSS의 will-change 속성으로 해결CSS 작업에서 스타일 계산, 레이아웃 처리, 애니메이션 프레임 계산 등을 CPU가 담당하는데, CPU가 과도하게 사용되는 경우 버벅거리고 깜빡이는 문제가 발생할 수 있다.CSS의 will-change 속성은 브라우저에게 요소의 예상 변경 사항을 미리 알려주는 역할을한다.이 속성을 사용하면 브라우저는 요소가 실제로 스타일 변형이 필요할 .. 공감수 3 댓글수 3 2024. 9. 9.
첫글 테스트 공감수 0 댓글수 0 2021. 11. 9.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.