프로그래밍 공부하기

웹서비스는 반응속도가 매우 중요하다. 이전에 읽은 책에 의하면 0.1초는 사용자가 기능이 바로 반응했다고 느끼는 시간, 1초는 불필요하게 오래 기다리지 않았다고 느끼는 시간. 10초면 사용자가 집중력을 잃는 최대 시간이라고 한다. PageSpeed Insights 모든 기기에서 웹페이지 속도를 개선해 보세요. PageSpeed Insights 서버에서 페이지 분석 중 developers.google.com 내가 만든 사이트가 얼마나 빠르고 효율적인지 측정해주는 구글의 서비스가 있다. 바로 PageSpeed Insights이다. 위의 링크로 들어가서 측정을 원하는 사이트를 입력하면 점수와 함께 반응속도 및 개선할 부분을 알 수 있다. 특히 측정 결과에서 어떻게 하면 반응속도를 줄일 수 있는지 추천해주는 항..

1. Lottie란 화면에서 복잡하고 화려한 애니메이션을 표현해야할 때 css 와 JavaScript만으로는 너무 어려울 때가 있다. 이러한 때 gif파일을 사용해야겠다는 생각이 들 것이다. 이 때 gif 뿐만 아니라 Lottie라는 선택지도 존재한다. Lottie란 gif처럼 애니메이션을 표현하는 방법으로, .json파일 형식으로 되어있다. gif에 비해 Lottie의 장점은 다음과 같다. gif보다 훨씬 용량이 작다. 확대/축소해도 이미지가 깨지지 않는다. 2. Lottie 파일 얻기 Free Lottie Animation Files, Tools & Plugins - LottieFiles The world’s largest online platform for the world’s smallest an..

1. SVG란 웹사이트에서 이미지를 표현하는 방법은 흔히 알려진 jpg, png 등의 이미지 파일형식 뿐만 아니라 svg라는 형식이 존재한다. svg는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일형식이다. 즉, 기존 이미지 형식은 픽셀로 이미지를 표현했다면, svg는 벡터(수학적 계산)을 통해 이미지를 표현한다. 예를 들어 svg는 위 코드처럼 도형으로 이미지를 표현한다. 코드를 자세히 보면 빨간색 rect, 초록색 circle, 흰색 text 태그로 구성되어있다. 이 코드를 저장한 후 웹에서 보면 오른쪽 그림과 같은 이미지가 보여진다. svg에서 더 자유롭고 복잡한 도형을 그리기 위해선 path 태그를 사용한다. d 속성 값들을 자세히 살펴보자 d 속성에서 가장 먼저 보이는 값은 M8 48이..

프로젝트에서 모달창을 구현해야하는 일이 생겼다. 라이브러리를 이용해도 좋지만 직접 구현하는 것이 더 학습에 도움이 될 것 같아서 모달만들기 글 를 참고하여 직접 구현을 해보았고 만족스러운 결과가 나왔다. 1. 구조 모달창의 구조는 DImmer, OuterContainer, InnerContainer, Icon으로 구성된다. 각 요소의 역할은 다음과 같다. Dimmer 화면을 0.3투명도의 검은 화면 Div로 채운다. 다른 컴포넌트들보다 위에 위치 한다.(z-index) OuterContainer InnerContainer를 감싸고 있다. position을 fixed로 주어 스크롤을 내려도 위치를 유지시킨다. Dimmer보다도 더 위에 위치한다. InnerContainer Dimmer위에 떠있는 하얀 Di..

프로젝트에서 테이블들을 조인해야하는 2가지 상황이 발생하였다. 이를 내가 어떻게 해결하였는지 기록으로 남겨본다. 1. Users와 Lists 가장 먼저 Users테이블과 Lists 테이블을 조인해야 했다. 그 이유는 사용자가 마이 페이지에서 자신의 개인정보 뿐만 아니라 나의리스트 이름목록까지 바로 보여지도록 구조를 짰기 때문이다. Users와 Lists는 1대N 관계이다. 하나의 유저가 여러개의 노래 목록을 가질 수 있기 때문이다. 이를 위해서 먼저 Lists 테이블에 UserId라는 Foreign Key를 만들자. //migration/20210317040801-add_lists_fk.js 'use strict'; module.exports = { up: async (queryInterface, Seq..

스크랩모듈을 만든 후 이를 서버형태로 제공하여 공식적으로 제공하는 REST API처럼 만들고 싶었다. 그러다 보니 평소보다 더 깊은 단계의 라우팅이 필요해졌다. https://songnumberbook.ga:5000/v1/search/title 스크랩 서버에 title 검색을 요청하고 싶다면 위의 주소로 get 요청을 보내야 하도록 만들고 싶었다. 이를 위해선 v1, search에 2가지 라우터가 필요하다. 이는 다음과 같이 만들 수 있다. //scrap-server/index.js const express = require('express'); const v1Router = require('./routes/v1/index'); const app = express(); app.use('/v1', v1Ro..

나는 노래방가는 것을 좋아한다. 하지만 막상 노래방에 가면 어떤 노래를 불러야할지 고민하다 인기차트에 있는 노래만 부르고 오게 된다. 그런데 이 인기차트도 변동이 크지 않기 때문에 결국 노래방에 갈 때마다 같은 노래만 부르고오기 일쑤이다. 이러한 고민에서 나만의 노래번호 리스트를 만드는 프로젝트를 생각해냈고, 이 의견이 받아들여져서 퍼스트 프로젝트로 내 아이디어를 구현해보게 되었다. 이 프로젝트에서 핵심은 노래방 업체의 노래번호를 가져오는 것이다. 노래방 업체가 API를 제공해주면 좋겠지만, 그렇지 않기 때문에 노래방 업체가 제공하는 노래검색 결과를 스크래핑하여 이를 제공하는 스크랩 서버를 따로 만들기로 하였다. 1. URL 노래방 업체에서 노래제목을 검색한 결과는 위와 같다. 여기서 주목할 점은 URL..

TJ 미디어의 노래 번호를 검색하고 노래를 선택하여 나만의 리스트를 관리하는 프로젝트에 참가하게 되었다. 메인페이지 구현을 담당하였는데, 팀원들이 노래방 답게 화려한 효과들을 원해서 메인페이지에 미러볼 같은 애니메이션을 넣어보자는 생각을 갖게되었다. 1. 화면 위에 무작위의 원 생성하기 처음부터 미러볼 애니메이션을 넣기는 어려워서 2가지 종류의 원을 랜덤한 위치에 생성하는 애니메이션을 먼저 작성해보기로 하였다. 1) 원 디자인 .circle-green{ position: absolute; pointer-events: none; background-image: linear-gradient(to right, #2ef27466 0%, #54d88066 100%); } .circle-pink{ position:..

go는 병렬처리가 가능하여 매우 빠르게 동작하는 언어이다. 시간이 오래 걸릴만한 동작들을 go 언어로 된 모듈로 만들어 실행시키면 효율적인 작업 처리가 될 것 같아서 조금 학습해 보려고 한다. 1. 다운받기 golang.org/dl/에 가면 go의 설치파일을 다운받을 수 있다. 나의 경우 ubuntu를 사용하므로 리눅스 파일을 Download 경로에 다운받았다. 2. 압축 해제 및 환경변수 설정 sudo tar -C /usr/local -xzf go1.16.linux-amd64.tar.gz go의 설치파일의 압축을 /usr/local 위치에 풀어준다. 만약 이미 go가 설치되어 있다면 rm -rf /usr/local/go 명령을 먼저 실행하여 이전버전의 go를 제거한다. export PATH=$PATH:..

웹의 정보는 모든 사람에게 공개된 것 뿐만 아니라 회원에게만 공개되는 데이터들이 있다. 예를 들어 네이버에서 나의 쇼핑목록 가져오기 같은 것들 말이다. 이러한 경우 로그인을 하여 정보를 가져와야 한다. 1. 세션 정보를 가져오고 싶은 웹페이지가 세션을 이용해 로그인을 한다면 로그인 데이터를 세션을 통해 보내주면 된다. 한빛출판네트워크에서 나의 마일리지 정보를 한 번 가져와보자. 한빛출판네트워크에서 F12의 네트워크 탭을 킨 상태로 로그인을 하여 확인해 보면 로그인 데이터가 POST방식으로 login_proc.php로 이동하는 것을 확인할 수 있다. 이를 이용하여 다음과 같이 코드를 작성해보자. import requests from bs4 import BeautifulSoup from urllib.pars..