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

목차 가상셀렉터 우리가 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..

react-router에서 useLocation을 쓰는데 계속 버그가 나서 구글링 하던도중 import를 react-router-dom으로 바꾸니 해결되었다. 차이가 무엇인지 궁금하여 찾아보니, react-router vs react-router-dom, when to use one or the other? Both have Route, Link, etc. When to use one or the other? I'm really confused on where to use each one. Server side? Client side? https://reacttraining.com/react-router/ In some examples you need... stackoverflow.com react-ro..

목차 코딩을 하다 보면 지연시간을 주고 싶을 때가 생긴다. 기능 간의 타이밍을 맞추기 위해서... 는 그냥 플래그 넣으면 되겠고, 아무래도 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..

목차 오늘 서버 쪽 코드를 패치하면서 클라이언트 쪽으로 데이터를 건네줄 때 여러 함수가 있고, 이 함수들이 어떤 차이를 갖고 있는지 알아보았다. 엄마는 우리 아가(코드)가 최고였음 좋겠어!!! write write는 추가 프레임워크 express 없이, 기본 모듈인 http만으로 가능한 기초 전송 함수이다. 특징으로는 여러 번 보낼 수 있다.(호출할 수 있다) 하지만 장점이자 단점으로 head 와 전송을 끝낸다는 end함수를 직접 지정 해줘야 한다는 점이 있다. const http = require('http'); http.createServer(onRequest).listen(8080, madeServer); function madeServer(){ console.log("8080 서버를 만듬!"); ..

목차 EventListener 사용자가 어떤 행동(event)을 했을 때, 반응하여(listener) 지정된 행동을 하는 것을 eventlistener라 한다. Event 종류 종류는.. 그냥 모든 것이라 할 수 있다. 대충 말하는 게 아니라 진짜 모든 것이다. 마우스 클릭부터, 마우스를 움직였을 때, 스크롤했을 때, 심지어 브라우저의 크기를 변경했을 때까지 있다. 이벤트 참조 | MDN 이벤트 참조 DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 developer.mozilla.org 처음에는 너무 높은 자유도에, 더불어 활용을 떠올리기 쉽지 않다. 그러니 자주 쓰이는 li..

여러 가지 버튼을 만들고 각각의 버튼에 따라 다른 효과를 내기 위해, switch가 필요하게 되었다. 그런데 뭔가 switch보다 더 이쁘게 쓰고 싶어 찾아보다가 enum을 알게 되어 포스팅하게 되었다. Switch 일단 enum과 비교할 겸 switch를 한번 짚고 넘어가자! switch는 지정 변숫값에 따라 여러 결과를 나타낼 수 있는 분기문(상황에 따라 달라지는 문장)이다. 일단 html은 기본값으로 넣고 Js 불러오기 외에는 기본값이다. let choice = 1; switch(choice){ case 0 : document.body.style.background = 'tomato'; break; case 1 : document.body.style.background = 'skyblue'; bre..