ネットワーク開発総合クラス第1週

13561 ワード

テキストリンク

HTML, CSS, Javascript 기초를 배웠다.
코드는 무조건 외우려고 하지 말고 서치해서 복붙 후 활용을 적당하게 해야한다.

HTML

웹의 뼈대, head/body로 구성됨.
head에는 페이지의 속성 정보(예: 탭에 뜨는 이름),	
body에는 페이지의 내용(예: div, h1, img 등등)을 담는다.

CSS

CSS: 웹을 꾸미는 기능
div로 구분을 잘 하는 것이 중요하다.
<HEAD> 부분에 <style></style>써서 태그 작성한다.
<BODY> 부분에 <div>로 묶어주면서 제목달고, style에 태그 쓸 때는 .제목 으로 시작함.
	*CSS 시작 예제
    	--style--
    	.example
        --body--
        <div class="example"></div>
div 안에 있는 건 .큰 제목 밑에 > 로 한다. (-> 이 부분을 아직 잘 못 함)
 	*예제
        .mybtns > button {
         margin-right: 10px;
        }

覚えやすいCSSタグ

- 배경관련
    background-color
    background-image: url('이미지 주소 넣기');
    + 보정을 원할 때의 태그 : url앞에 넣으면 됨 // linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))
    background-size
    background-position
    
    * 이미지 넣는 예제(스파르타피디아)
       background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))//0.5부분은 밝기//, url('https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg//이미지 url주소 자리//');
       background-position: center;
       background-size: cover;


 - 사이즈
    width(가로)
    height(세로)
  
  
 - 정렬: 4개가 세트다.
  	display: flex;
    flex-direction: row/row-reverse/column/column-reverse;
    justify-content: start/center/space-between/space-around/space-evenly;
    align-items: stretch/center/start/end;


 - 폰트
    font-size
    font-weight
    font-family
    color

 - 폰트변경
  	구글웹폰트-select this style 선택-Embed-link 태그 복사
   
   * 폰트 변경 예제 
    <!-- HTML에 이 부분을 추가하고 -->
	<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
    
    /!-- CSS에 이 부분을 추가하면 완성! -->
	* {
	font-family: '글씨체', sans-serif;
	}

 - 간격
    margin : 박스 밖으로 여백
    padding : 박스 안쪽으로 여백
  
 - 모양
  	border-radius : 각 둥글게 하기
    box-shadow: 0px 0px 3px 0px (상하좌우) gray(컬러);
  

- 부트스트랩 : 예쁜 CSS 모아둔 것

Javascript

Javascript는 움직이게 하는 기능
<head> ~ </head> 안에 <script> ~ </script> 로 공간을 만들어 작성 후, <body>부분에 함수 연결 해야 함.

*자바스크립트 예제
   <script>
			function hey(){
			alert('안녕!');
			}
        </script>
        <body>
        <div class="mytitle">
        	<h1>내 생애 최고의 영화들</h1>
            <button onclick="hey()">영화 기록하기
            </button>
        </div>     
           
- 크롬 개발자도구 open 방법!
	크롬에서 우클릭 후 -> 검사 -> console
      (단축키 : option+command+i)
      
- console에서 확인하는 태그
 	console.log(변수);

JavaScript基礎構文

 - 변수 & 기본연산
	let으로 변수를 선언한다.
    * 예제
    	let num = 20
        num = 'Bob'
    사칙연산, 문자열 더하기 가능함
    * 예제
    	let a = 1
		let b = 2

		a+b // 3
		a/b // 0.5

- 리스트 & 딕셔너리
	리스트: 순서를 지켜서 가지고 있는 형태
    let으로 리스트를 먼저 선언하고, 출력할 때는 순서나 요소를 지정해줘야한다.
    순서는 0,1,2 이런 식으로 매겨진다.
    * 예제
    	let a_list = []  // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!

		// 또는,

		let b_list = [1,2,'hey',3] // 로 선언 가능

	출력할 때는 순서 or
	
		b_list[1] // 2 를 출력
		b_list[2] // 'hey'를 출력

		// 리스트에 요소 넣기
		b_list.push('헤이')
		b_list // [1, 2, "hey", 3, "헤이"] 를 출력

		// 리스트의 길이 구하기
		b_list.length // 5를 출력

	딕셔너리: 키(key)-밸류(value) 값의 묶음    
    * 예제
    	let a_dict = {}  // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!

		// 또는,

		let b_dict = {'name':'Bob','age':21} // 로 선언 가능
		b_dict['name'] // 'Bob'을 출력
		b_dict['age'] // 21을 출력

		b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기
		b_dict // {name: "Bob", age: 21, height: 180}을 출력
 	
    리스트와 딕셔너리 조합
    *예시
    	names = [{'name':'bob','age':20},{'name':'carry','age':38}]

		// names[0]['name']의 값은? 'bob' -> 0번째 애의 name은 bob
		// names[1]['name']의 값은? 'carry' -> 1번째 애의 name은 carry

		new_name = {'name':'john','age':7}
		names.push(new_name) 

		// new_name을 추가하였고, 그래서 names의 값은? [{'name':'bob','age':20}, {'name':'carry','age':38},{'name':'john','age':7}]
		// names[2]['name']의 값은? 'john'
 
 - 기본 함수들
 	- 나눗셈의 나머지를 구하고 싶을 때는 %를 이용
    *예시
		let a = 20
		let b = 7

		a % b = 6
        
    - 특정 문자로 문자열을 나누고 싶은 경우, split를 이용.

		let myemail = '[email protected]'//myemail을 선언해줌.
		let result = myemail.split('@') //['sparta','gmail.com']->이렇게 나올 거

		result[0] // sparta
		result[1] // gmail.com

		let result2 = result[1].split('.') //result의 1번(gmail.com)을 . 기준 앞뒤를 나누면 ['gmail','com']가 된다.

		result2[0] // gmail -> 우리가 알고 싶었던 것!
		result2[1] // com

		myemail.split('@')[1].split('.')[0] //gmail -> 간단하게 쓸 수도 있다!
        
        
 - 함수
	만들 때는 function 함수이름(필요한 변수들) {
		    내릴 명령들을 순차적으로 작성
	      	}
	사용 할 때는
			함수이름(필요한 변수들);

	*예시(두 숫자를 입력받으면 더한 결과를 돌려주는 함수)
		   function sum(num1, num2) {
				console.log('숫자', num1, num2);
				return num1 + num2;
		   }

			sum(3, 5); // 8
			sum(4, -1); // 3
    
 - 조건문	
    * 예시(20 보다 작으면 작다고, 크면 크다고 알려주는 함수)
    	function is_adult(age){
			if(age > 20){ 
			alert('성인이에요')
			} else {
			alert('청소년이에요')
			}
		}

		is_adult(25)
    * 예시(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)
- 반복문
 	* 예시(0부터 99까지 출력해야 하는 상황에 반복문 이용시)
    	for (let i = 0; i < 100; i++) {
			console.log(i);
		}

	- 반복문 + 리스트
    * 예시
    	let people = ['철수','영희','민수','형준','기남','동희']
		// 이렇게 하면 리스트의 모든 원소를 한번에 출력할 수 있겠죠?
		// i가 1씩 증가하면서, people의 원소를 차례대로 불러올 수 있게 됩니다.
			for (let i = 0 ; i < people.length ; i++){ //여기가 자주 쓰이는 부분
			console.log(people[i])
		}
	
    - 딕셔너리+리스트
	*예시
    	let scores = [
		{'name':'철수', 'score':90},
		{'name':'영희', 'score':85},
		{'name':'민수', 'score':70},
		{'name':'형준', 'score':50},
		{'name':'기남', 'score':68},
		{'name':'동희', 'score':30},
		]

		for (let i = 0 ; i < scores.length ; i++) {
			console.log(scores[i]);
		}
		// 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,

		for (let i = 0 ; i < scores.length ; i++) {
		if (scores[i]['score'] < 70) {
			console.log(scores[i]['name']);
			}
		}
		// 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.

ショートカットキー

cmd+option+L : 자동정렬기능
cmd+/ : 일시 취소
tap : 탭
shift+tap : 탭 뒤로

に感銘を与える

`html, css는 얼추 예제 80%정도는 만들 정도까지 이해한 것 같으나, javascript는 전혀 모르겠다. 몇 번 더 들어야 할 것 같은 느낌이다. 
이 벨로그를 쓰는 것도 쉽지 않다.
네이버 블로그 같이 기능을 제공하는 것만 써오다가 이런 개발자용 블로그?는 처음 써봐서 익숙하지 않다.
지금 좋좋소를 보면서 하고 있는데, 거기 나오는 앱개발자가 학원에서 선생님들이 도와준 포트폴리오로 취업을 한 후에 실무에서는 버벅이는 모습이 나온다. 음... 지난 번에 봤을 때는 '아 역시 학원인가...'라는 생각을 했는데, 이번에는 '아 저렇게 되지 않으려면 잘 배워야겠다'는 생각을 했다. 사람이 처한 환경에 따라 생각이 바뀌기 마련이다ㅎㅎ 아무튼 자바스크립트는 다시 해야겠지만 일단은 시간 문제로 다음 스텝으로 넘어가야겠다

(4.16 추가: 어제 밤 당황스러운 전화를 한 통 받았다. 월요일부터 시시작하기로 한 내일배움캠프에서 탈락하게 되었다는 사실을 전달받은 전화였다. 고용센터와의 문제가 잘 못 된 것 같은데... 어떻게 하는 것이 좋을 지 고민하고 있다. 
엎어진 김에 쉬어간다고 웹개발 종합반 자바스크립트부터 다시 들어보려고 한다. 이거는 꼭 다 들어야지. 
2시간 조금 안되는 시간의 강의를 들으면서 내 성향에는 프론트엔드가 더 맞을 것 같다는 생각을 하였다. 
그래서 부랴부랴 새롭게 프론트엔드 개발공부를 할 수 있는 곳을 찾아보고 있는데, 생각보다 없다. 
코드스테이츠는 얼마 전에 지원완료되었고... 스파르타에서 항해99를 약간 저렴하게, 취업 후 상환하는 조건으로 제안을 주셨는데, 그것도 고민이 된다ㅎㅎ
근본적으로 내가 코딩을 시작해도 되는 지에 대한 고민도 하게 되었다. 아 난 콘텐츠/브랜딩 하고 싶었던 사람인데... 이걸 하면 내 인터넷 공간을 내가 꾸밀 수 있겠고, 내 사업의 확장에도 좋을 것 같아서(+먹고 사는 문제를 해결하고 싶어서) 시작해보려고 했는데 이게 맞나 싶다. 
개발자 커뮤니티(okky를 처음 알게 되었다)의 글들이나, 유튜브에서의 조언들을 보면 완전 이쪽에 딥다이브 하지 않으면 살아남기가 힘든 시장같더라. 
그리고 막 언어들도 너무 무시무시하고... 내가 할 수 있는 영역이 아닌 것 같은 느낌...처음에 패기있었을 땐 '내가 아직 안 배워서 그렇지, 배우면 알 수 있다.'고 생각했지만, 몇 영상들 보면 너무 어려운데... 내가 할 수 있을까??? 싶다.
한편으론(아주 쉬운 부분만 듣고 있긴 하지만) 코드를 치고 내가 원하는 것이 구현되었을 때의 희열감 & 무언가 이해갈 때의 쾌감이 꽤 좋아서 고민을 하게 되었다. 
일단은 조금 더 해봐야 할 것 같다. 가만히 있으면 아무 것도 바뀌지 않는다. 왕초보반, 생활코딩, 노마드코딩, 인프런  다 들어봐야지...

Reference

この問題について(ネットワーク開発総合クラス第1週), 我々は、より多くの情報をここで見つけました https://velog.io/@sudalintechworld/내일배움캠프웹개발-종합반-1주차AI-웹개발자-과정-사전과제

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

C#文法練習(11):クラス[3]-コンストラクション関数、コンストラクション関数、base、this

Android 7日目