본 포스팅은 스파르타 코딩클럽에서 진행하는 <웹개발 종합반]> 강의를 수강하며 주차별 느낀 점을 정리하는 포스팅입니다. 제가 배운 것을 정리하는 개발 일지 겸 해당 강의를 수강하려는 잠재 수강생들에게 도움이 되었으면 합니다. 스파르타 코딩클럽으로부터 지원받고 제작하는 글이 아님을 밝힙니다.
1. 수강 계기
최근 블록체인을 공부하며 해당 필드에서 기획자로 살아남기 위해 개발에 대한 이해가 필요하다고 생각했다. 해당 필드에 기획자는 없다고도 볼 수 있지만... 그래서 더욱 필요한 개발 공부! 탈잉, class101 등 다양한 교육 플랫폼이 있지만 코딩을 전문으로 하는 플랫폼이자 후기도 나쁘지 않았던 '스파르타 코딩 클럽'을 이용해 보고자 했다. 이번 기회에 노션(notion), 슬랙(slack)과 친해지고(스파르타 코딩 클럽은 노션을 통해 수업자료를 제공, 슬랙을 사용해 질의응답/공지를 진행중임), 결과물로 간단한 포트폴리오 페이지도 만들어보고자(해당 강의의 산출물 예시에 유사한 사이트가 있음) 해당 플랫폼을 선택했다. 비용은 결코 저렴하지 않다;
2. 학습 개요
- HTML, CSS, JAVA script의 기초 개념을 이해한다.
- 웹사이트의 주요 컴포넌트의 코드를 무료로 따올 수 있는 라이브러리인, 부트스트랩을 써본다.
평소 개발자 친구들과 이야기하면 대화가 안 통한다는 느낌을 받을 때가 종종 있었는데, 그 이유를 조금은 알게 되었다. 바로 생각의 구조가 다르다는 것! 강의를 수강하며 강사님이 이런 말씀을 하셨다. "왜를 생각하지 마세요, 개발은 일단하는 겁니다. 여기서 왜 이걸 사용하지?라고 생각하지 마세요. 그냥 시키는 대로 하세요!" 평소 why를 매우 중요하게 생각하는 나로서는 강의 중간중간 왜 이걸 쓰는지가 엄청 궁금하고 그게 다른 상황의 적용을 위해서는 더 효율적이라고 생각했는데... 그런 생각을 안 하기로 했다.
ex. 시작할때 파이참을 깔아야 하고 AWS에 가입하는 등의 과정이 있는데 각각이 어떤 프로그램인지 무엇을 위해 필요한지 정도는 설명해줄 수 있잖아..? 참고로 파이참은 프로그래밍할 때 사용되는 소프트웨어 중 하나로 개발 툴 정도로 이해하면 되고, AWS는 서버를 구매할 수 있어 배포를 위해 필요하다.
일단 이런 순서로 주차별 강의가 진행된다고 한다. 웹이 작동하는 아래 이미지의 구조를 이해하기 위한 과정이라고 이해했다 난.
- 1주차: HTML, CSS, Javascript
- 2주차: JQuery, Ajax, API
- 3주차: Python, 크롤링, mongoDB
- 4주차: 미니 프로젝트 1, 2
- 5주차: 미니 프로젝트 3, AWS
위 주차들을 모두 수행하면 이런 결과물을 만들 수 있다는데.. 일단 도전!
3. 주요 학습 내용 + lesson learned
1) 웹의 동작 개념
우리가 보는 웹페이지는 서버에서 준비해둔 걸 받아서 보여줄 뿐이다. 브라우저는 요청을 보내고 받은 HTML 파일을 그려주는 역할을 한다! HTML과 CSS, Javacript의 개념을 보자면,
- HTML은 뼈대를 만드는 작업이다.
- CSS는 뼈대를 꾸며주는 작업이다.
- Javascript는 위 결과물에 동작을 입혀주는 작업이다.
2) HTML과 CSS
HTML 뼈대는 크게 head와 body로 나뉘며, 주로 body는 페이지의 내용, 즉 세부적인 구성 요소들의 틀을 잡아준다. head는 페이지의 속성 정보를 담는다. 파비콘 옆 웹 title과 meta, script, link, style을 설정하는 공간이다. 구역과 텍스트를 나타내는 코드이다.
CSS는 html에서 잡은 구역을 꾸며주는 것이다. <head> ~ </head> 안에 <style> ~ </style>로 공간을 만들어 작성하는데 예를 들어 mytitle라는 클래스를 가리킬 때, .mytitle { ... }라고 써줘야 한다. body에서 설정한 영역들에 대해 head에서 '.style'의 형태로 설정한다. style은 폰트, 간격, 정렬 등을 전체 또는 body의 div 단위로 설정할 수 있다. style을 설정할 때는 '.div명 {}'을 입력해 width, margin, border, background, color, font, padding 등을 입력한다. 특정 div의 구성 요소들을 설정할 때는 '.div명 > button'처럼 입력하기도 한다.
ex. ‘.mybtn > button { }’은 ‘mybtn’ div의 button에 대한 style을 설정한다.
[주요 단축키 및 입력어]
- div: 구역을 나누는 기준
- class=’OOO’: div의 명칭을 설정
- margin: 영역의 외부 간격 ex. margin: auto는 가운데 정렬
- padding: 영역의 내부 간격
- auto: 가운데/동일하게 정렬
- width: 가로 폭(단위: px)
- height: 세로 폭(단위: px)
- ctrl + alt + l: 정렬
- tab/shift + tab: 들여 쓰기/내어 쓰기
- row: 가로 정렬
- column: 세로 정렬
- background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) : 이미지 어둡게 하기
- display: none; 시작할때 숨겨두기
* 여러 개의 버튼을 1자로 가운데 정렬(4줄 세트로 입력 필요)
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
[TIP 1] 폰트 사용하기
폰트를 설정할 때는 2가지를 해줘야 한다. 첫째, head에 <link href=> 코드 붙여 넣기. 둘째, head > style에 * { font-family } 코드 붙여 넣기이다.
1) 구글 웹폰트에서 폰트 선택
2) 우상단 [+select this style] 클릭
3) 우상단 모음 아이콘 클릭
4) Embed 탭 클릭
5) link 태그를 복사해서 <head> ~ </head> 사이에, CSS를 복사해서 <style> ~ </style> 사이에 넣기
[구글 웹폰트 입히기]: https://fonts.google.com/?subset=korean
[예시 1]
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
[예시 2]
* {
font-family: 'Jua', sans-serif;
}
[TIP 2] 주석 달기
필요 없어진 코드를 지우는 게 아니라 작동하지 못하게 설정하는 방식으로, 코드에 대한 간단한 설명을 붙이기도 한다. 코드는 그대로 입력되어 있지만 작동은 하지 않는(컴퓨터가 인식 X) 상태로 개발자 본인 또는 동료를 위한 스티커 메모!
주석 설치하고 싶은 라인을 선택한 후, [단축키]: ctrl + /
[TIP 3] 부트스트랩
예쁜 CSS를 미리 모아둔 사이트로 필요할 때마다 찾아서 코드를 붙여 넣어 사용하자!
[부트스트랩]: https://getbootstrap.com/docs/5.0/components
[TIP 4] 약간의 모바일 처리
모바일에서 가장 문제 되는 가로 사이즈를 최소한 나름대로 최적화해두기!
화면 폭 500px 전에는 95%로 맞추다가, 넘으면 500px로 보여줘!
width: 95%;
max-width: 500px;
3) Javacript
Javacript는 브라우저가 알아들을 수 있는 프로그래밍 언어의 하나이다. 변수, 자료형, 함수, 조건문, 반복문이 있다. 강의에서는 html과 연결시켜준다는 표현을 쓰는데, 뼈대에 동작을 입히는 개념으로 이해했다. <head> ~ </head> 안에 <script> ~ </script> 로 공간을 만들어 자바스크립트를 작성한다.
[예시) 함수 - 버튼에 함수 연결하기]
<script>
function hey(){
alert('안녕');
}
</script>
</head>
<body>
<div class="mytitle">
<h1>내 생애 최고의 영화들</h1>
<button onclick="hey()">영화 기록하기</button>
</div>
먼저 변수형이다. let으로 변수를 선언하는데, 등호를 기준으로 우측에 있는 것을 좌측에 넣는다는 개념이다. 사칙연산, 문자열 더하기 등이 가능하다.
let num = 20
num = 'Bob'
다음은, 자료형인 리스트&딕셔너리형이다. 리스트는 순서를 가지고 있고, 딕셔너리는 key-value 값의 묶음이다. 정보를 모을 수 있고, 순서를 표시할 수 있어서 사용한다.
let b_list = [1,2,'hey',3]
b_list[1] // 2 를 출력('[ ]' 안의 순서는 0,1,2,3 ... 순임)
b_list[2] // 'hey'를 출력
// 리스트에 요소 넣기
b_list.push('헤이')
b_list // [1, 2, "hey", 3, "헤이"] 를 출력
let b_dict = {'name':'Bob','age':21} // 로 선언 가능
b_dict['name'] // 'Bob'을 출력
b_dict['age'] // 21을 출력
b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기
다음은 함수형이다. 함수형의 기본 형태는 아래와 같다. 강의에서 console.log 명령어를 사용한 예시는 전혀 이해가 안 됐다. 강의자료봐도 이해 안 됨 제발 제대로 설명 좀 ㅠ
// 만들기
function 함수이름(필요한 변수들) {
내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들) ;
다음은 조건문이다. 조건문은 'A면 B다'처럼 단순하면 'if, else'만 쓴다. 그보다 복잡하다면 'if, else if, else if else...' 이런 식으로 사용한다. 그러지 마 제발
function is_adult(age){
if(age > 20){
alert('성인이에요')
} else if (age > 10) {
alert('청소년이에요')
} else {
alert('10살 이하!')
}
} is_adult(12)
다음은 반복문이다. 이것도 console.log 들어오면서부턴 이해 안 된다, 포기... 그렇지만 아래 예시는 대충 이해됨; 아래 예시는 미세먼지 수치가 40 미만일 경우 해당 도시를 '40보다 작은 구: OO구, 미세먼지 농도'로 표시하라는 반복문이다. '반복'문인 이유는 for에서 설정한 집단 내 전체 값들에 대해 조건문을 충족하는지 반복해 끝까지 확인하기 때문으로 이해했다.
for (let i = 0; i < mise_list.length; i++) {
let mise = mise_list[i];
if (mise["IDEX_MVL"] < 40) {
let gu_name = mise["MSRSTE_NM"];
let gu_mise = mise["IDEX_MVL"];
console.log("40보다 작은 구: " + gu_name + ", " + gu_mise);
}
}
[TIP 5] 크롬 개발자 도구, console 탭
개발 툴에서 매번 크롬 창을 열어 확인하거나 많은 얼럿들이 뜨는 게 번거로울 때는 [마우스 우클릭 > 검사 > console]을 사용하기도 한다. 띄워놓은 페이지에서 빠르게 자바스크립트 테스트가 가능하다. 단, 새로고침 하면 모두 사라진다. 사실 이 부분 이해 안 된다; 근데 문제는 뭐가 문제인지도 모르겠다는 것!
4. 주차별 산출물
이렇게 배운 것들을 바탕으로 제출한 내 과제물(=산출물)은 <오늘의 한 줄 기록> 페이지! 원래 과제는 내가 좋아하는 가수를 응원하는 방명록을 만드는 것이었는데, 동일한 형태로 오늘 있었던 주요 이벤트를 짧게 기록하는 페이지를 만들어봤다. 요새 매일 뭐했는지 까먹는 경우가 많아서 나중에 이런 식으로 기록해봐야지..!
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <title>스파르타코딩클럽 | 부트스트랩 연습하기</title> <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet"> <style> * { font-family: 'Gowun Dodum', sans-serif; } .mytitle { background-color: green; width: 100%; height: 200px; background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("http://openimage.interpark.com/goods_image_big/8/0/3/1/7933888031_l.jpg"); background-position: center; background-size: cover; color: white; display: flex; flex-direction: column; justify-content: center; align-items: center; } .mypost{ max-width: 500px; width: 95%; margin: 20px auto 0px auto; box-shadow: 0px 0px 3px 0px gray; padding: 20px } .mybtn{ display: flex; flex-direction: row; align-items: center; margin-top: 20px; } .mybtn > button{ margin-right: 10px; } .card{ max-width: 500px; width: 95%; margin: 13px auto 0px auto; } </style></head> <body> <div class="mytitle"> <h1>오늘의 한 줄 기록</h1> </div> <div class="mypost"> <div class="form-floating mb-3"> <input type="email" class="form-control" id="floati ngInput" placeholder="영화 URL "> <label for="floatingInput">닉네임</label> </div> <div class="foam-floating"> <textarea class="form-control" placeholder="오늘 있었던 기억에 남는 일을 적어주세요." id="floatingTextarea"></textarea> </div> <div class="mybtn"> <button type="button" class="btn btn-dark">기록하기</button> </div> </div> <div class="wrap"> <div class="card"> <div class="card-body"> <blockquote class="blockquote mb-0"> <p>오늘은 롯데월드를 다녀왔다!</p> <footer class="blockquote-footer">퇴근하는 프로도 <cite title="Source Title">Source Title</cite></footer> </blockquote> </div> </div> <div class="card"> <div class="card-body"> <blockquote class="blockquote mb-0"> <p>오늘은 롯데월드를 다녀왔다!</p> <footer class="blockquote-footer">퇴근하는 프로도 <cite title="Source Title">Source Title</cite></footer> </blockquote> </div> </div> <div class="card"> <div class="card-body"> <blockquote class="blockquote mb-0"> <p>오늘은 롯데월드를 다녀왔다!</p> <footer class="blockquote-footer">퇴근하는 프로도 <cite title="Source Title">Source Title</cite></footer> </blockquote> </div> </div> </div> </body></html>
5. 간단 후기와 아쉬운 점
이해가 완벽히 되진 않았다. 특히 자바스크립트 문법을 배우며 학습 욕구가 많이 꺽였는데, 다행히 강의에선 술술술 설명이 넘어갔지만 학습자료를 다시보며 복습해보니, 이렇게 적혀있다; 심심한 위로가 되네;; 그리고 또 과제는 잘한 거 같아 뿌듯 : )
1주 차를 진행하며 느낀 점은 전체적인 내용을 팔로우하는건 가능할 것 같다. 이해가 크게 어렵지 않고 (자바스크립트 부분 제외), 주차마다 가시적인 산출물이 나온다는게 장점인듯하다. 이제 1주차를 하며 스파르타 코딩 클럽에서 아쉬운 점이다.
1. 코딩 스파랜드 필요해?
우선 코딩 스파랜드에 대한 설명이 필요하다. 매주마다 1회씩 요일을 정해 해당 요일의 20~23시까지 3시간 동안 함께 학습을 한다. 이걸 온라인 스터디, 코딩 스파랜드라고 부른다. 아래와 같은 메타버스?에 들어가 자신들이 공부하고 있음을 로그인 상태로 보여주고 해당 공간에서 텍스트와 음성 채팅도 가능하다. 자신의 아바타를 이동해 로비에서 출석체크 후 주차별 공간으로 이동 한 시간 반 동안 각자 학습을 하고(그냥 저기 놔두고 다른 브라우저로 셀프 스터디하는 것) 쉬는 시간 10분 동안은 휴식 공간으로 이동해 대화하고(잡담인데 한국인 특성상 모르는 사람 다수랑 그것도 온라인으로 활발히 대화 안 함;) 뭐 그런 식이다.
그런데 그냥 고정으로 스터디를 하는 시간이 있어 강제적으로 공부할 습관을 만들어준다는 취지엔 공감한다. 근데 그것뿐인 듯. 함께 학습한다기에 모르는 걸 물어보거나 체계적인 관리가 있는 줄 알았는데 담당 튜터는 질문에 빨리빨리 응답도 해주지 않고, 심지어 휴식 시간 이후엔 채팅 질문에 답장을 끝까지 하지 않고 나가버림; 그래서 뭔가 '케어'를 기대한 소비자 입장에서는 실망감이 매우 컸다.
2. 서비스 설명이 왜 이렇게 부실해?
가장 큰 실망감이 드는 부분이다. 크게 2가지 부분에서 크게 설명이 부족하다고 느끼며 불편을 겪었다.
우선은 강의를 시작하는 방식이다. 내가 원할 때 시작할 수 없고 매주 월요일을 기다려야 한다. 강의와 수강권이라는 개념이 우선 엄청 헷갈린다. 나는 강의를 구매했고 그럼 해당 강의들이 '나의 수강권'이라는 탭 안에 들어온다. 여기에는 사용기간, 개강일과 수강기간이 표시된다. 문제는 개강일(매주 월요일) 전엔 강의를 들을 수 없다. '화요일에 돈 주고 구매했는데 담주 월요일까지 기다리라고?' 공부하러 왔다가 공부 의지가 꺾인다. 쇠뿔도 단김에 빼야 한다고!! 그리고 더 화나는 건 나의 수강권 탭에서 '내 수강권 사용하기' 버튼을 눌러야 해당 개강일에 강의를 들을 수 있다. 나는 당연히 개강일이 지정되어 있길래 해당 일에 강의를 들을 수 있는 줄 알았다. 근데 해당일에 수강권 탭을 보니 개강일이 바뀌어 있는 거임; 문의해보니 내 수강권 사용하기를 눌러야 해당 날짜에 강의를 시작해 들을 수 있다고 한다. 그럼 강의를 구매했을 때 그 부분을 알려줘야 하는 거 아닌가???;;; 역시 개발자들이 만든 서비스다 보니 기획자 마인드가 부족해서 그런 것일까;
다음은 코딩 스파랜드에 대한 설명 부족이다. 이 역시 위와 동일한 맥락인데, 내 강의실에서 '수업 들으러 가기'를 눌러보면, 코딩 스파랜드, 주차별 강의, 랭킹 등에 대한 영역들이 보인다. 일단 여기서도 코딩 스파랜드가 뭐하는 곳인지 설명이 없다. 2줄짜리 배너로는 이해가 어렵다. 이곳에서 학습이 어떻게 이루어지는지 등... FAQ까지 가서 이걸 봐야 할까? FAQ에도 없는 것 같다 심지어; 해당 영역에서 툴팁 버튼 등을 둬서 좀 더 설명해주면 어땠을까... 카카오톡 플러스 친구로 아래처럼 메시지를 받았었는데 난 저걸 보고 코딩 스파랜드에 들어가서 오리엔테이션이라도 하고 강의를 들어야 하는 줄 알았다. 근데 알고 보니 강의는 각자 미리 들어도 됨;; 흠.. 내가 불편러겠지;;
그리고 사실... 마이페이지랑 내강의실도 헷갈려.. 마이페이지에서도 내 강의들이 보이는데 나는 수업들을 때 어디로 가야 할까... 둘은 각자의 페이지에서 서로 링크를 걸어두고는 있지만 저 구조 헷갈리는 건 맞음..;
그렇지만 잘 듣고 초보 탈출해야지 파이팅!
'개발일지' 카테고리의 다른 글
| [스파르타코딩클럽] 엑셀보다 쉬운 SQL 문법 정리 (0) | 2022.05.29 |
|---|---|
| [스파르타 코딩클럽] Flask, API, 클라이언트 연결 (0) | 2022.04.01 |
| [스파르타 코딩클럽] 파이썬, beautifulsoup, 크롤링, DB (0) | 2022.03.27 |
| [스파르타 코딩클럽] JQuery, Ajax, API (0) | 2022.03.15 |
