ssjeu_

Emmet 이란? 강력한 자동완성 기능 등으로 HTML 작성 속도를 크게 향상시켜주는 플러그인 Emmet 문법 1. 요소(Elements) 생성 - 생성하려는 요소의 이름 입력 후 Tab을 누르면 태그가 자동 생성된다. html:5[tab] - Emmet에는 미리 정해진 태그 이름이 없기에 아무 이름으로나 태그를 생성 가능 helloworld[tab] 2. 구조화 하기 (Nesting operators) - 요소들의 구조를 간편히 생성 가능하다. 자식 요소: > 를 사용하여 생성 div>ul>li 형제 요소: + 를 사용하여 생성 div+p+bq 3.한 단계 올리기 - ^ 를 사용하여 한 단계 위에 요소 배치 div+div>p>span+em^bq 4. 반복하기 - * 를 사용하여 원하는 만큼 출력 ul>..

React에서 반응형 레이아웃을 구현하기 앞서 레이아웃을 어떻게 나눌 수 있는지 매번 고민이 있었다. 디자이너가 보통 정해주는데로 작업을 진행하겠지만, 다양한 크기의 디바이스에 따른 화면 구현이 이제는 필수적이기 때문에 해당 개념 정리가 필요하다고 생각한다. 이번 기회에 레이아웃의 종류가 어떻게 이루어져있는지와 리액트에서 반응형 레이아웃 구현에 대해 정리해보겠다. (해당 포스트는 레이아웃의 종류만 다룬다.) 1. 반응형 웹이란? (Responsive Web Sites) 반응형 웹이란 디바이스 종류에 따라 웹페이지의 크기가 자동적으로 재조정 되는 것을 말한다. 어떠한 환경에서도 그에 맞게 사이즈가 변화되어 사용자가 보기 편하며, 오직 하나의 HTML 소스 만으로 특정 장치에 최적화된 환경을 사용자에게 제공..

버블링, 캡쳐링 이벤트 위임 리액트에서 이벤트 처리 2. 이벤트 위임 하나의 부모에 이벤트를 등록하여 부모가 이벤트를 위임하는 방식이다. 하위 요소에 각각 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어한다. 동적인 요소들을 처리하기 수월하고 이벤트 핸들러를 더 적게 등록해주기 때문에 메모리를 절약할 수 있다는 장점이 있다. 하위 요소가 많아질수록 이벤트리스너를 다는 작업이 번거롭기 때문에 이벤트 위임을 사용하는 것이다. 이벤트 위임은 유사한 요소에 동일한 핸들러를 적용할 때 주로 사용하지만 꼭 이런 경우에만 사용할 수 있는 것은 아니다. 이벤트 위임은 다음과 같은 알고리즘으로 동작한다. 컨테이너에 하나의 핸들러를 할당한다. 핸들러의 event.target을 사용해 이벤트가 발생한 요소가..

버블링, 캡쳐링 이벤트 위임 리액트에서 이벤트 처리 1. 이벤트 관리 - 버블링, 캡쳐링 이벤트란? 📍 이벤트: 클릭이나 스크롤을 내리는 등 사용자와 웹페이지가 상호 작용을 하며 브라우저가 감지하는 것 이벤트는 무언가 일어났다는 신호로 모든 DOM 노드는 이런 신호를 만들어 낸다. 참고로, 이벤트는 DOM에만 한정되진 않는다. DOM Event 예시 마우스 이벤트: click(마우스 왼쪽 클릭), contextmenu(마우스 오른쪽 클릭), mouseover, mouseout, mousedown, mouseup, mousemove 키보드 이벤트: keydown(키보드 누를 때), keyup(키보드 뗄 때) 폼요소 이벤트: submit, focus CSS 이벤트: transitionend(애니메이션이 종료..

https://brunch.co.kr/@startupconsul/15 넌 참 부지런하게 사는구나 부동산투자를 하고 전자책을 발간하면서 주변에서 자주 듣고 있는 말이다. "넌 참 부지런하게 사는구나", "언제 그걸 다 해?" 이런종류의 질문들이다. 필자는 근로소득자로써 9 to 6 시간을 온전히 brunch.co.kr 단 하나는 무엇인가? 라는 물음에 스스로 답을 해보면 된다. 필자의 경우 장기적으로 월 5만원 벌기로 작은 목표를 세워두고 데일리 혹은 위클리로 무엇을 할 수 있는지를 상상하고 곧바로 실천했다. 오늘은 상품을 등록해봐야지 라고 생각했던 그 날 곧바로 시작했다. 한번 시작하면 수정사항들이 생긴다. 곧바로 수정을 하면 되었다. 단 한가지 실천이 전혀 쉬운것은 아니나 내가 생각한 그 분야에서 깊은..

리액트 상태 관리 종류를 알아보기 앞서 리액트 프로젝트에서 일반적으로 사용하는 상태(state) 를 세 가지로 구분하면 다음과 같다. Local State: 리액트 컴포넌트 안에서만 사용되는 state Global State: Global Store에 정의되어 프로젝트 어디에서나 접근할 수 있는 state Server State: 서버로부터 받아오는 state 기존에는 리덕스와 같은 상태 관리 라이브러리에 Global State와 Server State를 전부 포함하는 방법으로 프로그래밍하였다. 최근 들어 data fetching 라이브러리를 사용함으로써 상태 관리 라이브러리에서 비동기 로직(Server State)을 제거하여 관심사가 분리되고 선언적으로 프로그래밍할 수 있게 되었다! 2020년부터 Re..

https://brunch.co.kr/@startupconsul/14 잘하고있나 고민하는 당신에게 "내가 지금 잘 하고 있는건가?" 내가 지금 잘하고 있는지 주변사람들로 부터 확신을 얻길 바라는 사람들이 꽤 많다. 필자는 주변사람들로부터 확신을 얻거나 궁금해하는 사람들에게 늘 질문을 brunch.co.kr "내가 지금 잘 하고 있는건가?" 내가 지금 잘하고 있는지 주변사람들로 부터 확신을 얻길 바라는 사람들이 꽤 많다. 필자는 주변사람들로부터 확신을 얻거나 궁금해하는 사람들에게 늘 질문을 하는 편이다. 이 회사를 가는 게 맞는지 모르겠다 라는 질문을 받으면 "무엇이 제일 고민되느냐" 라고 묻고 꼬리질문을 하다보면 스스로에게 이미 답은 있다. 답정너 라는 생각이 가끔든다. 이미 답을 알고 있으면서 왜 확신..

About CORS (Cross Origin Resource Sharing) 1. CORS 란? - CORS 의미와 배경 2. CORS 동작 과정 - HTTP header과 Request 3. CORS 를 해결할 수 있는 방법 - FE와 BE 입장 1. CORS 란? 1-1. CORS의 사전적 의미 CORS는 Cross Origin Resource Sharing의 약자로 직역하면 "교차 출처 자원 공유" 이다. 출처를 교차하여 자원을 공유한다 == 다른 출처들이 서로 자원을 공유한다 이때 출처(Origin)란? URL 주소을 의미 - 출처가 같다는 것은 URL 주소에서 프로토콜(Protocol), 도메인 주소(Host), 그리고 그림에는 없는 포트 번호(Port)가 같다는 것을 의미한다. 즉, 서버의 위..