Higher의 창작소

1.콘솔

서버의 로컬 장치에서 직접 명령어를 작성할 수 있는 입출력 장치.

옛날 컴퓨터를 사용할 때 컴퓨터에 직접 연결하던 장치다.

즉, 콘솔은 물리적 터미널이라고 부를 수 있다. 

//////////////////////////////////////////////////////////////////////////////////////////////////

그러나 지금은 콘솔은 옛날처럼 물리적 터미널이라고만 정의하지 않는다.

터미널을 콘솔이라고 부르기도하며 둘다 비슷한 의미로 사용된다.

2.터미널

서버의 로컬 또는 원격으로 접속할 수 있는 콘솔을 구현한 소프트웨어

커맨드를 입력하는 쉘을 실행하기 위한 포장(wrapper) 프로그램이다. 

이 둘은 함께 실행될 수 밖에 없다. 티비를 켜면 무조건 화면 안에 무언가가 방송되고 있거나 하다못해 지지직거리는 것 처럼 터미널(티비)을 활성화 함과 동시에 쉘(방송)이 실행된다고 봐도 무방.

3.쉘

실제로 명령어를 전달하고 결과를 전달 받는 프로그램

사용자가 명령어를 입력하면 쉘은 사용자가 입력한 명령어를 OS로 전달하는 명령어 해석기라고 볼 수 있다.

쉘은 하나가 아니라 bash, sh, csh 등 여러종류가 있다.

<운영체제 동작 구조>

1.수업소개

리액트는 facebook.com에서 ui를 더 잘 만들기 위해서 페이스북에서 만든 자바스크립트 ui라이브러리다.

리액트를 한마디로 정의하기는 쉽지만 그 정의를 이해하는 것은 굉장히 어려운 일이다.

웹사이트는 매우빠른 속도로 복잡해진다.

정보가 조금만 증가해도 그 정보를 표현하는 html 태그는 기하급수적으로 복잡해진다.

페이스북 페이지에서 개발자도구를 열어 Element탭에서

sidebar에 해당하는 부분의 태그들을 복사해서 가져온 후 sidebar.html에 붙여넣기 해보자.

겨우 하나의 sidebar를 만들기 위해서 매우 복잡한 구성이 필요하다. 

그런데 만약

페이스북에서  sidebar부분을 차지하는 무수히 많은  element(tag)를 우리가 정의한 사용자 정의 태그(sidebar태그를 만들어서) 안에 넣은 후 sidebar태그를 만든 html 파일을 다른 파일(index.html)로 로딩한 다음에 <sidebar></siderbar> 이렇게 간단하게

우리가 정의한 사용자 태그의 이름을 적어주면 

이 태그가 실질적으로 웹브라우저에게 전달되고 표현될때 siderbar의 복잡한 코드로 바뀔 수 잇다면 얼마나 좋을까?

이렇게 사용자 정의 태그를 만들어 주는 여러가지 기술이 있는데 리액트 역시도 그런 기술 중의 하나이다.

리액트에서는 이렇게 사용자가 정의해서 태그를 만드는 것을 사용자정의 태그라고 하지 않고 컴포넌트라고 부른다.

1.가독성이 오른다

2.재사용성

3.유지보수

2.공부전략

처음 중간 끝으로

가장 본질 적인 것 3개를 꼽았다.

첫번째(coding)

우리가 개발환경을 세팅하고 어디에 코드를 바꿔야 되는가를 살펴보는 것

두번째(run)

그 다음에 그렇게 작성한 것을 실행해서 결과를 보는 것

세번째(deploy)

첫번째 두번째를 반복하다가 

모든 작업이 끝난 다음에 최종적으로 소비자에게 전달하는 하는 것.

(서비스 바닥에서는 이걸 디플로이라고 한다.)

3.개발환경의 종류

Create react app이라고 하는 프로그램을 컴퓨터에 깔 것이다.

그러기 위해선 npm이라고 하는 프로그램이 필요하다.

npm은 Node js라고 하는 기술을 이용해서 만들어진 여러 앱들을 우리가 명령어 환경에서 아주 손쉽게 설치할 수 있도록 도와주는

도구이다.

말하자면 Node js계의 앱스토어,구글플레이같은 역할을 하는 소프트웨어이다.

4.npm을 이용해서 create react app설치

npm과 npx의 차이

npm은 프로그램을 설치하는 프로그램

npx는 create react app이라는 프로그램을 임시로 설치해서 딱 한 번만 실행시키고 지우는 녀석이다.

좋은 점은 컴퓨터 공간을 낭비하지 않는다.

또 하나는 설치해 실행할 때 마다 다운로드를 새로 받기 때문에 항상 최신상태라는 것이다.

공식 문서가 npx를 권장하는 이유는 최신버전의 앱을 사용하도록 유도하기 위해서이다.

npx로 파일을 만들면 최신 버전의 파일이 만들어진다.

그 후로 그 파일을 npm start로 실행 할 수 있다. 

++

만약 내가 오늘 npx로 jaesang파일을 만들고 3년이 지났다.

jaesang파일이 3년 후의 최신버젼이라고 생각하면 안된다.

왜냐하면 jaesang파일은 3년전에 만든거니까 3년 후의 최신버젼이 아니다.

그래도 필요하면 최신버젼으로 업그레이드는 가능하다.

Scope의 정의

scope란 '변수가 어디까지 쓰일 수 있는지에 대한 범위'를 의미한다.

Block

block이란 중괄호{ }로 감싸진 것을 말한다.

function hello() {} //함수

if (true) {} //if문

for(let i = 0; i < 0; i++) {}//for문

function,if,for의 내부는 하나의 block이다.

블록{} 내부에 변수가 정의되면 그 변수는 블록 내부에서만 사용할 수 있다.

그래서 블록 내부에서 정의된 변수를 local(지역) 변수라고 부른다.

Block Scope

let, const를 사용한 변수는 블록(block) scope를 가진다.

var를 사용한 변수는 함수(function) scope를 가진다고 한다.

이 둘의 차이점은 무엇일까?

<let, const>

function test () {
  if (true) {
    let var1 = "사과"
  }
  
  return var1;
}

consol.log(test())

위의 코드를 실행하면 ReferenceError: var1 is not defined라는 오류가 나온다.

if문 block안에 let으로 선언한 var1은  let이 블록 범위만을 가지기 때문에 function에서는 사용할 수 없는 것이다.

let을 const로 바꿔도 똑같은 결과가 나온다.

<var>

function test () {
  if (true) {
    var var1 = "사과"
  }
  
  return var1
}

console.log(test()) //사과

var를 사용할 시 console.log(test())는 "사과"라는 값이 정상적으로 출력된다.

왜냐하면 if문 block안에 선언을 했다고 하지만 var는 함수 범위를 가지기 때문이다.

function test () {
  if (true) {
    if (true) {
      var var1 = "사과"
    }
  }
  
  return var1
}

console.log(test())

다음과 같이 if문을 더 깊이 중첩해서 var를 선언해도 함수 범위이기 떄문에 정상적으로 출력된다.

function test () {
  if (true) {
    if (true) {
      var var1 = "사과"
    }
  }
  
  return var1
}

console.log(var1)

물론 함수를 벗어나서 console.log(var1)을 하면 ReferenceError: var1 is not defined오류가 나온다.

var는 전역 스코프(global scope)가 아니기 때문이다. 

Global(전역) Scope

scope은 변수가 선언되고 사용할 수 있는 공간이다.

block밖인 global scope에서 만든 변수를 global variable(전역변수)라고 한다.

이때는 let, const, var 모두 global Scope를 가진다.

코드 어디서든 접근해서 변수 값을 확인할 수 있다.

const color = 'red'; // let, var넣어도 똑같다.
 
function returnColor() {

  return color;
}
 
console.log(returnColor()); //red

 if (true) {
   if (true) {
     var var1 = "사과"
   }
  }
  
console.log(var1)

단, var는 원래 함수 scope이기 떄문에 function의 block안에 있지 않는 위의 경우에서도 var1은 Global Scope를 가진다.

재선언,재할당

let fruit = "사과"

//fruit = "애플" <- 가능(재할당)
// let fruit = "애플" <- 불가능(재선언)

function test () {
  let fruit = "바나나"
  return fruit
}

console.log(test())

본래라면 let으로 fruit = "사과"라고 선언하면 let은 값의 재할당은 가능하지만 재선언은 불가능하다.

하지만 그건 같은 scope범위에 있을 때의 이야기다.

함수 block안에서의  let fruit은 전역스코프에 있는 let fruit하고 아예 다른 변수인 것이다.

즉, Scope가 다르기 때문에 오류가 일어나지 않고 잘 작동하는 것이다.

const도 마찬가지로 오류가 일어나지 않는다.

var의 경우는 애초에 재선언,재할당이 가능하다.

물론, 함수인 경우 block안에 있는 var fruit과 전역스코프에 있는 var fruit는 아예다른 변수인 것은 똑같다.

Scope 오염

<예제1>

const satellite = 'The Moon';
const galaxy = 'The Milky Way';
let stars = 'North Star';

const callMyNightSky = () => {
   stars = 'Sirius'; //오염발생!
  
	return 'Night Sky: ' + satellite + ', ' + stars + ', ' + galaxy;
};

console.log(callMyNightSky()); //Night Sky: The Moon, Sirius, The Milky Way
console.log(stars); //Sirius

실수로 callMyNightsky 함수에서 let stars = 'Sirius';를 하지 않고  stars = 'Sirius';라고 해버렸다.

그래서 전역스코프에 있는 stars의 값이 'Sirius'로 변해버렸다. <- Scope오염이 발생...! 

console.log(stars)를 하면 이제 값이 North Star가 아니라 Sirius로 출력된다.

<예제2>

function logSkyColor() {
  const dusk = true;
  let myColor = 'blue'; 
  if (dusk) {
    let myColor = 'pink';
    console.log(myColor); // pink 오염발생!
  }
  console.log(myColor); // blue 
}

logSkyColor()

함수 안에 myColor변수를 사용했고 if문 안에서도 myColor변수를 사용했다.

물론 이렇게해도 서로 다른 변수이기 때문에 작동하는데 전혀 문제가 없지만 

이런식으로 같은 변수 이름을 사용하는 것은 Scope(namespace)를 오염시키는 것이다.

(원래 함수 블록스코프의 myColor만 있었는데  if문 블록스코프에 같은 이름을 가진 myColor가 나타났다.

그래서 myColor라는 변수의 namespace가 오염된 것이다.)

//////////////////////////////////////////////////////////////////////////////////

namespace라는 것은 변수 이름을 사용할 수 있는 범위라는 뜻입니다.

scope라고도 하고 특히 변수이름을 얘기할 때는 namespace라고도 합니다.

///////////////////////////////////////////////////////////////////////////////////

좋은 Scoping 습관

 global 변수가 여기저기서 수정되면 안되기 때문에 변수들은 block scope으로 최대한 나눠놔야 합니다.

• 타이트한 scope(tightly scoping)의 변수는 코드 품질을 올려줍니다!
• 코드가 block 으로 명확하게 구분되기 때문에 코드 가독성이 올라갑니다.
• 코드가 한줄 한줄 쭉 나열된 것이 아니라 각각의 기능별로 block을 나누면 코드가 이해하기 쉬워집니다.
• 나중에 코드를 수정할 일이 있을 때, 코드를 오랜만에 보더라도 잘 나뉘어 있어서 유지보수가 쉬워집니다.
• 프로그램이 끝날때까지 변수가 살아있는 것이 아니라서(block이 끝나면 local 변수의 삶이 끝나서) 메모리 절약도 됩니다.

즉, 한마디로 요약하면 global 변수는 쓰지 않도록 노력해야 하고, 최대한 {} 내에서 let, const 을 사용하여 변수를 새로 만들어서 쓰자는 말입니다.

1.함수를 정의 할때 default value parameter를 non-default value parameter 앞에 정의 하면 안 되는 이유에 대해 생각해보시고 블로깅 해주세요.

우선 정의를 명확히 하고 가자.

defalult value parameter(기본값을 가지고 있는 매개변수)

non-default value parameter(기본값을 가지고 있지 않은 매개변수)

일반적인 순서인 non-default value parameter , default value parameter의 경우

def love_you(my_name, your_name ="아이유"):
	print(f"{my_name} loves {your_name}")
    
#my_name이 non-default value parameter이다.
#your_name = "아이유"가 default value parameter이다.



print(love_you("정우성")) #정우성 loves 아이유

#두번째 매개변수를 생략하여도 기본값 "아이유"가 있어서 정상적으로 작동한다.

에러가 일어나는 default value parameter,  non-default value parameter의 경우

def love_you(my_name = "정우성" , your_name):
	print(f"{my_name} loves {your_name}")
    


print(love_you("아이유"))


#오류발생!
> Traceback (most recent call last):   
    File "python", line 1 
SyntaxError: non-default argument follows default argument

SyntaxError: non-default argument follows default argument

(기본값을 가지지 않은 인자가 기본값을 가진 인자보다 앞에 나와있습니다!) 

라고 말하고 있다.

즉, 파이썬에서는 파라미터를 받는 순서가 정해져 있다는 것이다.

왜냐하면 여러종류의 파라미터를 순서없이 무작위로 생성하면 함수는 어떤 파라미터에 어떤 값을 받아야 할지

정할 수 없기 때문이다.

그렇기 때문에 이 순서를 지키지 않으면 파이썬에서 오류가 발생한다!

파라미터를 받는 순서는 다음과 같다.

def example(a, b, c=None, r="배고파", d=[], *args, **kwargs):

(a,b) 는 positional parameter(non-default value parameter)

(c=none) 는 optional parameter

(r="배고파") 는 keyword parameter(default value parameter)

(d=[]) 는 list parameter

(*args) 는 keyword-only(Variable Length Arguments)

(**kwargs) 는 var-keyword parameter(Variable Length Keyword Arguments)

다음과 같은 순서를 유의하여 이어지는 2,3,4번 문제를 해결하자.

2. 위치 인수(positional arguments)와 가변 인수(variable length arguments)의 위치를 참고 자료를 통해 조사해서 어떤 에러가 발생 하는지 확인하고, 에러를 고쳐 정상적으로 출력되는 결과를 블로그에 정리해 주세요.

오류(*args의 범위가 어디까지인지를 알 수 없다!)

def func_param_with_var_args(name, *args, age):
    print("name=",end=""), print(name)
    print("args=",end=""), print(args)
    print("age=",end=""), print(age)

func_param_with_var_args("정우성", "01012341234", "seoul", 20)

수정본

def func_param_with_var_args(name,  age, *args):
    print("name=",end=""), print(name)
    print("args=",end=""), print(args)
    print("age=",end=""), print(age)




func_param_with_var_args("정우성", 20, "01012341234", "seoul")

#name=정우성
#args=('01012341234', 'seoul')
#age=20

3. 가변 키워드 인수 (variable length keyword arguments)의 위치를 참고 자료를 통해 조사해서 어떤 에러가 발생 하는지 확인하고, 에러를 고쳐 정상적으로 출력되는 결과를 블로그에 정리해 주세요.

오류(**kwargs의 범위가 어디까지인지를 알 수 없다!)

def func_param_with_kwargs(name, age, **kwargs, address=0):
    print("name=",end=""), print(name)
    print("age=",end=""), print(age)
    print("kwargs=",end=""), print(kwargs)
    print("address=",end=""), print(address)




func_param_with_kwargs("정우성", "20", mobile="01012341234", address="seoul")

수정본

def func_param_with_kwargs(name, age,  address=0, **kwargs):
    print("name=",end=""), print(name)
    print("age=",end=""), print(age)
    print("kwargs=",end=""), print(kwargs)
    print("address=",end=""), print(address)



func_param_with_kwargs("정우성", "20", address="seoul", mobile="01012341234")

#name=정우성
#age=20
#kwargs={'mobile': '01012341234'}
#address=0

4.위치 인수와 키워드 가변 키워드 인수 (variable length keyword arguments)의 위치를 위치를 참고 자료를 통해 조사해서 어떤 에러가 발생 하는지 확인하고, 에러를 고쳐 정상적으로 출력되는 결과를 블로그에 정리해 주세요.

오류

def mixed_params(name="아이유", *args, age, **kwargs, address):
    print("name=",end=""), print(name)
    print("args=",end=""), print(args)
    print("age=",end=""), print(age)
    print("kwargs=",end=""), print(kwargs)
    print("address=",end=""), print(address)




mixed_params(20, "정우성", "01012341234", "male" ,mobile="01012341234", address="seoul")

수정본

def mixed_params( age, address, name="아이유", *args, **kwargs):
    print("name=",end=""), print(name)
    print("args=",end=""), print(args)
    print("age=",end=""), print(age)
    print("kwargs=",end=""), print(kwargs)
    print("address=",end=""), print(address)




mixed_params(20, "seoul", "정우성", "01012341234", "male" ,mobile="01012341234")

참고자료:

https://wave1994.tistory.com/46

https://stackoverflow.com/questions/16932825/why-cant-non-default-arguments-follow-default-arguments