WebDevCurriculum

개요개발자로서 기본적으로 알아야할 개념들을 학습하고 정리한다.학습방안이 개념이 왜 필요한지 이해한다.이 개념을 왜 활용해야 하는지 넓게 이해한다.이 개념이 무엇인지 이해한다.이 개념을 통해 무엇을 할 수 있는지 확장해가며 이해한다.이 개념을 어떠한 방식으로 활용하고,

개요형상관리 시스템에 대해 정확히, 구체적으로 이해한다.Checklist형상관리 시스템은 왜 나오게 되었을까요?→ 협업툴의 일종.→ 개발을 진행하면서 log 기록을 남겨 create, delete, update 등의 log 이력을 손쉽게 살펴볼 수 있다.git은 어떤

개요형상관리 시스템에 대해 정확히, 구체적으로 이해한다.Checklist기본개념HTML/XML → HTML(Hyper Text Markup Language) : 웹페이지를 구성하는 요소를 구현하고 설명하기 위해 고안된 언어.→ XML(eXtensible Markup L

개요어플리케이션을 구성하는 CSS에 대해 이해한다.ChecklistCSS란 무엇인가요?→ 웹페이지를 "꾸미기 위해" 관련 기능과 도구를 제공하는 언어CSS 적용방법→ inline : element에 style을 직접 기술하는 방법→ 외부 : CSS파일을 별도로 분리하여

개요Javascript와 DOM에 대해 이해한다.Checklist자바스크립트의 문법은 다른 언어들과 비교해 어떤 특징이 있을까요?→ Javascript는 매우 유연한 언어로, 가장 특징적인 부분은 동적선언과 비동기처리이다.→ 동적선언 : Javascript에서는 자료형

개요Javascript의 기능 중 가장 기본이 되며, 실무에서도 활용도가 높은querySelectoraddEventListenerclass toggle에 대해 이해한다.ChecklistquerySelector let row1Squares = document.queryS

개요 Javscript의 객체지향프로그래밍에 대해 알아본다. > Checklist 객체지향 프로그래밍 객체지향 프로그래밍은 무엇일까요? → OOP, Object Oriented Programming → 프로그램의 동작은 여러 객체들이 모여 이루어진다는 개념에서

.css file과 같이 별도 Javascript logic을 적용하기 위한 src 경로설정이 필요하다.HTML - bodyclass를 외부파일(.js)을 통해 정의해준다.desktop.jsclass의 생성자(constructor)는 속성을 정의해주는 영역이다.생성자를

1. 좌표개념 > drag를 비롯한 mouse event들은 좌표 개념에 대한 이해가 먼저 필요하다. ScreenX, ScreenY : 컴퓨터 전체화면의 왼쪽 꼭대기를 기준으로 한 마우스 X,Y 값. PageX, PageY : 전체문서의 왼쪽 꼭대기를 기준으로

개요 네트워크 개념과 프로토콜에 대해 이해한다. > Checklist 인터넷은 어떻게 동작하나요? Internet Protocol Suite의 레이어 모델에 입각하여 설명해 보세요. → 지역PC가 인터넷에 접근할때 인터넷 영역에서의 수많은 라우팅을 관리하는

.css file과 같이 별도 javascript logic을 적용하기 위한 src 경로설정이 필요하다.HTML - bodyClass에서 반복적으로 사용해야 할 변수를 HTML script 상에서 정의해주고, 이를 Class로 전달한다.HTML - body, 변수 선언

1. folder method 구현 로직 특정 이벤트가 동작할때(폴더 창을 띄우기 위한 클릭 등), 나타날 창의 구성(layout)을 구현한다. 해당 창의 class에 display:none 속성을 나타내는 별도의 class를 추가하고, 특정 이벤트가 작동할때마다 화

개요 객체지향 프로그래밍의 원칙을 이해한다. > Checklist 관심사의 분리 원칙이란 무엇인가요? → SoC, seperation of concerns → 관심사, 책임, 기능을 한가지씩 담당하는 개별적인 객체(부분)으로 분리해야 한다는 설계원칙이다. 웹에서는

1. 기본 tag 개념 nav : 다른 페이지로의 이동, 사이트 링크 등을 보여주는 구획. ul : 목록을 나타내는 구획. → ol, li tag 등을 사용할 수 있다. 2. CSS 참조개념 기본적으로 화면의 여백이 존재하기 때문에, padding/margin 설

별도의 list나 array를 활용하며, class id와 함께 중복선택이 발생하지 않도록 한다.이벤트 요소들에 대해 Event를 부여해준다.별도 list 등을 활용하여 중복선택을 방지하고, event target에 대한 class toggle / classList.a

개요node.js에 대해 이해한다.Checklistnode.js는 무엇인가요? → javascript 언어로 동작하는(javascript 엔진 기반의) 웹어플리케이션 프레임워크이다.→ non-blocking I/O 및 단일 스레드 동작을 통해 효율적인 네트워킹을 가능하

1. file load(by vanillaJS) > file을 read하는 별도의 class와 method 등을 활용한다. file loader와 Image를 확인할 수 있는 공간(Thumbnail)을 구성한다. 활용해야 할 변수를 선언한다. → FileReade

개요 REST API의 기본 개념과 원리에 대해 알아본다. > 유의사항 node.js에서 제공하는 http module은 그 자체로 활용할 수는 있으나, 실무에서 주로 사용하는 방법은 express module을 활용하여 middleWare와 함께 사용하는 것이다

개요 server 동작을 구현하기 위해 필요한 원리와 REST API에 대해 이해한다. > Checklist 비동기 프로그래밍이란 무엇인가요? 비동기 프로그래밍의 개념에는 컴퓨터 공학에서의 Blocking 개념을 먼저 알고 있어야 한다. Blocking 프로세

대상 간 진행하는 상호작용(원하는 resource/ 정보/ data 등을 얻는 과정)을 도와주는 도구, 매개체API는 단순하게 말하면 개발자, client, server 간 서로 협의한 규칙 내에서 간편하게 정보를 주고받기 위한 명령어(혹은 링크)이다.하지만 API의

개요 사용자 인증 및 정보 저장에 활용하는 cookie(쿠키), session, JWT 등에 대해 이해한다. > Checklist 쿠키란 무엇일까요? client(사용자PC) local에 저장되어 있는 token(key, value로 이루어진 문자열 데이터) 파

1. fileReader를 통해 data 확보 > fileReader를 통해 text / image file을 확보한다. text → fileRead를 통해 read한 data그대로 활용 가능. image → fileRead를 통해 read, URL변환 이후에 활용

INSERT USER DATA : local storage에 유저 정보를 저장INSERT USER DATA의 input 란에 ID/PW를 입력하여 local storage에 각각 key, value 값으로 저장한다.local storage에 저장되어있는 유저정보를 lo

개요데이터베이스에 대해 이해하고, 이를 활용하기 위한 방법에 대해 이해한다.ChecklistRDBMS 테이블의 정규화는 무엇인가요?table 간의 관계/관계비율 등을 정의하는 등 DB구축을 위한 기본적인 data/table 정제과정을 의미한다.쉽게 말하면 무분

html을 사용할 경우 endcode 및 engine 설정을 진행해야 한다.별도 enginer설정을 해주지 않을 경우, express가 사용하는 view engine은 ejs이다.ejs파일을 view template로 사용하지 않는다면, endcoding이나 view

개요웹 서비스 보안에 대한 전반적인 개념을 이해한다.Checklist입력 데이터의 Validation을 웹 프론트엔드에서 했더라도 서버에서 또 해야 할까요? 그 이유는 무엇일까요?client level에서 전달되는 data들은 데이터 위변조가 쉽고 그만큼 보안적으로 취

개요BackEnd의 기본, GraphQL에 대해 이해한다.ChecklistGraphQL API는 무엇인가요? REST의 어떤 단점을 보완해 주나요?RESTAPI보통 HTTP REQUEST(GET/POST method)을 지칭하며, 엔드포인트로부터 사용자가 data를 얻

로그인 정보를 안전하게 유지하는 방법사용자 로그인 정보를 안전하게 저장하고, 이를 유지(지속)하기 위한 여러 방안들이 존재한다.암호화사용자가 입력한 로그인 정보(ID, PW)를 암호화(혹은 hash)한다.사용자 로그인 정보를 암호화한 후, 이를 jwt로 발급한다.정보저

webStorage나 cookie는 사용자(client)측에서 저장하는 자료이기 때문에, 보안상 취약하고 권장하지 않는다.완전하게 안전한 정보전송이 이루어지는 것은 아직도 미완의 과제이지만, 현재 활용하는 방식은 다음과 같다.서버에 사용자 정보를 저장한다(session

우리가 express 프레임워크를 사용할때 기본적인 directroy를 정해져있는 형태를 준수하면서 구성해야하듯, graphQL도 기본적인 골격(structure)을 먼저 구성할 필요가 있다.db.js / resolvers.js / schema.graphql기본 dir

data를 어디서 얻고, 어떻게 활용할 수 있을지 생각한다.외부 database는 postgreSQL을 사용하며, 여기서 schema를 ORM을 통해 얻는다.graphQL을 통해 schema로 부터 원하는 data를 선별한다.이 logic 흐름을 나타내면 아래와 같다.

본 기록은 이전 포스트와 이어지는 내용으로, data update/delete하는 graphql query를 추가하는 logic을 구현하도록 한다.sequelize/graphql을 통한 data read 내용에 이어 data를 생성하거나 삭제하는 기능에 대해 생각해본다

개요타입스크립트의 개념과 정적분석 및 린트 시스템에 대해 이해한다.Checklist코드를 린팅하는 것의 장점은 무엇일까요?ESLint과 같은 정적탐색장치를 통해 코드를 분석한다는 것은, 코드를 컴파일링 및 실행하기 이전에 미리 디버깅을 한다는 의미이다.실행을 하기 전에

개요TDD에 대해 이해한다.ChecklistTDD(Test-Driven Development)란 무엇인가요?TDD는 소프트웨어 개발 프로세스, 혹은 프로세스 개발 방법론을 일컫는다.개발자가 설계하고 이를 구현하는 과정에서 요구사항을 검증하는 테스트(테스트 케이스)를 적

개요 React에 대해 이해한다. > Checklist React는 어떤 장점을 가지고 있나요? React를 통해 가장 빠르게 웹 개발을 시작할 수 있다. → React의 component, lifecycle, XML(HTML + Javascript) 자체적인

React Project의 base를 build하는 과정을 이해하고 확장할 수 있도록 한다.AplloProvider : ApolloProvider를 통해 apollo/client가 실행, 하위 계층 element들은 GraphQL에서 data를 받아온다.하위 계층(자식

1. 개요 > 기존 VanillaJS를 활용하여 filesystem을 구현하는 것에 비해, React 기반의 filesystem은 어떠한 장점이 있는지 살펴본다. 2. 핵심 logic file을 local system으로 부터 읽어오고, 이를 상태변수화하여 fil

개요 번들링, 웹팩의 개념에 대해 이해한다. > Checklist 여러 개로 나뉘어진 자바스크립트나 이미지, 컴포넌트 파일 등을 하나로 합치는 작업을 하는 것은 성능상에서 어떤 이점이 있을까요? 웹 서비스에서 랜더링 시 소요시간 감소 웹페이지 요청에 필요한 정

개요PWA의 개념, 필요성에 대해 이해한다.Checklist웹 어플리케이션을 프로그레시브 웹앱 형태로 만들면 어떤 이점을 가질까요?웹의 장점 - 검색 및 노출웹은 인터넷, 사이트 방문을 통해 사용자가 쉽게 방문할 수 있다는 장점이 있다.또한 링크를 통해서도 접근이 가능

개요웹 어셈블리에 대한 개념을 이해한다.Checklist웹 어셈블리란 어떤 기술인가요?최신 웹브라우저에서 실행할 수 있는 새로운 유형의 코드를 말하며, C/C++/Rust 등 저급언어(기계어에 가까운 언어)를 효과적으로 컴파일링 하기 위해 고안된 기술이다.기계어 컴파일

개요CI/CD 및 자동화 개발에 대해 이해한다.ChecklistCI/CD는 무엇일까요?application의 개발을 하는데 필요한 과정 중 하나로, 지속통합(여러 개발사항을 반영한 각각의 branch(자체적으로 진행한 개발)들을 하나로 통합하는 것)과 지속배포를 일컫는

개요 > Checklist 컨테이너는 어떻게 동작하나요? Docker에서 동작할 프로그램을 이미지화(추상화)하면, OS Kernel을 추상화한 분리된 프로세스(Container)에서 해당 프로그램을 동작한다. 다른 배포판(운영체제 환경)을 사용할 수 있게 하는

개요서비스 이용, log, 오류 등 데이터가 통신하는 과정을 모니터링하는 도구와 원리에 대해 이해한다.ChecklistElasticSearch는 어떤 DB인가요? ElasticSearch분산형 RESTful 검색/분석 엔진으로, 차세대 데이터 플랫폼이라 불리우는 Ela

개요 MSA 개념과 MSA 설계를 위해 필요한 여러 기능, 도구들에 대해 이해한다. > Checklist 마이크로서비스 아키텍쳐란 무엇일까요? 프로그램은 각각 독립적이고 느슨한 관계의 MicroService들이 모여 하나의 체계를 이룬 개념으로 보는 설계 방법론