# web

nadoran

운영체제 : mac, IDE : eclipse eclipse에서 dynamic web project세팅을 위한 과정에 대해 알아보겠다. 나는 처음 접하는 것들이 많아 멘탈이 너덜너덜해 졌었다. 1. eclipse flugin 설치 일단 세팅을 하기 위해 필요한 플러그인을 먼저 설치해야 한다. 좌측 상단 메뉴에 Help - Eclipse Marketplace... - popular탭 으로 가서 'Eclipse Enterprise Java and Web Developer Tools'를 먼저 설치한다. 그리고 나중에 스프링을 사용할 거면 'Spring Tools'도 같이 설치한다. 주의할 사항은 여기서 설치창에서 Finish버튼이 활성화되어 눌러도 Eclipse 우측 하단을 보면 설치가 진행 중인 걸 알 수 있다. 나는 설치하는 중간에 다른 걸 설치하려고 막 누르니까 에러가 발생했었다.(그래서 eclipse 재설치함.. jdk버젼 정리할 겸) 2. Tomcat 설치

duboo

프론트엔드에서 백엔드 서버로 요청을 보낼 때 CORS 에러가 발생하는걸 흔하게 볼 수 있습니다. 이러한 CORS 에러가 발생하는 이유와 에러 해결을 위한 방법 그리고 SOP도 같이 알아보겠습니다. Origin / 출처 SOP / Same-Origin Policy CORS / Cross Origin Resource Sharing SOP와 CORS에서 공통적으로 확인할 수 있는 **Orig

laluniax

웹에서 HTML은 뼈대 CSS는 꾸미기 JS는 동작의 역할을 가지고 있음 📖 HTML head 영역과 body 영역으로 이루어져 있다. head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담는다. head에서는 페이지의 속성을 정의하거나, 필요한 스크립트들을 부른다. 눈에 안 보이는 필요한 것들을 담음 head 안에 들어가는 대표적인 요소들: meta, script, style, link, title 등 body 안에 들어가는 대표적인 요소들: span, img, input, textarea 등 📖CSS ✍️

gonasooc

내용 정리 WebSocket은 클라이언트와 서버 사이에 지속적인 완전 양방향 연결 스트림, 즉 상호작용을 가능하게 해줘서 실시간 서비스 구현이 필요할 때 사용하는데, 다만 webSocket을 지원하지 않는 브라우저도 있기 때문에(물론 최근에는 대부분 지원) 크로스 브라우징에 대응하는 과정에서 나온 것이 socket.IO와 sockJS입니다. 우선 WebSocket을 시도하고, 실패할 경우 HTTP Streaming, Long-Polling 같은 HTTP 기반의 다른 기술로 전환해 재차 연결을 시도합니다. 일반적으로 node.js 환경에서는 socket.IO, Spring 기반에서는 sockJS를 사용하는 것으로 알고 있습니다. 보통 SockJS는 stomp라고 하는 메세지 프로토콜과 함께 사용됩니다. 꼬리 질문 실제 사용 경험이 있으신가요? 참고자료 https://developer.mozilla.org/ko/docs/Web/API/WebSocket

gonasooc

내용 정리 HTTP Header는 클라이언트와 서버가 요청 또는 응답으로 부가적인 정보를 전송할 수 있도록 해주는 부분인데, General header는 공통 header로 요청과 응답 모두에 적용되고 body에서 최종적으로 전송되는 데이터와는 관련이 없는 header입니다. Request header는 클라이언트 입장에서 보내는 메세지의 header인데 fetch가 필요한 리소스나 클라이언트 자체에 대한 자세한 정보를 포함하는 header고, Response header는 위치 또는 서버 자체에 대한 정보와 같이 응답에 대한 부가 정보를 갖는 header로 볼 수 있습니다. Entity header(혹은 Representation header)는 컨텐츠 길이나 MIME 타입과 같이 Entity body에 대한 자세한 정보를 포함하는 header입니다. 꼬리 질문 실제로 작업할 때 HTTP Header의 내용을 확인하고 참고한 경험이 있을까요? 참고자료

ahndong2

웹 클라이언트 사용자가 웹에 접근하는 프로그램으로 Chrome과 같은 웹 브라우저이다. 클라이언트는 사용자로부터 받은 URL에 대한 정보를 찾아 HTTP 메시지 형태로 서버에게 요청한다. 웹 서버 서버는 클라이언트에서 요청한 HTTP 메시지를 확인한 후, HTML, CSS, Image 등의 데이터를 처리하여 클라이언트에 응답한다. Apache WEB Server Nginx WEB Server IIS WEB Server 웹 어플리케이션 서버(WAS) WAS는 웹 애플리케이션을 실행시켜 필요한 기능을 수행하고 그 결과를 웹 서버에게 전달하는 일종의 미들웨어를 말한다. 웹 서버 + 웹 컨테이너 php, jsp, asp와 같은 언어들을 사용해 동적인 페이지를 만들어낼 수 있는 서버이다.

hvvany

web 서버 static 처리(정적인 파일 요청 처리) -> was로 가기 전 간단한 요청 처리 가능 -> was의 상태를 파악하여 로드 밸런싱 가능 was 동적인 처리(service 로직 처리) -> 흔히 src라고 부르는 자바 프로젝트 소스가 있는 서버 결론 was만으로 서비스 가능하지만 web서버를 두면 더 좋다

ouroborossnake

웹서버(Web Server) 웹서버는 클라이언트(사용자)가 브라우저 주소창에 url을 입력하여 어떤 페이지를 http 요청하게 되면 http 요청을 받아들여서 HTML 문서와 같은 정적인 콘텐츠를 사용자에게 전달해주는 역할을 한다. 웹서버의 대표적 2가지 역할 단순히 저장된 웹 리소스들을 클라이언트로 전달하고, 클라이언트로부터 콘텐츠를 전달받아 저장하거나 처리한다.(정적인 리소스) -여기에서 정적 파일은 HTML, CSS, JS, 이미지, 영상과 같은 자료들을 뜻한다. 사용자로부터 동적인 요청이 들어왔을 때 WAS에게 전달한다. 해당 요청을 웹서버 자체적으로 처리하기 어렵기 때문이다. 대표적

hee1kim

웹 서버와 웹 애플리케이션 서버❓ 웹 서버에서 즉시 처리되는 정적 페이지 요청 웹 애플리케이션 서버에 위임되는 동적 페이지 요청 일반적으로 서버는 웹 서버(Web Server)와 웹 애플리케이션 서버(Web Application Server, 약자 WAS)로 구분된다. 웹 서버(Web Server) 웹 서버는 클라이언트의 요청을 가장 먼저 받는 서버로 클라이언트와 직접 통신한다. 웹 서버의 주요 역할을 클라이언트의 요청에 따른 정적 페이지 응답이다. 클라이언트가 정적인 요청을 하면 웹 서버는 웹 애플리케이션 서버에 위임하지 않고 즉시 응답한다. 웹 서버에서 직접 응답하는 대표적인 콘텐츠로는 웹 페이지(HTML, css, js), 이미지(png, jpg), 음악(mp3) 등이 있다. ➡️ 정적 콘텐츠는 웹 서버에 저장되어 있는 서비스 웹 애플리케이션 서버(Web Application Server) 클라이언트에서

vina1601

Type c-j php로 작성된 페이지다. 일단 사이트에 들어가면 ID와 Password가 나온다. 현재 대회가 종료된 고로 코드 리뷰랑 정답만 간략히 정리하도록 하겠다. 사실 플래그에 대한 단서는 문제 파일 중 check.php 파일에만 있다고 보면 된다. 여기서, 부분을 보면 알겠지만 int형으로 형변환 해서 id, pw와 비교하는 것을 알 수 있고, 또 자릿수에 대한 힌트도 얻을 수 있다. php 문제에서, 어떠한 조건이나 필터링 없이 바로 비교해서 값을 판별하는 코드의 경우, magic hash를 이용해서 id, pw값을

hee1kim

정적 페이지와 동적 페이지❓ &nbsp 정적 웹 페이지 (Static Web page) 저장된 그대로 사용자에게 전달되는 웹 페이지 모든 상황에서 모든 사용자에게 동일한 정보를 표시 정적 웹 페이지들은 업데이트를 전혀 하지 않거나 거의 할 필요가 없는 내용에 적절 다른 처리 없이 요청에 대한 파일만 전송하기 때문에 빠르고 단순함 저장된 정보만 보여주기 때문에 서비스가 한정적이다. 검색, 로그인, 결제 등과 같은 동적인 업무가 불가능하다. 초창기 웹은 주로 정적 페이지를 이용하는 서비스였다. 주로 서버는 클라이언트의 요청에 따라 매번 변화가 없는 정해진 페이지를 반환하는 역할을 했다. 예를 들어 소개 페이지, 로고, 이미지 등을 보여주는 역할을 한 것. &nbs

ejdmswl

1. 도메인 별로 파일 분류하기 도메인: 질문, 답변, 사용자처럼 굵직한 요구사항 또는 문제 영역을 대표하는 말 우리 프로젝트 도메인 구성하기 question - 질문 (com.mysite.sbb.question) answer - 답변 (com.mysite.sbb.answer) user - 사용자 (com.mysite.sbb.user) 2. 질문 목록과 템플릿 ❗404 오류 현 상태에서 http://localhost:8080/question/list 에 접속하면, 404 error가 뜬다. → /question/list URL에 대한 매핑이 있는 컨트롤러가 필요 !! 🔆QuestionController 생성하기 💡 @ResponseBody 이용 -

bysonstudio

1. Flutter Web Project를 생성 한다 2. Firebase Initialize $ firebase init 을 입력하고 ❯◉ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys Hosting 만 Space Bar로 선택하고 Enter로 계속한다 ? What do you want to use as your public directory? build/web public directory를 지정해라 나오면 build/web 을 입력하고 Enter로 계속 ? Configure as a sin

dlthf727

JWT(Json Web Token) 개인정보 등 중요한 정보를 전달하거나 인증할 때 사용되는 토큰. 신분증같은 것이라고 생각하면 될 듯? 강의에서 인증 방식에는 세션방식과 토큰방식이 있다고 하면서 (엄청)가볍게 설명했음 로그인 정보를 유지할 때 세션이라는 기술을 통해 개인정보를 서버에 저장하여 요청할 때 사용자정보를 판별함 위 경우 사용자가 늘어나면 서버에 저장해야하는 정보가 많아져 이후 DB나 서버의 확장이 필요해짐. 토큰의 경우는 토큰 자체에 발급자, 발급일, 만료일자, 권한범위 등의 정보를 가지고 있다. (아이디,비밀번호등의 민감한 정보는 XX) JWT 구성요소 JWT는 헤더(header), 페이로드(payload), 서명(signature) 세 파트로 나눠져

stobu

웹에서 쿠키가 뭘 의미하는 거야? >쿠키란 서버에서 생성해 클라이언트에게 제공하는 작은 데이터를 의미합니다. 전달된 쿠키는 클라이언트의 웹 브라우저에 저장되며 HTTP 요청 헤더에 포함되어 서버로 전달됩니다. 쿠키를 왜 사용하는데? >사용자 인증을 유지하거나, 사이트 설정, 장바구니 등 클라이언트의 상태를 저장하고 서버에 전달하기 위해서입니다. 매번 데이터가 서버로 전달되면 비효율적이지 않을까? >그래서 쿠키는 4KB의 작은 크기를 가지고 있습니다. 또한 만료기간이 설정되어 있어서 브라우저가 종료되거나 일정 기간이 지나면 삭제됩니다. 보안적인 측면에서 취약한 것 같은데? >그렇습니다. 쿠키는 브라우저에 저장되고 항상 서버에 전송되기 때문에 공격에 취약합니다. 따라서 탈취, 변조될 위험성이 있으므로 쿠키에는 중요한 정보를 저장하지 않는 것이 좋습니다. 그럼 사용자 인증을 어떻게 유지하는 거야? >세션이라는 기술을 사용합니다. 세션은

dlthf727

쿠키 & 세션 & 캐시 많이 들어보긴 했는데 누가 이게 뭐냐고 물어보면 대답 못 함. 어제 강의에서 쿠키에 대해서 잠깐 설명했는데 워낙 대략적으로 설명하고 넘어가서 이해가 안 됨. 이번 기회에 정리하고 넘어가려고 함. HTTP 강의에서 '쿠키' 라는 개념은 HTTP의 무상태성과 비연결성에 대해 설명할 때 나왔음. 서버는 클라이언트의 상태를 보존하지 않음. 계속 연결되어 있지 않기 때문에 서버의 자원을 효율적으로 사용할 수 있지만 서버가 클라이언트를 식별할 수 없게 됨. 이 경우에는 페이지를 이동하면 요청한 클라이언트의 정보를 저장 할 수 없고 새로고침을 할 때마다 로그인을 해야 함. 이런 문제를 해결하기 위해 쿠키와 세션이라는 기술을 사용함. 🍪 쿠키 HTTP 헤더에 포함되는 정보중 하나로 클라이언트의 브라우저에 저장되는 작은 기록 파일. Key-Value 형식이고 보안에 취약한 편이라 노출되어도 상관 없는 정보를 담는데에 사용. >

jungmin211

반응형 웹 > 반응형 웹 디자인이란 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써 브라우저의 크기(스크린의 크기, 디바이스의 종류)에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미한다. 사이트를 이루는 소스 코드는 하나지만 접속하는 스크린 크기에 따라 레이아웃을 유동적으로 보여줄 수 있다. 테스크톱, 태블릿, 스마트폰 등 다양한 전자기기로 웹에 접속을 할 수 있게 되면서 여러 가지 버전의 웹페이지를 만들어야하는 경우가 발생하게 되었고 반응형 웹페이지가 탄생하게 되었다. 반응형 웹에는 사용자 경험을 디자인할 때 모바일일 경우를 최우선으로 초점을 맞춰서 디자인하는 모바일 퍼스트(mobile first)라는 개념이 있다. 반응형 웹의 특징과 장단점 반응형 웹의 특징 반응형 웹 디자인은 유연한 레이아웃으로 다양한 스크린 사이즈의 디바이스에 적응할 수 있으며 하나의 URL을 기반으로 화면이 바뀐다. 모바일로 연결되는 별도의 U

kim-jaemin420

HTTP의 특징과 쿠키와 세션을 사용하는 이유 쿠키와 세션을 사용하게 된 이유는 HTTP 프로토콜의 특징이자 약점을 보완하기 위해 사용합니다. 우선 HTTP 프로토콜의 특징에 대해 알아보겠습니다. HTTP 프로토콜 HTTP는 TCP 기반으로 데이터를 주고 받는데 사용되는 프로토콜입니다. HTTP는 클라이언트와 서버 간에 데이터를 전송하고, 웹 페이지, 이미지, 동영상 같은 여러 가지 리소스를 요청하고 전송하는 역할을 합니다. HTTP 프로토콜은 몇 가지 특징이 있는데, 그 중 Connectionless와 Stateless에 대해 살펴보겠습니다. 1. Connectionless 프로토콜 클라이언트가 서버에 요청했을 때 그 요청에 맞는 응답을 보낸 후 연결을 끊는 처리방식입니다. HTTP 1.1버전에서 커넥션을 계속 유지하고, 요청에 재활용하는 기능이 추가되었습니다. HTTP Header에 keep-alive 옵션을 주어 커넥션을 재활용할 수 있습니다

jungmin211

브라우저 > 브라우저는 웹 서버에서 양방향으로 통신하며 HTML 문서 및 그림, 멀티미디어 등의 컨텐츠를 열람할 수 있게 해주는 GUI 기반의 소프트웨어 프로그램이다. 웹 브라우저 또는 웹 탐색기라고도 하며 브라우저는 페이지를 다운로드 하기 위해 응용 계층의 프로토콜인 HTTP를 통해 송수신한다. 웹 (World Wide Web) > 웹은 인터넷상에서 멀티미디어 정보(그림, 텍스트, 소리, 영상 등)를 하이퍼텍스트 방식으로 연결해 제공한다 웹 페이지 (Web Page) HTML 언어를 사용하여 작성된 문서 형태로 제공되는 문서들 웹 사이트 (Web Site) 웹 페이지 중 서로 관련된 내용으로 작성된 웹 페이지들의 집합 웹 브라우저(Web Browser) 종류 1993년 / 모자이크(Mosaic) - 최조의 웹 브라우저, 마크 안드레센과 에릭 비나가 개발 1994년 / 넷스케이프(Netscape) - 상업용 브라우저의 등장 ➡ 웹

o3odw98

9/21(목) UI 구현 : (HTML + CSS) + JS Portfolio-test.html Portfolio-test.css Portfolio-test.js * [ 구현 화면 ] *