개발여행의 블로그

JSX란? JSX는 자바스크립트의 확장 문법이다. XML과 매우 비슷하게 생겼으며, 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. function App(){ return ( Hello react ); } 위의 코드는 아래와 같이 변환된다. function App(){ return React.createElement("div", null, "Hello", React.createElement("b", null "react")); } 만약 컴포넌트를 렌더링 할 때 마다 위 코드처럼 매번 React.createElement 함수를 사용해야 한다면 매우 불편할 것이다. JSX를 사용하면 매우 편하게 UI를 렌더링할 수..

모든 element를 선택해서 해당 요소 하나하나에 eventListener를 추가한다. 모든 div box들이 click event를 감지할 수 있도록 구현했다. const boxes = document.querySelectorAll('.box'); boxes.forEach( (box) => { box.addEventListener('click', onClickBox) }); querySelectorAll로 모든 box element를 선택했다. 실행화면에서 보면 9개 각각의 박스에 click 이벤트를 감지할 수 있도록 addEventListener를 해두었다. forEach()와 addEventLisner, querySelectorAll에 대한 설명 forEach() forEach() : 메서드는 주..

컴퓨터에서도 귀여운 이모지를 사용할 수 있다. window키 + ; (쉼표) 를 누르면 사진처럼 이모티콘을 사용할 수 있다.😁 🤎🧡💛💚💙💜 이모지는 물론 Kaomoji도 사용할 수 있다 （⊙ｏ⊙） 마지막으로 특수기호도 사용할 수 있다. 윈도우 특수기호 단축키를 기억해두면 편하다!! 굉장히 유용한 윈도우 단축키이다.

Javascript로 간단한 채팅을 구현하는 중, textarea 입력창에서 shift+enter 입력 시 줄 바꿈 되어 출력되는 기능을 추가했다. ( textarea는 input text와 다르게 여러 줄의 문자열을 입력할 수 있다. ) button 클릭과 textarea enter키 입력 시 채팅 내용이 입력되도록 이벤트 처리를 먼저 해두었다. 이벤트 처리 부분 const sendBtnElement = document.querySelector(".btn-send"); const textareaElement = document.querySelector(".textarea"); sendBtnElement.addEventListener("click", () => { sendMessage() }); text..

How to change border color of textarea on :focus? textarea focus 될 때 테두리 색상 변경하기 outline-color: #FE6B8B; /** 기존 textarea border 속성 **/ .textarea { border: 2px solid rgb(213, 194, 194); } /** 기존 textarea border 속성 **/ .textarea { border: 2px solid rgb(213, 194, 194); /** outline-color 속성을 추가하면 focus될 때 테두리 색상을 지정할 수 있다.**/ outline-color: #FE6B8B; }

vscode에서 작업 시 단축키 Ctrl + Shift + L 로 변수명 여러 개를 동시에 변경할 수 있다. 이미 작성 완료한 코드의 변수명을 하나씩 바꾸는 것은 실수가 발생할 위험도 있고 시간도 오래 걸리기에 유용하게 쓰는 단축키 이다. 1. 수정할 변수를 드래그 혹은 더블 클릭하여 선택 2. 단축키 Ctrl + Shift + L 를 누르면 다중 선택이 완료 3. 수정