WebDevCurriculum 01. HTML과 웹의 기초 에서 영감을 받아 이를 이용하여 프론트엔드에 대해 학습한것들을 제 방식대로 정리한 글입니다. HTML의 기초적인 사항들에 대해 학습하자. HTML이란 Hypertext Markup Langauage의 약어로 웹을 이루는 가장 기초적인 구성요소로 웹 컨텐츠의 의미와 구조를 정의할 때 사용되며 일반적으로 CSS, Javascript와 함께 사용하여 웹 페이지를 표현한다. Hypertext: 참조... 프론트엔드학습WebDevCurriculumhtmlWebDevCurriculum 00. 형상관리시스템과 Git 위를 포함한 다양한 문제가 발생했을 때 로컬DB에 버전들이 저장되어 있어서 되돌릴 수 있다. 메인 서버 뿐만이 아니라 클라이언트의 컴퓨터에도 버전이 저장되어있어서 메인서버에 문제가 생겨도 클라이언트로부터 서버를 복원할 수 있다. 또한 메인서버가 다운되어있어도 자신의 DB에도 버전이 있기에 이를 이용하여 작업을 할 수가 있다. 컴퓨터 파일의 변경사항을 추적하고 여러 명의 사용자들 간에 해당 파... 형상관리시스템프론트엔드학습gitWebDevCurriculumWebDevCurriculum [WebDevCurriculum] React project build React Project의 base를 build하는 과정을 이해하고 확장할 수 있도록 한다. AplloProvider : ApolloProvider를 통해 apollo/client가 실행, 하위 계층 element들은 GraphQL에서 data를 받아온다. 하위 계층(자식) component(element) : graphql로부터 data를 받아오고, 그 후 App element를 실행한다.... WebDevCurriculumWebDevCurriculum [WebDevCurriculum] addEventListener / class toggle 개요 Javascript의 기능 중 가장 기본이 되며, 실무에서도 활용도가 높은 querySelector addEventListener class toggle 에 대해 이해한다. Checklist querySelector let row1Squares = document.querySelectorAll('.row1 .square'); → selector(식별자)에 기재된 class의 tag at... WebDevCurriculumWebDevCurriculum [WebDevCurriculum] ORM을 통한 DATA CRUD ejs파일을 view template로 사용하지 않는다면, endcoding이나 view engine 관련 설정을 별도로 해주어야 한다. template으로 html을 활용한다면 DATA U(Update)를 위해 별도의 post request 설정을 해주어야 한다. 이후에 ID, PW 변수에 input 값이 저장되어 활용할 수 있다. 경로가 많아지고 복잡해지면 기본 url을 localhost... WebDevCurriculumWebDevCurriculum [WebDevCurriculum] 서버와 클라이언트의 대화 이처럼 return값을 반환받아 다시 변수로 할당하는 번거로운 작업을 하지 않아도 되고, 예상치 못한 비동기 처리 이슈를 방지할 수 있다. 이처럼 callback을 과하게 사용하는 경우를 callback 지옥이라 하며, 이러한 단점을 보완하기 위해 promise / async-await과 같은 기능을 활용할 수 있다. 따라서 logic 내부적으로 반드시 순서를 지켜야 하거나 일전의 처리를 기... 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] 컴포넌트 기반 개발 - React React를 통해 가장 빠르게 웹 개발을 시작할 수 있다. → React-native와 유사한 부분이 많아 React를 능숙하게 다룰 수 있으면 앱개발까지 할 수 있다. → Data Binding 혹은 Data flow가 단방향으로 이루어지며, 데이터를 UI컴포넌트에 전달하는 단순한 데이터 흐름을 구현할 수 있다(상태관리). ※ React에서 data를 표현하기 위해 component를 계층... WebDevCurriculumWebDevCurriculum [WebDevCurriculum] node.js → node.js의 가장 강력한 기능이자 특징은 single thread, asynchronized pattern이다. → node package module, 노드패키지의 관리에 중점을 둔 명령어이다. → 이 라이브러리를 npm을 통해 설치할 경우 전역설치를 하거나, 지역설치(특정 프로젝트에서만 적용)를 할 수 있다. → node pacakage execution, 노드패키지의 실행에 중점... WebDevCurriculumWebDevCurriculum [WebDevCurriculum] local/session storage을 활용한 data persist fileReader를 통해 text / image file을 확보한다. text → fileRead를 통해 read한 data그대로 활용 가능. image → fileRead를 통해 read, URL변환 이후에 활용 가능. 기본적으로 fileBuffer, getFile()을 통해 data를 확보하도록 한다. fileBuffer에서 읽어온(getFile()) data를 그대로 읽어오기 가능 g... WebDevCurriculumWebDevCurriculum
01. HTML과 웹의 기초 에서 영감을 받아 이를 이용하여 프론트엔드에 대해 학습한것들을 제 방식대로 정리한 글입니다. HTML의 기초적인 사항들에 대해 학습하자. HTML이란 Hypertext Markup Langauage의 약어로 웹을 이루는 가장 기초적인 구성요소로 웹 컨텐츠의 의미와 구조를 정의할 때 사용되며 일반적으로 CSS, Javascript와 함께 사용하여 웹 페이지를 표현한다. Hypertext: 참조... 프론트엔드학습WebDevCurriculumhtmlWebDevCurriculum 00. 형상관리시스템과 Git 위를 포함한 다양한 문제가 발생했을 때 로컬DB에 버전들이 저장되어 있어서 되돌릴 수 있다. 메인 서버 뿐만이 아니라 클라이언트의 컴퓨터에도 버전이 저장되어있어서 메인서버에 문제가 생겨도 클라이언트로부터 서버를 복원할 수 있다. 또한 메인서버가 다운되어있어도 자신의 DB에도 버전이 있기에 이를 이용하여 작업을 할 수가 있다. 컴퓨터 파일의 변경사항을 추적하고 여러 명의 사용자들 간에 해당 파... 형상관리시스템프론트엔드학습gitWebDevCurriculumWebDevCurriculum [WebDevCurriculum] React project build React Project의 base를 build하는 과정을 이해하고 확장할 수 있도록 한다. AplloProvider : ApolloProvider를 통해 apollo/client가 실행, 하위 계층 element들은 GraphQL에서 data를 받아온다. 하위 계층(자식) component(element) : graphql로부터 data를 받아오고, 그 후 App element를 실행한다.... WebDevCurriculumWebDevCurriculum [WebDevCurriculum] addEventListener / class toggle 개요 Javascript의 기능 중 가장 기본이 되며, 실무에서도 활용도가 높은 querySelector addEventListener class toggle 에 대해 이해한다. Checklist querySelector let row1Squares = document.querySelectorAll('.row1 .square'); → selector(식별자)에 기재된 class의 tag at... WebDevCurriculumWebDevCurriculum [WebDevCurriculum] ORM을 통한 DATA CRUD ejs파일을 view template로 사용하지 않는다면, endcoding이나 view engine 관련 설정을 별도로 해주어야 한다. template으로 html을 활용한다면 DATA U(Update)를 위해 별도의 post request 설정을 해주어야 한다. 이후에 ID, PW 변수에 input 값이 저장되어 활용할 수 있다. 경로가 많아지고 복잡해지면 기본 url을 localhost... WebDevCurriculumWebDevCurriculum [WebDevCurriculum] 서버와 클라이언트의 대화 이처럼 return값을 반환받아 다시 변수로 할당하는 번거로운 작업을 하지 않아도 되고, 예상치 못한 비동기 처리 이슈를 방지할 수 있다. 이처럼 callback을 과하게 사용하는 경우를 callback 지옥이라 하며, 이러한 단점을 보완하기 위해 promise / async-await과 같은 기능을 활용할 수 있다. 따라서 logic 내부적으로 반드시 순서를 지켜야 하거나 일전의 처리를 기... 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] 컴포넌트 기반 개발 - React React를 통해 가장 빠르게 웹 개발을 시작할 수 있다. → React-native와 유사한 부분이 많아 React를 능숙하게 다룰 수 있으면 앱개발까지 할 수 있다. → Data Binding 혹은 Data flow가 단방향으로 이루어지며, 데이터를 UI컴포넌트에 전달하는 단순한 데이터 흐름을 구현할 수 있다(상태관리). ※ React에서 data를 표현하기 위해 component를 계층... WebDevCurriculumWebDevCurriculum [WebDevCurriculum] node.js → node.js의 가장 강력한 기능이자 특징은 single thread, asynchronized pattern이다. → node package module, 노드패키지의 관리에 중점을 둔 명령어이다. → 이 라이브러리를 npm을 통해 설치할 경우 전역설치를 하거나, 지역설치(특정 프로젝트에서만 적용)를 할 수 있다. → node pacakage execution, 노드패키지의 실행에 중점... WebDevCurriculumWebDevCurriculum [WebDevCurriculum] local/session storage을 활용한 data persist fileReader를 통해 text / image file을 확보한다. text → fileRead를 통해 read한 data그대로 활용 가능. image → fileRead를 통해 read, URL변환 이후에 활용 가능. 기본적으로 fileBuffer, getFile()을 통해 data를 확보하도록 한다. fileBuffer에서 읽어온(getFile()) data를 그대로 읽어오기 가능 g... WebDevCurriculumWebDevCurriculum