728x90 WEB41 URL, URI, URN 차이 URL (Uniform Resource Locator, 통합자원위치)자원이 있는 위치를 나타내는 주소웹이 아니더라도 네트워크를 사용하는 어느곳에서나 URL을 사용한다.IP 주소, 이메일, 파일 전송 등프로토콜(예: HTTP, HTTPS)을 포함 URI (Uniform Resource Identifier, 통합자원식별자)통일된 정보 자원의 식별하는 데 사용되는 식별자텍스트, 비디오, 음향, 이미지 등의 식별인터넷 서비스를 전제로 공통적인 형식은 웹 페이지 주소을 말한다.URI는 URL과 URN을 포함 URI 일반적인 구조scheme://[userinfo@]host[:port][/path][?query][#fragment]scheme:// : protocol (http, https, ftp)[userinfo.. 2024. 3. 7. 인증 / 권한 부여 방법 (OAuth, session, JWT) / acessToken, refreshToken) 인증이란?프론트 관점 : 로그인, 회원가입과 같은 도입부서버 관점 : 모든 API 요청에 대한 사용자 확인 작업인증이 제대로 이루어지지 않는 다면?정보가 유출되는 상황이 생김정확한 인증을 위해서는..자신이 누구인지 알수있는 정보를 프론트에 입력해서, 서버는 그 정보로 요청에 맞게 데이터를 뿌려주어야 한다. 인증 방식 3가지계정정보를 요청 헤더에 넣는 방식토큰 기반 인증 방식Access Token & Refresh Token 방식 1. 계정정보를 요청 헤더에 넣는 방식 (HTTP)웹, 모바일 서비스에서 가장 많이 사용하는 통신 방식서버에 요청을 보낸다 = 웹에서 HTTP 메세지를 전송한다.HTTP는 기본적으로 헤더, 바디로 구성되며, 헤더에 인증 방식을 직접 넣어 요청을 보낸다.비연결성단방향 통신장점 : .. 2024. 3. 4. 생산성있는 Javascript 코드 작성 | longhand, shorthand 개요개발에서 longhand(긴 형식)과 shorthand(짧은 형식)는 같은 작업을 수행하지만 코드 길이나 표현 방식이 다릅니다. shorthand는 더 간결한 코드 스타일을 의미하며, 특히 CSS, JavaScript, 객체 표현 등에서 많이 사용됩니다. 1. 조건문 (Control Statements)if 문longhandif (likeJavaScript == true)var a;if ( a != true ) {// do something...} shorthandif (likeJavaScript)var a;if ( !a ) {// do something...} if else 문longhandvar big;if (x > 10) { big = true;}else { big = false;} .. 2024. 3. 4. 웹 프론트 아키텍처 | 모던 프론트엔드 아키텍처 웹 프론트 아키텍처프론트엔드 역할이 점점 커지면서 웹 프론트 아키텍처가 탄생하였다.프론트 아키텍처는 프로덕트 관리에서 중요한 부분이다. 플로우차트, 다이어그램을 활용하여 아키텍처( AS-IS, TO-BE)를 정리한다면, 적절한 상황에 비즈니스 대응을 할 수 있다. 웹 프론트 아키텍처 설계 고려사항컴포넌트 구조 (Atom → Molecule → Organism → Template(layout) → Page)MV* 구조 (MVC, MVP, MVVM, MVI)웹 애플리케이션의 구조 (SPA, MPA)렌더링 방식 (CSR, SSR)상태관리 도구폴더 및 파일 구조서비스 인프라 구조아키텍처를 그리는 도구https://app.diagrams.net/https://excalidraw.com/ 프론트엔드 개발 로드맵 .. 2024. 2. 13. CSS, SCSS, SASS의 기본 개념과 문법 CSS 파일에서 변수를 정의하는 방법div.css:root { --div-color: red; }div { background-color: var(--div-color); }CSS 작성에 있어 Sass만이 방법인 건 아니긴 합니다. css 파일 안에서 함수를 사용할 순 없지만css 여러 내장 함수를 지원하고 있다.calc(): 계산을 수행하는 함수로, 길이, 너비, 위치 등을 계산할 때 사용됩니다. 예를 들어, width: calc(100% - 20px)요소의 너비를 화면 너비의 100%에서 20px을 뺀 값으로 설정합니다.rgb(): RGB 색상을 생성하는 함수로, 빨간색, 초록색, 파란색 값을 사용하여 색상을 지정합니다. 예를 들어, background-color: rgb(255, 0, 0);는 .. 2024. 1. 23. HTML5기반 동영상 플레이어 | 웹 표준 HTML(Hyper Text Markup Language)는 웹 문서를 만들 때 사용하는 프로그래밍 언어HTML5 : 마크업 랭귀지(HTML)의 문법적(syntactic) 버전뿐만 아니라 새로운 DOM API 스펙을 포함하는 것 웹 표준 동영상 플레이어Flash Player가 공식적으로 중단되면서 HTML5 플레이어는 새로운 산업표준이 되었다. 및 요소의 기능을 강화하여 추가 플러그인을 사용하지 않고도 웹페이지 또는 애플리케이션에서 직접 콘텐츠를 스트리밍할 수 있다.브라우저 자체에서 지원되는 기능이기 때문에 별도의 외부 라이브러리나 플러그인이 필요하지 않다.사용이 간편하며, 가볍고 특별한 설정이나 스타일링이 필요없다. 1. VideoJShttps://videojs.com/HTML5 표준 동영상 플레이어를.. 2024. 1. 23. 프레임워크와 라이브러리 개념 프레임워크다양한 api들 컴파일러, 애플리케이션 지원기능, 라이브러리 등이 모두 포함된 것짜여진 패턴이나 틀 기반에서 내가 코딩을 하는 것 웹 프론트엔드 주요 프레임워크1. ReactReact는 Facebook에서 개발한 프레임워크입니다. 가장 큰 특징은 가상 DOM을 사용한다는 점인데요, 이를 통해 UI 업데이트가 매우 효율적으로 이루어집니다. React는 컴포넌트 기반으로 설계되어 재사용성과 유지보수성이 높습니다. 2. AngularAngular는 Google에서 개발한 프레임워크입니다. 대규모 애플리케이션 개발에 적합한데, 이는 구조가 체계적이고 강력한 기능을 제공하기 때문입니다. 단, TypeScript라는 프로그래밍 언어를 필수적으로 사용해야 합니다. TypeScript는 JavaScript의 .. 2024. 1. 12. Jaml: JavaScript 기반 선언형 HTML 생성 도구 | JAML.js 개요아키텍처 기술 조사 중 JAML webSite 라는 단어를 보았다.May 20, 2021 자료 중 일부 였는데 JAML를 구글에 검색했을때 정리된 자료가 별로 없었다.그래서 간단하게 정리해보려고 하는 포스팅이다. JAMLJAML은 때때로 "JavaScript-based Markup Language"의 약어로 사용되며, XML이나 HTML처럼 구조화된 마크업을 JavaScript 스타일로 작성하려는 시도에서 나온 개념입니다. 예전에는 JAML.js라는 JavaScript 라이브러리가 있었고, 이는 WPF(XAML) 스타일의 UI를 웹에서 구현하려는 프로젝트였습니다.Jaml은 Ruby의 Haml 라이브러리를 에뮬레이트하여 JavaScript 프로젝트에서 HTML 렌더링을 간소화하도록 설계된 JavaSc.. 2024. 1. 12. 클라이언트와 서버의 데이터 관리 - Cookie, Session, Storage, Cash 개요웹에서 데이터를 관리하는 기술은 cookie와 session이 있다. 웹은 서버와 프론트 엔드 간에 데이터를 주고받는데, 이때 cookie와 session이 사용된다. 간단히 말하면, session은 서버에서 관리하는 데이터이고 cookie는 프론트 엔드, 즉 웹 브라우저에서 관리하는 데이터를 의미한다.해당 포스팅에서는 session과 cookie의 차이를 이해하고, 웹 브라우저에서 데이터를 저장하는 방법에 대해 자세히 알아보자.서버1. session클라이언트(브라우저)1. cookie2. storeage2.1. session storeage2.2 local storeage2.3 cash 1. Session (세션)서버 측에서 유지되는 상태 정보를 저장하는 방법사용자가 웹 사이트 접속 시 서버에서 .. 2024. 1. 11. 이전 1 2 3 4 5 다음 728x90
