본문 바로가기

분류 전체보기346

React(75) shift + enter 줄바꿈 (feat. 두번씩 출력되는 버그처리) Updated 08/22/22 채팅창에 메시지를 입력할 때, 엔터키를 치면 전송이 되는 기능과 + [ shift + 엔터키 ] 로 줄바꿈을 하는 기능 요렇게 두가지를 동시에 구현 중이다. 이 기능들은 키보드 이벤트를 알아야 구현을 할 수 있다. 그럼 이제 구현하러 가보자 Hoxy 자바스크립트의 키보드 이벤트에 대해 자세한 개념이 궁금하시다면 ? ( ↓↓↓ 아래포스팅을 확인하세요) JavaScript - KeyDown / KeyPress / KeyUp 이벤트 메시지 입력창에서 엔터키로 메시지 전송을 할 때나 줄바꿈을 할 때 키보드 이벤트를 사용하게 된다. 대표적인 키보드 이벤트인 keyDown / keyPress / KeyUp 에 대해서 정확히 알고싶어서 공부해보았다 devbirdfeet.tistory.c.. 2022. 6. 26.
JavaScript - KeyDown / KeyPress / KeyUp 이벤트 메시지 입력창에서 엔터키로 메시지 전송을 할 때나 줄바꿈을 할 때 키보드 이벤트를 사용하게 된다. 대표적인 키보드 이벤트인 keyDown / keyPress / KeyUp 에 대해서 정확히 알고싶어서 공부해보았다. JavaScript - KeyDown / KeyPress / KeyUp 이벤트 keyDown 키보드를 누를 때 + 계속 누르고 있는 경우 실행 (아무 키나 다 반응) keyPress 키보드를 누를 때 + 계속 누르고 있는 경우 실행 (text 입력되는 키만 반응 - 방향키, 탭 같은 거 제외) keyUp 키보드를 눌렀다가 키에서 손을 뗄 때 실행 Key 이벤트 동작 순서 key event 사이의 동작 순서는 다음과 같다. keydown → keypress → keyup 하지만, 실제 글자가 입.. 2022. 6. 22.
React(74) StoryBook으로 UI 컴포넌트 작업하기 스토리북은 UI 컴포넌트 개발을 위한 툴이다. 공통으로 사용되는 UI 컴포넌트들을 개발할 때, 스토리북을 localhost 로 띄워놓고 디자인을 직접 확인할 수 있다. 원래 SPA에서 웹으로 ui 컴포넌트를 만들려면 이것저것 세팅을 해야한다. 특히 공통 컴포넌트로 만드려고 하면 기능도 고려를 해야하니 더 손이 많이 간다. (컴포넌트들로 레이아웃도 만들고 그안에 또 ui 컴포넌트 만들어서 사이즈 맞춰서 집어넣고 등등등 귀찮다) 스토리북을 활용하면 간단하게 로컬호스트로 스토리북을 띄워놓고 거기에 테스트할 디자인 컴포넌트를 추가하면 화면으로 ui 요소만 즉각즉각 확인할 수 있다. React(74) StoryBook 에서 UI 컴포넌트 작업하기 npm 으로 스토리북 설치 후, 셋업은 마친 상황이다. Slider.. 2022. 6. 20.
안드로이드 - ADB 로 웹모바일뷰 디버깅 하기(USB연결) QA 하다가 막상 웹 브라우저에서 확인할 때와는 달리 휴대폰에서만 제대로 적용되지 않는 속성들을 발견했다. 하필 나의 갤럭시 A9 은 10 이었기 때문에(폰밍아웃) 무선기능이 되지 않아(11 이후 가능) USB 디버깅만 가능한 상태였다. 하지만 포기하려는 찰나 CTO님의 도우심으로 세팅을 무사히 끝내게 되었다 좋은 건 같이봐야하기 때문에 이 포스팅을 기록해본다 안드로이드 - ADB 로 웹모바일뷰 디버깅 하기 0. 휴대폰에서 개발자 도구 활성화하기 이건 이미 다른 블로그들에서 친절하게 설명이 잘 나와있다. 구글링으로 얼른 갤럭시 개발자도구 키고 돌아오시라 1. ADB 다운받기 (Mac용) https://developer.android.com/studio/releases/platform-tools SDK 플.. 2022. 6. 17.
React - useState 동작원리 이해하기 다음은 웹 브라우저 접속부터 - 페이지 내의 리액트 코드 동작까지의 과정을 순서대로 정리한 포스팅이다. 1. DNS 이해하기 Network - DNS 이해하기 + 기본 동작원리 요즘 가장 큰 고민은 브라우저와 react 의 동작원리 자체에 대한 이해도가 부족하다는 것이다. 며칠 전 발생했던 이슈가 motivation 이 되어 제대로 공부를 해보기로하고 이렇게 포스팅을 해본다. 한 devbirdfeet.tistory.com 2. 브라우저 렌더링 이해하기 Network - 브라우저 렌더링 이해하기(Feat. Virtual Dom) 요즘 가장 큰 고민은 브라우저와 react 의 동작원리 자체에 대한 이해도가 부족하다는 것이다. 며칠 전 발생했던 이슈가 motivation 이 되어 제대로 공부를 해보기로하고 이.. 2022. 6. 15.
React- 가상돔(Virtual DOM) 이해하기 리액트 동작원리를 찾다보니 가상돔에 대한 이야기를 참 많이 들었다. DOM 에 대한 개념을 알고 있지만 가상돔은 생소한 개념이었다. 얘의 정체를 하나하나 공부해보자. 다음은 웹 브라우저 접속부터 - 페이지 내의 리액트 코드 동작까지의 과정을 순서대로 정리한 포스팅이다. 1. DNS 이해하기 Network - DNS 이해하기 + 기본 동작원리 요즘 가장 큰 고민은 브라우저와 react 의 동작원리 자체에 대한 이해도가 부족하다는 것이다. 며칠 전 발생했던 이슈가 motivation 이 되어 제대로 공부를 해보기로하고 이렇게 포스팅을 해본다. 한 devbirdfeet.tistory.com 2. 브라우저 렌더링 이해하기 Network - 브라우저 렌더링 이해하기(Feat. Virtual Dom) 요즘 가장 큰.. 2022. 6. 11.
JavaScript - 배열에서 원하는 인덱스만 삭제하기 (Splice / Filter) 예전에 내장함수들 공부할때 기초는 기초일뿐 이라고 생각하였던 적이 있다. 하지만 실무에서 배열을 동적으로 삭제하는 경우에는 보통 인덱스를 많이 사용한다. 그래서 다시한번 가장 기초적인 배열 함수 splice 와 filter 을 한번 더 정리해보았다. 실제로 응용했던 코드가 궁금하시다면? (아래 포스팅 클릭 ↓↓↓) React(72) map()으로 input 추가 삭제하기 CRUD 를 그리다 보면 의 자유로운 추가 삭제 기능이 필요할 때가 있다. 비슷한 기능을 3번째 구현하면서, 잊지 않기 위해 기록으로 남겨본다. React(72) map()으로 input 추가 삭제하기 1. Input 입력값 devbirdfeet.tistory.com splice vs slice 기억이 가물가물하시다면...? (아래 기초.. 2022. 6. 8.
Network - 브라우저 렌더링 이해하기(Feat. Virtual Dom) updated 01/12/24 요즘 가장 큰 고민은 브라우저와 react 의 동작원리 자체에 대한 이해도가 부족하다는 것이다. 며칠 전 발생했던 이슈가 motivation 이 되어 제대로 공부를 해보기로하고 이렇게 포스팅을 해본다. 한 포스팅 한 포스팅 쌓아가다보면 지식이 쌓이지 않을지 기대해본다. 다음은 웹 브라우저 접속부터 - 페이지 내의 리액트 코드 동작까지의 과정을 정리한 포스팅이다. 1. DNS 이해하기 Network - DNS 이해하기 + 기본 동작원리 요즘 가장 큰 고민은 브라우저와 react 의 동작원리 자체에 대한 이해도가 부족하다는 것이다. 며칠 전 발생했던 이슈가 motivation 이 되어 제대로 공부를 해보기로하고 이렇게 포스팅을 해본다. 한 devbirdfeet.tistory.c.. 2022. 6. 6.
Network - DNS 이해하기 + 기본 동작원리 요즘 가장 큰 고민은 브라우저와 react 의 동작원리 자체에 대한 이해도가 부족하다는 것이다. 며칠 전 발생했던 이슈가 motivation 이 되어 제대로 공부를 해보기로하고 이렇게 포스팅을 해본다. 한 포스팅 한 포스팅 쌓아가다보면 지식이 쌓이지 않을지 기대해본다. 다음은 웹 브라우저 접속부터 - 페이지 내의 리액트 코드 동작까지의 과정을 정리한 포스팅이다. 1. DNS 이해하기 Network - DNS 이해하기 + 기본 동작원리 요즘 가장 큰 고민은 브라우저와 react 의 동작원리 자체에 대한 이해도가 부족하다는 것이다. 며칠 전 발생했던 이슈가 motivation 이 되어 제대로 공부를 해보기로하고 이렇게 포스팅을 해본다. 한 devbirdfeet.tistory.com 2. 브라우저 렌더링 이해.. 2022. 6. 5.
반응형

티스토리툴바