Lagomer의 뉴노멀 시대, 디지털 노마드로 사는 법
디지털 노마드, Lagomer

디지털크리에이터, 블로그마케팅, SEO/SEM, 관광디지털마케팅, 관광컨설팅

디지털 노마드(Digital Nomad)/디지털 마케터&크리에이터

스파르타코딩클럽 [웹개발종합반_1주차개발일지]

Lagomer 2021. 6. 1. 20:07

스파르타코딩클럽 웹개발종합반-코딩공부

4/12일부터 스파르타코딩클럽 웹개발종합반 5주 과정을 시작해, 5월 16일에 완주를 했습니다. 

 

* 스파르타코딩클럽 강의에 관심 있으신 분들은 아래 링크를 통해 5만원 할인 받고 강의 신청해보세요~ 

 

https://spartacodingclub.kr/?f_name=%EC%B6%94%ED%99%94%EC%A0%95&f_uid=6065ed207fe512c0156681b4 

 

스파르타코딩클럽

5주 완성! 코딩을 전혀 모르는 비개발자 대상의 웹개발 강의

spartacodingclub.kr

 

바로 복습에 들어가려고 했지만 코딩보다 우선적으로 해야 할 공부와 일들이 생겨 조금 미루다(좀 더 소화할 시간이 필요했던 것이 더 큰 이유일 것 같지만) 오늘부터(5/31) 복습을 시작했습니다. 

 

코딩은 해본적도 없고 관심을 크게 가지지 않았었지만 이제는 코딩이 한 때, 제2외국어로 중국어를 배우던 때처럼 초등학생들부터 배우는 교육과정이 될 정도로 점점 그 중요성이 커지고 있고, 요즘 디지털마케팅 관련 공부를 하며 내가 원하는 서비스를 기획해보고 여러 가지로 고민해볼 때, 개발 부분을 빼놓을 수가 없다는 것을 점점 더 몸으로 느끼며 직접 다 하지는 못하더라도 어떤 부분이 실현 가능한지 정도라도 알고 싶은 마음에 코딩 공부를 시작하게 되었습니다.

 

(출처: 스파르타코딩클럽)

요즘 코딩에 대한 관심이 높아진만큼 코딩 관련 온라인 강의 광고도 아주 많이 눈에 띄는데 저는 그 중에서도 가장 많이 보였던 "스파르타코딩클럽"을 선택했습니다. 광고를 다 믿는 것은 아니지만 광고에서 느껴지는 강사의 열의(?)와 코딩을 쉽게 배울 수 있다는 문구를 한 번 믿고 해 보자는 생각에 시작해보았습니다.

 

스파르타코딩클럽에서 개발자들의 기록 방식으로, 주마다 개발일지를 쓰는 섹션이 있는데 처음 강의 때는 진도 따라가느라 바빠, 개발일지는 일단 몇 자 채우는 것에 급급했고 이번 복습 기간에는 정말 개발자가 된 마음으로 개발일지를 이 공간에 남겨보려고 합니다.

 

코딩을 시작하지 않으신 분들에겐 약간의 흥미를, 또 코딩을 하고 계신 분들과는 서로 정보 공유가 될 수 있길 바랍니다. 


1) HTML과 CSS 개념 

- HTML (뼈대) : 구영과 텍스트를 나타내는 코드 / 크게 head(페이지의 속성 정보)와 body(페이지의 내용)로 구성

  head 안에 들어가는 대표적 요소들 : meta, script, link, title 등

-CSS(꾸미기) : 잡은 구역을 꾸며주는 것 

 <head> ~ </head> 안에 <style> ~ </style>로 공간을 만들어 작성

 배경관련

 background-color

 background-image

 사이즈

 width

 height

 폰트

 font-size

 font-weight

 font-family

 color

 간격

 margin (바깥 여백)

 padding (안쪽 여백)

 

**글 속성 -> 박스 속성으로 변경 코드

display: block;

 

2) 부트스트랩 : 예쁜 CSS를 미리 모아둔 것, 미리 완성된 부트스트랩을 가져다 쓰는 경우가 많음

 

3) 자바스크립트 : 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어

웹서버 HTML+CSS+Javascript

버튼에 함수 연결하기(버튼을 누르면 함수가 불림)

<button onclick= "hey()" type="button" class="btn btn-primary"> 기사 저장 </button>

 

크롬 개발자 도구 콘솔 창 : 띄어놓은 페이지에서 빠르게 자바스크립트를 테스트해볼 수 있게, 개발자들을 위해 만들어둔 도구

console.log(변수) 개발자가 결과값을 보기 편하도록 콘솔 창에 괄호 안의 값을 출력해줌 

 

변수 & 기본 연산

-변수 대입(a=2)의 의미 : "오른쪽에 있는 것을 왼쪽에 넣는 것!" (2를 a라는 변수에 넣는다.)

-let으로 변수를 선언

-사칙연산, 문자열 더하기가 기본적으로 가능

리스트 & 딕셔너리

-리스트: 순서를 지켜서 가지고 있는 형태-딕셔너리: 키(key)-밸류(value) 값의 묶음 

 

자바스크립트 기초 문법

(1) 함수 

//만들기

function 함수 이름(필요한 변수들){

내릴 명령들을 순차적으로 작성

}

//사용하기

함수이름(필요한 변수들);

(2) 조건문

-20보다 작으면 작다고, 크면 크다고 알려주는 함수

-if, else, else if, else if else

-AND 조건과 OR 조건

(3) 반복문


지금은 복습 기간이라 그래도 처음 들어보았을 때보다는 확실히 이해가 더 되는 것 같습니다.

처음 코딩을 접했을 때 가장 많이 들었던 생각은 외국어를 처음 배웠을 때처럼 조금씩 컴퓨터와 대화가 되는 듯한 기분이 들어 흥미가 생기기 시작했습니다. 

(5주 차까지 완료했을 때도 외국어 배울 때처럼 점점 어려워지는 것이 함정이지만...) 

 

절댓값이 있는 코딩이 요즘 어떤 것이 정답인지 잘 모르겠는 디지털 마케팅 관련 일(어떤 것에 사람들이 반응하고 왜 그것을 좋아하는지 등 트렌드는 있지만 정답은 없는 것 같아요..)을 하고 있는 저에게는 다른 면에서 답답함을 좀 풀어주는 돌파구 같은 기분도 들었습니다. 

 

아직 갈 길이 멀지만 1주 차 개발일지는 이것으로 마치고 다음에는 2주 차 개발일지를 공유하겠습니다.