본문 바로가기
728x90
반응형

분류 전체보기267

[HTML] 자동 줄바꿈, 줄바꿈, 간격, 띄어쓰기 및 특수문자 엔티티 코드 - <pre> <br> <div> <span> &nbsp; &lt; 📌 자동 줄바꿈 태그 태그는 작성한 HTML 내용을 그대로 출력하는 태그줄 바꿈과 띄어쓰기를 모두 인식합니다.첫번째 두번째 세번째 📌 줄바꿈 태그 웹 페이지에서 텍스트를 나열할 때 줄바꿈을 원하면 태그를 사용합니다.이 태그는 닫는 태그가 없는 빈 태그입니다.아래와 같이 작성하면 "첫 번째 줄" 다음에 "두 번째 줄"이 따로 출력됩니다.첫 번째 줄두 번째 줄 📌 간격 태그 , 과 태그는 웹 페이지에서 특정 부분을 그룹화하거나 스타일을 적용하는데 사용 : 블록 요소를 그룹화 : 인라인 요소를 그룹화 이 부분은 테두리와 간격을 가진 박스입니다.이 텍스트는 빨간색으로 표시됩니다. 📌 띄어쓰기 &nbsp; &ensp; &emsp;HTML에서 여러 개의 공백을 사용하더라도 브라우.. 2024. 10. 22.
[API] REST API 및 URL 요청 테스트 도구 - Ping(핑), Postman(포스트맨), Wireshark(와이어샤크) 📌 API 통신 연결 테스트API 개발 시, 가장 먼저 API 요청 URL이 정상적으로 연결되는지 확인하는 것이 중요합니다.이후, 요청 데이터 형식에 맞춰 지정된 URL로 요청을 보내고, 응답을 제대로 받아오는지 확인해야 합니다. Ping(핑), Postman(포스트맨), Wireshark(와이어샤크) 사용하여 API 통신 테스트 하는 방법에 대해 설명드리겠습니다. PingAPI 서버와 내 컴퓨터 간의 네트워크 연결 상태를 확인하고, 응답 시간과 연결 가능 여부를 파악하는데 사용Postman다양한 메소드로 API 요청을 보내고, 파라미터와 헤더 설정 후  응답을 빠르게 확인할 수 있는 테스트 도구Wireshark네트워크 패킷을 분석하여 API 요청과 응답이 올바르게 전송되는지 확인하고,  문제 원인을 .. 2024. 10. 21.
[Spring Boot] 스프링부트 WAR 빌드, Tomcat 서버 WAR 배포 및 도메인 설정 📌 스프링부트 도메인 사용 배포 스프링부트에서 도메인(DNS)을 사용하려면,JAR 빌드 방식이 아닌 WAR 빌드 방식으로 배포해야 합니다.WAR 파일은 웹 애플리케이션 아카이브로, Tomcat과 같은 서블릿 컨테이너에 배포하기에 적합합니다.도메인 설정을 하려면 반드시 WAR로 빌드해야 합니다.JAR는 간편하지만 도메인 연결에 한계가 있으며, WAR는 웹 서버와 통합하여 도메인 설정이 가능합니다. 🔎 JAR, WAR 차이 JAR 파일 스프링 부트 애플리케이션을 독립적으로 실행내장 톰캣 서버 사용도메인 설정이 어렵고, 주로 개발 및 테스트에 적합 WAR 파일 전통적인 웹 애플리케이션 배포 형식외부 웹 서버(Nginx, Apache 등)에서 실행여러 도메인을 쉽게 관리하고 설정할 수 있음📌 Maven을 .. 2024. 10. 16.
[Web] 웹 개발 리소스 모음 - 색상, 디자인, 애니메이션, SVG, 파비콘, ASCII, 캡처 도구 📌 웹 개발 리소스 모음 프론트엔드 개발에 필요한 다양한 웹 디자인 및 개발 리소스를 한 곳에 모았습니다. 색상, 디자인, 애니메이션, SVG, 파비콘, ASCII 아트, 캡처 도구 등각 카테고리는 프론트엔드 개발 과정에서 유용한 자료와 도구를 제공합니다.  디자인 및 색상 도구 애니메이션 도구 SVG 도구 파비콘 도구 ASCII Art 도구 웹페이지 캡처 도구 🎨 디자인 및 색상 🌈 색상 팔레트Adobe Color Wheel (색상 휠)Coolors (색상 생성기)Adobe Color Contrast Analyzer (대비 분석기)Material Design Colors (구글 머티리얼 색상)FFFuel (색상 팔레트)Khroma (색상 조화 툴)MyColor.space (색상 선택기)De.. 2024. 10. 16.
[React] Next.js 다국어(next-i18next) ES모듈 사용 시 에러 해결 방법 - CommonJS 🎯 GoalNext.js에서 next-i18next를 사용할 때, ES 모듈 관련 에러 해결⚠️ 문제 현상프로젝트 서버를 실행한 후 http://localhost:3000 으로 접속을 해보면react-i18next:: You will need to pass in an i18next instance by using initReactI18next 다음과 같은 에러가 발생합니다.react-i18next:: You will need to pass in an i18next instance by using initReactI18next🔑 에러 원인 next-i18next가 CommonJS 방식으로 작성되었기 때문에,ES 모듈 환경에서 사용하면 충돌이 발생하기 때문이다. ES 모듈 환경에서 require()를 사.. 2024. 10. 15.
[React] Next.js로 React와 TypeScript 환경 설정하기 📌 Next.js + React + TypeScriptNext.js : React 기반 프레임워크React : UI를 구성하는 라이브러리TypeScript : 정적 타입을 추가하여 JavaScript의 기능을 향상시키는 언어 Next.js가 모든 개발, 빌드, 배포 과정을 통합적으로 관리합니다.즉, Next.js가 설치된 환경에서는 모든 작업을 수행할 수 있습니다.📌 Vite + React + TypeScript (기존 사용 방식)Vite : 빠른 개발 서버와 빌드를 지원하는 도구React : UI를 구성하는 라이브러리TypeScript : 정적 타입 추가 Vite가 개발 서버와 빌드를 처리하지만, 실제 배포는 별도로 진행해야 합니다.따라서 Vite를 사용할 경우, 배포 과정은 추가적인 설정이 필요합.. 2024. 10. 11.
[React] 서버리스 아키텍처와 클라우드 컴퓨팅 - IaaS, PaaS, BaaS, FaaS 📌 서버리스 란? (Serverless)서버리스는 이름에서 알 수 있듯이, 개발자가 서버를 직접 관리하지 않아도 되는 컴퓨팅 모델입니다.실제로 서버는 존재하지만, 클라우드 서비스 제공업체가 모든 서버 관련 작업(설치, 유지보수, 스케일링 등)을 처리해 줍니다.따라서 개발자는 비즈니스 로직에 집중할 수 있습니다.📌 클라우드 컴퓨팅 모델IaaS (Infrastructure as a Service) PaaS (Platform as a Service) BaaS (Backend as a Service) FaaS (Function as a Service)🔎 IaaS (Infrastructure as a Service)IaaS는 개발자가 직접 서버를 설정하고 관리하는 클라우드 서비스이 서비스는 기본적인 IT.. 2024. 10. 10.
[CMD] 특정 포트 강제 종료방법 1) 'CMD' ▶ '관리자 권한으로 실행' 클릭   2) netstat -ano 입력강제종료하고 싶은 포트번호가 8080이면, 우측 PID값 24840 기억한다.   3) taskkill /f /pid PID번호taskkill /f /pid 24840 입력하면 해당 8080포트 종료된다. 2024. 10. 7.
[React] 리액트에서 Nivo Chart 데이터 시각화 📌 니보차트 란? (Nivo Chart)Nivo Chart는 React에서 차트를 쉽게 구현할 수 있도록 도와주는 차트 라이브러리입니다.React의 컴포넌트 기반 구조에 맞게 차트를 적용할 수 있어서,React 스타일로 차트를 만들 수 있습니다. ❓ 차트가 필요한 이유차트는 2개 이상의 숫자 데이터를 시각적으로 표현하는 데 사용됩니다.글자로 된 데이터는 쉽게 설명할 수 있지만,숫자 데이터는 그 자체로 이해하기 어려울 때가 많습니다.차트를 사용하면 복잡한 숫자 데이터를 한눈에 파악할 수 있어,웹사이트나 애플리케이션에서 매우 유용합니다.🔎 차트를 만드는 3가지 방법 1. 순수 HTML자바스크립트가 비활성화된 브라우저에서도 차트를 표시할 수 있습니다.자바스크립트를 사용하지 않고 HTML만으로 간단한 차트를.. 2024. 10. 6.
728x90
반응형