[웹 개발] Front 첫 발자국 - HTML, CSS, JavaScript

여기에서는 간단하게 첫 시작을 밟아보려고한다.

 

웹 개발의 첫 시작

https://hajm0702.tistory.com/116

[개발] 개발 첫 자국.

먼저 [개발] 카테고리에 있는 개발의 첫 시작으로 웹 프로그래밍을 시작했기에 여기서 그 뒤의 글을 여기 카테고리에 쓰도록 한다.

 

 인프런 무료 코스로 30분 요약 강의를 6시간 짜리가 있기에 그걸 먼저 듣고 전체적인 틀을 잡아보려고 한다. (일단 맨 땅에 헤딩도 좀 물렁한 곳에서 해보고 해야지.)

HTML

HyperText MarkUp Langauge

의 약자로, 이 언어는 웹 페이지의 뼈대를 만드는 것이다. (구조)

 

 하이퍼 텍스트는 하이퍼 링크를 생각할 수 있다. 위의 "개발 첫 자국" 게시글로 이동하는 것이 바로 하이퍼 링크이다. 바로 내가 접근하려는 것을 참조하여 넘어갈 수 있다는 것이다.

 

 마크업은 마크다운과 비교할 수 있는 친구이고, 이것들은 문서의 구조, 데이터의 구조를 어떻게 할 것인지 작성하는 것이다. (제목 내용, 문단 구조 등등) 자세한 차이점은 나중에 정리하자.

 

 HTML은 흔히들 알고 있다시피 프로그래밍 언어라는 축에 끼지는 않는다. 프로그래밍 언어라 하면 문제 해결(알고리즘)에 관해서 연산을 수행하는 역할을 하는데 HTML은 그렇지 못 하다.

 

즉, 그냥 구조를 어떻게 할 것인지 써두어서, 써둔 것을 통해서 웹 페이지에서 표현이 되는 것.

 

 CSS는 HTML을 통해서 뼈대가 잡히고 그것에 살을 붙이는 용도, JavaScript는 동적으로 페이지가 작동할 수 있도록 하는 근육의 역할을 한다.

 

CSS

Cascading Style Sheet의 약자로, HTML이 구조라면, 이것은 디자인적 요소를 더해주어 구성을 꾸미는 것이다.

 

선택자와 속성을 통해서, 어떤 것을(선택자) 어떻게(속성) 꾸밀 것인지 문법을 통해서 꾸민다.

Id와 class가 있는데, 고유하도록 한 개만 선택해서 바꿀 경우에는 id를 사용하고, class의 경우에는 해당 여러 양식 중에 한 가지를 골라서 그 양식들에 해당하는 객체의 특성을 정하는 것이다.

 

 예를 들어, 인스타그램을 클론 코딩을 하자면, 최 상단의 instagram이라는 문구는 id를 통해서 폰트를 바꿔주고, 게시글은 class를 이용하는 것이 적합하다.

 

 

JavaScript

사실 자바는 별 의미 없고, 그 명성을 통해서 떠오르는 언어로 보이기 위해서 그렇게 작성한 것이다.

 

아까 설명했듯이 근육의 역할을 하는 친구이다.

 

let 변수 및 함수 선언은 마치 함수형 언어인 Ocaml을 보는 것 같고, 문법적인 측면은 파이썬과 자바를 섞은 느낌이다.

 

 인상 깊은 건 ===으로 값의 타입까지 동일한지 확인 하는 것, Object로 Array, Map이 구현된다는 것. 호이스팅이라는 함수의 선언을 최상단으로 둘 수 있는 것과 호이스팅을 하지 않고, 선언 뒤에서부터 함수를 사용할 수 있게 구분 지을 수 있다는 것.

 

 HTML, CSS만으로 한다면 데이터가 어떻게 변화가 있는지 반영이 쉽지 않다. (JS의 fetch로 데이터베이스의 값을 갖고 오는 것. 그것이 이제 HTML, CSS에 따라서 표현이 될 것이다.)

 

동기, 비동기 내용도 중요하다.

 

 

이제 이 내용으로

 SPA(Single Page Application)을 만들어보는 것이 좋다. 지금까지 배운 내용들을 직접 써보면서 감을 잡고, 필요한 것들이 있다면 찾아서 써보는 경험이 있어야 하기 때문.

 

API 데이터를 이용해서 동적인 페이지를 구성하는 간단한 프로젝트를 하도록 하자.

 

피그마를 통해서 어떻게 구성하고 꾸밀 지를 정하고, 그거에 맞추어서 CSS를 작성하면 된다.

 그리고 이제 JavaScript로 API를 fetch하여 데이터를 불러올 것이니 동적일 것이고, 이제 각 개체들을 만들어서 구성(HTML)을 하면 된다.

 

실무에서는 클래스를 만들고, 그 때 그 때 CSS를 수정하는 방식을 사용한다고 한다.(개발 취향이긴 한데)

 

글 마무리

이건 요약강의를 통해서 어떤 느낌인지 정리하고 나중에 부트캠프 강의 영상으로 더 진득하게 배워볼 예정이다.