1. 한글 끝 글자 두 번 입력 문제VSCode를 사용하다가 어느 순간부터 [그림 1]과 같이 한글 끝 글자가 두 번 입력되는 문제가 발생했다. 이 문제는 VSCode의 문제가 아니라 윈도우의 문제였다. 2. 윈도우 설정 변경1) "win + i"를 눌러 설정 창을 띄운다.2) "시간 및 언어 > 언어 및 지역 > 옵션 > Microsoft 입력기"로 이동한다.3) [그림 2]와 같이 "이전 버전의 Microsoft IME"를 "켬"으로 토글 한다. 👍참고한 자료: https://velog.io/@nuyhes/문제해결-한글-입력-시-마지막-글자가-2번-생기는-오류

1. 무한한 깊이(depth)의 체크 박스 구현[그림 1]과 같이 무한한 깊이의 체크 박스를 구현할 필요가 있었다. 목차에 사용되는 데이터는 category 배열인데 이 배열의 요소는 객체이다. 이 객체 하나가 체크 박스 하나를 구성한다. 객체는 subcategory를 가지고 있어서 이를 통해 무한한 깊이의 목차를 만들 수 있다. 구현하고자 하는 기능은 다음과 같다.부모와 자식 체크 박스를 렌더링 할 때 시각적으로 구분이 가능하도록 margin-left 값을 자동으로 부여해야 한다.부모 체크 박스를 체크/해제하면 자식 체크 박스도 부모와 동일하게 체크/해제되어야 한다.자식 체크 박스를 체크/해제할 때는 부모 체크 박스에 영향을 주지 않아야 한다. 2. 구현 코드위 기능을 구현함에 있어 중요한 포인트는 재..

1. 지도 영역 크기 변경 후 지도 잘림 현상 문제 발생좌측 aside를 숨기는 기능을 구현하였다. 메인 콘텐츠 영역에는 [그림 1]과 같이 네이버 지도가 렌더링 되어 있다. aside 숨김 버튼을 클릭하면 [그림 2]와 같이 지도 부분이 비정상적으로 잘려서 표시된다. 2. 지도 리사이즈 이벤트 강제 트리거로 문제 해결지도 영역 변경 발생 시 리사이즈 이벤트를 강제 트리거하여 문제를 해결하였다. 강제 트리거 방법은 " naver.maps.Event.trigger()"를 호출하는 것이다. 아래는 적용된 코드 예시이다.useEffect(() => { // naverMap은 useRef()이다. if (naverMap.current) { setTimeout(() => { const { nav..

1. CentOS1) SSH 설정 파일 수정sudo vi /etc/ssh/sshd_config파일에서 아래 내용을 찾는다.#Port 22주석(#)을 제거하고 사용할 포트 번호로 변경한다(아래 예는 2022로 변경).Port 2022 2) 새 포트를 방화벽에 추가새 포트를 방화벽에 허용 한다(아래 예는 포트 2022 허용).sudo firewall-cmd --permanent --add-port=2022/tcpsudo firewall-cmd --reload 3) SSH 데몬 재시작SSH 데몬을 다시 시작하여 설정을 적용한다.sudo systemctl restart sshd 4) 새 포트로 접속 테스트변경한 포트로 SSH 접속이 잘 되는지 확인한다.ssh -p 2022 사용자명@서버주소 5) SELinux ..

1. 새로운 사용자 생성1) 새로운 사용자 생성adduser 명령으로 새 사용자를 생성한다.sudo adduser uniqueuseruniqueuser: 새로 생성할 사용자 이름명령 실행 중, 새 사용자의 비밀번호를 설정하고 기본 정보를 입력하도록 요청받게 되는데, 기본 정보는 생략(엔터 연타) 해도 된다.2) 관리자 권한 부여sudo usermod -aG sudo uniqueuser  2. 기존 사용자 잠금1) 잠금 설정usermod 명령으로 사용자를 잠금 상태로 설정하면 해당 사용자는 더 이상 로그인할 수 없다.sudo usermod -L newuser-L 옵션: 사용자의 비밀번호를 비활성화하여 로그인하지 못하게 한다.2) 잠금 상태 확인sudo passwd -S newuser결과에 L(locked)..

1. 히트맵 적용 후 성능 이슈히트맵에서 점의 크기는 radius 값으로 설정하는데 이 값이 100 이상 넘어가면 렌더링 성능이 떨어졌다. 이 문제를 해결하기 위한 하나의 방법으로 화면상에 노출된 좌표(위경도) 데이터만 필터링하는 방법을 적용해 보았다. 2. 지도 좌표 경계 확인 이용화면상에 노출된 좌표를 필터링하기 위해서는 지도 좌표 경계 확인이 필요했다. 아래는 관련 문서이다.※ React Naver Maps(지도 좌표 경계 확인하기) : https://zeakd.github.io/react-naver-maps/examples/map-tutorial-4-bounds/나의 경우 화면에 노출된 지도의 최대/최소 좌표 정보 획득이 필요했기 때문에 위 문서의 소스 코드 자체는 크게 도움이 되지 않았지만, u..

1. useState로 관리하는 지도 센터 값 성능 문제지도의 센터 위경도 값에 따라 breadcrumb의 표시 정보가 달라지는 기능을 구현하였다. breadcrumb의 정보가 자동으로 변경되려면 센터 위경도 값의 변경을 감지해야 하므로 useState를 사용하였는데 문제는 마우스 좌클릭하여 지도를 이동할 때마다 무수히 많은 센터 위경도 값이 생성되어 그만큼의 리렌더링이 일어난다는 것이다.지도는 "react-naver-maps": "^0.1.2" 라이브러리를 사용했는데 "NaverMap" 컴포넌트에 "onCenterChanged" props로 setState를 넘기면 지도의 중앙 위경도 값을 state로 관리할 수 있다. setMapCenterPoint(latLng)}>(생략)위와 연관된 useState..

1. 문제1) cors 문제무선 와이파이 서비스를 제공하는 AP 장비에 클라이언트가 캡티브포탈 브라우저에서 POST 요청을 보내는 상황이었다. 클라이언트의 IP와 AP 서버의 IP가 다르기 때문에 브라우저는 당연히 cors 오류를 내뱉었다.이 문제를 해결하기 위해 별도의 Node.js 서버를 두고 이 서버에 클라이언트가 POST 요청하면 이 요청을 AP 서버로 전달하도록 설계했다. 즉, 클라이언트와 AP 서버  사이에 Proxy 서버를 두어서-브라우저가 다른 도메인으로 요청을 허용하지 않는-cors 정책을 우회하도록 Proxy 서버가 실제 서버에 요청을 대신 보내는 구조를 만든 것이다. 2) axios를 이용한 POST 요청 문제Proxy 서버를 이용해 cors 문제는 잘 해결했다. 그런데 AP 서버의 ..