본문 바로가기

분류 전체보기243

iptables를 활용한 포트포워딩 설정하는 방법 iptables를 활용한 포트포워딩 설정하는 방법 인터넷을 통해 들어오는 웹 트래픽을 효과적으로 관리하려면 포트 포워딩이 필수입니다. 이 글에서는 iptables를 활용하여 포트 포워딩을 설정하는 방법에 대해 소개하겠습니다. iptables를 활용한 포트포워딩 하는 방법 포트 열기: 웹 서버에 대한 트래픽 허용 맨 처음, 우리는 iptables를 사용하여 웹 서버에 대한 트래픽을 허용하는 방법을 알아보겠습니다. 이를 위해서는 입력(Input) 및 출력(Output) 체인에 대한 규칙을 추가해야 합니다. # 입력 체인에 80포트로 들어오는 TCP 트래픽을 허용 iptables -I INPUT -p tcp --dport 80 -j ACCEPT # 출력 체인에 80포트로 나가는 TCP 트래픽을 허용 iptab.. 2023. 12. 12.
JavaScript로 이미지 위에 마우스 커서를 손가락 모양으로 바꾸기 JavaScript로 이미지 위에 마우스 커서를 손가락 모양으로 바꾸기 웹 페이지를 디자인하다 보면 이미지 위에 마우스 커서를 손가락 모양으로 바꾸는 것이 사용자 경험을 향상시키는 중요한 요소 중 하나입니다. 이 글에서는 JavaScript를 사용하여 이미지 위에 마우스 커서를 손가락 모양으로 변경하는 방법을 알아보겠습니다. 1. CSS로 커서 스타일 설정하기 우선, 이미지 위에 마우스 커서 스타일을 설정해야 합니다. 이를 위해 CSS를 사용합니다. .hand-cursor { cursor: pointer; /* 마우스 커서를 손가락 모양으로 변경 */ } 위 CSS 코드에서 cursor 속성을 pointer로 설정하여 마우스 커서를 손가락 모양으로 변경합니다. 2. HTML 이미지 요소와 클래스 추가하기.. 2023. 12. 11.
JavaScript 페이지 새로고침 후 검색 입력란에 커서 자동 위치시키기 JavaScript로 페이지 새로고침 후 검색 입력란에 커서 자동 위치시키기 웹 애플리케이션을 개발할 때, 페이지를 새로고침한 후 사용자 경험을 향상시키기 위해 검색 입력란에 자동으로 커서를 위치시키는 것은 중요한 요소 중 하나입니다. 이 글에서는 JavaScript를 사용하여 페이지 새로고침 후 검색 입력란에 커서를 자동으로 위치시키는 방법을 알아보겠습니다. 1. 페이지 새로고침 이벤트 리스터 추가 페이지가 새로고침될 때마다 검색 입력란에 커서를 위치시키려면 load 이벤트 리스너를 추가해야 합니다. 이것은 페이지가 완전히 로드된 후에 작동합니다. window.addEventListener('load', function() { const searchInput = document.getElementByI.. 2023. 12. 10.
JavaScript Enter 누를 때 검색 기능 로직 - 활용 소스 코드 제공 JavaScript Enter 누를 때 검색 기능 로직 - 활용 소스 코드 제공 웹 애플리케이션을 개발하다보면, 사용자가 검색 필드에 검색어를 입력하고 Enter 키를 누르면 검색이 실행되도록 하는 것이 흔한 요구사항 중 하나입니다. 이 글에서는 JavaScript를 사용하여 Enter 키를 누를 때 검색을 가능하도록 하는 방법을 알아보겠습니다. 이벤트 리스터 추가하기 검색 필드에서 Enter 키를 누르면 검색을 실행하려면 이벤트 리스너를 추가해야 합니다. 보통 keyup 이벤트를 사용합니다. 이벤트 리스너는 검색 필드에 추가됩니다. const searchField = document.getElementById('searchField'); searchField.addEventListener('keyup'.. 2023. 12. 9.
TDD(테스트 주도 개발) 방법론 본질과 개발 주기 TDD(테스트 주도 개발) 방법론 본질과 개발 주기 테스트 주도 개발(TDD)은 소프트웨어를 개발하는 방법 중 하나로, 작은 단위의 테스트 케이스를 먼저 작성하고, 이를 통과하는 코드를 추가하여 반복적으로 소프트웨어를 개발하는 방식입니다. 이는 애자일 방법론 중 하나인 eXtreme Programming(XP)에서 나온 개념으로, 코드의 질을 높이고 유지보수를 용이하게 하는데 주력합니다. TDD 개발 주기 - 실패하는 테스트 코드 작성 실패하는 테스트 코드를 작성합니다. 이 단계에서는 아직 구현되지 않은 기능이나 버그를 나타내는 테스트를 작성합니다. - 성공시키는 코드 작성 실패한 테스트를 통과할 정도의 최소한의 코드를 작성합니다. 목표는 테스트를 통과하는 것뿐입니다. - 리팩토링 중복 코드를 제거하거나.. 2023. 12. 8.
JavaScript yarn SyntaxError: missing ) after argument list 해결 JavaScript yarn SyntaxError: missing ) after argument list 해결 초보자부터 숙련된 개발자까지, JavaScript 환경에서 종종 마주치는 문제 중 하나는 프로젝트 설정 및 의존성 관리입니다. 최근 Node.js의 실험적인 기능을 활용하는 프로젝트에서는 더욱 주의가 필요했었습니다. Yarn 테스트에서 발생한 SyntaxError 문제를 해결하기 위한 간단한 조치 방법을 살펴보겠습니다. SyntaxError: missing ) after argument list 1. 문제의 발견과 원인 분석 문제를 발견한건 pakage.json 파일에 이 코드를 추가하고 나서였습니다. "scripts": { "test": "node --experimental-vm-modules.. 2023. 12. 7.
Prisma 라이브러리 설치방법 Prisma 라이브러리 설치 방법 손쉽게 시작하는 Prisma 라이브러리 설치하는 방법. 프로젝트를 시작하기 전, 아래 글을 활용하여 Prisma 라이브러리를 손쉽게 설치하고 프로젝트를 구성해봅시다! 🔥 Prisma 라이브러리 설치방법 # yarn 프로젝트를 초기화합니다. yarn init -y # express, prisma, @prisma/client 라이브러리를 설치합니다. yarn add express prisma @prisma/client # nodemon 라이브러리를 DevDependency로 설치합니다. yarn add -D nodemon # 설치한 prisma를 초기화 하여, prisma를 사용할 수 있는 구조를 생성합니다. npx prisma init prisma: Prisma를 터미널에.. 2023. 12. 6.
프로그래머스 시저함수 문제 풀이, 해설, 알고리즘 코딩테스트 프로그래머스 시저함수 문제 풀이, 해설 알고리즘 코딩테스트 프로그래머스 시저함수 문제 소개와 필자의 문제풀이 및 인기 있는 문제풀이 소개와 해설을 소개하겠습니다. 아래 풀이 과정을 보면서 많은 인사이트를 얻어가시길 바랍니다. 프로그래머스 시저함수 문제 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 시저 암호란? 시저 암호는 각 알파벳을 일정 거리만큼 밀어서 다른 알파벳으로 변환하는 암호화 방식입니다. 예를 들어, "AB"를 1만큼 밀면 "BC"가 되고, "z"는 1만큼 밀면 "a"로 변환됩니다. 공백은 변하지 않습니다. 필자의 문제풀이 해설 functio.. 2023. 12. 5.
Prisma 소개, Mongoose와 차이, ORM Prisma 소개, Mongoose와 차이, ORM JavaScript와 TypeScript 개발자들을 위한 Prisma는 뛰어난 ORM 기능으로 객체와 데이터베이스를 손쉽게 연결합니다. 다양한 관계형 데이터베이스를 지원하며, MongoDB까지 포함한 다양한 선택의 폭이 돋보입니다. Mongoose와 비교하여 Prisma는 TypeScript 호환성과 다양성을 자랑하며, 코드의 간결함과 가독성을 고려한 모델 정의 방식은 프로젝트를 더욱 효율적으로 만들어줍니다. 쉽게 접근할 수 있는 예시 코드로, Prisma의 매력적인 세계를 경험해보세요! ✨" 1. Prisma란? 💡 Prisma: ORM의 빛나는 세계 Node.js 환경에서는 데이터베이스와 JavaScript 객체를 연결하는 여러 ORM이 있습니다. .. 2023. 12. 4.

티스토리툴바