Bsidesoft co.

[초보자들] S69 스터디 후기 첫번째, “퍼즐 한조각”

2017년 3월 23일 Education 초보자들

Bsidesoft에서는 정기적으로 온라인/오프라인 스터디를 진행하고 있습니다.

이번 3월 21부터 시작한 오프라인 스터디는 무려 69번째(!) 스터디로, 앞으로 6주간에 걸쳐 개발 입문자들을 대상으로 기초적인 개발 스터디를 진행합니다. 초보자인 저도 스터디에 참여해 기초를 탄탄히 쌓고, 스터디에서 배우고 느낀점을 함께 나눠보고자 합니다.

오늘 후기는 그 첫번째로, 첫시간 스터디에서 어떤 내용들을 다뤘는지 살펴보겠습니다.

개발 시작하기

요즘 프로그래밍의 열기가 ?핫?합니다.
주변에서도 저에게 심심치않게 개발을 어떻게 시작해야하는 물어보곤하구요.

저같은 경우에는 HTML, CSS를 이용해 웹사이트 껍데기를 만드는 것으로 처음 프로그래밍을 접했습니다.
당시 생활코딩 강의를 듣고, 인터넷 검색으로 필요한 부분들을 찾으며 사이트를 만들던 기억이 나네요.

보통은 이렇게 뭔가를 만들면서 개발을 시작하지 않으셨나 싶습니다. 우리가 쉽게 접해본 서비스들(예를 들면 웹사이트라든지, 모바일 앱이라든지, 혹은 게임이라든지… 등)을 아주 간단하게 만들어보며 프로그래밍이 뭔지 느껴보고 익히는거죠.

S69에 스터디에 오신 분들도 “자바스크립트 책을 교재로 한다고 했으니까, 여기에 나온 내용들을 쉽게 천천히 따라가면서 설명해주나보다, 자바스크립트로 뭘 만들 수 있을까?” 이런 것을 예상하며 오시지 않았을까 싶습니다. 하지만 2시간 스터디 시간동안 저희가 본 책의 내용은 몇페이지 되지 않고, 적어본 코드라고는 크롬 개발자 도구 콘솔창에 console.log()뿐이니…(그것도 심지어 총무님께서 화면으로 실습을 보여주셨기에 코드를 1도 안써본 분들도 계실것입니다.) 다들 오잉?하시진 않으셨을까 싶습니다.

단어를 정복하라!

맹대표님께서는 개발을 제대로 공부하려면 “단어”를 정복해야한다고 하셨습니다.

무슨 말이냐면, 각 분야에서는 그 분야에서 쓰는 단어들이 있습니다. 그 단어들은 보통 우리가 일반적으로 쓰는 단어와 똑같이 생겼지만 실제 뜻은 그 분야의 지식체계를 담은 고유한 내용으로 이뤄졌습니다. 따라서 그 단어의 이름과 그 이름에 매칭되는 뜻을 정확하게 알게된다면 해당 지식을 획득하게 되는 것이죠.

“그리고 무엇보다도, 우리는 그들을 이해하기 위해서는 충분한 ‘단어’들을 가지고 있어야해요.” ㅡ영화 콘택트(2016)
… 외계생명체를 이해하기 위해 단어의 중요성을 언급하는 콘택트. 여러분 단어가 이렇게 중요한겁니다 ㅎㄷㄷ

개발도 마찬가지입니다.

책에 언급된 모든 단어들은 우리가 평소에 쓰는 말과 똑같이 생겼을진 모르지만 사실 자기만의 고유한 뜻을 가진 고유명사입니다.
따라서 개발을 잘 하려면 단순히 언어 스펙을 잘 알고 있다고 해서 되는게 아니고, 단어의 뜻을 이해’만’한다고 해서도 되는게 아닙니다.
이해를 바탕으로 고유명사로 된 단어들의 의미를 달달달 ‘외우고’ 있어야 합니다.

그래서 스터디 첫시간에는 교재 2장을 보며 컴퓨터 프로그래밍 언어를 이해하기 위한 가장 기초적인 문법적인 단어들을 살펴보며, 그 뜻을 배웠습니다. (외우는건 여러분의 몫★)

Lexical Grammar

컴퓨터 프로그래밍 언어에는 수많은 종류가 있고, 언어마다 각각 다른 문법을 갖습니다. (아, 물론 비슷한 부분도 있어요!)

하지만 그 각각의 구체적인 문법 이전에 그 문법을 구성하는 기본 요소들이 있습니다.

사람의 언어로 치자면 어떤게 글자인지 배운다든지(알파벳 ,히라가나, 한글 등..), 그 언어를 어떤 방향으로 쓰는지, 띄어쓰기는 하는지, 각종 기호들은 어떻게 쓰는 지 등과 같은 것인데, 이처럼 모든 프로그래밍 언어에서 구체적인 문법을 정의하기 이전에 그 문법을 구성하는 기본 요소들을 정의해 둔 것을 Lexical Grammar(랙시컬 그래머)라고 합니다.

Javascript에서는 다음 6가지 렉시컬 그래머가 있습니다.

  • Control Characters(제어문자) : 눈에 보이지 않지만 여러가지 제어를 위해 삽입되는 문자.
  • White Space(공백) : 공백 (띄어쓰기)를 컴퓨터가 인식하게 하는 문자.
  • Line terminators(줄바꿈) : 말 그대로 컴퓨터가 줄바꿈을 인식할 수 있게하는 문자.
  • Comments(주석) : 실제 코드로 작성되어있긴 하지만, 번역기가 코드를 컴퓨터가 이해할 수 있는 더 저차원의 언어로 해석할 때 명령으로 인식하지 않는 부분. 사람들이 코드 내용을 편하게 이해하거나 쉽게 기억하기 위해 사용.
  • Keywords(키워드) : 미리 약속으로 정해둔 단어들. 이 키워드를 해석기가 만나면 키워드에 미리 지정된 방식으로 내용으로 인식.
  • Literals(리터럴) : 더 이상 나눌 수 없는 값을 표현. 예를 들면 3, ‘3’, [] 등…

Statement & Expression

기본 요소가 되는 렉시컬 그래머를 배운 다음에는 교재를 보며 기본 문법을 살펴보았습니다.
책에서는 기본 문법으로 표현식과 문장, 키워드, 식별자, 주석을 다룹니다.
스터디에서는 그 중에서도 표현식과 문장 부분인 Statement와 Expression을 집중적으로 살펴보았습니다.

Statement

한국말로 하자면 “문”이라고 할 수 있습니다.
문은 자바스크립트 번역기에게 주는 ‘힌트’를 말하는데, 번역기가 이것을 보고 어떤 동작을 해야하는지 알게됩니다. 방금 말한대로 문은 ‘힌트’이기 때문에 해석될 때 힌트만 알려주고 사라집니다. 즉, 문의 결과로는 아무것도 남지 않습니다. 바로 이것이 다음에 나오는 Expression과 가장 큰 차이점입니다.

자바스크립트의 문은 다음과 같은 종류로 나눌 수 있습니다.

  • empty statement : 공문(빈문).
  • block statement : 중문({}) 
  • control statement : 제어문
  • expression statement : 식문
  • (variable) declare statement : (변수)선언문
//단문(1개짜리 문)
var ... = ..;

//중문(=단문 여러개를 {}로 묶은것)
if(...){
   문1; 
   문2;
}

//공문
;;;;;;; //아무것도 없는 공문들의 집합...
while(...); //while에 공문

//제어문(프로그램의 흐름을 바꾸는 제어문. 종류 엄청많음)
if(...){...} if else(...){....},
switch(...){..}
for(...){...}
...

//식문(값인 것 같지만, 자바스크립트는 식문이라고 해서 문으로 인정함)
3+3;
'aaa';

//변수 선언문
var i;
let es6let; //ES6 문법
const es6const = 3; //ES6 문법

Expression

다음은 흔히 ‘식’ 또는 ‘표현식’이라고 부르는 Expression입니다.

식…식이라니. 내가 아는 식은 이런 느낌?

식이라는 것은 어떠한 값을 갖는(또는 수렴하는)것을 말합니다.

식의 종류는 다음과 같습니다.

  • value expression(값식)
  • operation expression(연산식)

값식은 다음 예와 같습니다.

3 //숫자의 값을 가짐
'bsidesoft' //문자타입의 값을 가짐
null //빈 값을 가짐
true //'참'을 의미하는 값을 가짐

딱 봐도 값!처럼 생기지 않았나요?(제 착각..??)

한편 위의 예처럼 ‘한개의 값’으로 보이진 않지만, 연산(=일정한 계산)을 하면 결과로 어떤 값이 나와 식으로 취급되는 것이 있습니다.
바로 연산식인데, 연산식은 연산자를 포함하는 식을 말합니다.
위에서 말한바와 같이 연산식은 하나의 값으로 수렴하게 되므로 식으로 취급됩니다.

3 + 2; //3+2의 결과는 5. 5라는 한가지 값으로 수렴되므로 식
2 > 1 //2가 1보다 큰가?라는 논리연산의 결과는 '참'으로 수렴되므로 식

자바스크립트에는 수많은 연산자가 존재합니다.(전체 종류는 >>여기에서 확인 가능!)
연산자를 많이 알아두면 식과 문을 구분하는데에도 좋고 실제 구현할 때 직접 만들 부분이 줄어들게 되니 잘 알아둬야겠습니다.

자바스크립트에서는 이 외에도 리터럴, 함수도 값으로 취급합니다.

후후후후… 간단하고 쉬운 것 같죠?
하지만 실제 코드를 쓰거나 읽을 때 문/식을 구별하기는 굉장히 헷갈립니다.
정확히 알아두도록 합시다!

*식/문에 관한 더 자세한 내용은 >>여기에서 볼 수 있습니다.

퍼즐 한조각

예전에 맹대표님께서 구인공고를 내셨을 때, 개발자의 자질로 두가지를 언급하셨습니다.

…단지 개발자가 되는 과정과 시간은 길고 힘든데 그걸 이겨낼 만큼 개발이 좋아야겠죠. 제가 생각하기에 개발능력과 연결되는 가장 중요한 능력은 두가지 입니다. 어떤 복잡한 상황을 한국어로 얼마나 조리있게 잘 표현하는가와 천피스짜리 직소퍼즐에 잘못된 한 조각을 짜증내지 않고 한자리에 앉아서 찾아낼 수 있는가와 동시에 그걸 매일 할 수 있는가 정도 입니다.

예전엔 저 말 후반부(천피스짜리 직소퍼즐에 잘못된 한 조각을 짜증내지 않고 한자리에 앉아서 찾아낼 수 있는가)를 보았을 땐, “아 끈기가 있으면 되구나” 정도로 생각했습니다.

개발을 아장 아장 배워나가고 있는 요즘, 저 말을 다시 보니 “아 기본이 제대로 안되면 천피스 퍼즐의 잘못된 부분을 찾아 다시 끼는건 커녕, 뭐가 잘못된지도 모르겠구나…. ? 근데 그전에 우선 내가 1000피스짜리 퍼즐 조각이 다 있긴하나..?”라는 생각을 했습니다.

기초가 중요합니다. 즉 기초 단어들이 가지고 있는 뜻을 정확하게 알고 있고 그것을 설명할 수 있어야 합니다.
또한 전에 외운 것들을 잊지 않으며 그것을 바탕으로 다음 단계의 것을 차곡 차곡 쌓아나가야 합니다.
기본을 탄탄히 쌓아나가자고 다시 한번 다짐했습니다.

그런 의미에서 이번 스터디가 개발을 해신 분들에게는 자신의 퍼즐 판을 확인하며 빈 피스를 찾아 차곡 차곡 정리하는 계기가, 처음 해보신 분들에게는 앞으로 자신의 퍼즐 조각을 하나 하나 모아가는 그런 시간이 될 수 있으면 좋겠습니다.

첫 퍼즐 조각, 다들 잘 모으셨나요?

 

스터디 영상

교재는 >> 여기

 

summer| bsidesoft 신입사원
디자인을 공부했던 섬머는 개발까지 해버리겠다는 욕심으로 개발자의 세계에 입문하게 되었습니다. 개발왕이 되어 멋진 제품을 만들어내는 꿈을 꾸고 있습니다. 코드, 디자인을 포함한 세상의 모든 아름다운 것들과 미드, 그리고 달리기를 좋아합니다.

Share
%d 블로거가 이것을 좋아합니다: