Sunrin Flask Study 4회차

오늘은 Spoqa의 초창기 멤버이신 문성원 선배님(05년 선린 졸업생)께서 HTML5, CSS, Bootstrap, JavaScript 등 FrontEnd쪽을 알려주셨습니다.

일단 각각의 주제(HTML, JavaScript, CSS, Bootstrap)에 대해 저희들이 아는 키워드들을 모아놓고 그거에 대해서 얘기하는 방법으로 설명을 해주셨습니다.

HTML => Hyper Text Markup Language

뭐 HTML은 간단하게 약자를 풀이하고 왜 Hyper Text 였는지도 알게되었습니다.

옛날에는 문서에서 문서로 바로 넘어갈 수 있었던 부분이 "Hyper"했었다고 생각했었다고 합니다.

흔히 Super보다 더 좋은 걸 우리는 Hyper라고 부르죠. 이런 부분이 Hyper했었던 것 같습니다.

그리고 HTML을 해석해주는 Brower에 대해서 얘기를 하다보니 Brower Engine에 대해서도 나왔었습니다.

Brower Engine은 HTML 파일을 파싱해주고, 보여주고, 자바 스크립트도 해석해주는 것이라고 합니다.

Webkit => Chrome과 Safari의 기반이 되는 Brower Engine이라고 합니다.

Gecko => Firefox의 Brower Engine이라고 합니다.

그 다음 JavaScript에 대해 얘기를 나누어 보았습니다.

JavaScript => CallBack, Event, 객체 기반의 언어이다.

JavaScript에 대해서는 jQuery와 NodeJS, React.JS 에 대해서 주로 얘기를 나눴습니다.

NodeJS는 프론트엔드와 백엔드, 둘 다 JS로 짤 수 있다는 점을 강조하면서 내세워진 JS로 백엔드쪽을 만질 수 있습니다.

React.JS는 JavaScript Library이다. 자세한 것은 검색...(저도 잘 기억이 안납니다 ㅠㅠ)

jQuery는 JavaScript를 쉽게 사용하기 위한 JavaScript Library이고, 클라이언트 사이트 스크립트 언어를 단순화할 수 있도록 설계되었다고 합니다.

그리고 중간에 나온 주제!

Vim VS Emacs

저는 Vim을 사용하는 편이지만 문성원 강사님께서는 Emacs를 사용하셨습니다. 그래서 Emacs와 Vim의 가장 큰 차이점에 대해 여쭤보았습니다.

Emacs는 확장성에 초점을 둠

Vim은 초반 Unix에 기반을 둠

그리고 마지막으로 CSS와 Bootstrap에 대해 얘기를 했습니다.

CSS => Cascading StyleSheets 의 약자입니다.

Cascade => 위에서 아래로라는 뜻(폭포처럼)

Bootstrap => 스스로 하다 => 개발자들이 스스로 하다 라는 것을 의식한 것처럼 보입니다.

AWS에 Bootstrap 테마를 적용하고 간단한 Components들을 붙여봤습니다.

간단한 CSS Tips! -> display : inline, block 는 알아두자!

그리고 크롬 개발자 도구에 CSS를 디버깅?! 비슷하게 할 수 있는 것도 있습니다.

위와 같이 Computed 탭으로 가보면 Filter에 여러 가지 속성값을 검색해서 그 값을 알아낼 수 있습니다!

그리고 Project에 대한 Mockup을 만들기로 했습니다(숙제)

전체적인 UI Mockup과 ServerSide Mockup을 해오기로 했습니다.

다음 포스팅에는 Mockup한 것들을 들고 오도록 하겠습니다.