내가해냄

무슨 일이 있었나요? mqtt 통신을 해야할 일이 있어 mqtt.js를 사용하여 mqtt 통신을 시도했음. 처음에 EMQX에서 제공하는 public broker에 연결했을 때 subscribe, publish 모두 잘되는 것을 확인한 후 OK 되는구나하고 넘겼는데 다른분이 mosquitto로 구축하신 broker와 연결했더니 나를 반기는 에러... WebSocket connection to failed 열심히 삽질을 하다가 MQTTX를 쓰면서 힌트를 얻었는데.. MQTTX에서 broker와 연결할 때 ws:로 했을 때는 안됐는데 mqtt: 로 설정하니 잘되는 것.. 이때 슬슬 집나간 눈치가 돌아왔고 다른 블로그를 통해서 mosquitto는 웹소켓 통신을 하기 위해서 추가 설정이 필요한걸 알았음.. 결론 ..

Light House (before) : Loading Properly size images : 이미지를 적절한 사이즈로 압축하여 로드 타임 최적화 ㄴ 실제 사용되는 너비보다 2배 큰 사이즈로 width, height를 지정하는 것이 적절함 ex) 사진이 차지하는 픽셀이 120x120이라면 240으로 지정 how to solve? CDN(Contents Delivery Network) : 소비자와 가까운 곳에 컨텐츠 서버를 두는 기술 Image CDN(image processing CDN) : CDN + 이미지를 가공해서(처리 과정을 거침) 사용자에게 전해줌 > imgIX라는 이미지 CDN 서비스를 사용할 수 있음 > unsplash같은 사이트에서 사진을 가져올 경우 파라미터 width, height 조..

인트로 라이브러리 없이 캐러셀을 구현하려고 합니다. 현재는 앞 뒤로 움직이는 버튼이 없이 자동으로 이미지가 오른쪽에서 왼쪽으로 스와이프 되는 모습입니다. 오른쪽에서 왼쪽으로 넘어가는 애니메이션이 없을 때는 버튼을 통해 이동할 수 있었으나 애니메이션을 추가했을 때 원하는 동작을 얻지 못해 제거하였습니다. 버튼은 다음에 추가할 예정입니다. 동작 모습 코드 전체코드 더보기 import { TMDB_IMG_URL, CAROUSEL_DELAY, CAROUSEL_LENGTH_LIMIT, CATEGORY, TRANSITION_TIME, } from '../../Assets/ConstantValue'; function Carousel() { const [imgArr, setImgArr] = useState(null);..

인트로 함수형 컴포넌트 렌더링 순서에 대해 다뤄봤습니다. 클래스 컴포넌트의 생명주기 클래스 컴포넌트의 생명주기에 대해 알고 가면 더 쉽게 이해할 수 있습니다. 📌 생명주기 순서 컴포넌트 실행 constructor() 실행 : 렌더링(DOM 생성) 이전에 수행되는 생성자 메서드 render() 실행 : 미리 구현한 HTML을 화면상에 보여줌 componentDidMount() 실행 : 렌더링이 수행된 이후에 실행됨 컴포넌트에 변화가 있을 때 componentDidUpdate() 실행 update가 발생하는 경우 props가 변경된 경우 state가 변경된 경우 부모 컴포넌트의 리렌더링 foreUpdate 강제로 변경하는 경우 컴포넌트가 제거될 때 componentWillUnmount() 실행 클래스형과 함..

인트로 실행 컨텍스트 내용 본 지도 오래됐고 스터디 발표 준비를 하기 위해서 실행 컨텍스트를 다시 한번 펴봅니다 표라던가.. 뭐가 좀 많네요... 실행 컨텍스트를 알면... 실행 컨텍스트를 한 번 알면 자바스크립트가 왜 그렇게 동작하는 이해할 수 있습니다. 식별자 바인딩, 호이스팅이 발생하는 이유, 클로저 동작방식, 비동기 처리 동작 방식... 등 실행 컨텍스트에 대해 알고 나면 실행 컨텍스트를 몰랐을 때는 예측할 수 없었던 동작들을 예측할 수 있게 됩니다. 처음 읽었을 때는 정말 어지러웠지만 알고 나니 매우 유용한 친구였습니다. 소스코드 타입에 따른 실행 컨텍스트 생성 전역 코드 - 전역에 정의된 함수, 클래스 등의 내부 코드는 포함X 전역 실행 컨텍스트 함수 코드 - 함수 내부에 중첩된 함수, 클래스..

인트로 부트캠프 advanced 과제 진행 중 advanced에서도 또다시 도전하기 과제가 있더라고요. 키보드 방향으로 자동검색(drop down) 항목을 선택할 수 있도록 하는 거였습니다. 과제가 생각보다 빨리 끝났기 때문에 도전해 봤습니다. 키보드로 드롭다운 선택할 수 있게 해주는 라이브러리가 있었지만 직접 ref를 사용해서 해보기로 했습니다. 결과 어떻게든 구현은 할 수 있었습니다. 컴포넌트에 ref를 넘겨야 해서 forwardRef를 써야 하더라고요. 고정된 틀에서 구현을 해야 해서 그런지 더 헷갈리고 복잡했습니다. 코드 자동검색 목록의 경우 객체를 사용하여 임시로 완성되어 있습니다. css의 경우 styled-Component로 적용하였습니다. //자동검색을 위한 임시 목록들 const dese..

인트로 오늘은 portal에 대해서 알아보겠습니다. 너무 힘들어서 별 말없이 바로 시작하겠습니다.. 나 파이팅.. 왜 사용하나요? createPortal을 사용하면 자식을 원하는 위치에 렌더링 시킬 수 있습니다. 여기서 자식은 react로 렌더링 할 수 있는 모든 것을 말합니다. createPortal을 사용하면 어떤 컨테이너에 있든 'escape'가 가능합니다. 또한 이벤트 버블링 문제를 해결할 수 있으며 Z-index 관리가 편하다 등의 장점이 있습니다. createPortal(children, domNode) createProtal을 사용해서 portal을 만들 수 있습니다. import ReactDOM from 'react-dom'; //컴포넌트 // return 내부 { ReactDOM.crea..

인트로 이메일을 클릭했을 때 복사하는 기능을 만들어봤습니다. Clipboard API를 사용해서 아주 간단하게 해결할 수 있었습니다. Clipboard: writeText() 인자로 넣어준 텍스트 문자열을 시스템 클립보드(복사한 데이터를 저장해줌)에 저장합니다. read()나 readText()를 사용해서 저장한 문자열을 다시 읽을 수 있습니다. 전체코드 //컴포넌트 함수 내부 const copyEmail = async (email) => { await navigator.clipboard.writeText(email); alert("이메일 복사에 성공했습니다"); }; //return { copyEmail("당신의 이메일"); }} > email : 당신의 이메일 결과 강제로 내 이메일 심기 완료