Web Development
1.프론트엔드 개발자라면 Accessibility를 생각하지 않을 수 없다
HTML을 배우던 어느날, 'aria-label'을 보고 감격했다. 이거 너무 멋져!! '웹 서비스를 원활하게 하는 건 코드 한 끝 차이구나'라는 생각을 했다. 오늘 내가 쓴 코드가 내일의 천 만 사용자를 끌어올수도, 버그만 유발하는 악성 페이지가 될 수도 있다. 모두
2.[WEB #1] WEB과 Internet의 등장 그리고 혁신
인터넷, 웹, 네트워크, IP.. 알게 모르게 우리가 알고, 쓰는 IT 용어의 탄생과 개념, 동작 원리를 알아본다. 어쩌면 웹 개발프로그래밍을 공부하기 전 가장 중요한 부분이 아닐까 생각했다. <생활코딩> 이고잉님의 강의를 듣고 서프라이즈를 보는 것 마냥 너무나
3.[WEB #2] WEB 서비스의 역사와 발전 (feat.개발자의 일자리)
\[\[WEB 이 놀라운 혁신은 거의 모든 산업 전반에의 혁신을 가져왔고, 개발의 영역이 넓고 세분화되는 효과를 가져왔다. 가장 큰 혁신을 가져온 분야는 '유통' 업계다.예전에는 소프트웨어를 구입 하려면 물리적인 매개체가 필요했는데, 인터넷이 발명되면서 유통 과정이 혁
4.[WEB #3] 나에게 두 대의 컴퓨터만 있다면 어디든 갈 수 있지(feat. 팀 버너스)
웹 서버와 웹 브라우저, 2대의 컴퓨터가 서로 정보를 주고받는다. (By 팀 버너)웹 서버 컴퓨터에는 'info.cern.ch'라는 주소와 'index.html'이라는 파일을 저장했다.웹 브라우저가 설치된 컴퓨터에서 'http://info.cern.ch/ind
5.[WEB #4] 공유기에 숨은 서버 원리(feat. IP Adress, Port)
IP Adress 클라이언트와 서버 컴퓨터가 서로 정보를 주고 받기 위한 주소. IPv4 주소 : 32비트 체계로 0.0.0.0 ~ 255.255.255.255 (4,294,967,296개의 주소 생성 가능, IPv4) -> 그러나 웹, 스마트폰, 클라우드 컴퓨팅,
6.[Web #5] Database 이해하기
데이터(Data)란 숫자, 단어, 이미지, 영상등의 형태로 된 의미 단위이다.데이터베이스는 컴퓨터 시스템에 저장된 정보나 데이터를 모두 모아 놓은 집합을 의미한다. 데이터는 Database Management System으로 제어, 관리한다. 즉, 데이터가 저장된 하
7.[WEB #6] Git & GitHub로 프로젝트 관리하기
Git은 분산 버전 관리 시스템(Version Control System(VCS))으로 변경 사항을 추적하는 시스템이다. git 외에도 CVS, mercurial 등 여러 VCS가 있으나, git은 가장 보편적으로 쓰이는 시스템이다. 변경 사항을 파일 별로 모두 기록한
8.[Web #7] GitHub으로 협업하기
GitHub을 협업 툴로 사용하는 방법에 대해 알아보았다.현업에서 프로젝트를 진행할 때는 공통의 repository를 복제(clone)해 로컬의 세부 가지(branch)에서 개별 작업을 하고, 다시 결합(merge)하는 식으로 진행된다. \*이미지 출처: wecode
9.[Web #8] HTTP를 알고 주소 쓰기
HyperText HTML (Hyper Text Markup Language) Hyper Text = 문서와 문서가 링크로 연결되어 있음을 뜻함 Trnasfer 전송하다 = 물건이나 편지 HTML로 만든 웹페이지 문서(파일)을 보낸다. 프로토콜 컴퓨터끼리 어떻게 HTM
10.[WEB #9] 개발자 도구(Developer tools)
개발자라면 개발자 도구(developer tools)와 친구가 되어야 한다. 이제 웹 브라우저를 띄운다는 것은 항상 브라우저-개발자 도구로 분할된 화면을 함께 띄운다는 것을 의미한다. 개발자 도구의 다양한 패널 종류과 기능을 파악하고, 친해지기 시작! 개발자 도구(d
11.[WEB #10] 리눅스(Linux)와 터미널(Terminal)을 알면 OS를 지배하지
리눅스란? 리눅스 토발즈(Linus Benedict Tovalds)가 개발한 Unix 기반 운영체제 GNU(GNU's Not Unix, 그누) ⇒ 자선단체 FSF(Free Software Foundation)에서 설립 ⇒
12.[WEB #11] Self Refactoring으로 clean code 만들기
어떻게 유지보수를 잘 할 것인가? 단순히 많은 기능을 구현할 줄 안다고 좋은 개발자가 아니다. 효율적이고 확장성 있는 코드, 유지보수가 용이한 코드를 작성할 줄 아는 개발자가 좋은 개발자다. 학습의 과정에서도 많은 기능을 구현하는 것에 치중하기보다 하나의 기능을 구현
13.[HTML/CSS] HTML img tag vs CSS background-image (feat.Semantic Web/Tag)
앞서 'HTML을 Semantic하게 작성해야 하는 이유'와 '검색최적화의 연관성'에 대해 알아보았다. 그럼 HTML과 CSS라는 서로 다른 언어에서 비주얼적으로 동일한 동작을 구현하는 경우 어떤걸 써야할까? HTML ` vs CSS background-image`
14.[WEB #12] SPA vs MPA, CSR vs SSR
SPA는 3세대 웹이 등장하면서 기존의 웹이 제공해주지 못했던 풍부한 UX를 구현할 수 있게 해준 중요한 개념이다. SPA는 CSR과 SSR, 두 가지 방법으로 지원할 수 있다.MPA는 Multi Page Application의 약자로 정적 웹사이트로 개발된 HTML
15.[WEB #13] 인증과 인가(개인정보 관리)
인증(Authentication) 유저의 identification을 확인하는 절차 (아이디, 비밀번호 확인) 우리 서비스를 누가, 어떻게 사용하는지 추적하기 위해 사용한다. 인증에는 아이디, 이메일 주소, 비밀번호* 등이 필요하다. 비밀번호 관리 비밀번호는 개인정보보
16.[WEB #14] RESTful API (feat. path/query parameter)
REpresentational State Transfer의 약자로 웹상의 여러 리소스(이미지, 동영상, 데이터)에 고유한 URI를 부여해 자원에 대한 주소를 지정(HTTP Method)하는 방법론, 규칙을 의미한다.API 시스템을 구현하기 위한 아키텍쳐 중 가장 널리
17.컴퓨팅 사고(Computational Thinking)
개발자란? 세상의 문제를 코딩(기술)으로 해결하는 사람 컴퓨팅 사고 컴퓨터(사람이나 기계)가 효과적으로 일을 수행할 수 있도록 문제를 정의하고, 그에 대한 답을 기술하는 것이 포함된 사고 과정 일체 예시: 인형 뽑기 인형뽑기 기계를 본다 달려간다 천원을 넣는다 천원
18.Data 호출을 위한 fetch() 사용
백앤드로부터 데이터를 받아오려면 api를 호출하고 데이터를 응답 받는다. 이 때 자바스크립트 Web API fetch() 함수를 쓰거나 axios 라이브러리를 사용할 수 있다. Web API는 클라이언트 측에서 사용할 수 있는 자바스크립트 내장함수로 현업에서는 axio