IDIC

https://www.youtube.com/watch?v=ix7K3xMudgc

방통대 이번 학기 과목으로 '자료구조'를 신청했는데 c를 아예 모르면 들을 수가 없어서 c를 독학하기로 했다.

아예 모르는 c를 독학하면서 그걸 베이스로 실습해야 하는 자료구조를 따라가야 해서 그냥 드랍할까 좀 고민하고 있음;

어찌저찌 해보기는 할텐데 안된다 싶으면 정정기간에 날릴듯.

아무튼 맥에서 c를 공부하려면 vs code가 필요하다. vs 맥버전으로는 c 지원을 안함.

그래서 c/c++ 익스텐션을 깔고 hello world를 c언어로 치라길래 그대로 따라하고 run 돌렸는데 에러 메시지가 뜨더라.

"compilerPath" 경로를  gcc 컴파일러가 설치된 경로로 업데이트를 해달라는데 xcode는 원래 깔려있었고 

터미널로 --gcc version 입력 후 경로를 따서 c_cpp_properties.json 파일을 수정하면 되더라.

이미지 태그 

<img src=" "> 

크기 조절 width px / %로 가능 

Ex

<img src ="example.jpeg" width=500px>

<img src="example.jpeg" width=100%>

CLASS와 ID

Html에 이름을 주는 법 : class / ID 

Class 

ex)  

html

<p class="big-green-text">test</p>

css

<style>

.big-green-text {

font-size:100px;

color:green;

}

ID 

html

<p id="big-blue-text">test2</p>

css

#big-blue-text {

font-size:100px;

color:blue'

}

= 같은 클래스 이름을 여러 요소가 공유 가능하지만 같은 아이디를 여러 요소가 공유할 수 없다.

  한 요소가 여러 클래스를 가질 수 있으나 여러 아이디를 가질 수 없다.

div 태그 

<div> 구획 나누기 

css 태그를 사용하는 3가지 방법 

1. <style> 태그

<style>

h1 {

color: green;

text-align:center'

}

p {

font-size: 20px;

}

</style>

<h1>test</h1>

<p> css testing </p>

2. style 속성

<h1 style="color: green; text-align:cetner;>hello world<h1>

<p style="font-size: 20px;> test</p>

3. 외부 css 파일 + <link> 태그

css/style.css

h1 {

font-size : 30px;

color: lime;

}

p {

text-align:right;

}

index.html

<link href="css/style.css" rel="stylesheet">

<h1>hello world</h1>

<p>test</p>

= 일반적으로 3번 방법으로 사용하지만 테스트 등 간편함을 위해 <style> 태그를 사용하기도 한다.

코멘트

html 코멘트

<!-내용->

css 코멘트

/* 내용 */

맥 단축키(sublim text) : com + / 

화면에 로그 출력 =  console.log 

ex

hello world = > console.log('hello world');

15 = console.log(3 * 5) / console.log(10 + 5) etc

문장의 마침표 = ;

console.log(10 + 5)

console.log(5 * 3)

한줄씩 자동 ; 추가해주기 때문에 정상작동함.

그러나 

console.log(10 + 5)console.log(5 * 3) 한줄로 작성시 SyntaxError(구문오류)  

= console.log(10 + 5);console.log(5 * 3)

= 15

   15 

코멘트(주석) // 

용도 : 어떤 의도로 코드가 작성되었는지 설명할 때, 구현한 코드가 어떤 동작을 하는지 설명할 때 

// 줄바꿈시 코멘트 기능 풀리는 문제 발생  -> /*내용*/ 줄바꿔도 안 풀림

자료형 data type

숫자 : 정수 / 소수 / 사칙연산 가능 

문자열 string / + 가능 

"hello" 'world' 처음 - 끝 동일하게 사용 

"hello" + "world" = helloworld

불린 boolean 

참 true / 거짓 false

조건에 의한 결과값으로 사용 

추상화 abstratction

복잡한 것을 목적에 맞게 단순화 하는 것 

목적을 명확히 / 불필요한 것들은 숨기기 / 핵심만 드러내기 

변수 variable 

반복입력 구체적 숫자는 오타를 만들어낸다 / 숫자 의미전달이 어렵다 

= 값에 이름을 부여하기 위해 변수를 활용함 / 어떤 값을 담기 위해 이름이 붙은 상자 

변수선언 let 

let espressoPrice;

espressoPrice = 3000;

= 에스프레소값을 변수로 선언한다 / 에스프레소값은 3000으로 한다 

' = '  할당연산자,  오른쪽에 있는 값을 왼쪽에 할당한다는 의미 

변수는 선언과 동시에 값을 넣어줄 수 있다

let espressoPrice = 3000; 

변수를 사용하려면 먼저 변수선언을 해야 함 

let espressoPrice = 3000;

console.log(espressoPrice * 2); 

= 6000 

변수 작명 가이드 

꼭 지켜야 하는 룰(지키지 않으면 오류)

1) JavaScript 식별자는 '문자(a-z, A-Z)' '밑줄(_)' '달러기호($)'로 시작해야 한다.

두 번째 글자부터는 '숫자'(0-9)도 가능

2) 대문자와 소문자는 구별한다. myname myName 은 다른 이름

3) 예약어는 사용할 수 없다. if, for, let 

더 지키면 좋은 룰 

1) 의미없는 이름 let a, b, c, d

2) 너무 추상적인 이름 let name; 

3) 모든 변수이름은 camelCase를 권장(첫 번째 글자는 소문자, 띄어쓰기 있는 각 단어 첫문자를 대문자 표기하는 방식)

let bad_variable_name x 

let goodVariableName o 

https://standardjs.com/rules-kokr.html

 +. 들여쓰기 indentation 스페이스 2칸 권장

1. 오라클 자바 설치 페이지 

https://www.oracle.com/java/technologies/downloads/#jdk17-mac

M1 맥 > 자바18(기초 학습에는 아무거나 깔아도 상관없음) > Arm64 DMG installer 가 간편 

https://download.oracle.com/java/18/latest/jdk-18_macos-aarch64_bin.dmg

2. 설치 

3. 설치 확인 

com + space 해서 terminal 입력

터미널 화면에서 java -version 입력시 에러메시지 뜨지 않고 표시되면 잘 설치된 것 

https://www.youtube.com/watch?v=6Uf-0sEhccE

프로그래밍 공부를 시작한 초보들이 가장 흔하게 하는 고민 중 쌍벽을 이루는 것이 

'무슨 언어로 입문해야 하나', '프론트엔드, 백엔드 중 무엇을 선택해야 하나' 일 것이다.

나 역시도 프론트엔드/백엔드 중 무엇을 먼저 공부해야 할지 고민하는 과정 중이었는데(물론 나중에는 다 하게 된다는 건 알고 있음) 

우연히 조코딩님 웹개발 5주차 강의 중 1주차가 아직 오픈되어 있어서 들어봤다.

(7/29일에 멤버쉽 구독자 전용으로 전환을 한다고 했는데 7/30일 현재에도 오픈되어 있었다)

1강 주제는 웹개발 기본 이론 강의와 HTML, Deploy다. 

3시간 분량 정도이며 아예 아무것도 모르는 초보를 대상으로 하는 강의라 기본 개념, 정의에 관한 내용이 한시간 반 이상 정도이고,

VS코드로 실습하는 것은 이론 강의에 비하면 많지 않고, 난이도도 굉장히 쉬워 입문자용으로 적절한 강의였다.

HTML  + CSS  + JS = 웹사이트 

HTML HyperText Markup Language 

웹사이트에 들어갈 내용을 담당 

CSS Cascading Style Sheets 

웹사이트의 스타일을 담당 

JS 

인터랙션 

* 단축키 

sublime text 저장 

W : ctrl + s

M : COM + s

chrome 열기 

W : ctrl + o 

M : COM + o 

브라우저 새로고침 

W : f5

M : COM + r

기본 HTML 태그 정리 

<!DOCTYPE> 선언

최신버전 사용시 = <!DOCTYPE html>

제목 <title> 

페이지의 제목, 브라우저 탭, 방문기록에 나와있는 제목   <title> 제목 </title> 

머리말 <h1> ~ <h6> 

머리말 태그, 1~6으로 갈수록 크기 작아짐 

문단 <p> 

문단은 <p>(paragraph) 태그 안에 넣음. 직접설정 가능하지만 <p> 태그 위,아래 기본적으로 여백이 있음.

굵게 <b> (bold)  

<b>test </b> now 

= 테스트 글자만 진하게 표시됨 

날려쓰기 <I> (italics) 

<i>test</i>  => test

= 테스트 글자만 날려쓰기로 표시됨 

= <b> <i> 둘 다 시각적 특징만 가지고 있는 태그 

Phrase Tags 

<strong> 중요표시, 스크린리더가 낭독시 강조해 읽어줌 

= <strong>test</strong> 

<em>(emphasize) 강조 목적 

=<em>test</em> = > test

한글 깨짐

어떤 브라우저든 한글이 깨지는 참사를 막으려면 ?

<meta charset="utf-8">

한글지원하는 인코딩을 포함해줘야 함 

CSS의 기본문법 

h1 { font-size : 64px ; 

       text-align : center;

}

요소 - 속성 - 속성값 

= h1 폰트사이즈를 64px로, 가운데정렬하라는 의미 

<style> < CSS 스타일링을 입혀주기 위해 <style> 태그 사용함

폰트크기 : font-size: 1px;

텍스트정렬 : text-align: left; center; right;

텍스트컬러 : color: red; green; pink; 

여백 : margin-top: 00px; / margin-bottom: 00px; / margin-left: 00px; / margin-right: 00px;

h1 < h1에 스타일링을 지정

h1 {

       font-size: 100px;

       text-align: center; 텍스트 가운데정렬

}

h3 {

       margin-top: 100px 위쪽 여백을 100Px로 지정

}

p i {

        font-size: 50px;

}

= P안쪽 i 적용된 부분에만 스타일링 지정   

</style>

<html> <head> <body> 옵셔널 태그 

사용 : html 구조파악 용이

미사용(생략) 권장 의견도 있음.

개인작업 : 마음대로 결정 

팀 작업 : 상의 

링크 

외부 하이퍼링크 > <a>태그 

<a href=" ">

<a href="" target="_blank">링크설명</a>

본 후기는 코드잇에서 소정의 대가를 받고 작성함
강의 구입은 내돈내산으로 했고 후기 쓰면 연장권+깊콘 준다길래 써봄

https://www.codeit.kr

방통대 컴퓨터과학과(컴싸) 입학 신청을 해뒀는데,
아무래도 비전공 문과 출신이라 예습을 해놔야 할 것 같은 강한 압박을 느꼈다.

이쪽 파트는 시중에 도서나 강좌가 하도 많아서 뭘 들어야 하는지조차도 선택하기 힘들었는데
코드잇 강의는 쉽게 질려하는 사람도 수월하게 들을 수 있는 짧은 분량(한 강좌당 15분 이내)이라고 해서
내돈내산으로 일단 질렀다.
한달 2만원 이내 금액으로 전체 커리를 무제한으로 들을 수 있다는 게 코드잇의 큰 장점이다.


일단 아무것도 모르는 초보니까
코드잇에서 추천해주는 커리큘럼 중 컴퓨터개론, 기초 파이썬부터 들었다.

1강 코딩이 뭘까 강의 화면
강의 ppt가 영상으로 뜨고 설명 목소리/자막, 속도조절은 2배속까지 지원된다.
한번 설정한 속도는 한 챕터 강의 전체에 자동 적용돼서 강의 영상을 진행할 때마다 속도를 따로 설정하지 않아도 돼서 편리함.
+자막 기능도 좀 고정할 수 있었으면 좋겠음


장점 1. 브라우저 내 코드 실행기
웹브라우저 내 코드 실행기가 있어 따로 프로그램을 설치하지 않아도 됨.

챕터를 진행하다보면 실습과제가 나오는데
배웠던 내용을 적용해 실행기에서 바로 코드를 작성하고 채점해볼 수 있어서 좋더라.

할수록 만만찮은 문제가 나와서 풀리지 않을 때가 있다.
이럴 때에는 힌트를 써야하는데
문제를 풀었을 때 받는 xp 포인트를 깎아 힌트를 3번까지 구입가능함.
어쩌겠음... 안풀리면 그렇게라도 풀어야지

힌트를 다 써도 그래도 모를 때에는 비슷한 문제/같은 문제로 커뮤니티에 올린 다른 학습자들 게시글을 참고해서 풀어야 한다.

장점 2. 커뮤니티

커뮤니티도 코드잇의 강점 중 하나인데, 다른 학습자들 및 유저들에게 질문할 수 있고
답변을 달면 xp 포인트를 받는데, 유저 랭킹이 있어
나름 경쟁적으로 달아주는 유저들이 꽤 있는 것 같음.
질문글을 올리면 꽤 빠르게 답변이 달린다.

살짝 아쉬운 점

동기부여하기 위해서 경험치, 출석 체크, 챌린지 프로그램을 운영하는데
모집중인 챌린지가 하나도 없어서 좀 시무룩해짐..
챌린지 좀 많이 만들어주세요

결론
가격-퀄리티 비교하면 상당한 꿀

추천대상 :

코딩 아무것도 모르는 왕초보, 비전공자에게 특히 좋은 것 같고
나처럼 강의시간 한 삼십분 넘어가면 영혼이 어디론가 떠나는 집중력 떨어지는 사람에게도 추천함 ㅋㅋ
+ 한달 2만원대 저렴한 가격으로 IT 스킬업하고 싶은 직장인(파이썬 사무자동화 스킬로 무한반복 삽질에서 벗어나세요)

개발 공부 1일차 코딩공장 파이썬 도장 3.3차시를 따라해봤다.

https://dojang.io/mod/page/view.php?id=2158

윈도우 유저를 기본으로 해서 설명하고 있기 때문에 맥만 사용하는 내가 공부하기에는 친절하지는 않은 사이트다.

물론 맥/리눅스 유저를 위해 짧은 설명이 요약되어 있지만 터미널 사용법도 모르는

왕초보 대상으로 하나하나 떠먹여주는 정도는 아니다.

첫번째로 막힌 부분은 <터미널에서 스크립트 파일 실행하기> 파트였다. 

1. 파이썬3을 이용해 스크립트를 실행하라는 말이 뭔 소린지; 

터미널에서 앞에 파이썬을 쓰고 스크립트를 실행하라는 뜻인지 아니면 

파이썬 런쳐를 이용해서 스크립트를 실행하라는 말인지 설명이 너무 간략하게 되어 있어서 의미를 알 수가 없었다.

= 파이썬 런처가 아니라 터미널에서 하라는 뜻이었다.

2. 터미널에서 적힌대로 $ python3 hello.py를 그대로 따라쳤는데 또 에러메시지가 떴다.

= 에러메시지가 뜬 이유는 hello.py파일이 들어있는 경로를 빠뜨렸기 때문이다. 와~ 정말 바보같음.

(참고로 본인은 터미널에 하얗게 적힌 영어만 보면 울렁증이 나서 맥을 사용한지 5년이 넘었는데도 

터미널로 파일 경로 확인하는 법도 모르던 사람이다..)

디렉토리 이동 명령어 cd 최상위 이동 cd / 

참고한 사이트 

https://velog.io/@hyoniii_log/많이-쓰이는-터미널-명령어

+ 터미널에서 파일 경로 확인하는 법 

터미널에 hello.py가 들어있는 폴더를 잡고 끌어와서 떨어트리면 디렉터리가 표시됨

그렇게 경로를 알아낸 다음 cd 디렉토리 엔터쳐야 그 폴더 안으로 이동할 수가 있다.

cd /경로블라블라 

이제 해당 폴더 안으로 들어왔다는 뜻이다.

3. $이걸 쳤는데 에러메시지가 떴음.  

$라는 파일이나 디렉터리가 없다고.

=> 그건 명령어라는 표시라서 그걸 그대로 입력하라는 소리가 아니었음;

$ python3 hello.py 를 그대로 치는 게 아니라 경로 python3 hello.py를 터미널에 입력해야 함.

강의 해석이 순서가 좀 잘못된 것 같다고 생각했는데 

일단 hello.py를 idle로 열어서 셔뱅을 추가시켜준 다음에 위 실행권한 주기- 바로 실행하기를 따라하는 게 맞다. 

설명이 너무 짧아서 idle로 추가하라는건지 뭘로 하라는건지 처음에 감이 안잡혔음. 

idle로 파일 열어서 셔뱅 추가해서 저장하고 따라해봤더니 됐다. 

4. 실행권한을 주기 여기서 또 막힘 

역시나 터미널 최상위 디렉토리에서 그대로 $ chmod +x hello.py를 치니까 아무것도 표시가 안됐다. ㅋㅋ

그리고 이게 막히니까 아래로 hello. world도 안 나왔음. ㅋㅋ

= cd 명령어로 hello.py가 있는 폴더 안으로 이동한 다음에 ./hello py 입력해야 실행이 되면서 헬로 월드가 뜬다.

1일차 후기 : 

헬로 월드 터미널에서 한번 보기가 이렇게 어려울 줄은 몰랐다...

막힐 때는 빡치지만 해결하면 짜-릿