본문 바로가기

웹 개발/웹사이트22

NN 웹 서버와 웹 애플리케이션 서버(WAS)의 차이 설명 웹서버와 웹애플리케이션의 역할과 차이점에 대해 쉽게 설명드리겠습니다. 웹서버와 웹애플리케이션을 함께 사용하는 이유도 살펴보겠습니다.  목차  Web Server   웹 서버 역할웹 서버는 HTTP 프로토콜 기반으로 클라이언트로부터 받은 요청에  정적 콘텐츠  를 제공하는 소프트웨어입니다.또한,  동적 콘텐츠  를 제공하기 위해 클라이언트 요청을 웹 애플리케이션   서버 (WAS)  에 전달하고 WAS 가 처리한 결과를 다시 클라이언트에게 전달하는 역할을 합니다.  웹 서버 종류1.  Apache Server  가장 많이 사용하는 웹서버로 안정성이 뛰어납니다.2.  NginX  - 아파치의 C10K 문제점 해결을 위해 만들어진 Event-Driven 구조의 웹 서버 소프트웨어입니다.C10K : 한 시스템에.. 2025. 3. 6.
NN JAVA 프레임워크 | 스프링(SPRING) 프레임워크와 스프링 부트 소개 스프링은 자바(JAVA) 기반의 웹 애플리케이션 프레임워크입니다. 스프링 프레임워크와 스프링 부트 모듈에 대해 쉽게 설명드리겠습니다.  목차  「 SPRING 」 프레임워크자바 플랫폼을 위한 오픈 소스 애플리케이션 프레임워크입니다. 자바 엔터프라이즈 애플리케이션 개발을 단순화하기 위해 스프링 프레임워크가 시작되었고, 동적인 웹 사이트 애플리케이션을 개발하기 위한 여러 서비스를 제공하고 있습니다. 특징1. POJO (Plain Old Java Object) - 별도의 프레임워크가 필요하지 않고, JAVA EE의 EJB 사용할 때에 비해 특정 인터페이스를 직접 구현하거나 상속받을 필요가 없습니다. 기존 라이브러리를 지원하기 좋고 객체가 가볍습니다.JAVA EE 자바를 이용한 서버측 개발을 위한 플랫폼EJB .. 2025. 2. 7.
NN 웹프레임워크 | Nuxt.js 프레임워크 개념과 구조 프론트엔드 웹프레임워크의 하나인 넉스트 프레임워크는 무엇인지, 언제 사용하고 어떤 구조로 되어있는지 쉽게 설명드리겠습니다.   목차  Nuxt.js 소개넉스트란 Vue.js 프레임워크 기반의 프레임워크로 Vue.js 프로젝트에서 사용되는 여러 라이브러리를 기본적으로 탑재하고 있습니다. (Vue2, Vue Router, Vuex, Vue Server Renderer, vue-meta, vue-loader, Webpack 등) 1) 구조 - Vue + 라이브러리2) 특징 - Vue 파일 사용, 코드 분할 자동화, 서버 사이드 렌더링3) 사용 - SEO 개선을 위해 사용 디렉토리 구조demo-nuxt 폴더 안에 하위폴더 들에 대한 설명입니다. Vue.js 의 src 폴더의 하위폴더들이 루트 폴더로 올라온 모습.. 2025. 2. 5.
NN 웹프레임워크 | Vue.js 프론트엔트 프레임워크 소개 Angular와 React의 장점은 살리고 단점은 보완한 대표적인 프론트엔드 개발 프레임워크 Vue.js를 소개합니다.   목차  「 Vue.js 」 소개 Vue.js 란?사용자 인터페이스 개발에 초점을 맞춰 복잡하고 동적인 웹 페이지를 쉽게 개발할 수 있는 프레임워크입니다. 가볍고 직관적인 문법으로 SPA 개발에 매우 적합한 프레임워크죠.SPA (Single Page Application)단일 페이지 애플리케이션으로 페이지 전환 없이 동적으로 콘텐츠를 로드하고 업데이트하는 웹 애플리케이션 SPA는 초기에 전체 페이지를 로드에 사용자의 요청에 따라 필요한 데이터만 서버로부터 비동기적으로 로드해 업데이트합니다.  「 Vue.js 」 장점 1) 가볍고 간단한 프레임워크  Angular.js 는 기능이 많고 .. 2025. 2. 3.
NN Lighthouse를 이용한 웹, 블로그 성능 측정하기 Lighthouse는 웹 페이지 성능을 측정해 품질 개선하는데 도움이 되는 구글 크롬 확장 프로그램입니다. Lighthouse를 소개하고 이해를 하는데 도움이 되는 용어 등을 쉽게 설명드리겠습니다.   목차  크롬 Lighthouse크롬 라이트하우스는 크롬 브라우저 내 개발자도구에 내장된 퍼포먼스 측정 도구입니다. 사용자 성능 측정은 사용자가 웹 페이지 로딩이 빠른지 느린지 여러 순간들을 정의하고 성능을 측정하는 지표로 무엇을 측정하는지 주요 항목을 살펴보겠습니다. Lighthouse 가 측정하는 내용1) Performance (성능) - 웹 페이지의 로딩 속도 등 실제 성능을 측정2) Best Practices - Best Practices를 따라 개발되었는지 확인3) Accessibility (접근성.. 2024. 8. 23.
NN 301 리다이렉트 설정하는 방법 (.htaccess) 웹사이트 도메인이 변경되었거나 URL 구조 등이 변경되었을 경우 301 리다이렉트로 다른 URL로 보낼 수 있습니다. 이 글에서는 SEO에 영향을 주지 않고 정확하게 301 리다이렉트 하는 방법을 다룹니다. 목차  리다이렉트리다이렉트는 자동으로 다른 URL로 보내는 것을 말합니다. 예를 들어 www.mysite.com 로 주소를 입력했는데 www.newsite.com 으로 이동했다면 리다이렉트가 설정된 것입니다.  1. Meta refresh (웹 표준 X)meta refresh는 문서에서 부가적인 정보를 제공하는 정도의 태그입니다. 도메인을 리다이렉트 시키는데 적절하지 않습니다.  content=숫자는 몇 초 후에 이동하는지를 뜻합니다. url 이후 주소를 생략하면 현재의 페이지를 다시 읽어옵니다. 2.. 2024. 8. 12.
NN 웹프레임워크 | 부트스트랩 소개와 시작하기 웹사이트를 개발을 위해 웹프레임워크를 많이 사용하게 됩니다. 그 중에서도 가장 쉽게 시작할 수 있는 프레임워크 중 하나인 부트스트랩을 소개해 드립니다. 목차  부트스트랩 소개 소개부트스트랩은 오픈 소스 프론트엔드 프레임워크로 트위터에서 시작되었습니다. 트위터에서 사용하는 레이아웃, 버튼, 입력창 등의 디자인과 기능을 CSS, Javascript로 만들어 놓은 것이죠. 글자, 인용문, 목록, 표, 입력폼, 버튼, 이미지, 아이콘, 드롭다운 메뉴, 내비게이션 바, 탭, 리스트, 이동 바, 알림 메시지, 진행 바등 웹 페이지에서 쓰이는 모든 HTML 요소가 내장되어 있습니다. 그렇기 때문에 웬만한 사이트들은 이 부트스트랩으로 개발 가능합니다.  장점개발 진입장벽이 낮습니다. 부트스트랩의 CSS, JavaScr.. 2024. 8. 9.
NN FTP 폴더 권한 변경하는 방법 (파일질라, 명령프롬프트) 웹서버 FTP 폴더권한을 변경하려는 경우 먼저 파일질라로 하는 방법과 파일질라로 변경이 안되는 경우에 명령 프롬프트를 이용하는 방법을 설명드립니다. 목차 파일질라 폴더 권한 변경  1) 파일질라에서 해당 폴더를 우클릭 후 "파일 속성"을 클릭합니다.2) 팝업창이 뜨면 체크박스를 체크해서 권한 속성을 바꿀 수 있습니다. 3) 숫자값을 바로 입력할 수도 있습니다. (소유자권한/그룹권한/공개권한)0 : 아무 권한 없음1 : 실행 권한만 있음2 : 쓰기 권한만 있음3 : 쓰기, 실행 권한 있음4 : 읽기 권한만 있음5 : 읽기, 실행 권한 있음6 : 읽기, 쓰기 권한 있음7 : 모든 권한 있음    명령 프롬프트파일질라에서 SFTP로 접속을 해야하는데 웹서버에서 보안 문제로 지원하지 않을 때 명령 프롬프트로 접.. 2024. 8. 7.
NN MVC 패턴 구조와 흐름 파악하기 MVC는 소프트웨어 디자인 패턴입니다. 역할에 따라 구성 요소을 분리해 유지보수, 수정이 쉬워지게 됩니다. MVC가 무엇인지, 어떤 구조와 흐름으로 진행되는지 예제를 통해 알아보겠습니다. 목차  MVC란?먼저 웹브라우저에서 웹페이지를 요청하기까지 MVC 패턴의 흐름부터 살펴보겠습니다. 1. USER(사용자)가 웹사이트에 접속해 무엇인가를 요청합니다.2. MANIPULATES - Controller (컨트롤러)는 사용자의 요청에 응답하기 위해 모델을 호출합니다. 3. UPDATE - Model (모델)은 데이터베이스 등을 통해 비즈니스 로직을 처리하고 결과를 컨트롤러에게 반환합니다. 컨트롤러는 다시 View(뷰)에게 전달합니다.4. SEES - 데이터를 받아온 뷰가 사용자에게 웹페이지를 출력해 보여줍니다... 2024. 8. 5.

티스토리툴바