프로그래밍 공부하기

프로젝트에서 모달창을 구현해야하는 일이 생겼다. 라이브러리를 이용해도 좋지만 직접 구현하는 것이 더 학습에 도움이 될 것 같아서 모달만들기 글 를 참고하여 직접 구현을 해보았고 만족스러운 결과가 나왔다. 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:..

NHN은 이렇게 한다 소프트웨어 품질관리 『NHN은 이렇게 한다! 소프트웨어 품질관리』는 소프트웨어 개발의 전 과정에서 효과적으로 품질을 측정하고 향상시키기 위한 기술을 담고 있다. 눈에 보이지 않는 소프트웨어의 품질을 측정한 book.naver.com 프로젝트를 앞두고 협업에 대해 관심이 많아져 이전 도서관에서 빌렸던 'NHN은 이렇게한다 소프트웨어 품질관리' 라는 책을 읽게 되었다. NHN이 워낙 큰 기업이다 보니 책의 내용은 어느정도 규모가 있는 팀에게 도움이 될 내용이었으며, 책 자체가 조금 오래되어서 현재 사용할 수 없는 도구들을 소개하는 경우도 있어 솔직히 당장 소개된 도구를 쓸 수는 없을 것 같다. 그러나 SW 품질관리를 통해 이러한 툴들이 있구나를 알고 필요할 때 이런 도구들을 찾아서 도입..

CodeStates를 수강한지 3개월째... 이제 프로젝트와 잡서칭 과정만이 남았다. 여기까지 오니 취업에 대한 부담감과 두려움이 좀 더 크게 느껴진다. 이러한 기분을 조금이라도 해소하기 위해 졸업생 취업자의 Talk Session을 듣게 되었다. 오늘 Talk Session은 코드스테이츠 수료 후 N사의 채용형 인턴에 합격한 뒤 정규직으로 전환된 졸업생의 취준과정 경험담 및 팁 공유를 중심으로 진행되었다. 1. 코딩테스트 준비 일정시간 풀지 못하면 해답을 보고 학습하라 추천 사이트: https://leetcode.com/ 코딩테스트는 취준과정에서 첫번째 관문이자 많은 사람들이 매우 어려워하는 과정이다. 나 또한 코딩테스트를 위해 문제를 풀고 있긴 하지만 내가 잘 준비하고 있는 것이 맞을까? 진짜 코딩테..

Command 'go' not found, but can be installed with: 어제 go를 설치하고 코딩을 하다가 오늘 다시 go 파일을 실행하려니 위와 같이 go라는 명령을 찾을 수 없다는 오류가 발생하였다. 이럴 때 다음과 같은 과정으로 문제를 해결할 수 있었다. 1. 먼저 환경변수를 다시 지정해준다. export PATH=$PATH:/usr/local/go/bin 2. 재지정된 환경변수를 바로 적용한다. source $HOME/.profile

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..