제2회 스파르톤 생존일지

ys·2021년 9월 4일
0

2021/09/04 (토)

부제 : TIL!(Today I Learned)

오늘의 목표 : 웹개발 종합반 1~5주차 복습

컴알못이었던 나는 처음 시작할 때 수첩에다가 기록을 했었다.
책장에 꽂혀있던 그 수첩을 다시 꺼내고,
처음 스파르타에서 코딩을 시작했을 때를 떠올리며,
복습을 시작해보려고 한다.

다시 열정을 불태워본다! 아자!

추억의 수첩과.jpg


수첩의 내용은 이 글을 끝까지 읽으시는분께 일부 공개하겠습니다.

오늘의 시간표
9:00pm 팀별 아이스 브레이킹
9:10pm 웰컴 인사 및 행사 안내
11:30pm 이벤트 퀴즈쇼 ‘도전 스파르타 골든벨’
01:00am 인스타 피드 챌린지 1 (#스파르타코딩클럽 #스파르톤 #힙한취미 #코딩 @spartacodingclub) & 찐관
03:00am 전체 마라톤
04:00am 인스타 피드 챌린지 2 (#스파르타코딩클럽 #스파르톤 #힙한취미 #코딩 @spartacodingclub) & 찐관
05:30am 행사 마무리 준비
06:00am 행사 마감, 완주 축하하기

9:00pm | 제2회 스파르톤시작

제2회 스파르톤의 막이 올랐습니다. 두둥~
(이날을 대비해 미리 키트 사진 예쁘게 찍어놓음 ㅎㅎ 뿌듯)


체크인하고 들어가마자 앞으로 가서 아무 자리에나 앉았다.
제일 앞쪽이라 사람이 많을 줄 알았더니
다들 부끄럼쟁이신지 멀리에 앉아서 자리가 비어있었다.
덕분에 범규님 코앞에서 봄

9:10pm | 조 이름 정하기

같은 테이블에 앉은 사람끼리 같은 조가 된다고 했다.
처음이라 어색, 머쓱 했는데 다들 밝으셔서 너무 좋았다.
조이름을 뭘로 할 지 고민했는데 한 분이 스파르톤 1회 경험자셨다.
조 이름은 퀴즈할 때 외치고 답을 적으니,
최대한 짧은 이름으로 하면 좋다는 꿀팁을 전수받으며
그렇게 우리팀은 'ㅋ' 조가 되었다.

[스파르톤에 참가해서 즐거운 'ㅋ'조 ] ㅋ

9:40pm | 코딩 준비

이제 메달과 함께 코딩 시작!

다시 코딩을 시작하려니 두근거리면서 기대된다.

오랜만에 보는 (파)이참이와 스파르타 폴더

10:00pm | 코딩 시작


다시 처음 시작하는 기분 낸다고 0주차 부터 들어갔다.
튜토리얼 뿐이었지만 정말 다시 시작하는 기분이 들어 묘했다.


서론이 길었지만 드디어 1주차가 시작됐다.
왜 벌써 피곤한건지 알 수 없지만 딸피로 시작해본다.

크롬에서 네이버 웹 페이지를 해킹하며 웹동작의 개념을 확인한다.

웹의 역할 2가지

  1. 서버에 요청
  2. 데이터를 받아온다(HTML/CSS/JS)
    HTML 뼈대
    CSS 꾸미기
    JS 움직이는 것

1~5주차 배울 순서

1주차: HTML, CSS, Javascript
2주차: jQuery, Ajax, API
3주차: Python, 크롤링, mongoDB
4주차: 미니프로젝트1, 미니프로젝트2
5주차: 미니프로젝트3, AWS

1~5주차가 끝나면 만들게 되는 것들

나홀로 메모장
모두의 책리뷰
페이보릿 무비스타

11:00pm | 계속 되는 코딩

HTML : 여러개의 태그로 이루어져있다.

<div태그> - 태그들을 묶어준다
<p태그> - 문단을 나눠준다.
<h1~h6태그> - 글씨의 크기를 바꿔준다.
<span태그> - 특정글자를 꾸밀때 쓴다.
<a태그> - 하이퍼링크를 삽입한다.
<img태그> - 이미지를 삽입한다.
<button태그> - 버튼을 삽입한다.
<hr태그> - 가로선을 삽입한다.

11:30pm | 도전 스파르타 골든벨 퀴즈쇼

1등하면 무려 치킨이 걸려 있다는! 퀴즈쇼!!
MC 이장은 매니저님과 함께 진행합니다~

렉이 많이 걸려서 1등할 수 있을까? 걱정했다.
그래도 1등 하고싶다! 할거다! 생각하면서 각오를 다졌다.

'ㅋ' 조 파이태에에에에엥!

슬랙에 문제가 올라오고 답글로 정답을 외치는 방식이었다.

  • 1등:3점 2등:2점 3등:1점을 준다.

Q1. 이 문제의 답은 무엇일까요?

다들 수학문제의 국룰답인 0,1,2,-1 등을 적기 시작했고,
나도 시류에 편승했다. 근데 정답자가 나오지 않았다는 것이다.
그래서 추가 힌트를 주셨는데 세글자 한글, 서로 시작하는 단어였다.
다들 서울시를 외쳤는데 이미 늦은 나는..
답이 아직 안나왔다는 말을 듣자마자 서로 시작하는 서울역을 적었다.

!! 그런데 말입니다.
그것이 바로 정답이었습니다.
사실 맞히고도 어안이 벙벙했다.
엥? 내.. 가.. 1등..? 아니 그래서 우리.. 팀이.. 1등..?

왜 답이 서울역인지 설명을 들었지만 이해못함..
아무튼 맞혔으니 된거잖아??
그렇게 'ㅋ' 조는 1등으로 기분좋은 스타트를 끊었다!!

이대로 가보자고!

Q2. '코호트 러닝'을 아시나요? 구글에 코호트 러닝 장점을 검색해 보시면 장점이 나올텐데요. 장점 중에서 스파르타 코딩클럽의 ㅇㅇ이 '조직적이다.'라는 장점에 부합하는데요. 어떤 특징일까요?

답은 수강환경이었고 우리 조는 못맞혔다. 그래도 아직 2등이었다!

            		2Round 점수 합산

Q3. (보기 있음) 스파르타의 커뮤니티탭에 '블로그'가 있는 거, 알고 계셨나요? 블로그에서 무지개 썸네일을 누르시면 김진선 님의 인터뷰 글을 보실 수 있는데요. 친구추천 1위 수강생 김진선 님이 수강하지 않은 강의는 무엇일까요?
링크 :https://spartacodingclub.kr/blog/60fa687e665e6057a012a445
a. 추석 무료특강 b. 크리스마스 무료특강 c. 설날 무료특강 d. 가정의달 무료특강 e. 웹개발 종합반

답은 C 설날 무료특강이었고 이번에도 우리는 못맞혔다.
하지만 여전히 2등이었다!

Q4. 웹개발을 조금이라도 해 보셨다면 '개발자도구'는 다들 아시죠? 스파르톤 1회 회고 글이 있는데요. 하이라이트 된 글씨 색은 무엇일까요? (정답 예시 : f312e1)

여기서 스파르톤 1회에 참여하신 경로님이 질주를 시작하신다.

답은 #E8344E

1등으로 질주하는 'ㅋ'조!!
경로님 엄청 빨리 적으셔서 인터뷰요청이 왔다.
답을 빨리 친 비결은 듀얼 모니터라고..
역시 코딩은 .. 아니 뭐든 장비빨인가!?

Q5. 최근에 스파르타가 라이브 커머스 그립에 코딩업계 최초로 진출 했었는데요! 이범규 대표님의 패션을 소개하는 장면이 아주 핫 했었는데요. 그렇다면 문제! 이범규 대표님이 갖고 있는 피타고니아 티셔츠 색깔을 모두 고르세요! @channel
보기 : 초록색, 노란색, 주황색, 하늘색, 분홍색, 검은색, 하얀색, 보라색
힌트 : 스파르타 코딩클럽 유튜브 https://www.youtube.com/watch?v=pWYXMGFb6_M 를 보시면 나옵니다.

일단 이 문제가 나왔을 때 오늘 범규님이 입었던 옷을 기억한
나 자신에게 칭찬한번 해줬다.
옷이 예쁘길래 봤더니 파타고니아 흰색 티더라고!
범규님이랑 옷 취향이 같더라고!
얼른 유튜브 보고 오는데 이미 정답자가 나왔단다..
아니 범규님 사생팬있나요 뭔데요 ㅠ 거무죽죽은 또 뭔데요 ㅠ

그렇게 여전히 1등인 'ㅋ',
하지만 고추바사삭이 바삭 아니 바싹 쫓아오고 있었는데!?

Q6. 여러분! 스파르톤과 함께 하고, 여러분들이 지금 마시는 밤샘코딩의 추진력인 음료, 레드불. 레드불이 가지고 있는 브랜드 슬로건은 바로...? 무엇인가요? 맞습니다. "레드불이 날개를 펼쳐줘요!"인데요. 레드불은 스포츠, 예술행사, 그리고 코딩까지 다양하게 지원을 아끼지 않고 있습니다. 여기서 문제! 레드불 공식 서포트하는 한국 선수 중, 이번 도쿄올림픽에서 동메달을 딴 선수는 누구일까요?

이거 레드불 홈페이지로 들어가서 지원선수 보자마자
제일 앞에 있는 선수 적었는데 아니었다.
정답자가 다 나왔다길래 끝났구만 하고 결과보니?


나는 버스를 타고 있다. 경로가 확실한 버스.. 최고..

Q7. 코딩으로 만들 수 있는 건 정말 무궁무진한데요! 그 중에 빠르고 재미있게 만들 수 있는 종합예술 게임을 빼놓을 수가 없죠! (그래서 스파르타에서는 디자이너와 함께 게임을 만드는 로켓단이 진행중입니다 :) 많은 관심부탁드립니다!!) 자 이제 귀 쫑긋하고 들어셔야 합니다. 모바일 게임사로 다들 알고 계신 넥슨, 카카오 등등 중 국내 최조 모바일 게임 회사는 '컴투스'인데요! 컴투스는 2000년 10월 세계 최초로 OO을 활용한 게임서비스를 실시했습니다. 이 OO은 무엇일까요?

답은 자바였다.

아쉽게도 맞히지 못했지만 여전히 순위권!
언제든 뒤집을 수 있다 아자!

Q8. 1회 참가자분들이라면 기억하실 법한 '인터넷'의 시초 '아파넷'. 이 아파넷은 UCLA와 SRI의 두 연구소를 연결하며 지금은 우리에게 너무 익숙한 인터넷망의 시초가 되었습니다. 이 때 한국인이 등장하는 것 알고 계신가요? 아파넷이 연결될 당시 외국인 신분으로 직접 연구에는 참여하지 못했지만, UCLA 연구실에서 초기 인터넷이 만들어지는 과정을 목도하신 이 분. 이때의 영향으로 한국은 미국에 이어 두번째로 인터넷 연결에 성공한 나라가 되었는데요. 이 분은 누구일까요?

드디어 십구뜯고 맛보고 즐기고 팀이 점수를 따냈다.
팀명적는 것 만으로도 힘드셨을텐데 완전 대단했다!! 리스펙!

Q9. 지금 앱개발종합반과 리액트 강의를 들으시는 분들이 현장에도 많으신데요. 이 둘의 강의 공통점 알고 계신가요? 바로 '페이스북'이라는 점입니다. 앱개발종합반에서 사용하는 리액트 네이티브와 리액트는 모두 페이스북이 2014년에 오픈한 기술인데요. 이처럼 다양한 회사들이 라이브러리부터 언어까지 개발하는 경우는 굉장히 신기하지만 꽤나 흔한 일이죠. 그렇다면 2009년 구글이 개발한 프로그래밍언어 중 가비지 컬렉션 기능이 있는 컴파일 언어는 무엇일까요?
힌트: '구글' 브랜드명과 굉장히 밀접한 관계가 있습니다!

이번에도 답이 후루룩 나왔다. 아니 고추바사삭님들 뭐냐고 ㅠㅠ
문제 유출된거 아니냐고 ㅠㅠㅠ 타자 너무 빠르시다고 ㅠㅠ
그래도 우리에게는 길(경로)이 있기에 2등으로 파이팅 하고 있다 ㅋㅋ

10번까지는 할 줄 알았는데 보너스 문제가 시작되었다.
인물퀴즈 선착순 2팀만 무려 5점!

B1.누구일까요?

아니 누구신데요 ㅜㅜ 어디서 본 것 같기는 한데.. 외국분이시네요..

답은 일론머스크였다. 어떤 조가 아쉽게도 일론이라고만 적은 바람에
우리 조에게 점수가 넘어왔다.. 감사합니다.. 죄송합니다..

대박. 또다시 경로가 생성되며 공동 1등이 되어버리고 말았다!
감사합니다 경로님.. 이 모든것이 다 경로님 덕입니다..

B2.누구일까요?

또 다시 시작된 의문.. 누구시죠..?
한국분이신 것 같긴 한데.. 초면입니다만.. 그러다가 게더
화면을 봤는데 우리 조 담당이신 이동현 매니저님이 보였다..
대박. 이동현 매니저 님이네! 바로 적었는데 ...

정답인데 왜.. 우리 조가 없지..
그런데 정답이 아니었다.
답은 김건희 튜터님
죄송해요.. 제가 용안을 못 봬서..

마지막은 마지막답게 3팀에게 6점!

B3.누구일까요?

아니 진짜 누구세요.. 그러다 또 게더를 화면을 봤는데
이거다. 이번엔 진짜 이동현 튜터님이다. 찐이다.

하지만 나는 렉이 걸려서 늦었다..

그런데?

아니 우리가 .. 1등을 했는데요..?
시작과 끝이 완벽한 수미상관을 이루었는데요..?
갑자기 레드불을 한캔 한 것 마냥 심장이 쿵쾅거렸다.
대박.. 이건.. 경로우대 해야해!
버스타서 치킨 얻었다.. 감사합니다.. 감사해요
'ㅋ'조 최고야..

[1등해서 신이난 'ㅋ'조 ]

승리의 춤

최고인건 다시 한번!

01:00am | 인스타 피드 챌린지 1

인스타에 코딩하고 있는 모습 또는 화면과
중간소감을 적어서 올리면 끝!
좌측의 해시태그(#스파르타코딩클럽 #스파르톤 #힙한취미 #코딩 )를 같이 적고 계정(@spartacodingclub)을 태그한다.

그리고 올려주면 완성!

적고 나니 매니저님께 찐한 관리가 왔다.
저 열심히 하고 있다구요 ㅠㅠ

매니저님이 블로그 글 잘 쓰셨다고 상품 받을 수도 있겠다며
김칫국을 목구멍으로 넘겨주셔서 뱉어냈다.
기대가 크면 실망도 크답니다 ㅠ

01:30am | 다시 코딩!

간단한 로그인 페이지 만들어보기

내가 만들어낸 작고 소중한 로그인 페이지이다..

CSS : 꾸미기

사용법
1. <body태그>안의 원하는 태그 안에 class(명찰)="이름"을 만든다.
2. <head태그>안에 <style태그>를 만든다.
3. 만든 class를 .클래스명 { 꾸미기 } 을 입력한다.

자주 사용하는 css. 외우지 않아도 된다!.. 고했다.

배경관련
background-color
background-image
background-size

사이즈
width
height

폰트
font-size
font-weight
font-famliy
color

간격
margin
padding

CSS의 효과로 작고 소중한 로그인 페이지가 빨갛게 변했다!

02:00am | 코딩 그리고 코딩

슬슬 잠이 오는 사람이 생기는 것 같다.
나도 눈은 피곤하다. 하지만 치킨쿠폰을 받은 즐거움으로 버텨낸다!

CSS연습

얘네는 거의 같이 다닌다!

background-image: url("");
background-size: cover;
background-position: center;

여백에는 두가지가 있다.
padding: 안쪽으로 여백을 준다.
margin: 바깥쪽으로 여백을 준다.

background-color로 여백을 확인 해주면 좋다!

가운데로 두고 싶은 경우
width와 margin auto를 주면 되는데
버튼 같은 경우는 위처럼 해도 가운데로 이동되지 않는다.

왜?

글 속성과 박스 속성이 있는데
박스 속성은 가로세로 개념이 존재하지만,

글 속성은 가로세로 개념이 존재하지 않는다.
따라서, 글속성을 강제로 박스속성으로 만드는

 display:block

을 사용해주면 해결된다!
그렇게 완성된 최종본!

class는 중첩이 가능하다.
이미 있는 class 옆에 이름을 살포시 적어주면
명찰이 두개가 되는 셈이다. (btn과 red-font)

<button class="btn red-font"> 로그인하기</button>

폰트 입히기

  1. [구글 웹 폰트]https://fonts.google.com/?subset=korean 에서 마음에 드는 폰트를 고른다

  2. [ + Select this style ]을 클릭하고
    <link태그>를 복사해서 <title태그> 아래에 붙여넣는다.

  3. CSS rules to specify families를 복사해서 <style태그>괄호 사이에 *{} 붙여넣는다.

*는 전체 태그에 적용되도록 한다는 뜻.

내가 만든 최종본에 폰트를 입히면! 완성!

주석 처리

나는 읽고 싶은데 컴퓨터 너는 읽지마! 할 때 사용한다.
ctrl + / 시 주석처리가 된다.
css와 html의 주석처리 방법이 다르다.
하지만 ctrl + / 만 사용하면 해결된다.
한번 더 ctrl + /를 누르면 주석이 삭제된다.

03:00am | 전체 마라톤 2바퀴!

나도모르게 승부욕이 발동해서 1등하려고 했다.
근데 사람이 너무 많아서 게더가 멈춰버림!!
다들 놀람.. 당황. 그래도 두바퀴 완주했다!

범규님이 잠이 오면 산책도 하고 게임도 하라고 하셔서
잠이 오진 않았지만 게임하러 갔다.
테트리스 완전 오랜만인데~
근데 슬슬 잠이 와서 그런지 머리가 잘 안돌아가더라..

다시 코딩으로 돌아온다!
목표치만큼은 다 하지 못할 것 같다.
그래도 할 수 있는 만큼 해야겠다!

부트스트랩 (css모음집)

[부트스트랩]https://getbootstrap.com/docs/4.0/components/alerts/ 에서
필요한 것들을 만들지 않고 가져다 쓸 수 있다.

부트스트랩 사용

꽤나 그럴듯한것이 만들어졌다.
귀여운 고양이는 덤.

04:00am | 인스타 피드 챌린지 2

역시 인스타에 코딩하고 있는 모습 또는 화면과
2시간이 남은 소감을 적어서 올리면 끝!
좌측의 해시태그(#스파르타코딩클럽 #스파르톤 #힙한취미 #코딩 )를 같이 적고 계정(@spartacodingclub)을 태그한다.

그리고 올려준다!

적고 나니 또 매니저님께 찐한 관리가 왔다.
제가 감히 목표를 너무 높게 잡았습니다.. 하고 이실직고 하니
스파르톤을 조금 더 즐기시면 되죠! 하셨다.
아.. 네.. ㅠ 근데 이제 슬슬 졸려요..
그래도 파이팅하기로 하고 다시 코딩 마저 시작!
'ㅋ'조 다들 열심히 하는걸 보니 내가 다 뿌듯하다.
역시 1등 조야! 하하

부트스트랩으로 만든 페이지 발전시키기

와아! 나홀로 메모장 대충 완성!
그래도 코딩하다보니 또 잠이 깬다!
레드불 안먹어도 살아 있다 이말이야!

나홀로 메모장의 포스팅박스 완성하기

<form태그는>일단 발견하면 <div태그>로 바꾸기

완성~

05:00am | 마지막 한시간을 코딩으로 불태워라!

javascript : 처음배우는 프로그래밍 언어!

프로그래밍 언어 중 하나로,
유일하게 브라우저가 알아들을 수 있는 언어이다!

왜? 브라우저는 javascript만 알아들을까?
표준이기 때문에 모든 브라우저는 javascript를 알아듣게 설계되어있고,
모든 웹 서버는 HTML,CSS,javascript를 주게 되어있다.

추가적으로 java와 javascript는 아무 관련 없다.

사용법
1. <head태그>에 <script태그>를 입력한다.
2. function hey(){alert('안녕!');}을 입력한다.
3. 포스팅박스 열기 버튼 태그에https://velog.velcdn.com/images%2Fys813%2Fpost%2Fa16712c3-441c-4421-8268-c880bfd8a3ba%2Fimage.png">

개발자도구에서 작성한 함수를 호출할 수 있다.
역시 hey입력 시 안녕!이 출력된다.

05:30am | 스파르톤 마무리 준비

강의를 듣다가 스트레칭 할 겸 고개를 돌렸는데
밖이 밝아졌다.
이젠 정말 끝이 다가왔구나 하는 생각이 들었다.
정말.. 아침이 밝았어요..

그래도 다들 열심히 코딩중이니 나도열심히 코딩을 해야겠다.
자 남은 시간까지 열심히 코딩 해 봅시다.

javascript 기초 문법

변수 : 값을 담는 것.

let a=2
a+3
5
a=5
a+3
8
let first_name = 'ys'
let last_name = 'han'
first_name + last_name
'yshan'
first_name + 5
'ys5'

새로고침을 해주면 이전에 작성한 것이 나오지 않는다!
화살표 위쪽 키를 누르면 이전에 작성한 것들이 나온다.

순서가 중요한 자료형 : 리스트 (꺽쇠사용)

let a_list = ['수박','참외','배'] // 0번째 부터 순서가 정해진다.
a_list[0]
"수박"
a_list[1]
"참외"
a_list.push('감')
4
a_list
(4)['수박','참외','배''감']

키(key)-밸류(value) 자료형 : 딕셔너리

 let a_dict = {'name':'bob','age':27 }
 a_dict['name'] // 선언할 때는 중괄호, 가져올 때는 꺽쇠
"bob"
 a_dict['height'] = 180 // 키 추가
 180
 a_dict
 {name:"bob",age:27,height:180}

리스트와 딕셔너리의 조합

a_dict['fruits'] = a_list // 딕셔너리에 fruits 리스트를 추가한다.
(4)['수박','참외','배''감']
a_dict // 딕셔너리에 fruits항목이 있고 그 항목은 리스트 형식이다.
{name:"bob",age:27,height:180,fruits:Array(4)}
  age:27
  fruits: (4)['수박','참외','배''감']
  height:180
  name:"bob"

반대로 리스트 안에 딕셔너리가 들어갈 수도 있다.

06:00am | 스파르톤 마감, 완주 축하하기

아아 저는 여기까지인가봐요..
목표는 다 하지 못했지만
다같이 스파르톤을 즐기고
오랜만에 열정을 불태웠다는것에 만족했어요..
밤샌 나 대견해!

범규님과 다같이 카운트 다운을 하고,
다들 메달을 목에 걸었다.
정말 마라톤 완주한 것 같잖아..!

한명의 이탈자도 없었던 'ㅋ'조

나가는 길에 기념사진도 찍었다.

마지막으로 날씨가 좋지 않아 해가 보이진 않았지만,
정말 완연한 아침입니다!

보너스 - 제 긴 글을 읽어주신 분들 너무 감사드립니다.

약속한 대로 제 수첩 전부 공개 하겠습니다.
https://youtu.be/QhjN-n5-Chs
감사합니다!

제2회 스파르톤을 진행하며 느낀 점

웹개발 종합반을 진행하면서 1회 스파르톤부터 미니스파르톤까지
많은 참여기회가 있었지만,
밤새기 힘들고 피곤하다는 이유로 참여하지 않았다.

슬랙에서 완주한 사람들의 기록을 보면서도
해봐야겠다 하는 의욕이 생기진 않았다.

그런데 스파르톤 2회 모집 문자를 우연히 받게되었을때
정말 이상하게도 나는 신청을 하고있었다.
요근래 더 열심히 살고싶다라는 생각이 들어서 그렇다.

밤을 새는게 좋은 건 아니지만,
목표가있을 때 밤을 새는것은,
그리고 혼자가 아니라 같은 곳을 바라보는 사람들과 같이 밤을 새는것은
생각보다 더 즐거웠다.

우리 조원들도 열심히 하고,
매니저분들도 못주무시고 열심히 한명 한명 관리해주는 모습을 보면서,
알게모르게 스파르타에 소속감을 느꼈다.

그래요 저는 스파르타 출신이에요!

이런 기회를 주셔서 스파르타 측에 정말 감사드리고
덕분에 행복하고 뿌듯한 하루를 보낼 수 있었습니다.
감사합니다!


현재 스파르타에서는 친구추천 이벤트를 진행중입니다!
아래 링크로 수업을 신청하시면 5만원 할인이됩니다!

https://spartacodingclub.kr/?f_name=%ED%95%9C%EC%98%88%EC%8A%AC&f_uid=60c88b0a8497eecbedc54f8f

profile
코딩시작

0개의 댓글