21.06.10

scrollIntoView MDN Element 인터페이스의 scrollIntoView() 메소드는 scrollIntoView()가 호출 된 요소가 사용자에게 표시되도록 요소의 상위 컨테이너를 스크롤합니다. element를 선택하고 scrollIntoView 메소드

2021년 6월 10일
·
0개의 댓글

TIL[006] 21.03.18

flex-basisflex item의 초기 너비를 지정, 이후 남은 공간은 증가/감소(glow/shrink) 근거로 공간분배flex-glowflex item의 너비를 늘어나도록 정의해 줄 수 있는 속성flex-glow: 1 일 경우 컨테이너 너비에 맞춰 균등하게 배분f

2021년 3월 18일
·
0개의 댓글
post-thumbnail

TIL[005] 21.03.13

styled-components 를 설치하고 사용하면 초기에 겪을 수 있는 오류이다.내용은 서버의 sdkfjasld 클래스명이 클라이언트의 sdfkasdf 클래스명과 다르다 라는 내용이다.원인은 next js에서 최초 페이지 렌더링시 SSR(서버사이드 렌더링)이고, 이

2021년 3월 14일
·
0개의 댓글
post-thumbnail

TIL[004] 21.03.09

워크밴치를 이용해 ERD 모델링 작업중 (이미지의 왼쪽) 실선과 점선의 차이를 확인해보자실선 : 식별관계부모테이블의 PK가 자식테이블의 FK/PK가 되는 경우부모가 있어야 자식이 생기는 경우점선 : 비식별관계 부모테이블의 PK가 자식테이블의 일반속성이 되는 경우부모가

2021년 3월 9일
·
0개의 댓글

TIL[003] 21.03.07

CORS는 도메인이 서로 다른 도메인에서 서버간 보안을 위해 요청을 거부하는 현상을 의미한다.예를들어 프론트서버 localhost:3000과 백엔드서버localhost:5000의 요청을 거부하는 것과 같다.프론트서버의 요청이 인증되었다는 사실을 서버에 알리기 위해서는

2021년 3월 8일
·
0개의 댓글

TIL[002] 21.03.06

serializeUserpassport strategy에서 성공 시 실행되는 done(null, user)에서 user객체를 전달받아 세션(req.session.passport.user)에 저장deserializeUser실제 서버로 들어오는 요청마다 세션정보를 실제DB

2021년 3월 6일
·
0개의 댓글
post-thumbnail

TIL[001] 21.03.03

defer [미루다, 연기하다] 태그의 defer 속성은 페이지가 모두 로드된 후에 해당 외부 스크립트가 실행됨을 명시한다.

2021년 3월 3일
·
0개의 댓글

[트위터클론] 5. 리덕스 적용

next에서는 store를 컴포넌트에 래핑하기 위해 next-redux-wrapper 를 설치해준다.크롬리덕스 데브툴을 쓰기 위해서 아래와 같이 세팅해준다.

2021년 2월 28일
·
0개의 댓글

[트위터클론] 4. Next 구조 정리

_app.js 를 이용해 공통된 레이아웃을 분리, 관리해준다. document.js, error.js 생성 _document.js 는 html, head, body _app.js 는 root pages 는 실제 컴포넌트

2021년 2월 28일
·
0개의 댓글
post-thumbnail

[트위터클론] 3.회원가입 화면 구현

React hook을 이용해 회원가입 화면을 구현해보자.기본적인 Input 핸들링. useState를 통해 state를 변경한다.비밀번호 불일치시 오류 메세지 띄우기

2021년 2월 27일
·
0개의 댓글
post-thumbnail

[트위터클론] 2. 레이아웃 생성

antd UI프레임워크 설치/ css 스타일을 cdn으로 적용$ npm i antd웹의 페이지를 감싸는 메뉴나 검색창이 있는 레이아웃을 생성하자children 을 이용해 AppLayout컴포넌트에 데이터를 전달한다.AppLayout컴포넌트에 Link, div태그가 할당

2021년 2월 27일
·
0개의 댓글
post-thumbnail

[트위터클론] 1. 프로젝트 기본 설정

폴더 생성프론트와 백엔드 코드를 관리할 수 있는 두개의 폴더 생성텍스트front폴더 안에 package.json 생성과 필요한 모듈 인스톨$ npm i next react react-dom개발환경에서 필요한 모듈 인스톨$ npm i -D nodemon webpack코드

2021년 2월 27일
·
0개의 댓글
post-thumbnail

Rotating Navigation

네비게이션 클릭시 화면이 회전하면서 사이 공간에 메뉴들이 나올 수 있게 개발해보았다.본문은 상단좌측 포인트를 중심으로 회전하기 때문에 transform-origin값을 top left로 주었다.그리고 네비게이션 메뉴가 보일 수 있도록 translateX 를 이용해 이동

2021년 2월 25일
·
0개의 댓글
post-thumbnail

Progress step

버튼 클릭시 상태값이 변하는 Progress Steptransform속성으로 요소에 회전, 크기조절, 기울이기, 이동효과를 부여할 수 있다.0.4초뒤에 나타난다.

2021년 2월 21일
·
0개의 댓글
post-thumbnail

늘어나는 카드 효과

오늘부터 가장 기본이자, 중요한 HTML, CSS, Vanilla JS 만을 사용하여 심플한 프로젝트를 시작한다.오늘 프로젝트는 클릭시 확장되는 이미지 카드를 작업했다.✔️ 체크flex CSS 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위

2021년 2월 18일
·
0개의 댓글
post-thumbnail

[알고리즘] 코딩테스트 > 해시 > 위장

문제설명스파이들은 매일 다른 옷을 조합하여 입어 자신을 위장합니다.예를 들어 스파이가 가진 옷이 아래와 같고 오늘 스파이가 동그란 안경, 긴 코트, 파란색 티셔츠를 입었다면 다음날은 청바지를 추가로 입거나 동그란 안경 대신 검정 선글라스를 착용하거나 해야 합니다.스파이

2021년 2월 18일
·
0개의 댓글

Routine [루틴]

개발자로써 더 성장 하기 위해 매일 매일 주어지는 당연하고, 일상적이고, 특별하지 않은 루틴 을 조금 더 효과적으로 관리해야할 필요성이 더욱 커지고 있다.꾸준히 연차는 차고 있는데, FE개발자로써 기술적 부족함은 더욱 커져가고 있다.꽤나 구체적인 목표를 세우고 루틴 안

2021년 2월 17일
·
0개의 댓글

2020년 회고

이미 2021년 하고도 며칠이 지났지만, 회고를 남긴다.2020년 7월에 2년반을 다닌 회사에서 나와, 이직을 했다.A사에서의 2년반은 어땠을까우선 기술부채가 굉장히 많이 쌓였고, 좋지 않은 습관이 몸에 베였다.기술부채ASP, jQuery의 기술을 주로 썼기 때문에,

2021년 1월 15일
·
0개의 댓글
post-thumbnail

vue-cli 에서 다국어 처리

vue 웹에서 다국어 처리를 하기 위해 사용한 vue-I18n에 대해 알아보자.https://kazupon.github.io/vue-i18n/vue-i18n의 공식문서를 참고하며 진행해보자설치 방법으로는그리고 vue-cli의 @/src/plugins 폴더에 플

2020년 11월 10일
·
0개의 댓글
post-thumbnail

알고리즘 PermCheck

Task descriptionA non-empty array A consisting of N integers is given.A permutation is a sequence containing each element from 1 to N once, and only o

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