react에서 style 모듈로 사용해서 중복 줄이기

react프로젝트에서 사용되는 styled-components 모듈을 이용해, 반복되는 스타일 코드를 줄이고, 모듈화 할 수 있는 두가지 방법에 대해 알아보자.첫번째는 css 스타일을 변수로 생성하는 방법두번째는 스타일을 컴포넌트로 생성하는 방법이다.첫번째방법반복적으로

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

white-space, cookie-expires, vue-native

white-spacewhite-space 속성은 요소가 공백 문자를 처리하는 법을 지정한다.Cookie에 expire time 추가쿠키의 expires값을 추가할때는 toUTCString를 해야한다.mdn을 통해 expires값은 GMTString-format으로 추가

2021년 8월 12일
·
0개의 댓글
post-thumbnail

nuxt babel 오류

nuxt 오류Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-

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

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개의 댓글