profile
서울로 상경해 매일매일 생존기를 찍고 있는 Front end 개발자 최준영입니다 🥰

임시 서버를 운용하기

https://releases.ubuntu.com/18.04/?\_ga=2.68999318.663783720.1594620226-1662684519.1594620226위의 주소에서 server install image iso파일을 받는다. (18.04 LTS)

2020년 7월 13일
·
0개의 댓글
post-thumbnail

Next x Ts x styled-component x jest 기본 설정🔥

mkdir next-init-mecd next-init-menpm init -ygit initnpm install --save react react-dom nextmkdir pagesmkdir testsmkdir componentsmkdir public이렇게 npm 초

2020년 7월 8일
·
2개의 댓글
post-thumbnail

INSA인턴 회고 삼번째🔥 클론 Wanted!

5월부터 6월까지 약 1달간 인턴으로 프런트엔드 개발을 진행했다. 주 개발 업무는 실제 구인구직 플랫폼 서비스 전 테스트 개발이었는데 wanted 클론이다. 그동안 해왔던 부분적인 클론이 아니라 진짜 이름만 바꾸면 서비스 가능할 정도의 클론을 했다. 기업 측에선 rea

2020년 6월 29일
·
2개의 댓글
post-thumbnail

moment.js

A lightweight JavaScript date library for parsing, validating, manipulating, and formatting dates.https://momentjs.com/다음 주 월요일부터 일요일까지 구하는 결과를 예

2020년 6월 14일
·
0개의 댓글
post-thumbnail

rc-slider와 react-calendar

npm install --save rc-sliderhttps://www.npmjs.com/package/rc-slider이렇게 양방향으로 range input을 구현할 수 있는 라이브러리이다. 물론 기능이 많다!매번 라이브러리를 사용할 때마다 똑똑한 선생님들이

2020년 6월 14일
·
0개의 댓글
post-thumbnail

qs로 쿼리스트링 쉽게 보내기

이렇게 필터기능을 만들다 보면 쿼리스트링에 배열까지 보내야 할 경우가 있다. 일단 qs를 다운받자.npm install --save qs보내야 할 쿼리스트링의 arrayFormat에 repeat을 주면, 배열을 풀어서 만들어준다! 👍 이렇게 처리를 안하고 바로 보내면

2020년 6월 14일
·
0개의 댓글
post-thumbnail

react-slick을 사용해보자

원티드를 클론하고 있다.위의 캐루셀슬라이더를 slick라이브러리를 써서 구현했더라.먼저 다운로드 받는다.npm install --save react-slickhttps://www.npmjs.com/package/react-slickcss도 같이 import해줘

2020년 6월 7일
·
2개의 댓글

NEXT JS Custom Server

기본적으로 nextjs 에서의 url의 params 접근은 쿼리스트링을 이용한다. 그 이유는 pages의 폴더의 각 js파일마다 접근 하는데, "/id/1"의 깔끔한 url을 사용하고 싶으면, 맵핑을 해줘야 한다. 그렇지 않으면 pages/id/1.js를 찾아가기 때문

2020년 6월 6일
·
0개의 댓글

css touch-action, user-select

브라우저에서 지원하는 터치 컨트롤 CSS이다.더블탭, 줌 등 여러 옵션을 컨트롤 할 수 있다.touch-action: auto; 기본 값touch-action: none; 모든 터치 무시touch-action: pan-x; X축으로 터치 스크롤 허용touch-actio

2020년 6월 6일
·
1개의 댓글

유투브 무직... 이제는 취직... 회고

YouTube에서 개발한 음악 스트리밍 서비스 YoutubeMusic 웹에서 다양한 카테고리의 음악 재생 목록들을 재생하고 보관할 수 있는 기능을 클론한 프로젝트입니다.!youtube5c2VEhlTCJc기간 : 11일(5월 11일 ~ 5월 22일)인원 : 프론트엔드 3

2020년 5월 30일
·
0개의 댓글

NEXTjs Redux, styled-component 적용하기

일단 초기셋팅으로 globalStyle, redux, redux-thunk를 적용한다.먼저 \_document에 globalstyle을 적용하고 나중에 있을 라이브러리 적용을 위해 customdocument를 만든다. styled-component를 이렇게 적용하는 이

2020년 5월 30일
·
0개의 댓글

git fatal: Not a valid object name: 'master'l, .gitignore

한글로 하면,fatal: 올바른 오브젝트 이름이 아닙니다. : 'master' 이다.git init 시 최초로 commit을 하지 않으면, 이러한 문구가 나오면서 branch도 만들어지지 않는다.커밋을 하자!

2020년 5월 29일
·
0개의 댓글

Next.js 시작하기

SSR과 Code Splitting 을 지원하는 react 프레임워크이다.아래는 공식문서에서 밝히는 특징이다.Server-rendered by defaultAutomatic code splitting for faster page loadsSimple client-sid

2020년 5월 29일
·
0개의 댓글
post-thumbnail

따봉 만들기

이렇게 각 노래에 따봉을 누르면 누른 따봉은 각 회원의 테이블에 저장이 된다, 각 list는 mount시 정보를 가져오고 누른 따봉은 fetch의 post 정보로 다시 정보를 가져온다. 이 정보는 각 회원의 테이블과 좋아요 보관함 테이블에 기록된다.마운트 될 때 따봉의

2020년 5월 24일
·
0개의 댓글
post-thumbnail

어디든 따라다니는 플레이어

유튜브 뮤직을 보면 뒤로, 앞으로 가도 다른 페이지로 이동해도 끊김없이 항상 따라다니는 모달 형식의 플레이어가 있다. 기능 구현을 위해 라우트에 있는 모달 형식으로 했다.라우터와 플레이어에 이동하는 데이터 계층과 양이 많다보니 리덕스를 쓰기로 했다.isPlayerOn이

2020년 5월 24일
·
2개의 댓글
post-thumbnail

형님의 파우치 회고

아이디어는 재현님의 "화장품 커뮤니티를 만들어 보고 싶다" 에서 시작됐다. 남자를 위한 화장품 커뮤니티 였지만 프로젝트는 언니의 파우치 클론으로 시작했다. 진짜 아이디어를 실행 하기 전 2주 프로젝트 맛보기 같은 것이었다. ui 구조가 꽤 단순하고 route와 erd

2020년 5월 24일
·
0개의 댓글
post-thumbnail

구글 로그인 구현

구글은 react를 위해 구글 로그인을 제공한다.구글 API에 가보면 등록 후 cliendId를 제공한다. 이 컴포넌트는 로그인 성공 시 onSuccess를 실행하는데 인자로 성공에 대한 정보를 넘겨준다. (토큰, 아이디, 이메일 ...)이제 받은 토큰으로 백앤드에 넘

2020년 5월 16일
·
0개의 댓글
post-thumbnail

리덕스로 전역상태 관리

액션의 타입을 관리하는 actionTypes.js 이다.이렇게 하나의 변수로 액션을 타입을 관리하면 여러곳을 수정하지 않고 편하게 관리할 수 있다.액션을 생성하는 액션 생성자이다. 액션 생성자는 객체를 반환한다. 사실 type이나 payload는 이름을 hi, hell

2020년 5월 16일
·
0개의 댓글
post-thumbnail

DIV 드래그 하기

먼저 위와 같이 드래그 할 DIV를 스타일링 해준다.간단하게 드래그 할 위치를 구하고 이벤트 리스너를 만들어준다.각 드래그마다 재생 위치를 변경해준다.드래그 도중에는 로딩바가 드래그 위치로 변한다. 드래그가 끝나면 다시 원래 재생위치로 변경해준다.다음은 사운드바 이다.

2020년 5월 16일
·
0개의 댓글
post-thumbnail

Git rebase

git에서 마스터와 브랜치를 병합하는 방법은 merge 와 rebase 가 있다.merge와 다르게 rebase는 마스터의 베이스를 그대로 가져와 브랜치를 마스터 앞으로 이어가는 것이다. PR하나당 커밋이 한개로 깔끔한 히스토리를 만들 수 있다. 대신 브랜치에서 최악의

2020년 5월 14일
·
0개의 댓글