기술블로그의 시작
Wecode에 처음 방문 했을 당시 기술 블로그를 시작하는 것이 좋다는 이야길 들었지만, 어떻게 시작해야 할 지 도무지 감이 잡히지 않아 여태까지 미루다 시작하게 되었다.
아직도 어떻게 작성해야 하는지 막막하지만, 아래와 같은 방식으로 분류하여 목차에 따라 작성하면 될 것 같다.
저) 직접 경험하고 실험한 과정이나 결과
술) 어떤 것을 분석하여 의미를 풀이하고 해석한 것
편) 산만하고 복잡한 자료를 편집해 질서를 부여한 것
집) 여러 사람의 견해나 흩어진 자료를 한데 모아 정리한 것
이제 코딩이라는 것을 배우기 시작한 나로써는 [저, 술, 편, 집] 中 저 또는 집의 형식으로 글을 남기게 될 것 같다.
따라서, 기술 블로그를 시작하는 이 글도 내가 직정 경험한 것 & 자료를 모아서 정리한 것으로 작성이 될 것이다.
<목차>
1. Javascript란?
2. JS 문법 정리
3. 앞으로 계획
1. Javascript 관련 내용 정리
Web 개발에 있어 크게 3가지 요소로 구성 되는 것으로 보인다.
1) HTML
2) CSS
3) Java script
HTML이 Web의 뼈대를 제공하고 CSS가 뼈대 위에 간단한 색을 입히는(디자인) 작업이라고 하면, Java script는 Web 페이지를 유저와 상호작용 해서 동작할 수 있도록 하는 역할을 한다.
간단한 예로, 버튼을 눌르면 Web 페이지를 야간모드 또는 주간모드로 바꾸는 기능 등이 구현 가능하다.
2000년대 초반에는 별다른 기능도 없고 성능이 좋은 편은 아니라 괄시되었지만, 많은 Frame work와 Library의 등장으로 위상이 점점 높아지고 있다.
주요 Library & Frame work
- Angular JS
- D3 JS
- Node JS
- React JS
Wecode에서는 React JS를 배운다.
간략하게 특징을 집어 보자면, Facebook 에서 만들어서 배포하였으며, 오픈 소스이다. MVC(Model, View, Controller)중 View 요소만 제공한다.
자바스크립트만 사용하여 개발이 가능하여 비교적 진입 장벽이 낮다.
2. JS 문법 정리
- 조건문(If)
조건문은 조건이 참일 경우 or 거짓일 경우에 따라 다른 결과 값을 나타낼 수 있으며, 아래의 코딩 참고하기 바람.
<input type="button" value="night" onclick="
var target = document.querySelector('body');
if(this.value==='night') ---> 값이 night이면 아래 값 출력
{target.style.backgroundColor='black';
target.style.color='white';
this.value='day';}
else ---> 값이 night가 아닐 경우 아래 값 출력
{target.style.backgroundColor='white';
target.style.color='black';
this.value='night';}
">- 함수(function)
JS에서는 굉장히 다채로운 함수 선언이 가능하다. 간단한 아래 예시 참조
<script>
function sum(a,b){
return a+b;
}
document.write(sum(2,3)+'<br>');
document.write('<div style="color:red">'+sum(2,3)+'</div>'); #도출되는 값의 색을 빨간색으로 변경
document.write('<div style="font-size:3rem">'+sum(2,3)+'</div>'); #도출되는 값의 크기를 변경
</script>- 배열(array)
배열은 대괄호 [ ]로 생성하며, 관련 Method는 아래와 같다.- length : 배열의 길이 출력
- reverse : 배열의 값을 역순으로 출력
- sort : 배열의 값을 순서를 섞어서 출력
- push : 배열에 값을 추가 (마지막에)
- 객체(object)
객체는 중괄호{ }로 생성하며, key 값과 value 값을 갖는다.
ex) 아래에서 programmer, designer 는 key 값을 나타내며
egoing, leezche 는 value 값을 나타낸다.
<script>
var coworkers = {
"programmer":"egoing",
"designer":"leezche"
};
document.write("programmer : "+coworkers.programmer+'<br>');
document.write("designer : "+coworkers.designer+'<br>');
coworkers.bookkeeper = "martin"
document.write("bookkeeper : "+coworkers.bookkeeper+'<br>');
coworkers["data scientist"] = "taeho"
document.write("data scientist :"+coworkers["data scientist"]+'<br>')
</script>- 반복문(for, while)
for, while 반복문이 있으며, 대략적인 설명은 아래 코드를 참고
#for 반복문
<script>
var arr = [10, 20, 30, 40, 50];
for(var i of arr) {
document.write(i);
}
</script>#while 반복문
<script>
document.write('<li>1</li>');
var i = 0;
while(i < 3){
document.write('<li>2</li>');
document.write('<li>3</li>');
i = i + 1;
}
document.write('<li>4</li>');
</script>3. 추후 계획
내가 가고 싶은 분야에서는 Back-end 개발자 수요가 많아 Back-end 쪽을 도전해 볼 생각이다. (물론 간단한 적성 검사에서도 Back-end가 어울린다는 결과가 나왔으며, 나 스스로도 백 엔드가 좀 더 맞는 것 같다.)
그럼에도 불구하고 Web 개발 Front-end에서 가장 기본이 되는 HTML, CSS, Javascript의 기본 개념 정도는 알고 가는 것이 맞다고 판단하여, 가장 기본적인 강의만 듣게 되었다.
자바스크립트의 경우 기본 문법이 파이썬과 그렇게 많이 다르지 않아 친숙하였으며, 추후에 필요하다고 하면 추가로 공부하여 활용하면 될 것으로 보인다.
이번주 부터는 다시 Python 문법 정리 및 알고리즘 Test를 실시하고 관련하여 기술 블로그에 남기는 것을 목표로 할 예정이다.
첫 글이라 두서가 없고 많이 부족한 글이지만, 하다보면 나아지겠지...
가장 중요한 것은 포기 하지 않고 꾸준히 하는 것이기 때문에, 시간이 좀 걸리더라도 천천히 한 발자국씩 나아가야겠다~!!
