frontend8 [React] 중복된 Event Listeners 관리하기(feat. socket io) 개요 react 로 web frontend 를 개발하다 보면 어떠한 event 들을 감지하고 그에 따른 반응을 해줘야할 때가 있다. 예를 들어, 내가 현재 개발하고 있는 게임 웹 사이트에서는 게임을 추천하는 기능이 있다. 그리고 게임을 추천하면 유저에게 "게임을 추천했습니다", 혹은 "이미 추천한 게임입니다" 등의 알람을 띄워준다. 그렇다면 유저가 추천 버튼을 누르는 이벤트를 감지해서 알람을 띄워주는 반응을 하도록 개발을 하면 된다. 문제 간단해보이는 작업 같지만 나 같은 초보에게는 문젯거리가 될 수 있다. 실제로 이 기능을 구현하는 과정에서 이에 관해 겪은 문제가 있다. 바로 추천 했을 때 알람을 한 번만 띄우는 것이 아니라 여러번 띄운다는 것이다. 좀 더 디테일하게 메커니즘을 설명해보겠다. event.. 2023. 7. 31. [개발공부] HTML/CSS 독학하기 (6) [FINAL] Column with flexbox 지금까지 우리가 본 basic layout 의 box 들은 서로의 위 아래에 위치하고 있었다. 그런데 많은 경우에 우리는 단순히 위 아래 stack 이 아닌 옆으로 나열된 column 을 보고 싶을 수 있다. 그럴 때 사용하는 것이 flex 이다. display: flex; 를 스타일에 추가함으로써 child boxes 를 column 형식으로 나열할 수 있다. 다음 HTML 코드를 보자. columns div 의 child 로 세 개의 column div 들이 있다. Default 값으로는 처음 column div 아래에 다른 column div 가 오는 방식으로 layout 이 생성될 것이다. 이를 column 형식으로 만드려면 다름과 같은 CSS 코드를 사용하면 .. 2023. 7. 11. [개발공부] HTML/CSS 독학하기 (5) Basic layout Basic Layout 이라 함은 box 가 stack on another 인 상테를 말한다. 그저 박스가 쌓여있는 layout을 말하는데 지금까지 우리가 배운 것들을 활용하면 basic layout 의 webpage 를 만들 수 있다. 강의25에서도 실습을 한다. 크게 새로운 내용은 없고 몇가지만 추가해서 적겠다. Auto 만약 main 박스를 중간에 고정 시키고 싶을 때 어떻게 해야할까? 텍스트에 하던 것처럼 text-align: center; 같은게 있을까? 그렇지 않다. 박스를 위해선 margin 을 사용해야 한다. 결론부터 말하자면 다음 코드가 박스를 중간에 고정시켜줄 것이다. main { margin: 0 auto; } 위의 코드가 의미하는 바는 left, right m.. 2023. 7. 10. [개발공부] HTML/CSS 독학하기 (4) Box model / Intro 대부분의 element 들은 "block level" element 라고 한다. 그리고 다음과 같은 네가지 특성을 따른다. width of 100% of their parent height of 0 height grows to match the content stack one on top of the other 저번 블로그 마지막에 잠깐 본 친구들이 이 box level element 인 것 같다. 아직 이 친구들에 대한 디테일한 설명은 듣지 못했고 곧 바로 CSS 를 통해 위의 특성들을 확인한다. 다른 element selector 와 마찬가지로 tag 를 쓰고 { } 안에 스타일을 써주면 해당 태그에 스타일을 입힐 수 있다. e.g., header { backgroun.. 2023. 7. 9. 이전 1 2 다음
