나는 현재 스타르타 코딩 클럽이라는 사이트에서 내일배움단 - 웹 개발 종합반에 참여하고 있다.
오늘은 1주차 강의를 모두 해결하고 개발 일지를 적어 보려고 한다.
0. 목차
1) 내일 배움단에 참여한 이유
2) 0주차에서 배운 내용 요약.
3) 1주차에서 배운 내용 요약
1. 내일 배움단에 참여한 이유
내가 내일 배움단에 참여한 이유는 2가지 정도의 이유가 있다.
첫째 : 코딩을 잘하지 못하기 때문에 실력을 길러보고 싶었다.
둘째 : 메이킹 챌린지 같은 프로그램에 참여해서 팀 프로젝트를 경험해보고 싶었다.
위에 세 가지 이유 때문에 나는 내일 배움단에 참여하게 되었다.
2. 0주차에서 배운 내용 요약
1) 0주차에서는 강의를 들을 때 어떤 환경에서 들어야 하는지에 관해서 알려준다.
여기서 환경이란 브라우저를 어떤 걸 써야 하며 어떤 운영체제에서 주로 강의가 돌아가는지 등을 알려준다.
또 앞으로 있을 메이킹 챌린지에 관한 설명과 환급은 어떻게 할 수 있는지 등도 알 수 있다.
마지막으로 슬랙이라는 프로그램을 주로 사용하게 된다. 이 프로그램은 카톡 같은 프로그램이라고 보면 된다.
it회사 등에서 자주 쓰이는 채팅 프로그램이다.
3. 1주차에서 배운 내용 요약
0) 우선 제일 중요한 개발 툴을 설치하는 것부터 시작해서 앞으로 사용하게 될 여러 프로그램에 가입하고 결제?하는것까지 배운다. ( 결제하는 것은 스파르타 코딩 클럽에서 제공해주는 할인 쿠폰을 사용하면 0원으로 결제할 수 있다.)
1-1강에서 이번 주에 배울 내용에 관해서 알려주신다.
이번 주에는 html, css, java script(줄여서 js라고 부르기도 한다)의 기본적인 것에 대해서 배웠다.
html은 홈페이지의 뼈대, css는 꾸미기, js는 움직이기라고 알려주셨다. 강의를 듣고 나서 무슨 말인지 곰곰히 생각해보았다. 그러다가 깨달은 것이 '아 건물을 짓고 그 후에 건물이 어떻게 돌아가는지에 비유하면 되겠다고 생각했다.'
무슨 말이냐면 건물을 지을떄 우선 철근 같은 재료로 뼈대를 만들어 단단하게 하고 시멘트 등을 부워 건물을 만든다. 이것을 홈페이지를 만들때에 대입해보면 큰 틀 제목이나 이미지를 불러오는 것 등을 할 수 있는 html에 찰떡이라고 생각했다. css : 꾸미기 => 말 그대로 건물을 꾸미는 것이다. 알록달록 건물을 색칠하는 것처럼 밑에 나오는 스파르타 그림도 사실 이 css를 통해 꾸며지는 것이다. js는 건물 안에서 불이 켜지고 엘리베이터가 올라갔다 내려갔다 하는 것이라고 생각하면 편하다.
1) 제일 먼저 배우는 것은 html에서 사용하는 테그들을 배운다.
<!--<> : 테그. 어떤 역할을 하는 것을 부를때 ~테그라고 부른다.-->
<!--테그의 시작은 <테그이름>이고 끝은 </테그이름>이다.-->
<!-- -대표적인 테그 종류- -->
<!--++ 기본적으로 테그와 테그가 만나는 곳에서는 글씨를 쓸 수 있다. -->
<!--ex) <title> 바로 여기 </title>-->
<!--<title></title> : 타이트 테그, 홈페이지 제일 위에 url보다 위에 있는 것. 주로 그 사이트의 이름을 말한다.-->
<!--<body></body> : 바디 테그, 이 안에서 여러 가지 기능을 홈페이지에서 사용하기 위해 적어서 나타내는 공간이다. -->
<!--물론 이것의 밖에서도 내용을 적을 수 있다. -->
<!--<h1></h1> : h1 테그, 주로 홈페이지에서 url 바로 밑에 위치하며 주로 제목을 나타낸다.-->
<!--<h2></h2> : h2테그, h1아래에 주로 위치하며 소제목을 나타낸다.-->
<!--<h3></h3>, <h4></h4>, <h5></h5>, <h6></h6> : h3 ~ h6 테그, 이 테그들도 제목이다. 숫자가 클수록 더더더 작은 소제목을 의미한다.-->
<!--<p></p> : p 테그, p테그는 어떤 문장이 p테그 안에서 한 줄로 나타내게 하는 것이다.-->
<!--<button></button> : 버튼 테그, 버튼 테그는 말 그대로 버튼을 나타나게 해주는 테그다. -->
<!--<input> : 인 풋 테그, 인 풋 테그는 <> 사이에 input이라고 적고 띄워쓰기를 한 type를 설정해주면 된다. -->
<!-- ex) <input type = "text">-->
<!--<img> : 이미지 테그, 이미지를 넣기 위한 테그다. 일단 이미지 테그를 적고 img를 살짝 띄워쓰기 한 후.-->
<!-- src : 를 적고 url주소를 적으면 된다.-->
<!-- ex) <img src : url주소 >-->
<!--<a></a> : 에이 테그 , 홈페이지 내에서 클릭하면 해당 페이지로 넘어가게 해주는 테그다.-->
<!-- 넘어갈 페이지는 href : 에 적으면 된다.-->
<!-- ex) <a href : www.naver.com>네이버</a>-->위 있는 표 같은 것이 바로 html에서 배우는 테그다. 이 밖에도 여러 가지 테그가 있다. 그것들은 시간이 날 때 좀 더 찾아보려고 한다.
이 후에는 로그인 하는 페이지를 강사님과 함꼐 만들어보았다.
이게 내가 강사님을 따라 만든 로그인 페이지다. 이 페이지를 만들면서 늘 그렇듯 강사님과 함께 만들면 쉬웠지만 혼자하려니 막막했다. 그래서 몇 시간이 되었든 계속 생각해서 이렇게도 코드를 짜보고 저렇게도 짜보고 하는 시행착오를 거쳐 겨우 만들었다. 이 페이지를 만들면서 어려웠던 부분은 처음 이 페이지를 강의를 들으며 보았을 때는 로그인하는 부분을 만드는 것이 어렵겠다고 생각했었는데 예상외로 사진의 테두리를 둥글게 만드는 것과 로그인과 사진을 가운데로 옮기는 것이었다. 그래서 강의를 돌려보며 '아 이렇게 하는 거구나'라고 꺠달으며 차근차근 다시 만들어 봤었다.
(++참고 스파르타 사진을 꾸민 것은 모두 css를 통한 것이다.)
2) css를 배웠다.
css는 꾸미는 것. 어떻게 꾸미냐면 class라는 것과 style 테그, 변수 이름 등으로 꾸며준다.
class는 테그안에 어떤 테그인지 나타내는 이름에서 띄워쓰기를 하고 class = "변수 이름" 형태를 적는 것으로 사용하고 이것을 꾸미기 위해 style 테그 안에 변수이름를 적는데! 여기서 주의할 것은 변수이름 앞에 반드시 .를 붙여야 한다는 것이다. .이 없으면 프로그램이 인식을 하지 못해서 사용할 수가 없다. 즉, .변수이름 { 꾸밀 내용 } 형태로 사용해야 한다. 여기서 만약에 {}가 없어도 어떻게 될까? 그냥 아무 일도 일어나지 안는데 즉, 꾸며지지 않는다. 그러므로 { 꾸밀 내용 }도 함꼐 적어야 한다.
css에는 여러 꾸미는 도구들이 있는데 그 종류는 margin, border, ,padding, border-radius, background 등을 배웠다.
위에 말한 것에서 또 세세한 종류로 다시 나눠진다. margin-top, padding-top 등등
이것을 배우고 만든게 위에 있는 스파르타 사진을 꾸미는 것이다. 이 것은 다시 차근차근 복습해야 될 것 같다. 잘 기억이 나지 않아서 더 공부가 필요한 것 같다.
3) js
js는 홈페이지를 통해 개발 환경을 구축했다. 바로 빈 홈페이지 화면에 오른 쪽 마우스 키를 딸깍한 후 검사를 누른 후 console에 들어가서 환경을 구축하는 것이다. 이것을 통해 홈페이지를 바로 바로 수정할 수 있다. 이 설명을 들은 후에는 js의 경고창 띄우기, 리스트, 딕셔너리, 변수, 자료형, 함수, 조건문, 반복문을 배웠다.
-경고창 띄우기
경고창 띄우기는 쉽다. function함수의 블럭 안에 alert라는 함수를 사용하여 나타내는 것이다.
바로 이렇게 말이다.
이렇게 해서 프로그램을 돌리면 홈페이지에 창이 하나 나오면서 alert함수 블럭 안에 있는 내용을 보여준다.
-리스트
리스트는 주로 배열을 사용한다. 배열은 []라는 첨자을 사용 하여 나타내고 []사이에 숫자나 문자를 넣어 사용한다.
리스트의 1은 1이 아니다. 2다. 리스트에서의 1은 0이라고 나타내 주어야 한다.
-딕셔너리
딕셔너리는 열쇠 같은 역활이다. 즉, 키라는 값과 벨류가 묶여 있는 것이다. 예를 들면 name이라는 변수의 값이 Park라고 했을때 name이라는 변수를 불러오면 Park이 나오는 것이다.
-변수
변수는 무언가를 담는 그릇이라고 생각하면 편하다. 또한 js에서 변수를 선언할 때는 let를 붙여서 선언한다.
예를 들어 let num = 25처럼 말이다.
js에서도 계산기처럼 기본적인 사칙연산이 가능하고 나머지값을 구하는 것도 가능하다.
문자열끼리 더하는 것도 가능하다. 참고로 문자열은 '문자'형태로 나타낸다. '이 두 개가 없으면 문자열을 표현할 수 없다.
문자열끼리 더해보자. 예를 들어
let num = 'house'
let nim = 'ui'
가 있다고 해보자. 여기서 num+nim를 하면 결과값으로 houseui가 나온다.
(++참고 : 변수명은 아무렇게나 짓는 것이 아니다. 내 자신이나 다른 사람이 보고 이해할 수 있게 지어야한다. 안 그러면 나중에 봤을 때 변수명이 뭘 가리키는지 알 수 없다.)
-함수
함수는 function이라고 적고 사용하면 된다.
-기본 형태-
-예시-
-조건문
조건문 은 if else 문을 사용하면 된다.
조건 내용을 이어서 하고 싶다면 and를 나타내는 &&rhk or를 나타내는 ||를 사용하면 된다!
-반복문
반복문을 알아보기 전에 반복문을 왜 쓸까?
반복문을 쓰는 이유는 반복해서 코드를 적는 과정을 없애고 한 번만 사용하여 여러 번 사용한 결과값을 나타내주기 위해서다.
반복문의 형태는
for (let 초기값; 조건식; 증감식;) {
반복할 내용
}
형태로 사용하면 된다.
-예시
이렇게 하면 0부터 99까지 100번을 반복하는 것이다.
이런 식으로 하면 반복문 안에서 조건문을 사용할 수도 있다.
4) 4번째로는 js 연습을 더 하였다.
5) 그 후 한 주 동안 배운 내용을 가지고 숙제를 하였다.
3. 마침 말
우선 한 주 동안 새로운 내용을 배울 수 있어서 좋았고 얼른 내 것으로 만들어보고 싶다. 앞으로 메이킹 챌린지에 도전할 수 있을 정도로 열심히 해서 실력을 길러 내가 만들어 보고 싶은 홈페이지 하나와 팀 프로젝트를 꼭 경험해볼 수 있었으면 좋겠다.