이경욱

우선 각 파일 형식에 대한 설명이 필요하다.WEBP는 무엇이고 AVIF는 무엇일까? 이 두 가지를 설명하기 전 가장 흔하게 봐왔던 JPG, PNG의 특징을 나열하겠다.JPG는 손실압축방식으로 손실로 인해 PNG보다 작은 사이즈를 가진다.PNG는 무손실압축방식으로 알파 채널(투명도)을 지원한다. WEBP는 2010년에 구글이 개발한 이미지 포맷이다.AVIF는 2019년에 구글, 아마존, 마이크로소프트, Cisco, Mozilla, Netfilx 등의 대기업들이 공동 개발한 형식이다.AV1의 동영상 압축 기술을 이미지의 적용한 것으로 HDR 색상을 지원한다. 레퍼런스를 찾아본 결과는 AVIF가 비교적 최근에 나와 범용성은 떨어지나 전체적으로 성능이 좋다고 되어있어 정말로 그런지 확인해보았다. 우선 첫 번째로..

const onClickLikeHandler = () => { if (target.length) { const likeCounter = postlike - 1; console.log(postInfo); const postInfoData = postInfo.filter(e => e.id !== userInfo.id); const param = {id: postId, likeUserInfo: postInfoData, likeCount: likeCounter}; likeMutation.mutate(param); setLiked(false); } else { const likeCounter = postlike + 1; postInfo.push(userInfo); const param = {id: postId, ..

const taskListener = supabase .channel('room1') .on( 'postgres_changes', {event: 'INSERT', schema: 'public', table: 'myTable'}, payload => { console.log('payload', payload); }, ) .subscribe(); 처음에 변수 설정을 안하고 바로 supabase를 실행했더니 나오지 않다가 변수 설정을 하니 값이 나왔다. 그리고 Database > Replication > table 에 들어가서 내가 사용할 테이블을 켜줘야 사용할 수 있다

border를 주면 겹치는 부분은 중복이 되어 두꺼워진다. 이걸 border가 아닌 outline으로 주니 해결이 되었다!

import St from './style' index.tsx에서 이렇게 import 하고 St. 이름으로 붙여서 사용할 수 있다. ex) style.ts 컴포넌트에선 하단에 export default {} 로 스타일을 모두 내보내주면 된다

src => asset => images 에 넣으니 스타일 컴포넌트에 background 상에서 url 경로가 인식되지 않았다. background 에서 linear 나 background-color 를 중복으로 주고 싶은데, src로 주면 중복이 먹지 않았다. public 폴더에 넣으면 background 중복으로 사용가능하다..!

const getHtml = async () => { const cheerio = require('cheerio') const chartInfo = new Array(); const title: string[] = []; const artist: string[] = []; console.log('getHTML') try { const html = await axios.get('https://www.melon.com/chart/'); const $ = cheerio.load(html.data) $('.ellipsis.rank01 > span > a').each((idx : number, el : any) => { const titleInfo = el.children[0].data; title[idx] = ..

const artistDetail = async (id: any) => { const html = await axios.get(`https://www.melon.com/artist/detail.htm?artistId=${id}`); const $ = cheerio.load(html.data) const result = new Array() const award = $('#d_artist_award').text().replace(/\t|\n+/g, "") const article = $('#d_artist_intro').text().replace(/\t|\n+/g, "") const debutSong: any[] = []; $('.debutsong_info > dl > dt > a').each(functi..

1. 구글 클라우드 콘솔에서 프로젝트를 생성 2. API 및 서비스 탭 이동 3. 라이브러리에서 Google Sheet API 를 사용하도록 설정 4. 사용자 인증 정보에서 서비스 계정 생성 서비스 계정을 생성하면 key값이 담긴 JSON 파일을 주는데, 이걸 import 해서 사용하면 된다. import axios from 'axios' import { GoogleSpreadsheet } from "google-spreadsheet"; import { JWT } from "google-auth-library"; import credential from "../../../key.json" const SCOPES = ["https://www.googleapis.com/auth/spreadsheets"] c..

익스프레스란? 서버 제작을 간편하게 해주는 웹 서버 프레임워크 서버 만들기 1. package.json 생성 2. express 모듈 설치 npm init npm i express npm i -D nodemon * nodemon (1) 코드가 수정될 때마다 재시작해주는 모듈 (2) rs 명령어를 통해 임의로 재시작 3. 기초 코드 작성 const express = require('express'); const path = require('path); const app = express(); // 포트 설정 app.set('port', process.env.PORT || 4000); // app.get(주소, 라우터) // GET 요청이 올 때 수행할 동작 정의 app.get('/', (req, res) ..