우리는 종종 외부에서 내부 네트워크의 특정 장비나 서비스에 접근해야 할 때가 있다. 이럴 때 필요한 것이 바로 '포트포워딩'이다. 포트포워딩은 마치 건물의 안내 데스크처럼 외부에서 오는 요청을 내부의 올바른 장소로 안내해주는 역할을 한다. 최근 외주업체에 맡긴 장비 테스트를 위해 원격으로 자주 접속해야 하는 상황이 생겼다. AnyDesk와 같은 원격 데스크톱 애플리케이션을 사용할 수도 있지만, 더 안정적이고 직접적인 접근을 위해 포트포워딩 설정을 하기로 결정했다. 이 글에서는 포트포워딩이란 무엇인지, 설정은 어떻게 하는지 소개한다. 포트포워딩이란?포트포워딩은 외부 네트워크의 요청을 내부 네트워크의 특정 기기로 전달하는 네트워크 설정 기법이다. 공유기가 외부와 내부 네트워크 사이에서 중개자 역할을 하며, ..

React나 Node.js 개발 환경에서는 코드 수정 후 자동 재실행 기능이 기본적으로 제공되어 개발 효율성을 높여준다. 특히 Node.js에서는 nodemon이라는 유틸리티를 통해 파일 변경을 감지하고 서버를 자동으로 재시작한다. 반면, Python 개발 시에는 코드 수정 후 매번 수동으로 스크립트를 종료(ctrl + c)하고 재실행해야 하는 번거로움이 있다. 이는 개발 속도를 저하시키고 workflow를 방해할 수 있다. 이 글에서는 Python 개발 환경에서도 nodemon을 활용하여 코드 변경 시 자동으로 스크립트를 재실행하는 방법을 소개한다. 1️⃣ 프로젝트 폴더 내 package.json 파일 생성npm init -y 2️⃣ nodemon 설치# 전역 설치(시스템 전체에서 사용 가능)npm i..

JavaScript를 사용해 백준, 프로그래머스와 같은 다양한 플랫폼에서 알고리즘 문제를 풀어왔다. 최근에는 인공지능의 한 분야인 컴퓨터 비전에 관심을 가지면서, 파이썬에 익숙해지기 위해 언어를 전환하기로 했다. 그 첫걸음으로, 파이썬에서 가장 기본이 되는 데이터 입출력 방법을 알아보고 정리하는 시간을 가지려고 한다. 한 줄의 문자열을 입력 받기input() 함수는 한 줄의 문자열을 입력받는 기능을 제공한다. 입력받은 데이터를 정수형으로 처리하려면, int() 함수를 사용해 문자열을 정수로 변환해야 한다.# 데이터의 개수 입력n = int(input()) 여러 개의 데이터를 입력 받기여러 개의 데이터를 입력받을 때는 보통 공백으로 구분된 데이터를 처리하게 된다. 이 경우 list(map(int, inpu..

발생한 에러(맥 사용자) 터미널에서 idle3 명령 입력** IDLE can't import Tkinter.Your Python may not be configured for Tk. **나는 맥 사용자이기 때문에 IDLE 셸 창을 띄우기 위해 터미널에서 idle3 명령을 입력했다.하지만 "IDLE can't import Tkinter. Your Python may not be configured for Tk."과 같은 에러가 발생했다. 원인 분석해당 에러는 Python의 Tkinter 모듈이 제대로 설치되지 않았거나, Python이 Tkinter 모듈을 찾지 못해서 발생하는 문제다. 에러 해결 방법1. 시스템 패키지 업데이트brew updatebrew upgrade 2. Homebrew를 이용해 Tkin..

🔥 발생한 에러Uncaught FirebaseError: Firebase: Error (auth/invalid-api-key).로컬에서는 잘 동작했지만 Netlify에 배포 후 확인해보니 다음과 같은 에러가 발생했다. 배포할 때 참고한 사이트(https://create-react-app.dev/docs/deployment#netlify) 원인 분석해당 에러에 대해 글을 쓴 여러 블로그를 찾아서 읽어보니 다음의 경우에 이러한 에러가 발생한다고 한다..env 파일이 루트에 없는 경우API 키가 잘못된 경우firebaseConfig를 export하고, 다른 JS 파일에서 import 할 경우 로컬에서는 잘 동작했기 때문에 Netlify에서 내가 설정한 환경 변수를 제대로 인식하지 못하고 있을 것 같다고 생각..

한 회사의 기술 인터뷰에서 리액트의 key에 대한 질문을 받았다. 해당 질문에 대한 대답을 하는 과정에서 그동안에 프로젝트를 진행하면서 리스트의 각 항목에 key를 할당하는 것을 너무 당연시한 것 같다는 생각이 들어 이에 대해 알아보려고 한다. 배열에서 데이터 렌더링 const people = [ { id: 0, name: 'Creola Katherine Johnson', profession: 'mathematician', }, { id: 1, name: 'Mario José Molina-Pasquel Henríquez', profession: 'chemist', }, ]; export default function List() { const listItems = people.map((person) =>..

🔥 발생한 문제 getBoards 함수는 카테고리에 해당하는 게시글 전체를 페이징 처리하기 위한 함수다. (가독성을 위해 관련 없는 코드 일부 생략) /* 페이징 처리를 위한 함수들(참고용) const getPagination = (page, size) => { const limit = size ? +size : 10; // 가져올 데이터 양 const offset = page ? page * limit : 0; // 가져올 데이터의 초기 위치값 return { limit, offset }; }; const getPagingData = (data, page, limit) => { // count: where 절, 연결 관계 등의 조건에 부합하는 레코드의 전체 개수 // rows: where 절, 연결 관..

🔥 발생한 문제 텍스트를 입력하고 엔터(Enter) 키를 누르면 목록에 새롭게 추가되고 input 창은 비워지도록 구현했는데 왠지 모르게 함수가 두 번 실행되면서 기존 텍스트의 마지막 글자가 목록에 추가되는 문제가 발생했다❗️ 원인 분석 검색해본 결과 이러한 문제는 크롬 브라우저에서 한글을 사용하는 경우에만 문제가 발생한다. (영어로 입력하면 키 이벤트가 중복으로 발생하지 ❌) 구체적으로 위 GIF를 보면 한글 입력 시 입력 중인 글자 아래 검은 밑줄이 생기는데 해당 밑줄이 있는 상황에서 키 이벤트가 발생하면 함수가 두 번 실행되는 문제가 발생한다. 한글의 경우 자음과 모음의 조합으로 만들어지는 조합 문자이기 때문에 글자가 조합 중인지 조합이 끝난 상태인지를 알 수 없어 생기는 문제이다. 🧯 해결 방법 ..