profile
21c Carpenter
태그 목록
전체보기 (90)JavaScript(43)javascript30(30)React(11)CSS(6)WeCode(5)react.js(4)fixed(3)react native(3)git(3)리액트(3)project(2)video(2)absolute(2)linux(2)cloning(2)regex(2)background(2)styled component(2)array method(2)Spread Syntax(2)addEventListener(2)html(2)westagram(2)정규표현식(2)github(2)CallStack(2)regular expression(2)인증(1)mixin(1)cors(1)인가(1)increment operator(1)position(1)sticky(1)Root(1)immutablility(1)data-속성(1)promise(1)실습(1)sql(1)중앙정렬(1)splice 음수 인자(1)github 실무(1)terminal(1)불변성(1)Center(1)type change(1)clock(1)relative(1)Component Structure(1)Restful(1)Primitive Type(1)rebase(1)로딩화면(1)List(1)http(1)동적 라우팅(1)propagation(1)Cross-Origin Resource Sharing(1)무한스크롤(1)extending style(1)REST(1)코어자바스크립트(1)heap(1)movemove(1)object 순회하기(1)Location(1)Request(1)Response(1)once(1)전개구문(1)lifecycle(1)slider(1)document.documentElement(1)loading indicator(1)유사배열(1)styleWe(1)형변환(1)getBoundingClientRect(1)SpeechAPI(1)shiftKey(1)email multi choice(1)router(1)float(1)이미지경로(1)webcam(1)라이프사이클(1)null(1)cue(1)scrollLeft(1)img(1)match(1)Fetch API(1)async(1)class(1)Flex(1)&&(1)EventLoop(1)stringToNumber(1)textConent(1)authentification(1)nodeList(1)e.preventDefault()(1)login(1)git flow(1)Reference Type(1)bootcamp(1)Generic(1)클론프로젝트(1)classList(1)당근마켓(1)공식문서(1)REST API(1)speechRecognition(1)scroll(1)countdown(1)const(1)let(1)class101(1)text-shawdow(1)NODE_PATH(1)회원가입(1)key stretching(1)통신지연(1)bcrypt(1)두더지잡기(1)extend(1)auto scroll(1)key(1)instagram(1)독서후기(1)callback Hell(1)clickevent(1)local storage(1)authorization(1)개발자도구(1)복수선택(1)useRef(1)inline block(1)setInterval(1)history(1)event bubbling(1)격투 게임기 기술(1)styled components(1)dev tool(1)semantic(1)clone(1)DevTools(1)Context API(1)Expo(1)reduce(1)Single Thread(1)EventListener(1)innerText(1)key sequence(1)watchPosition(1)block(1)작성중(1)styleshare(1)inline(1)InnerHTML(1)strict mode(1)음성인식(1)array(1)extends(1)super(1)프로젝트(1)react typescript(1)spa(1)geolocation(1)숫자야구 게임(1)nosql(1)db(1)크롬 개발자도구(1)speech synthesis API(1)RDBMS(1)아날로그 시계(1)best practice(1)salting(1)리액트 구조설계(1)event delegation(1)HTMLCollection(1)Database(1)Map(1)Math.random(1)regexp(1)import not working(1)portfolio(1)Reactm(1)위코드(1)pageX(1)playbackRate(1)mobx(1)redux(1)절대경로(1)mockdata(1)audio(1)speech(1)capture(1)react router(1)scope(1)Pagenation(1)canvas(1)typescript(1)객체 불변성(1)flex panel(1)랜덤숫자뽑기(1)로그인(1)signup(1)Cheat Sheet(1)undefined(1)

자주쓰는 정규표현식s

/^\[0-9a-zA-Z](\[-\_.]?\[0-9a-zA-Z])\*@\[0-9a-zA-Z](\[-\_.]?\[0-9a-zA-Z])\*.\[a-zA-Z]{2,3}$/i;

5일 전
·
0개의 댓글

styled component에 mixin 사용하기

Sass에서 가장 유용한 기능 중에 하나는 @mixin 과 @import을 통해 변수화된 스타일링 속성을 재사용임styled-component 공식 문서에는 의외로 이에 대한 구체적인 설명이 없었음themeProvider로 전역 변수로 사용되는 theme 내부에 자주

5일 전
·
0개의 댓글
post-thumbnail

styled component에서 import 사용 시 style 적용 안 되는 경우

styled component를 재활용하기 위하여 단위 컴포넌트를 만든 후, 다른 컴포넌트에서 import 하여 사용하려는 경우, 스타일링 적용안되는 현상 발생className을 포함하고 있어야 함https://styled-components.com/docs/

2021년 5월 4일
·
0개의 댓글

React Router 공식문서 번역 및 정리

APIs Hooks useHistory() > props.history와 동일 useLocation() > props.Location과 동일 useParams() > props.match.params와 동일 useRouteMatch() > string 형태의 pa

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

React 에서 state의 불변성

아래의 코드는 React 공식 문서에 나와 있는 예시임아래의 경우처럼, 이미 존재하는 state 값(squares 배열) 내의 squares\[i]로 직접 접근하여 업데이트 하지 않고, slice()로 전체 복사본을 만든 다음, 업데이트된 부분을 반영시킨 후, 전체를

2021년 4월 30일
·
0개의 댓글

CSS - fixed position에서 중앙정렬

css 속성에서 position:fixed는 absolute와 마찬가지로 해당 element는 전체 css flow에서 벗어나게 된다.이럴 경우 통상 중앙정렬 방법인 margin:auto나 flex box에서 justify-content:center / align-it

2021년 4월 23일
·
0개의 댓글
post-thumbnail

Auto Scroll (feat. useRef()) - React

페이지 상단 가로슬라이드의 A~Z 까지의 h1 문자 클릭 시, 하위의 해당 영역까지 자동 스크롤 하는 기능을 구현하고자 하였음바닐라 자바스크립트에서는 anchor tag 이용해서 쉽게 가능하고, React 자동 scroll 라이브러리 적용하면 쉽게 구현가능하지만, me

2021년 4월 23일
·
0개의 댓글

(React) 통신에 의한 시간 지연에 대한 로딩화면 띄우기

fetch를 통한 ProductList 데이터를 불러오는 시간이 불규칙적이고, 오래 걸리는 경우 3초이상도 걸리는 경우가 생김이러한 경우에도, 사용자에게는 현재 로딩 중임을 시각적으로 알릴 필요가 있음참고사이트 (react-promise-tracker)npm insta

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

다른 컴포넌트를 가져와서 extending styled-component 작성 시 스타일 적용 안되는 경우

아래와 같이, Nav 파일의 NavLogo는 Nav를 import해서 extending 형식으로 width를 설정하려고 하지만, 적용 안됨공식문서를 살펴본 결과, 아래와 같이 className을 넣어야 적용된다고 나와있음Logo.js 파일을 아래와 같이 수정한 결과 작

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

"CORS"?

AWS S3에 저장되어 있는 json 데이터를 fetch로 불러오려고 시도했더니,아래와 같은 에러메세지가 나왔다.몇몇 글들을 읽어본 결과,Origin이란 프로토콜, 주소, 포트번호의 쌍을 말한다.결국, 요청을 보낸 측의 origin(http://localhos

2021년 4월 16일
·
0개의 댓글

[책 요약] 코어 자바스크립트

(1) primitive(원시형) : number, string, boolean, null, undefined ... (2) reference(참조형) : object, Array, Function, Date, RegExp...원시형은 값이 담긴 주소값을 바로 복제

2021년 4월 14일
·
0개의 댓글

React Component 작성 - Best Practice에 대하여.. (Updating)

React의 기본 이론과 원리에 대한 이해를 통해, React 기반 웹 페이지와 기능 구현에는 어느정도 자신감이 생겼다.단지, '된다'의 수준을 넘어, '더 나은 컴포넌트 구조가 뭘까?'라는 고민을 하게 되었다.이에 관한 몇 가지 서치를 했고, 이를 종합하여 나름 정리

2021년 4월 14일
·
0개의 댓글

TypeScript

TypeScript란? > - TypeScript는 JS의 static type checker(코드 실행 없이, error를 detect)임 TypeScript는 Typed Superset of JS (JS 코드를 그대로 오류 없이 실행 가능) 실무에서 많은 경우의 오

2021년 4월 13일
·
0개의 댓글
post-thumbnail

React 상태 관리 Tool 사용 & 비교 - (Redux VS MobX VS Context API)

1. Context API https://ko.reactjs.org/docs/context.html#when-to-use-context https://www.youtube.com/watch?v=5LrDIWkK_Bc context는 React 컴포넌트 트리

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

당근마켓 프로젝트

당근마켓 클로닝 프로젝트- 리액트 네이티브

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

React 구조 설계 방법

출처: https://ko.reactjs.org/docs/thinking-in-react.html무엇이 컴포넌트가 되어야 하는가?는 "단일 책임 원칙"(하나의 컴포넌트는 한가지 기능 만)에 따라각 컴포넌트를 계층적으로(부모-자식) 표현state는 시간이 지남에

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

'CLASS404' 프로젝트

Styled Component

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

Git flow와 Rebase

rebase는 결국 서로다른 branch끼리 merge하는 측면에서, merge와 유사한 개념임2차프로젝트부터는 merge할 필요가 없음 (rebase로 대체)📍 불필요한 merge commit 생성모든 feature branch마다 “merge commit” 이 남

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

Pagenation

qurey parameter는 url 뒤에 원하는 데이터에 대한 요구 조건임 기능 구현 하다보면 URL Query Parameter 값을 가져와야 하는 경우가 발생합니다. 이 때 다양한 방법으로 값을 가져올 수 있지만 location.search 를 이용해서 바로 값

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

동적 라우팅 & REST API

https://velog.io/@joonsikyang/React-Project-URL-parameters-Query-parametersspa에서 활용 필요상세페이지 이동 시 활용라우터에 연결되어 있는 component에서 this.props를 찍으면(react

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