WebDevCurriculum 01. HTML과 웹의 기초 에서 영감을 받아 이를 이용하여 프론트엔드에 대해 학습한것들을 제 방식대로 정리한 글입니다. HTML의 기초적인 사항들에 대해 학습하자. HTML이란 Hypertext Markup Langauage의 약어로 웹을 이루는 가장 기초적인 구성요소로 웹 컨텐츠의 의미와 구조를 정의할 때 사용되며 일반적으로 CSS, Javascript와 함께 사용하여 웹 페이지를 표현한다. Hypertext: 참조... 프론트엔드학습WebDevCurriculumhtmlWebDevCurriculum 00. 형상관리시스템과 Git 위를 포함한 다양한 문제가 발생했을 때 로컬DB에 버전들이 저장되어 있어서 되돌릴 수 있다. 메인 서버 뿐만이 아니라 클라이언트의 컴퓨터에도 버전이 저장되어있어서 메인서버에 문제가 생겨도 클라이언트로부터 서버를 복원할 수 있다. 또한 메인서버가 다운되어있어도 자신의 DB에도 버전이 있기에 이를 이용하여 작업을 할 수가 있다. 컴퓨터 파일의 변경사항을 추적하고 여러 명의 사용자들 간에 해당 파... 형상관리시스템프론트엔드학습gitWebDevCurriculumWebDevCurriculum [WebDevCurriculum] file load/save as → FileReader(VanillaJS에 내장되어있는 class, file load 후 url 정보를 읽음) file upload logic을 구성한다. → 최종적으로 load가 되는 시점에서 저장되어있는 readAsDataURL(=reader.result), Event 실행에 따라 preview.src(이미지 저장 장소)에 해당 정보가 담긴다. reader.readAsDataURL이나 r... WebDevCurriculumWebDevCurriculum [WebDevCurriculum] React 기반의 file system 구현 - txt/image 불러오기 기존 VanillaJS를 활용하여 filesystem을 구현하는 것에 비해, React 기반의 filesystem은 어떠한 장점이 있는지 살펴본다. file을 local system으로 부터 읽어오고, 이를 상태변수화하여 file load(반영)가 즉시 이루어지도록 한다. react-router-dom이 version6로 업데이트되어 props 사용이 안되므로, localStorage를 활용... WebDevCurriculumWebDevCurriculum [WebDevCurriculum] 도커/컨테이너 Container 런타임 환경을 제공하는 OS(리눅스나 WSL이 설치된 윈도우 등)가 있다면, 어떤 장치에서든 Docker 및 해당 추상화된 프로그램을 실행할 수 있다. 이러한 비효율적인 문제를 해결할 방안으로 가상화(Virtual Interface Solution)가 등장하게 되었고, 이후 별도 물리장치의 추가없이 기존 자원을 공유하면서 사용자 수요에 대응할 수 있게 되었다. 여러 대의 컴... WebDevCurriculumWebDevCurriculum [WebDevCurriculum] Session을 활용한 사용자 로그인 webStorage나 cookie는 사용자(client)측에서 저장하는 자료이기 때문에, 보안상 취약하고 권장하지 않는다. 서버에 사용자 정보를 저장한다(session). cookie에 cid, sid만 넘겨준다. 최종적인 인증 과정은 session을 통해 진행한다. cookie에 session id를 넣어 같이 전달하면, request Header를 통해 해당 id에 접근 및 session... WebDevCurriculumWebDevCurriculum [WebDevCurriculum] 로그인 정보 jwt 발급 및 cookie 저장 사용자 로그인 정보를 안전하게 저장하고, 이를 유지(지속)하기 위한 여러 방안들이 존재한다. 사용자 로그인 정보를 암호화한 후, 이를 jwt로 발급한다. jwt로 발급한 로그인 정보를 cookie에 보관한다. jwt로 발급한 로그인 정보를 session(server)에 보관한다. 하지만 로그인 정보를 유지하기위해 webstorage, jwt, cookie 등의 기능을 활용하게 되었는데, 이 ... WebDevCurriculumWebDevCurriculum [WebDevCurriculum] 컴포넌트 기반 개발 - React React를 통해 가장 빠르게 웹 개발을 시작할 수 있다. → React-native와 유사한 부분이 많아 React를 능숙하게 다룰 수 있으면 앱개발까지 할 수 있다. → Data Binding 혹은 Data flow가 단방향으로 이루어지며, 데이터를 UI컴포넌트에 전달하는 단순한 데이터 흐름을 구현할 수 있다(상태관리). ※ React에서 data를 표현하기 위해 component를 계층... WebDevCurriculumWebDevCurriculum [WebDevCurriculum] Javascript / DOM → for(반복시작조건; 반복완료조건; 반복인자) → do{ logic } while(반복조건) → while(반복완료조건) {logic} → 기본적으로 선언한 변수는 하나의 component 및 function 등 변수가 선언된 요소 내부에서만 유효하다. → Javascript의 특성상 함수자체가 변수, 또 다른 함수의 인자, return 등으로 활용될 수 있다. → 이러한 함수의 즉시적인... WebDevCurriculumWebDevCurriculum
01. HTML과 웹의 기초 에서 영감을 받아 이를 이용하여 프론트엔드에 대해 학습한것들을 제 방식대로 정리한 글입니다. HTML의 기초적인 사항들에 대해 학습하자. HTML이란 Hypertext Markup Langauage의 약어로 웹을 이루는 가장 기초적인 구성요소로 웹 컨텐츠의 의미와 구조를 정의할 때 사용되며 일반적으로 CSS, Javascript와 함께 사용하여 웹 페이지를 표현한다. Hypertext: 참조... 프론트엔드학습WebDevCurriculumhtmlWebDevCurriculum 00. 형상관리시스템과 Git 위를 포함한 다양한 문제가 발생했을 때 로컬DB에 버전들이 저장되어 있어서 되돌릴 수 있다. 메인 서버 뿐만이 아니라 클라이언트의 컴퓨터에도 버전이 저장되어있어서 메인서버에 문제가 생겨도 클라이언트로부터 서버를 복원할 수 있다. 또한 메인서버가 다운되어있어도 자신의 DB에도 버전이 있기에 이를 이용하여 작업을 할 수가 있다. 컴퓨터 파일의 변경사항을 추적하고 여러 명의 사용자들 간에 해당 파... 형상관리시스템프론트엔드학습gitWebDevCurriculumWebDevCurriculum [WebDevCurriculum] file load/save as → FileReader(VanillaJS에 내장되어있는 class, file load 후 url 정보를 읽음) file upload logic을 구성한다. → 최종적으로 load가 되는 시점에서 저장되어있는 readAsDataURL(=reader.result), Event 실행에 따라 preview.src(이미지 저장 장소)에 해당 정보가 담긴다. reader.readAsDataURL이나 r... WebDevCurriculumWebDevCurriculum [WebDevCurriculum] React 기반의 file system 구현 - txt/image 불러오기 기존 VanillaJS를 활용하여 filesystem을 구현하는 것에 비해, React 기반의 filesystem은 어떠한 장점이 있는지 살펴본다. file을 local system으로 부터 읽어오고, 이를 상태변수화하여 file load(반영)가 즉시 이루어지도록 한다. react-router-dom이 version6로 업데이트되어 props 사용이 안되므로, localStorage를 활용... WebDevCurriculumWebDevCurriculum [WebDevCurriculum] 도커/컨테이너 Container 런타임 환경을 제공하는 OS(리눅스나 WSL이 설치된 윈도우 등)가 있다면, 어떤 장치에서든 Docker 및 해당 추상화된 프로그램을 실행할 수 있다. 이러한 비효율적인 문제를 해결할 방안으로 가상화(Virtual Interface Solution)가 등장하게 되었고, 이후 별도 물리장치의 추가없이 기존 자원을 공유하면서 사용자 수요에 대응할 수 있게 되었다. 여러 대의 컴... WebDevCurriculumWebDevCurriculum [WebDevCurriculum] Session을 활용한 사용자 로그인 webStorage나 cookie는 사용자(client)측에서 저장하는 자료이기 때문에, 보안상 취약하고 권장하지 않는다. 서버에 사용자 정보를 저장한다(session). cookie에 cid, sid만 넘겨준다. 최종적인 인증 과정은 session을 통해 진행한다. cookie에 session id를 넣어 같이 전달하면, request Header를 통해 해당 id에 접근 및 session... WebDevCurriculumWebDevCurriculum [WebDevCurriculum] 로그인 정보 jwt 발급 및 cookie 저장 사용자 로그인 정보를 안전하게 저장하고, 이를 유지(지속)하기 위한 여러 방안들이 존재한다. 사용자 로그인 정보를 암호화한 후, 이를 jwt로 발급한다. jwt로 발급한 로그인 정보를 cookie에 보관한다. jwt로 발급한 로그인 정보를 session(server)에 보관한다. 하지만 로그인 정보를 유지하기위해 webstorage, jwt, cookie 등의 기능을 활용하게 되었는데, 이 ... WebDevCurriculumWebDevCurriculum [WebDevCurriculum] 컴포넌트 기반 개발 - React React를 통해 가장 빠르게 웹 개발을 시작할 수 있다. → React-native와 유사한 부분이 많아 React를 능숙하게 다룰 수 있으면 앱개발까지 할 수 있다. → Data Binding 혹은 Data flow가 단방향으로 이루어지며, 데이터를 UI컴포넌트에 전달하는 단순한 데이터 흐름을 구현할 수 있다(상태관리). ※ React에서 data를 표현하기 위해 component를 계층... WebDevCurriculumWebDevCurriculum [WebDevCurriculum] Javascript / DOM → for(반복시작조건; 반복완료조건; 반복인자) → do{ logic } while(반복조건) → while(반복완료조건) {logic} → 기본적으로 선언한 변수는 하나의 component 및 function 등 변수가 선언된 요소 내부에서만 유효하다. → Javascript의 특성상 함수자체가 변수, 또 다른 함수의 인자, return 등으로 활용될 수 있다. → 이러한 함수의 즉시적인... WebDevCurriculumWebDevCurriculum