인기 글
[mqtt.js, mosquitto] WebSocket connection to failed
[mqtt.js, mosquitto] WebSocket connection to failed
삽질노트
2024.01.26 14:20
무슨 일이 있었나요?mqtt 통신을 해야할 일이 있어 mqtt.js를 사용하여 mqtt 통신을 시도했음.처음에 EMQX에서 제공하는 public broker에 연결했을 때 subscribe, publish 모두 잘되는 것을 확인한 후 OK 되는구나하고 넘겼는데다른분이 mosquitto로 구축하신 broker와 연결했더니 나를 반기는 에러...WebSocket connection to failed 열심히 삽질을 하다가 MQTTX를 쓰면서 힌트를 얻었는데.. MQTTX에서 broker와 연결할 때 ws:로 했을 때는 안됐는데 mqtt: 로 설정하니 잘되는 것.. 이때 슬슬 집나간 눈치가 돌아왔고 다른 블로그를 통해서 mosquitto는 웹소켓 통신을 하기 위해서 추가 설정이 필요한걸 알았음.. 결론알고보..
react에서 proxy설정하기(http-proxy-middleware)
react에서 proxy설정하기(http-proxy-middleware)
BootCamp
2023.06.07 15:21
인트로오늘은 클라이언트에서 프록시를 설정하여 CORS 오류를 방지하는 실습을 진행했습니다.간단하게 package.json을 통해 설정할 수도 있지만 이번 포스트에서는 http-proxy-middleware를 사용해 여러 개의 도메인에서 응답을 받아오는 경우를 다뤄보겠습니다.설정npm install http-proxy-middleware//src/setupProxy.jsconst { createProxyMiddleware } = require("http-proxy-middleware");module.exports = (app) => { app.use( "/api", createProxyMiddleware({ target: "http://localhost:3080", chang..
함수형 컴포넌트 렌더링 with useEffect, useLayoutEffect
함수형 컴포넌트 렌더링 with useEffect, useLayoutEffect
React
2023.05.19 14:29
인트로 함수형 컴포넌트 렌더링 순서에 대해 다뤄봤습니다. 클래스 컴포넌트의 생명주기 클래스 컴포넌트의 생명주기에 대해 알고 가면 더 쉽게 이해할 수 있습니다. 📌 생명주기 순서 컴포넌트 실행 constructor() 실행 : 렌더링(DOM 생성) 이전에 수행되는 생성자 메서드 render() 실행 : 미리 구현한 HTML을 화면상에 보여줌 componentDidMount() 실행 : 렌더링이 수행된 이후에 실행됨 컴포넌트에 변화가 있을 때 componentDidUpdate() 실행 update가 발생하는 경우 props가 변경된 경우 state가 변경된 경우 부모 컴포넌트의 리렌더링 foreUpdate 강제로 변경하는 경우 컴포넌트가 제거될 때 componentWillUnmount() 실행 클래스형과 함..
키보드 방향키로 드롭다운 선택하기
키보드 방향키로 드롭다운 선택하기
React
2023.04.19 20:11
인트로 부트캠프 advanced 과제 진행 중 advanced에서도 또다시 도전하기 과제가 있더라고요. 키보드 방향으로 자동검색(drop down) 항목을 선택할 수 있도록 하는 거였습니다. 과제가 생각보다 빨리 끝났기 때문에 도전해 봤습니다. 키보드로 드롭다운 선택할 수 있게 해주는 라이브러리가 있었지만 직접 ref를 사용해서 해보기로 했습니다. 결과 어떻게든 구현은 할 수 있었습니다. 컴포넌트에 ref를 넘겨야 해서 forwardRef를 써야 하더라고요. 고정된 틀에서 구현을 해야 해서 그런지 더 헷갈리고 복잡했습니다. 코드 자동검색 목록의 경우 객체를 사용하여 임시로 완성되어 있습니다. css의 경우 styled-Component로 적용하였습니다. //자동검색을 위한 임시 목록들 const dese..
이메일 클릭 시 강제 복사 시키기
이메일 클릭 시 강제 복사 시키기
내가 해냄
2023.04.12 15:31
인트로 이메일을 클릭했을 때 복사하는 기능을 만들어봤습니다. Clipboard API를 사용해서 아주 간단하게 해결할 수 있었습니다. Clipboard: writeText() 인자로 넣어준 텍스트 문자열을 시스템 클립보드(복사한 데이터를 저장해줌)에 저장합니다. read()나 readText()를 사용해서 저장한 문자열을 다시 읽을 수 있습니다. 전체코드 //컴포넌트 함수 내부 const copyEmail = async (email) => { await navigator.clipboard.writeText(email); alert("이메일 복사에 성공했습니다"); }; //return { copyEmail("당신의 이메일"); }} > email : 당신의 이메일 결과 강제로 내 이메일 심기 완료
NEW
Docker로 healthcheck하기 (Docker Compose)
내가 해냄2024.10.21 16:12Docker로 healthcheck하기 (Docker Compose)

Docker를 사용해서 서버를 돌리게 되면서 healthcheck 스크립트를 Docker용으로 다시 작성해야했다. (기존에는 window 스케쥴러를 등록하여 1분마다 해당 스크립트를 돌리도록 했음) 코드 자체는 매우 간단했지만 docker에 대해 알아가면서 짜다보니 시간을 많이 잡아먹었다.서버로 api요청을 보낸 후 응답이 비정상적일 경우 컨테이너를 종료하고 다시 시작하는 healthcheck 스크립트를 작성하였다. healthcheck_docker.sh#!/bin/bash LOG_FILE="/app/healthcheck.log" TIMESTAMP=$(date +"%Y-%m-%d %H:%M:%S") HEALTH_CHECK_URLS=( "헬스체크 endpoint" ) echo "$TIMESTAMP - St..

[백준-1926] 그림
코테2024.07.18 14:30[백준-1926] 그림

인트로백준은 js로 입력 받는 게 불편하여 파이썬을 사용하여 풀었습니다.알고리즘 공부를 안한지 꽤 되어 다시 천천히 시작해보려고 합니다.문제실버1 : https://www.acmicpc.net/problem/1926나의 풀이from collections import dequegraph = []visited = set([])cnt = 0max = 0def dfs(start_x, start_y, graph): global cnt global visited dx = [1,0,-1,0] dy = [0,1,0,-1] size = 1 cnt += 1 visited.add((start_x, start_y)) queue = deque([(start_x, start_y)]) ..

[mqtt.js, mosquitto] WebSocket connection to failed
삽질노트2024.01.26 14:20[mqtt.js, mosquitto] WebSocket connection to failed

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

웹 성능 최적화(1)
내가 해냄2023.11.30 17:40웹 성능 최적화(1)

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 조..

덧칠하기
코테2023.09.18 18:05덧칠하기

인트로레벨 1 javascript 문제 다풀려고 노력 중..문제덧칠하기https://school.programmers.co.kr/learn/courses/30/lessons/161989나의 풀이function solution(n, m, section) { let lastPaintIndex = section[0]+m-1; let cnt = 1; section.map((el) => { if(el > lastPaintIndex) { cnt+=1; lastPaintIndex=el+m-1; while(lastPaintIndex > n) { lastPaintIndex-=1; } ..

image