CS/web11 [html] 공백과 의 차이 배경html에서 같은 공백인데도 ' '면 줄바꿈이 되지만 면 자리만 차지하고 줄바꿈이 되지 않는 것을 확인했다. 공백과 의 차이점 공백 병합(Collapsing):일반 공백: HTML에서 여러 개의 연속된 일반 공백 문자는 하나의 공백으로 처리되거나 "병합"됩니다. 즉, 코드 상에서 여러 개의 공백을 넣더라도 화면상에서는 하나의 공백으로만 보입니다. : 반면, 는 non-breaking space로, 여러 개를 연속해서 사용하더라도 각각이 병합되지 않고 모두 화면상에 표시됩니다. 이를 통해 여러 개의 공백을 화면상에 나타낼 수 있습니다.줄 바꿈(Word Wrap):일반 공백: 단어 사이에 있는 일반 공백은 줄 바꿈 지점으로 사용될 수 있습니다. 즉, 화면 폭이 .. 2024. 4. 29. 4/16 HTML/CSS 1. 웹이란? 전 세계적으로 연결된 컴퓨터 네트워크를 통해 정보를 공유하는 공간, 웹 1.0이 개인이 사이트를 운영하고, 1:1로 접속했다면 웹 2.0은 하나의 거대한 플랫폼 기업이 사용자들에게 정보를 제공, 1:다 웹 3.0은 인공지능과 블록체인을 기반으로 맞춤형 정보를 제공하고 데이터 소유를 개인화하는 3세대 인터넷 기존에 사용하던 서비스에서 인공지능을 통해 개인 맞춤형 정보를 얻고, 블록체인을 통해 개인의 정보 소유 및 보안을 강화하는 지능형 웹 기술 Web 2.0에서 플랫폼이 소유하고 있던 정보들을 Web 3.0에서는 개인이 소유하게 됩니다(탈중앙화) 웹 1.0 2.0 3.0 에 대한 설명은 -> (https://velog.io/@sweet_sumin/%EC%9B%B9-1.0-%EC%9B%B9-2.. 2024. 4. 18. [React] React Hook 정의 함수형 컴포넌트에서도 life cycle, state 관리를 할 수 있게 해주는 함수 이전의 React는 class형 컴포넌트로 life cycle, state 관리를 해왔다. Hook이 도입되며 함수형 컴포넌트에서도 state, life cycle 관리를 할 수 있게 되었으며 React는 개념적으로 함수에 더 가깝기 때문에, class 대신 함수형 + hook을 권장하고 있다(공식문서) 동기 (기존의 문제점) 1. 컴포넌트들 사이에서 상태로직 재사용하기 이전에 class형 컴포넌트에 상태 로직이 종속적이었기 때문에 (constructor, componentDidMount 등) 컴포넌트의 계층이 깊어질수록 코드가 복잡해졌음. => useState 같은 React Hook은 계층의 변화 없이 상태 관.. 2024. 3. 12. CSRF, XSS, CORS https://evan-moon.github.io/2020/05/21/about-cors/ 사용자가 피싱 링크 클릭 -> 사용자의 계정(자동 로그인)으로 은행에게 돈 송금하라는 요청 보냄 대응 기법 Refferer: 백엔드 단에서 승인된 도메인으로만 요청시에 처리하도록 함 Safety token: 사용자 세션에 임의의 난수값을 지정하고 요청이 들어오면 대조해본다 XSS (Cross Site Scripting) 관리자가 아닌 권한이 없는 사용자가 웹 사이트에 스크립트를 삽입하는 공격 기법 ex) 해커가 웹사이트에 악의적인 스크립트 삽입(ex. 전자 게시판) -> 게시판을 열람한 사용자의 브라우저에서 스크립트가 실행되어 쿠키 탈취 -> 세션 하이재킹 CSRF는 인증된 세션이 필요하고 그걸 가지고 공격을 하지.. 2024. 3. 12. CSR (Client Side Rendering) & SSR (Server Side Rendering) 정의와 특징SSR(Server Side Rendering)사용자가 요청할 때마다 서버에서 렌더링, 페이지(html) 다 생성해서 보내줌 -> 새로고침 필수페이지 별로 구분 가능(link 다 다름)CSR(Client Side Rendering)서버는 빈 페이지(html)만 제공해주고, 나머지는 javascript로 클라이언트 단에서 직접 렌더링SPA(Single Page Application)최초의 페이지만 로딩한 이후에는 데이터만 변환해서 쓸 수 있는 애플리케이션필요한 데이터를 가져와서 필요한 부분만 재렌더링새로고침 없이 페이지 전환 가능, 네이티브 앱의 느낌을 줄 수 있음차이점SEO (Search Engine Optimization) (SSR > CSR)SE.. 2024. 3. 8. JWT(Json Web Token) 정의 JSON 객체에 인증에 필요한 정보들을 담은 후 비밀 키로 서명한 토큰, 인터넷 표준 인증 방식 인증(Authentication) & 권한 허가(Authorization) 방식 구조 header alg typ payload 사용자 정보(claim) sub, aud, iat, exp signature header+payload를 alg과 secret key로 암호화 signature는 secret key가 있어야 복호화할 수 있고, 이때문에 토큰이 중간에 악의적으로 수정되어도 판별할 수 있음 프로세스 토큰 생성 사용자 ---로그인---> 서버 서버: 확인 후 secret key로 JWT 생성 사용자 2024. 3. 8. OAuth 아래 글 내용들을 정리한 것, 원문이 더 자세함 https://hudi.blog/oauth-2.0/ https://gyoogle.dev/blog/web-knowledge/OAuth.html 등장배경 기존에는 A 사이트(ex. 개인 프로젝트 사이트)에서 B 사이트(ex. 구글)의 정보를 조회하려고 하면, B 사이트의 ID/PW를 조회해야 했었다. - ex. 네이버 계정의 이름, 성별, 생년월일로 계정 가입하기 이 방식은 보안에 취약할 수 밖에 없음. A 사이트에서 ID/PW를 해킹 당하면 B 사이트의 계정까지 다 뚫리는 것 .. 그래서 ID/PW를 직접 건네주지 않고도 Open API를 활용해서 B 사이트의 정보를 A 사이트에서 볼 수 있게 하는 것이 OAuth이다. (Open Authorization) .. 2024. 3. 4. Web Server와 WAS https://gmlwjd9405.github.io/2018/10/27/webserver-vs-was.html을 정리한 https://gyoogle.dev/blog/web-knowledge/Web%20Server%EC%99%80%20WAS%EC%9D%98%20%EC%B0%A8%EC%9D%B4.html을 정리한 글 1. 정적 페이지와 동적 페이지 정적 페이지: 이미 저장된(만들어진) 페이지 동적 페이지: 서버가 DB조회 등등 페이지를 그때 그때 만들어서 제공 ex. user_id에 따라 다르게 보여줘야 하는 경우에는 모든 정적 페이지를 만들어 놓을 수 없음 .. 2. Web Server 1) 정의 하드웨어: 웹 서버가 설치되어 있는 컴퓨터 소프트웨어: HTTP 요청을 받고, 정적인 컨텐츠(html, css.. 2024. 3. 1. [web] REST, REST API API : 다른 sw 시스템과 통신하기 위해 따라야 하는 규약 (ex. /post/userid 로 ~한 작업을 한다) REST (REpresentational State Transfer) API의 작동 방식에 대한 조건을 부과하는 소프트웨어 아키텍쳐. REST API : REST 아키텍쳐를 따르는 API RESTful API : REST 아키텍쳐를 구현하는 웹 사이트 REST의 구성 요소 1. Method POST, GET, PUT, DELETE 2. Resource uri, 어떤 자원인지 ex. http://myweb/users 와 같은 자원의 이름 3. Message json 형태, 세부사항 전달 => 이런 구성요소로 이루어진 API 작동 방식을 REST API라고 한다 REST의 특징 Uniform.. 2024. 2. 19. 이전 1 2 다음
