아싸지만 1일1글 하고싶어

목차 react의 hook에 대해 정리할려 했는데, 정리할려하니 life Cycle에 대하여 서술한 뒤 정리하여야 처음보는사람이 이해하기 쉬울 것 같아 먼저 적게되었다. life Cycle 생명주기 라는 뜻으로 코드를 브라우저로 출력하는 랜더링 과정이 진행될때의 순서를 말한다. React Lifecycle Methods diagram Fully interactive and accessible React Lifecycle Methods diagram. projects.wojtekmaj.pl React 공식 홈페이지의 링크를 타면 정리가 잘 된 사이트를 볼 수 있다. 우리가 자주 쓰는 생명주기는 과정 끝의 componentDidMount componentDidUpdate 이 두가지이다. ComponentDi..

목차 저번에 가상셀렉터에 대하여 포스팅했었는데 가상셀렉터 목차 가상셀렉터 우리가 css에서 콘텐츠 를 선택 하는 것을 모두 셀렉터 라 한다. *, body, .class, #id, .class::nth-of-type(2){ padding:0; } 여기서 가상이 붙은 것이 가상셀렉터 인데, 말 그대로 실제 하지.. sirong.tistory.com 가상셀렉터는 icon 생성하는데 많이 쓴다. 호버나 클릭 시 같은 건 Js 배우면 eventListener에서 좀 더 세세한 설정이 가능해서 그걸 많이 쓴다고 생각한다. eventlistener 목차 EventListener 사용자가 어떤 행동(event)을 했을 때, 반응하여(listener) 지정된 행동을 하는 것을 eventlistener라 한다. Even..

목차 후후... promise 다음에 바로 Async / await 써버리기!! 이렇게 연계되는 건 바로바로 써주는 게 독자에 대한 배려 아니겠슴까!! Async / await Async는 비동기 작업 그 자체인 문법이다. Async함수 안에 await를 쓰고 비동기 작업을 시작하면, 해당 await 비동기 요청까지만 코드가 진행된 뒤, 다른 작업을 진행한다. 비동기 작업이 끝난 뒤 다시 이어서 Async함수가 재개된다. 이거 모를 때는 플래그를 썼었는데... 플래그 변수 선언이 하나둘씩 늘어갈수록 보기 안 좋다. 초기화도 시켜줘야 하고ㅜ 무엇보다 if문으로 너저분해진다. function After2s() { return new Promise(resolve => { setTimeout(() => { re..

목차 async / wait 함수에 대하여 자세하게 다룰 예정이었는데, 구글링 하다 보니 promise에 대하여 다루다가 본제로 넘어갈 것 같아서 그냥 promise를 먼저 다루기로 했다. Promise Promise란 비동기 작업의 결과를 나타내는 object이다. 비동기란 간단하게 말하면, 작업을 요청한 뒤 응답이 올 때까지 다음 코드를 진행하는 방식을 뜻한다. promise는 요청에 대한 응답으로써, 두 가지로 구성되어있다. 상태 상태에는 세 가지가 있다. Pending(대기) : 작업이 완료되지 않았을 때, 진행중일때 Fulfilled(이행) : 작업이 완료되어 응답을 했을 때 Rejected(실패) : 작업을 실패하였을 때 그림을 살펴보면 대기상태에서 작업이 처리(settled) 됐을 때, 성공..

목차 가상셀렉터 우리가 css에서 콘텐츠 를 선택 하는 것을 모두 셀렉터 라 한다. *, body, .class, #id, .class::nth-of-type(2){ padding:0; } 여기서 가상이 붙은 것이 가상셀렉터 인데, 말 그대로 실제 하지 않는 것 을 선택 하는 것이다. 예로 들어 class a태그에 마우스를 올렸을 때, .a:hover{ background: purple; } class a 태그의 이전에, .a::before{ background: purple; } 는 실제로 존재하는 태그가 아니다. 만들어진(마크업 된) 실제 요소가 아닌 가상의 요소 를 정하여 이를 설정 하는 것 이 가상 셀렉터의 역할이다. 구글링을 하면서 알게 된 게, 가상 요소(pseudo-element)와 가상 클..

목차 ... styled-component에 대해 쓸려고 기본적 구글링을 하는데 혼란스러웠다... 뭔가.. 앞뒤가 맞지 않는 정보가 많았다... 그만큼 내 글이 더 도움이 된다는 뜻이지!! (무~~ 야~~~ 호~~~) 내일 포스트 할 땐 무야호 드립으로 시작해보자. 밈이 시들어지기 전에 장점 뭐든 간에 왜 배워야 하는지 동기부여가 잘되야 귀에 잘 들어간다 멋진 거 배우면 어깨에 힘들어가자너!! 인기 언어를 배울 때 제일 중요한 건 인기 아닐까, 좋으니깐 다들 몰려들고, 몰려드니깐 일자리 많이 생기고, 커뮤니케이션도 많고!! 위의 그래프는 styled-component와 같은 종류인 css-in-js 패키지 사용량을 통계 낸 것이다. styled-component가 꾸준히 1위를 차지하고 있다. aphro..

목차 코딩을 하다 보면 지연시간을 주고 싶을 때가 생긴다. 기능 간의 타이밍을 맞추기 위해서... 는 그냥 플래그 넣으면 되겠고, 아무래도 UX인 경우가 많겠다. 사용자가 몇초이상 꾸-욱 눌렀을 때, 어떤 주의사항을 몇 초 동안 보여준 뒤 버튼을 보여준다던가. 또한, 마우스를 콘텐츠 위에 올렸을 때 바로 함수를 실행시키기보다 1초 정도 유지하면 함수를 실행시키는 게 사용자의 의지를 더 반영할 수 있을 것이다. setTimeout() setTimeout은 지정시간 뒤, 해당 함수를 실행하는 함수이다. setTimeout(() => { alert("2초!!"); // 실행 코드 }, 2000); // 설정시간 설정시간은 ms단위로써, 1s = 1000ms이다. 이렇게 간단한 코드는 한 줄로써, 여러 줄의 실..

목차 프런트 앤드를 만들다 보면, 한 가지 페이지를 넘어 여러 가지 페이지를 넘나들어야 할 때가 많다. 이를 위해 react-routing을 배워보자 react-router react의 장점은 component 구조로 인해, 부분적 변화를 효율적으로 반영 할 수 있다는 것이다. 그리고 react-router에서 그 장점을 극대화할 수 있는데, 기존에 페이지 이동을 하려면, 새로고침이 필수였다. 하지만 react 를 사용함에 따라, 컴포넌트 업데이트를 통하여 새로고침을 하지 않아도 페이지를 이동 할 수 있게 된다. 여기에 react-router를 사용함에 따라, 방금 말한 react의 장점을 더하여, 페이지 이동에서의 필요한 기능만을 사용 할 수 있게 된 것이다. 사용 먼저, react-router-dom..