Intro
나의 목적은 레벨 업이다.
11월부터 카카오 클라우드 스쿨에서 개발 공부를 시작했다.
6개월이라는 적지 않은 기간동안 공부를 하면서 동료와 함께 성장하며 협업하고 싶은 엔지니어가 되기 위해 레벨 업해야 한다.
동료와 함께 성장하기 위해서는 동료에게 올바른 지식이나 노하우를 공유할 수 있어야 한다고 생각한다. 올바른 지식이나 노하우를 공유하려면 어떻게 해야 할까? 당연하게도 공유하고 싶은 그 무언가를 제대로 알고 분명하게 이해하고 있어야 한다.
여태까지 엔지니어로 지내오며 그저 되는대로 사용했던 기술이나 지식들이 상당히 많았는데, 이번 기회를 통해서 이러한 약점들을 고칠 것이다. 배우는 다양한 실무지식들을 제대로 알고 그 목적과 의도를 명확하게 파악하고 적용하는 마음가짐으로 공부하려고 한다.
그리고 협업 중에 팀 시너지를 창출하기 위해 열린 마음으로 경청하는 자세를 기르자. 아직 협업 경험이 많지않아 모든 상황을 대비할 순 없지만 결정을 해야하는 순간에 신중한 결정을 위해 동료들과 시간을 내어 이야기를 나누어야 한다. 나의 의견을 표현하는 것도 중요하지만 팀원들이 무슨 생각을 가지고 있는지 알아내고, 서로의 의견이 다르다면 어떻게 합의점을 찾을 것인지 고민하는게 더 중요하다고 생각한다. 그래서 동료들과 효과적인 이야기를 나누기 위해 불편한 사람이 아니라 스스럼없이 편한 사람이 되고 싶다.
서론이 길어졌는데 결국 이렇게 포스팅을 하는 이유는 단순히 받아쓰기가 아닌 배운 내용들에 대해서 중요하거나 궁금했던 것들을 기록하여 내것으로 만들기 위함이다. 내것이 된다면 결국 레벨 업을 하는데 중요한 역할을 해줄 것이다.
Day - 1
1일차에는 웹 콘텐츠 제작을 위한 HTML에 대해서 배웠다. 많이 접하고 들어봤던 내용들이 많아 반가웠다.
HTML의 중요한 기능인 시멘틱과 오프라인
Semantic이란 의미론적이라는 뜻을 지니고 있다. 특정 단어를 보면 해당 단어가 무엇을 뜻하는지 바로 알 수 있어야 한다고 한다.
그렇다면 Semantic Web은 무엇일까?
Semantic Web이란?
위키백과에서는 '의미론적인 웹'이라는 뜻으로,현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 파일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이라고 한다.
왜 Semantic Web을 사용하려고 하는 것일까?
아래의 예를 살펴보자.
<div class="header">헤더</div>
<header>헤더</header>위의 2가지 태그는 헤더라는 목적을 위해 div 태그와 header 태그를 활용하였다. 하지만 header 태그가 div 태그보다 명확한 의도를 보이고 있음을 알 수 있다. 그렇기 때문에 의미를 명확하게 알 수 없는 div태그 보다는 시맨틱적인 요소가 들어간 태그를 사용해야 함을 느낄 수 있었다.
-
div와 span의 경우는 non-semantic 태그이기 때문에 어떤 목적과 의미를 가지는 태그인지 별도로 설명되어 있지 않다.
-
form, img, table 같은 태그의 경우는 semantic 태그로 어떤 콘텐츠를 가지는지 명확하게 알 수 있다.
Semantic Web의 필요성에 대해서 정리하자면 다음과 같다.
- 사용자가 웹페이지에 소스코드만을 보고도 어느 부분이 제목이고 어느 부분이 본문 내용인지 알 수 있다.
- 문서 구조가 정확히 나눠지므로 다양한 디바이스에서 웹의 화면을 표현하기가 쉽다.
- 웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있다.
결국 시맨틱 웹의 핵심은 브라우저와 개발자에게 목적과 의미를 명확하게 알 수 있도록 해준다는 것이라고 생각이 들었다.
Div를 사용하는 것을 지양해야 한다고?
위에서 살펴본대로 명확한 목적과 의미를 알 수 없는 태그들의 사용을 지양해야 한다고 했는데, 무분별하게 Div 태그를 사용하는 것은 결국 개발자에게도 좋지 않는 방식이라고 느꼈다.
HTML의 오프라인 기능은 뭘까?
원래 웹사이트에 접속하기 위해서는 네트워크가 필수적으로 연결되어 있어야 하는것으로 알고있다.
하지만 HTML5에서는 인터넷 연결 없이 웹사이트를 이용할 수 있도록 해준다. 바로 '캐시' 덕분이다. 캐시를 이용하면 오프라인에서도 웹 사이트를 이용할 수 있게 해준다. 대표적인 예로 구글 캘린더가 있는데, 오프라인 상태에서도 캘린더 앱을 이용할 수 있다.
캐시란?
캐시는 html, css, js 파일 및 이미지 파일, 폰트 파일 등의 웹 페이지를 구성하는 각종 자원들을 로컬에 다운로드하여 캐싱해두며 인터넷 접속 없이 해당 리소스들을 이용할 수 있는 것으로 알고 있다.
img 태그는 절대경로를 사용하자.
아래의 디렉토리 구조를 보자.
root
ㄴ resources
ㄴ img.png
ㄴ image.html
index.htmlroot라는 디렉토리 내에서 resources 디렉토리가 있고 그 안에 img.png 파일과 image.html 파일이 존재한다. 그리고 root 디렉토리 동일 선상에 index.html 파일이 존재한다.
<!-- image.html -->
...
<img src="./img.png" />먼저 image.html에서 img.png 파일에 접근하려면 위와 같이 ./ 이라는 상대경로를 통해 img.png 파일에 접근한다.
<!-- index.html -->
...
<img src="./resources/img.png" />그리고 index.html에서는 img.png 파일에 접근하기 위해서 위와 같이 ./resources/ 라는 상대경로로 접근하게 된다.
image.html과 index.html은 같은 img.png 파일을 접근하고 있는 것 같지만 실제로는 2번의 리소를 불러오게 된다.
그렇다면 이미지 리소스를 절약하기 위해서는 어떻게 해야 할까?
<img src="/resources/img.png" />위와 같이 어디서든 절대경로로 img.png 파일에 접근하면 여러번 리소스를 불러오지 않아도 되기에 더 좋은 성능을 낼 수 있다고 생각한다.
img 태그를 사용할 때는 상대경로가 아닌 절대경로를 사용해야 클라이언트의 다운로드 횟수를 줄일 수 있다. 그리고 width와 height를 꼭 부여하여 미리 영역확보를 해야 불필요한 렌더링을 줄일 수 있다.
변수와 함수의 네이밍은 굉장히 중요하다.
자바에서 작성한 변수를 살펴보자.
String name;이 name이라는 변수는 이름과 관련된 데이터가 담길 것이라는 것은 알겠지만 어떤 이름을 가진 데이터가 올지는 전혀 예측할 수 없다.
String checkUserName;
String OrderUserName;좋은 변수명은 아니지만 위처럼 어떤 목적을 가진 이름인지 정도로만 구분해줘도 어떤 역할을 하는 변수인지 한눈에 알 수 있다.
그리고 아래의 자바스크립트 함수를 살펴보자.
function add(a, b) {
return a + b;
}add 함수의 경우는 더 심각하다. 어떤 a,b 값을 인자로 받는지 전혀 알 수가 없다.
function userAddPoint(oldUserPoint, newPoint) {
return oldUserPoint + newPoint;
}이렇게 무엇을 하는 함수인지 명확하게 함수명으로 알리고 인자로 받는 값도 어떠한 의도를 가진 값인지 명시해주면 가독성도 좋아지고 협업 효율성도 훨씬 좋아질 것 같다.
결국 이름만으로 어떤 데이터가 들어갈지 예측할 수 있도록 작명해야 한다.
네이밍 규칙엔 다양한 래퍼런스가 있고 다양한 방식이 존재한다. 꼭 별도로 찾아보고 어떤 규칙으로 네이밍을 해야할지 공부해야겠다.
Day - 2
2일차에는 CSS를 위주로 배웠는데, 이론적인 내용보다는 중간중간 강사님께서 실무에서 어떻게 사용되는지 알려주시는 게 귀에 잘 들어왔다.
Inline style VS External Style
CSS 코드를 작성하고 위치시키는 방법은 여러가지가 있다.
- Inline Style Sheet: 태그 내에 바로 적용하는 방식이다.
- Internal Style Sheet: HTML 파일 내에 작성하는 방식이다.
- External Style Sheet: HTML 파일과 별도의 외부 css 파일로 작성하는 방식이다.
inline style이 좋을까? External 방식이 좋을까?
External 방식의 경우 가독성은 좋을 수 있지만 로딩하는 시간이 있기에 성능이 떨어질 수 있다. Inline 방식의 경우 가독성은 떨어지지만 빠르게 로딩할 수 있어 자주 쓰는 Style의 경우는 해당 방식으로 사용하기도 한다.
나는 당연히 External style, 즉 외부 스타일시트를 링크하거나 import하여 사용하는 것이 좋다고 생각했지만, 디자이너나 기획자 입장에서 다시 바라보면 정답이 아니었음을 깨달았다.
개발자와 디자이너, 개발자와 기획자의 협업 간에 style 적용 방식에 대해서 성능 중심의 디자인 작업을 할 것인지, 가독성 중심의 디자인을 할 것인지 사전에 충분히 소통하여 의사결정을 하고 넘어가야 한다고 느낄 수 있었다.
클라이언트-서버 형식의 애플리케이션
이전에는 클라이언트가 서버에게 요청하면 서버가 요청을 처리하고 결과를 출력할 수 있는 뷰 화면(JSP 등)을 만들어 클라이언트에게 전송했었다. 하지만 프론트엔드와 백엔드의 경계가 명확해지면서 서버에서 화면까지 만들어야 하기에 부담이 컸기에 서버에서 뷰 화면을 만드는 일은 레거시가 되었다.
요즘엔 클라이언트와 서버가 어떻게 데이터를 교환할까?
클라이언트가 서버에게 요청하면 서버가 요청을 처리하고 결과(데이터셋 등)를 바로 클라이언트에게 전송한다. 서버는 요청을 처리하고 결과를 담아 클라이언트에게 전송하는데, 서로간의 규칙을 정해서 요청과 응답을 해야 한다.
보통 API 개발할 때 데이터셋으로 json을 많이 활용했었는데 이밖에도 서버에서 요청을 처리하고 결과를 담는 데이터 포맷의 종류는 다음과 같은 것들이 있다.
- json(JavaScript Object Notation): 자바스크립트 객체 표현법으로 데이터를 작성한다. 최근에는 대부분 용량이 더 작은 json을 사용한다.
- xml(eXtensible Markup Language): 태그형태로 데이터를 작성하며 개발자가 해석한다. 용량이 크다.
- csv: 구분 기호를 이용해서 구분한 텍스트로서 내용이 변하지 않는 데이터를 제공할 때 이용한다. 예를 들어 전년도 범죄율 등의 불변 데이터 들이 이에 해당된다.
- yaml: 이메일 작성 형태로 데이터를 제공한다. 각종 설정을 할 때 이용한다.
Day - 3
3일차에는 JavaScript 기초를 배우기 시작했다. 애매하게 알고 있던 내용들을 다시 제대로 이해할 수 있었다.
컴파일러와 인터프리터
C, C++, C#, Java 등의 언어는 컴파일러를 통해 소스코드를 빌드하고 실행하는 방식이다.
Java 코드 작성중 컴파일러 단에서 오류가 발생할 경우 소스코드 자체가 실행이 안되었던 적이 기억이 났다.
Python, JavaScript등의 언어는 스크립트 기반의 언어로 인터프리터를 통해 줄 단위로 소스코드를 번역하며 실행하는 방식이다.
자바스크립트를 사용하며 console.log()를 통해 데이터를 많이 확인하는데, 에러가 발생하여도 에러 발생 전의 코드의 데이터는 정상적으로 출력된 이유를 알게 되었다.
jQuery(제이쿼리) 추락의 원인은 무엇일까?
jQuery는 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 라이브러리이다.
많은 개발자들이 jQuery를 사용했던 이유는 웹 상에서 Element(엘리먼트)를 쉽게 찾고, 제어할 수 있으며 거의 모든 웹 브라우저에서 호환된다는 큰 장점이 있기 떄문이었다.
jQery의 사용률은 여전히 높겠지만 개발자들 사이에서는 jQuery를 지양해야 한다고 한다. 그래서 구글 트렌드를 통해 지난 5년(2017~2022)동안 jQuery 키워드 검색량 변동을 살펴보았다.
키워드 검색량을 보면 jQuery의 위상은 점점 떨어지고 있음을 알 수 있다. jQuery의 위상이 점점 추락했는지, 왜 금기시해야하는지 궁금했다.
찾아보니 3가지 정도의 이유가 있었다.
배보다 배꼽이 크다.
기본적으로 jQuery는 DOM 조작을 쉽게 하도록 도와주는 기능들을 제공한다. 하지만 이것은 결국 작성한 소스코드의 대부분이 jQuery에 종속될 가능성이 많다.
또한, jQuery는 기존 코드를 래핑(wrapping)하여 새롭게 만든 패키지 형태인데 이 래핑이 너무 많아 오히려 문제가 되었다. 최적화를 위해 설계되어 있지 않아 순수 자바스크립트 코드에 비해 낮은 성능을 보여주게 된다.
웹 브라우저 수요 변화
jQuery가 본격적으로 사용되기 시작한 때는 IE가 시장의 60%를 점유하고 있었다. 따라서 생산성과 가독성이 높은 간결한 코드를 작성하기 위해 jQuery의 필요성은 급증하였다. 그러나 이후 Chrome(크롬) 브라우저가 등장하며 IE를 넘어서게 되었다. Chrom은 다양한 웹 표준을 적극 반영하였기에 jQuery와 같은 라이브러리 사용 없이도 높은 퀄리티의 웹사이트를 개발할 수 있었다.
대체제의 등장
웹페이지는 브라우저 위에서 DOM(Document Object Model)이라는 표준에 의해서 파싱되어 출력되는데, 이를 동적으로 제어하기 위해선 DOM을 조작하는 것이 필수적이다. 그런데 DOM을 조작할 때마다 화면 출력에 많은 연산을 수행시키다보니 성능이 떨어지는 문제가 있었다. 이러한 단점은 jQuery에서도 마찬가지였다.
해당 이슈를 개선하기 위해 Virtual DOM(가상 DOM)이 등장하게 되었는데 대표적인 예를 들면 자바스크립트 라이브러리 중 하나인 React(리액트)이다. 리액트를 활용하면 메모리에 Virtual DOM을 구성하여 실제 DOM과의 차이점을 비교하여 변경된 부분을 적용할 수 있다고 한다. 이 방식은 jQuery보다 더 나은 성능을 보였으며, 이쁜 웹사이트를 제작하는 비용을 낮출 수 있게 해준다. 리액트 이후 등장한 Vue.js(뷰) 라이브러리 또한 Virtual DOM을 채용하여 구성하고 있다.
결국 Virtual DOM을 사용하는 라이브러리가 나타날수록 jQuery의 필요성은 점점 줄어들게 된다.
jQuery를 지양해야 하는 이유에 대해서 잘 알게 되었다. 가능한 jQuery보단 더 나은 라이브러리들을 활용하자.
Data의 분류
- 불변 데이터와 변경가능한 데이터
- Scala 데이터와 Vector 데이터
- Scala 데이터는 1개의 데이터로 이름이 곧 데이터를 의미한다.
- Vector 데이터는 0개 이상의 데이터로 이름과 별도로 무엇인가가 추가되는 데이터를 의미. (List, Map 등)
- 정형 데이터와 비정형데이터
- 정형 데이터: 모든 데이터의 모양이 일정한 것. (class, RDBMS 등)
- 비정형 데이터: 모양이 일정하지 않은 것. (Map, NoSQL 등)
- 반정형 데이터: 모양이 일정하지 않은 것처럼 보이지만, 정형으로 만들 수 있는 것. (xml, json 등)
var 보다는 let 키워드로 변수를 만들어야 한다고?
꼭 키워드와 함께 변수를 생성하여 사용해야한다. 키워드 없이 변수를 생성한다면 전역변수로 생성되어 어디서든 변수가 변경될 가능성이 높아 문제가 발생할 수가 있다.
그렇다면 어떤 키워드로 변수를 만드는게 좋을까?
var 키워드를 사용해 변수를 만드는 것보다 let 키워드를 사용해 변수를 만드는 것을 권장한다고 하는데, 왜 그럴까?
당연하게도 var의 문제점을 해결하기 위해 let이 나왔기 때문이다. 그렇다면 var 키워드의 어떤 문제들이 개선되었을까?
var 키워드의 문제점
- 변수 중복 선언 가능하여, 예기치 못한 값을 반환할 수 있다.
- 함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수로 된다.
- 변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환한다.
let 키워드에서는 이러한 문제점들을 방지할 수 있어 개발할 때 친절하게 에러로 알려준다.
Block Scope
먼저 블록 단위로 var 키워드와 let 키워드로 reviewScore 변수를 생성하고 출력해보자.
var reviewScore = 5;
console.log(reviewScore);
{
var reviewScore = 10;
}
console.log(reviewScore);var 키워드는 함수 내에서만 스코프를 가진다. 위 코드에서는 함수가 아닌 곳에서 var 키워드로 변수를 생성했기에 reviewScroe 변수는 전역변수로 취급된다. 그리고 안쪽블록에서 reviewScore 변수가 중복 할당 되면서 값이 변경됨을 알 수 있다.
직접 위 코드를 콘솔에 찍어보면 다음과 같다.
이번엔 let 키워드로 블록 단위 스코프로 변수를 생성해보자.
let reviewScore = 5;
console.log(reviewScore);
{
let reviewScore = 10;
}
console.log(reviewScore);var 키워드로 reviewScore 변수를 생성했을 때는 값이 재할당되었지만, let 키워드로 선언하니 바깥블록의 있는 reviewScore와 안쪽 블록에 있는 reviewScore가 다른 스코프를 지녀 결국 다른 값을 가지게 된다.
코드를 실행한 결과 바깥 블록의 reviewScore 변수에 재할당이 일어나지 않음을 알 수 있다.
let 키워드로 생성한 reviewScore 변수는 블록단위 스코프를 지니기에 바깥블록의 값과 안쪽블록의 값이 서로 다름을 알 수 있다.
let 키워드는 호이스팅을 허용하지 않기 때문에!
Hoisting(호이스팅)이란?
나무위키에서는 호이스팅을 자바스크립트 및 액션스크립트 코드를 인터프리터가 로드할 때, 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되어 변수의 선언을 항상 컨텍스트 내의 최상위로 끌어올리는 것을 의미한다. 이는 오로지 변수에만 해당되는 것은 아니고 함수도 가능하며, 자바스크립트에서 함수의 호출을 첫 줄에서 하고 마지막 줄에 함수를 정의해도 문제없이 작동되도록 하는 유용한 특성이라고 한다.
이러한 호이스팅이 허용여부를 var와 let 키워드로 확인해보자.
먼저 var 키워드로 사용자의 포인트를 콘솔에 출력해보자.
console.log(userPoint);
var userPoint = 10;
userPoint라는 선언되지 않은 변수를 콘솔에 출력한 뒤, var 키워드로 userPoint 변수를 선언했다. 호이스팅이 허용되어 이름이 할당되지 않은 상태라고 콘솔에 출력됨을 알 수 있다.
다음으로 let 키워드로 콘솔에 출력해보자.
console.log(userPoint);
let userPoint = 10;
다음과 같이 호이스팅이 허용되지 않아 에러가 발생함을 알 수 있다.
결국 var 키워드로 변수를 생성하면 이름을 할당하지 않은 변수의 값을 에러로 판단하지 않기에 개발자 입장에선 친절하다고 볼 수 없다. 그래서 var 키워드보다는 let 키워드로 변수를 생성하도록 하자.
정수 및 실수의 연산
-1의 의미
실제로 -1이라는 의미보단 1의 2의보수로 가장 큰수의 의미를 가지게 된다.
양수가 나오면 정상적인 상황이지만 음수가 나오게 되면 정상적인 부호가 되지 않고 오버플로우나 언더플로우가 발생할 수 있다는 것을 유의하자.
Final..
벌써 교육을 받은지 1주차가 지났다. 벌써 레벨 업을 기대하긴 이르지만 한달 후, 수료 후, 취업 후의 나의 수준이 기대한 만큼 올라가기를 기대하게 된다.
무언가를 배우고 이해하고 활용하는데, 왜 이것을 배우고 사용하는지 본질적인 원리를 스스로 찾아보려고 노력하지만 참 쉽지 않음을 많이 느끼는 한 주 였다. 집에 오면 침대에 눕고싶고, 핸드폰도 하고 싶지만 레벨 업을 하기 위해 책상에 엉덩이를 붙이려고 노력한다. 물론 책상에 앉아 딴 짓을 할 때도 많다. 게으름을 핀 하루는 항상 찝찝하게 마무리하게된다.
그래서 큰 변화를 바라지 말고 조금이라도 꾸준하게 자습하는 습관을 들이기 위해 마음속으로 채찍질을 시작했다.
사실 이번 주 회고록 내용은 복사 및 붙여넣기와 다를 바 없다고 느낀다. 다음 주는 내 고민의 결과를 회고록에 양질의 내용으로 잘 기록하려고 한다.
혹여 잘못된 내용이 있다면 지적해주시면 정정하도록 하겠습니다.참고자료 출처
