프론트엔드공부 9

[드래그 앤 드롭] 에 대해 알아보기 & 구현하기

드래그 앤 드롭을 직접 구현하며, 어떤 기능 등을 작성해야 되는지에 대해서 작성 0. 드래그 앤 드롭이란? 1. 드래그 앤 드롭은 사용자 인터페이스 디자인과 상호작용에서 일반적으로 사용되는 기술이다. 2. 이는 마우스나 터치 기반 장치를 사용하여 객체를 클릭하고 드래그하여 다른 위치로 이동시키는 것을 의미한다. 3. 드래그 앤 드롭은 사용자가 콘텐츠를 쉽게 이동하고 조작할 수 있도록 도와주는 직관적인 방법이다. 4. 드래그 앤 드롭은 웹 애플리케이션, 데스크톱 애플리케이션, 모바일 앱 등 다양한 플랫폼에서 사용된다. 일반적으로 드래그 앤 드롭은 객체나 아이콘을 선택한 후 원하는 위치로 드래그하여 놓는 것으로 구현된다. 이를 통해 파일 및 폴더의 이동, 이미지 및 텍스트의 드래그 앤 드롭 등 다양한 작업을..

카테고리 없음 2023.06.11

[RESTful API]의 정의와 사용하는 이유와 적용 방법

[RESTful API] 해당 프로토콜의 정의와 사용하는 이유에 대해서 작성 및 적용 방법 등에 대해서 작성 1. REST API 의 정의? (Representational State Transfer API) REST API란 REST를 기반으로 만들어진 API를 의미한다. 1-1. REST에대해 먼저 알아보기 REST는 (Representational State Transfer)의 약자로 자원을 이름(자원의 표현)으로 구분하여 해당 자원의 상태를 주고받는 모든 것을 의미한다. 즉, 자원(resource)의 표현(representation)에 의한 상태 전달을 뜻한다. **잠깐 용어정리** 자원 : 해당 소프트웨어가 관리하는 모든 것 ( 문서, 그림, 데이터, 해당 소프트웨어 자체 등 ) 표현 : 그 자..

카테고리 없음 2023.06.03

[네트워크]HTTP와 HTTPS 차이점과 HTTPS 적용방법

1. HTTP와 HTTPS의 차이점 차이점 HTTP HTTPS 1. 보안 HTTP 메시지는 일반 텍스트이므로, 권한이 없는 당사자가 인터넷을 통해 쉽게 액세스하고 읽을 수 있다. 따라서 누군가가 네트워크 상에서 데이터를 가로채면 내용을 쉽게 확인할 수 있다. HTTPS는 보안 소켓 계층(SSL 또는 TLS)을 통해 데이터를 암호화하여 전송한다. 이는 데이터의 기밀성을 유지하고, 가로채기를 방지한다. 2. 인증서 인증서를 사용하지 않기 때문에, 서버의 신원을 확인할 수 없다. 따라서 공격자가 중간에 가로채서 가짜 서버로 위장하는 것을 막을 수 없다. 서버 인증서를 사용하여 서버의 신원을 확인한다. 서버 인증서는 신뢰할 수 있는 제3자 기관(CA, Certificate Authority)에 의해 발급되며, ..

카테고리 없음 2023.05.31

[브라우저저장소(Web Storage)]localStorage, SessionStorage에 대해 알아보기

0. 들어가며... 브라우저에는 웹사이트에서 관리할 수 있는 저장소들이 존재한다. 이 저장소는 html5부터 제공하는 특정 데이터를 서버가 아니라 클라이언트 웹 브라우저에 저장할 수 있도록 제공하는 기능이다. 즉, 사용자의 컴퓨터에 있으며, JavaScript를 통한 접근이 가능하다. 브라우저가 가지고 있는 저장소는 다음과 같다. 1. LocalStorage & Session Storage 2. Cookie 3. IndexedDB 4. Memory & Cahce 이중에서 LocalStorage & Session Storage에 대해 알아보겠다. 1. LocalStorage & Session Storage의 기본 1. localStorage와 SessionStorage는 같은 인터페이스를 공유한다. 인터페..

웹 지식 2023.05.27

[웹개발기술] Font를 Preload 하는 방법

1. 들어가기에 앞서... FOIT 와 FOUT 라는 용어에 대해 알아보자. FOIT (Flash of Invisible Text) 란? 브라우저가 웹페이지가 로드될 때, 웹 폰트가 아직 다운로드되지 않았기 때문에, 일시적으로 텍스트가 화면에 표시되지 않는 현상을 말한다. 특히 대체 폰트가 지정되지 않은 경우 브라우저가 폰트를 렌더링하기 위해 다운로드를 기다리는 동안 발생할 수 있다. FOUT(Flash of Unstyled Text)란? 웹 페이지에서 원하는 글꼴이 로드되기 전에 브라우저에서 기본 글꼴로 표시되는 현상을 의미한다. 이와 같은 폰트 이슈가 생기는 이유는 브라우저 동작에 있어서 폰트 리소스 요청의 경우에는 다른 리소스 요청보다 늦게 처리되기 때문이다. 따라서 웹 사이트를 구성하는 사이에 폰..

웹 지식 2023.05.07

Web Standards(웹 표준) 을 지키는 이유 , 그리고 web accessibility(웹 접근성)이란?

1. Web Standards (웹 표준) 은 어떤 필요성에 의해 등장 했을까? 1. 1990년대 초반, 인터넷이 상용화되기 시작하면서 웹 페이지가 등장 2. 당시에는 웹 페이지가 다양한 브라우저에서 동일하게 보이지 않았다. 몇 년전까지만해도 각각의 브라우저가 가지고 있는 장점 혹은 유리한 기능을 부각시키기 위해 경쟁을 목적으로 다른 브라우저와는 호환이 되지 않는 요소들을 사용하기도 했다. 이로인해 생겨난 문제점이 다른 브라우저까지 보여지는 화면이 다르다는 것 그 중에서도 각각의 의미에 맞는 요소의 무분별 이러한 문제는 웹 디자이너들과 개발자들이 웹 페이지를 만들 때 매우 어려움을 겪게 만들었다. 이런 문제점들 떄문에 1994년에 W3C(World Wide Web Consortium)이라는 공식 웹 표준..

웹 지식 2023.04.24

HTML5 시멘틱 태그(Semantic Tags)를 알아보자

1. HTML5 시멘틱 태그에 대하여 알아보자 1-0. HTML5란 무엇일까? HTML은 1993년 HTML 1.0이 팀 버너스리(Tim Berners-Lee)에 의해 고안되어 발표된 이후 해를 거듭하며 HTML은 발전에 발전을 거듭하였다. 그리고 1997년 HTML 3.2 및 HTML 4.0을 개발하면서 W3C에서 HTML의 버전을 관리하기 시작하였다.HTML5는 HTML 4.01과 XHTML 1.0, XHTML 1.1을 계승하는 차세대 웹 기술로 HTML 마크업이 1990년대 초 인터넷에 소개된 이래로 계속적으로 진화를 거듭해 왔다.기존에 존재하던 HTML의 한계를 극복하고, 기존 기술들의 설계를 개선하기 위해 W3C에서 HTML5라는 새로운 기술이 정의되었다.마이크로소프트, 모질라, 애플, 구..

HTML & CSS 2023.04.24

내가 회사를 선택하는 기준 그리고, 생각

내가 회사를 선택하는 기준 && 그리고 내가 가고싶은 회사 사수 존재여부 , 돈, 회사 서비스에 대한 나의 관심(자체 서비스 회사), 지역, 회사 분위기(수평구조), 이 중에서 가장 중요하게 생각하는것은 들어가고자 하는 회사의 서비스에 대한 나의 관심이다. 굳이 많은 직업중에, 비전공자로서 나를 개발의 세계로 이끈것, 개발자가 되기위해 많은 공부량이 필요하다는것을 알면서도 나를 개발의 세계로 이끈 것은, 만들고자 하는것을 컴퓨터 코딩을 통해 만들 수 있다는 것이다. 이게 나를 움직이게 만든 원동력이다. 프론트엔드 개발자로서, 관심있는 서비스, 제품에 대한 판매, 소개, 직접적인 서비스화면을 만들어 소비자와 소통하는것은 나에게 너무 매력적으로 느껴졌다. 사실 처음에는 내가 사용하는 앱 또는 웹의 회사, 스..

개발일기 2023.04.23

[제로베이스] 부트캠프에 참여하는 나의 다짐

1. 제로베이스 프론트엔드 스쿨에 참여하는 목적 2023년 4월 1일 ~9월 31일 공식적인 온라인 부트캠프인 제로베이스의 일정이다. 시작 제로베이스에 참여하는 나의 진짜 목적 프론트앤드 개발자가 되기로 마음먹고 독학을 시작했지만, 방향성을 잡기 어려웠다. 어떤 분야든지 마찬가지겠지만, 나는 기초를 정말 중요하게 생각한다. 세상 대부분 문제들은 결국 응용을 통해 해결되는데, 응용을 하기 위해 기초지식이 받쳐지지않으면 더빠르게 한계에 맞닥뜨리게 될 것이다. 결국 더 좋은 해결방안은 여러가지 기초적인 생각들이 모이고 쌓여 만들어질 것이라고 생각한다. 프론트엔드 개발자란 프론트엔드 개발자는 웹사이트나 앱의 사용자 인터페이스(UI)를 개발하는 역할을 수행하는 전문가입니다. 이는 HTML, CSS, JavaScr..

개발일기 2023.04.06