✅ end 키워드 이해하기 print 뒤에 end를 붙이면 자동으로 발생하는 줄바꿈을 없앨 수 있다. 사실, end 키워드를 사용한다고** 줄바꿈이 없어지는 것이 아니다. end 키워드를 사용하지 않을때는 print 문 끝에 **자동으로 \n(줄바꿈)이 삽입된다.

end 키워드는 자동으로 추가되는 \n 대신 내가 넣는 문자열을 끝에 사용하겠다는 의미가 된다. 결과

2. 자료형과 변수

1. 숫자형

✔️ 정수형 **: int(Integer type) / 소수점이 없고 사람의 수를 세거나 카드 개수를 세는 등의 계산에 사용 ✔️ 실수형** : float(Floating type) / 소수점이 포함된 실수. 분수나 정확한 측정값에 이용되고 평균을 구할 때 많이 쓰임

type(___)을 print하면 일반적인 풀력문과 달리 <class 'int'>, <class'float'> 이렇게 괄호 안의 자료형이 출력된다. print안에 계산식을 넣어도 결과가 출력되는 이유는 문자열이 아니라 숫자형이기 때문이다. 하지만 따옴표로 감싸게 된다면 문자열로 출력되기 때문에 그대로 출력이된다. ❓문자열에 type을 넣는다면? 0.2+1.8은 2.0이기 때문에 float가 "0.2+1.8"은 문자열로 출력되기 때문에 str이 출력된다.

2. 불 자료형

bool은 boolean의 줄임말로** 참(True), 거짓(False)*를 나타내는 자료형이다. _(파이썬에서는 True, False 모두 맨 앞글자가 대문자여야한다!)_ 조건문에서 많이 사용되니 기억하기~!

3. 변수

사람들이 무언가를 기억할 때 외에 기억을 저장하는 것 처럼, 컴퓨터 안에 공간을 만들어 원하는 데이터를 저장 할 수 있다. 컴퓨터는 이 공간에 이름을 정하고, 데이터를 매번 바꿔가며 저장 할 수 있는데 이 공간의 이름을 변수라고 부른다. 파이썬은 =부호를 이용해 변수를 만들고 그 안에 데이터를 저장한다.
변수(Variable)는 말 그대로, 변하는 값을 의미하며, 한번 선언한다고 끝이 나는게 아닌 언제든지 데이터를 변경 할 수 있다.

4. 숫자형을 저장하는 변수

파이썬의 변수에는 모든 자료형을 저장 할 수 있다.

5. 문자열을 다루는 방법 - 인덱싱

문자열 인덱싱을 이용하면 문자열에서 원하는 부분만 골라서 가져 올 수 있다. 인덱싱(Indexing)은 무언가를 가리킨다는 의미로, 문자열의 글자에 번호를 지정하고 가리키는 것을 문자열 인덱싱이라고 한다. 인덱스 번호(위치)의 시작은 1이 아니라 0에서부터 시작된다. 또한 띄어쓰기랑 !와 같은 특수문자도 마찬가지로 한 공간을 차지하고 번호로 지정이된다.

✅ 정리

1) 인덱싱을 사용할 땐 대괄호를 사용하고 그 안에 인덱스 번호를 넣는다. 2) 변수[n] : 변수에 저장된 문자열의 n번쨰 자리수(번호) 3) 문자열[인덱스번호]의 형식으로 문자열 인덱싱 파=>[0], 이=>[1], 썬=>[2] / 파=>[-12], 이=>[-11], 썬=>[-10] 4) 음수 인덱싱은 뒤에서 부터 읽을 수 있게 한다.

6. 슬라이싱

인덱싱으로 문자열 중 하나를 골라 가져왔다면, 슬라이싱은 문자열을 잘라서 가져오는 방법이다. 슬라이싱은 콜론(:)을 사용해서 수행 할 수 있다.

✔️ 문자열[시작:끝] => 시작번호끝번호-1 ✔️ 슬라이싱의 끝 번호를 쓰지 않으면 => 시작번호문자열의 마지막까지 슬라이싱 ✔️ 슬라이싱의 시작 번호를 쓰지 않으면 => 문자열의 첫글자부터 끝번호 -1까지 슬라이싱

3. 산술연산자

1) 연산자

연산: 프로그램에서 수나 식을 계산해서 결과를 도출하는 것 *연산자 *: 계산할 때 사용되는 기호(+,-등)

2) 파이썬으로 사칙연산하기

(1) 파이썬의 나눗셈

• /연산자 : 나눗셈(division)

• //연산자 : 버림 나눗셈(floor division)
• % 연산자 : 모듈로 연산자(modulo)

(2) 파이썬의 거듭제곱

(3) 복합 대입 연산자

대입연산자는 변수에 값을 넣어줄 때 사용했던 등호(=)를 의미한다. 복합 대입 연산자란 대입연산자와 산술연산자를 합친 것을 말한다.

• += 기존 변수에 값을 더한 후 대입

• -= 기존 변수에 값을 뺀 후 대입
• *= 기존 변수에 값을 곱한 후 대입
• /= 기존 변수에 값을 나눈 후 대입

(4) 산술연산자 활용

✅ 홀수 판정기 홀수는 2로 나누면 나머지가 1이라는 공통된 특징이 있다. 홀수 짝수를 구할때 나머지를 구하는 연산자를 이용한다.

✅ 응용 물건 가격이 3420원이라고 가정했을때 1000원 지폐, 100원 동전, 10원 동전은 각각 몇개가 필요한지 출력하고, 그리고 동전은 몇개가 필요한지 출력하라.

4. 입력받기, 자료형 변환

프로그래밍은 입력(input)을 전달받아 출력(output)을 만들어내는 과정을 의미한다.

1) 파이썬으로 입력받기

"문자를 입력하세요:" 에 hi를 입력하면 hi라는 결과가 출력되고 type은 str로 출력된다.

2) 자료형 변환하기

입력값은 모두 문자로 처리가 된다. 입력을 숫자로 처리하기 위해선 문자열 타입(자료형)을 강제로 변환해야한다. 정수(int)로 변환하기 위해서는 int() 함수를, 실수(float)는 float()를 사용한다.

(1) 숫자 → 숫자

(2) 문자 → 숫자

(3) 숫자 → 문자

✅ 정리 ✔️ 사용자를 통해 입력받기는 input()사용 ✔️ input()으로 입력받은건 무조건 문자열! ✔️ 자료형 변환하기

• 정수형으로 바꾸고 싶을땐 int()
• 실수형으로 바꾸고 싶을땐 float()
• 문자열로 바꾸고 싶을땐 str()

✅ 응용 숫자로 생일을 입력받아 연도와 월, 일을 출력하기

5. 비교연산자와 조건문

1) 비교연산자

2) 논리연산자

• a and b : a와 b 모두 참이여야 참이다.

• a or b : a와 b 둘 중 하나만 참이여도 참이다.
• not a : a가 거짓이면 참이다. a가 참이면 거짓이다.

3) if문

파이썬의 경우 들여쓰기에 예민한 언어이다. 들여쓰기 된 코드는 바로 위의 코드, 이경우엔 조건문에 종속이 된다. 들여쓰기가 중괄호 {}의 역할을 한다. if 조건문1 → 만약 조건문1이 "참"이라면 실행문1이 실행 elif 조건문2 → 만약 조건문1이 "거짓"이고, 조건문2가 "참"이라면 실행문2가 실행 else → 조건문1, 조건문2가 모두 "거짓"이라면 실행문3이 실행

✔️ if a in b

✅ 응용

1) 세과목의 점수를 입력받아 평균 점수가 50점 이상이면'합격', 50점 미만이면 '불합격'을 출력해주세요.

2) 하나의 단어 'a'와 하나의 문장'b'을 입력받아 b안에 a가 있다면 '단어가 있습니다.'를 출력하고 없다면 '단어가 없습니다.'를 출력해주세요.

6. 반복문

1) for문

반복문도 조건문처럼 다음줄에서 tab을 통해 들여쓰기를 해줘야한다! range()함수는 바로 숫자 리스트를 만들어주기 때문에 for문과 함께 쓰인다.

range(시작숫자, 끝나는 숫자)는 변수가 시작 숫자부터 (끝나는 숫자-1)까지 1씩 증가하는 동안이라는 뜻이다. range(10)은 range(0,10)과 같은 의미이다. 따라서 i는 0부터 시작해서 9까지 1씩 증가하면서 for문을 돌게 된다. => 결과: 0 1 2 3 4 5 6 7 8 9

2) while문

조건문이 참이면, while 내부의 실행문으로 들어간다.

✅ while문을 사용한 무한반복문 이 코드를 실행하게 되면 무한으로 Hello World가 출력이된다. 이러한 상황을 피하기 위해 break구문을 사용하여 while문을 벗어난다. while True:를 통해 무한 반복문을 만든 다음, number를 통해 사용자의 입력값을 받는다. 만약 number이 1이라면 "문이 열렸습니다."가 출력되고 다시 while문을 반복한다. number가 2라면 break를 통해 while문을 벗어나게 되고, 프로그램이 종료된다.

✔️ 범위가 정해져 있을 때는 for문 ✔️ 범위가 정해져 있지 않을 때는 while문 ✔️ while+true를 이용하면 무한반복 가능 ✔️ break를 사용하면 반복문 탈출 !

✅ 응용

if, while 응용들어가니까 어렵땅,,,,

7. 함수

함수란? 어떠한 기능을 하는 코드 덩어리 함수를 사용하는 이유는 반복적인 코드를 줄이기 위해서다. ✔️ def *: 함수를 만들때 가장 먼저 적어줘야하는 키워드로, def 뒤에 나오는 코드는 함수다! 라는 것을 알려주는 역할 *✔️ 함수명 : print, input 등의 함수의 이름을 의미한다. ✔️ 매개변수 *: 이 함수에 전달될 값을 의미한다. 만약 print(10)이라고 코드를 작성했다면, 10이 매개변수가 된다. 그 함수 내부에서 사용되는 변수값을 입력받는다.
def로 함수임을 알려주었고, 함수의 이름은 getSum, 매개변수로는 a,b가 있다. ✅ *return이란 함수가 끝나고 돌려줄 값을 정하는 것 🧐 getSum은 매개 변수가 a, b인데 num1, num2가 들어가는 이유는? 함수의 매개변수는 기본적으로 값을 받아오는 역할을 한다. a와 b는 값을 받을 받을 그릇이기 때문에 num1의 값이 a로 옮겨지기만 할 뿐 변수의 이름은 중요하지 않다. ✅ 응용

8. 리스트

1) 리스트

example_lst=[1,3,5,7,9]

대괄호[]와 콤마를 사용해 선언하면 된다.

example_lst[1,2,3,4,5]

print(example_lst[0])
print(example_lst[1])
print(example_lst[2])
print(example_lst[3])
print(example_lst[4])

리스트이름[인덱스]의 형식을 통해 값을 꺼내면 된다. 하지만 이렇게 하나하나씩 다 꺼낼 수 없으니 이럴때는** for**문을 사용한다!

(1) 인덱스를 사용해 리스트에 접근

example_lst[1,2,3,4,5]

for i in range(0,len(example_lst)):
    print(example_lst[i])

len함수는 매개변수로 전달된 변수의 크기를 구해준다.

결과 :
1
2
3
4
5

(2) 반복문을 사용해 리스트 데이터를 받아오기

example_lst[1,2,3,4,5]

for i in example_lst:
    print(i)

리스트 자페를 반복문의 대상으로 사용하였다.

결과:
1
2
3
4
5

2) 리스트 요리하기

(1) 리스트 자르기

리스트를 자르는 방법을 리스트 슬라이싱(List Slicing)이라고 부른다.

example_lst[1,2,3,4,5,6,7,8,9,10]

sliceOne = example_lst[0:5]
sliceTwo = example_lst[5:10]
sliceThree = example_lst[:5]
sliceFour = example_lstt[5:]

print(example_lst)
print(sliceOne)
print(sliceTwo)
print(sliceThree)
print(sliceFour)

결과 :
[1,2,3,4,5,6,7,8,9,10]
[1,2,3,4,5]
[6,7,8,9,10]
[1,2,3,4,5]
[6,7,8,9,10]

콜론 (:)을 포함시켜 리스트의 일부분을 자를 수 있다. list[a:b]라고 슬라이싱을 하면 list의 인덱스 a 값부터 인덱스 b의 값까지 잘리게 된다. list[:b]는 0부터 b의 값까지, list[a:]는 인덱스 a부터 리스트의 끝까지로 인식이된다.

(2) 리스트 삽입

리스트의 마지막에 값을 삽입하는 append **함수와 리스트의 특정 인덱스에 값을 삽입하는 **insert 함수가 있다.

✔️append

example_lst[1,2,3,4,5]
print(example_lst)

example_lst.append(6)
print(example_lst)

결과:
[1,2,3,4,5]
[1,2,3,4,5,6]

✔️insert

example_lst[1,2,3,4,5]
print(example_lst)

example_lst.insert(3,6)
print(example_lst)

결과:
[1,2,3,4,5]
[1,2,3,6,4,5]

insert함수는 list.insert(인덱스,값)의 형태로 사용된다. 인덱스3의 위치에 6을 넣게된다.

(3) 리스트에서 값을 제거

✔️ del

example_lst[1,3,5,7,9]
print(example_lst)

del example_lst(3)
print(example_lst)

결과:
[1,3,5,7,9]
[1,3,5,9]

del은 특정 인덱스의 값을 제거할때 사용한다. 3번 인덱스의 값을 제거해 리스트에서 7이 없어진 것 !

✔️ remove

example_lst[1,3,5,7,9]
print(example_lst)

example_lst.remove(7)
print(example_lst)

결과:
[1,3,5,7,9]
[1,3,5,9]

remove는 값을 통해 원소를 제거한다. 그래서 7이 없어진 것 !

9. 튜플, 집합

1) 튜플

튜플 vs 리스트

• 리스트는 []로, 튜플은 ()로 감싼다.
• 리스트는 값의 생성, 삭제, 수정이 가능하지만, 튜플은 값을 바꿀 수 없다.

example_tupleOne = (1,2)
example_tupleTwo = ("python",2,5)
example_tupleThree = (0.4(1,2,3))

print(example_tupleOne)
print(example_tupleTwo)
print(example_tupleThree)

결과:
(1,2)
('python',2,5)
(0,4,(1,2,3)

튜플은 값을 추가, 삭제는 할 수 없지만 +,* 연산으로 튜플을 추가, 반복 할 수 있다.

example_tupleOne = (1,2,3)
example_tupleTwo = (4,5,6,7)

plus_tuple = example_tupleOne + example_tupleTwo
multi_tuple = example_tupleOne*2

print(plus_tuple)
print(multi_tuple)

(1,2,3,4,5,6,7)
(1,2,3,1,2,3)

튜플의 또다른 장점은 함수의 리턴 값을 한꺼번에 여러 개를 받을 수 있다는 점이다.

def minmax(ex_lst):
return min(ex_lst),max(ex_lst)

ex_lst = [1,2,3,4,5]
result_tuple = minmax(ex_lst)

print(result_tuple)

결과:
(1,5)

콤마로 분리해, 리스트의 최대/최솟값을 함수의 return 값으로 사용한다. 이 경우, 함수의 리턴값이 자동으로 튜플로 처리된다!

2) 집합

setOne = {1,2,3}
setTwo = set([7,6,5,4,1])
setThree = set("Hello World"!)

print(setOne)
print(setTwo)
print(setThree)

결과:
{1,2,3}
{1,4,5,6,7}
{'r','!','W','e','d','H','o',''}

집합은 {}를 이용해서 생성 할 수도 있고, set()를 통해서도 생성 할 수 있다. 단, {}를 이용해 생성 할 경우 원소를 넣지 않으면 집합이 아닌 딕셔너리가 생성이된다.

setTwo의 경우 [7,6,5,4,1]을 집합으로 만들었는데 {1,4,5,6,7}이 생성되고, setThree의 경우 "Hello World!"에서 l이 3개였는데 하나 밖에 생성되지 않았다.

이는 집합의 특성으로 발생하는 현상이다

집합의 특성 ✅ 집합은 생성될 때, 중복된 값은 허락하지 않는다. 따라서 "Hello World!"에서 l이 하나 밖에 생성되지 않은 것 ✅ 집합은 순서가 존재하지 않는다. 그래서 순서가 뒤죽박죽으로 된 것 ✅ 집합은 인덱스를 통한 값의 접근이 불가능하다

(1) 교집합

& 또는 intersection 함수를 이용해서 구할 수 있다.

setOne = {1,2,3}
setTwo = {2,3,4}

print(setOne & setTwo)
print(setOne.intersection(setTwo))

결과:
{2,3}
{2,3}

(2) 합집합

|기호 혹은 union 함수를 이용해서 구할 수 있다.

setOne = {1,2,3}
setTwo = {2,3,4}

print(setOne | setTwo)
print(setOne.union(setTwo))

결과:
{1,2,3,4}
{1,2,3,4}

(3) 차집합

-기호 혹은 difference 함수를 이용해서 구할 수 있다.

setOne = {1,2,3}
setTwo = {2,3,4}

print(setOne - setTwo)
print(setOne.difference(setTwo))

결과:
{1}
{1}

3) 집합과 관련된 함수들

집합은 튜플과 다르게 값의 추가와 제거가 가능하다.

(1) 값의 추가

하나의 값을 추가 할 때 사용하는 add 함수, 여러 개의 값을 추가 할 때 사용하는 update함수

setOne = {1,2,3}
setTwo = {2,3,4}

print(setOne)
print(setTwo)

setOne.add(5)
setTwo.update([9,8,7])

print(setOne)
print(setTwo)

결과:
{1,2,3}
{2,3,4}
{1,2,3,5}
{2,3,4,7,8,9}

(2) 값의 제거

집합에서 원소의 제거는** remove함수를 사용해 **특정 값 제거가 가능하다. 인덱싱을 할 수 없기 때문에, 값을 사용한 원소의 제거만 가능하다.

setOne={1,2,3}

print(setOne)

setOne.remove(2)

print(setOne)

결과:
{1,2,3}
{1,3}

💡정리하기

✔️ 튜플: ()

• 인덱스로 접근가능
• 값을 제거, 추가 할 수 없지만 +,* 연산으로 추가, 반복 가능
• 함수의 리턴값을 한꺼번에 여러개 받기 가능

✔️ 집합: {},set()

• 인덱스를 통한 값의 접근 불가능
• 값의 제거와 추가 가능
• 생성될 때, 중복된 값은 허락하지 않고 순서가 없다.

10. 딕셔너리

딕셔너리는** Key값과 **value값을 가지고 있다. key가 영어단어, value가 단어의 뜻이라고 생각하면 된다.

dic = {1:"python", 2:"C", 3:"java"}

딕셔너리는 중괄호 안에 선언하고, key:value 형태로 데이터를 저장한다. 즉, 1,2,3이 key이고, "python""C""java"가 value이다.

딕셔너리는 리스트와 다르게 *순차적으로 요소들을 구할 수 없다. * 즉, 인덱스로 접근 할 수 없다! 따라서 print(ex_dict[0])과 같이 인덱스를 사용해 코드를 작성하면 오류가 발생한다.

1) 딕셔너리에 데이터 추가

ex_dict = {"a":"python", "b":"C", "c":"java"}

ex_dict["d"]="C++"
print(ex_dict)

ex_dict.update({"b":"javascript","e":"C#})
print(ex_dict)

결과:
{'a':'python','b':'C','c':'java','d':'C++'}
{'a':'python','b':'javascript','c':'java','d':'C++', 'e':'C#'}

✅ 하나의 key와 value를 추가하는 방법

dict[key]=value

✅ 여러 개의 key와 value를 추가하는 방법

dict.update({업데이트 할 딕셔너리 내용})

기존의 딕셔너리 안에 key 값이 존재하게 되면 기존의 key에 대한 value가 업데이트 할 딕셔너이릐 value로 대체된다.

2) key-value 삭제 방법

ex_dict = {"a":"python", "b":"C", "c":"java"}

del ex_dict["a"]

print(ex_dict)

결과:
{'b','C','c':'java'}

리스트와 유사하게 del 키워드와 key 값을 통해 key:value 쌍으로 없앨 수 있다.

3) key, value 쌍으로 추출하기

ex_dict = {"a":"python", "b":"C", "c":"java"}

print(ex_dict.keys())
print(ex_dict.values())

결과:
dict_keys(['a','b','c'])
dict_values(['python','C','java'])

=> 리스트형으로 변환

ex_dict = {"a":"python", "b":"C", "c":"java"}

keys_lst = list(ex_dict.keys())
values_lst = list(ex_dict.values())

print(keys_lst)
print(values_lst)

결과:
['a','b','c']
['python','C','java']

11. 클래스와 생성자

1) 클래스

흔히 클래스를 설명할때 붕어빵과 붕어빵 틀에 비유한다. 클래스는 붕어빵을 계속 만들 수 있는 틀을 의미하고 이 틀을 통해 만들어진 붕어빵을 객체라고 한다.

각각의 객체는 고유의 기능과 성격을 가지고 있고 서로 다른 객체들에 영향을 미치지 않는다 !

class 클래스이름:
    클래스내용(코드)

12. 클래스의 상속

HTML을 다룰땐 a 태그를 사용하여 링크를 만들 수 있었다. 하지만 리액트는 SPA(Single Page Application)이기 때문에 a태그를 사용한 페이지 이동이 불가능하다. 즉, 페이지가 하나인 어플리케이션이기 때문에 페이지 이동이 불가능하다는 것 ! SPA에서는 페이지 이동이 아닌, 주솟값에 따른 화면을 만들어 준다. 주소마다 다른 화면을 보여주는 것을 라우팅(Routing)이라고 한다.

2. Routing

렌더링되는 유일한 컴포넌트인 App 컴포넌트를 BrowserRouter로 감싸줌으로써 리액트 앱에서 라우팅을 가능하도록 허락한다.

3. 페이지 생성

먼저 페이지 컴포넌트들을 모아둘 pages 폴터를 src 폴더 아래 만들어 준 후 컴포넌트를 생성해준다. 세개의 컴포넌트 모두 위와 같이 Layout컴포넌트를 사용해 내용을 만들어준다.

4. 주소값 생성

주솟값에 각 컴포넌트를 연결해준다. 1️⃣ http://localhost:3000/ 👉 Home 컴포넌트 렌더링 2️⃣ http://localhost:3000/explore 👉 Explore 컴포넌트 렌더링 3️⃣ http://localhost:3000/subscription 👉 Subscription 컴포넌트 렌더링

5. 링크 구현

Menu 컴포넌트에 링크를 구현해준다. 주소 값과 컴포넌트를 연결할 때 Route 컴포넌트를 사용했다면, 페이지 이동은 Link 컴포넌트를 사용한다. Link 컴포넌트의 to 속성에는 이동 할 주소값을 넣어준다.

• 결과 링크를 누를때마다 주소값과 컨텐츠의 내용이 변하는 것을 볼 수 있다.

1. Props

리액트에서 데이터는 위에서 아래로, 즉, 부모 컴포넌트에서 자식 컴포넌트로 진행되는 단방향의 흐름을 가진다. 이 데이터의 흐름 아래에서 자식에게 전달되는 데이터가 바로 props이다! 컴포넌트에선 props라는 객체를 받고, 그 객체의 onClick, text 요소를 사용한다.

2. 비구조화 할당

비구조화 할당(구조분해) : 배열이나 객체의 속성을 해체하여** 그 값을 개별 변수에 담을 수 있게 **하는 자바스크립트 표현식이다.
즉, 배열[], 혹은 객체{} 안의 값을 편하게 꺼내 쓸 수 있는 문법이다. 간단하게 해보자면, 기존에 받고 있던 props라는 객체 안에 있는 값 text와 onClick을 추출해서 각각의 변수의 값에 할당한다. 이렇게 비구조화 할당을 사용하는 경우, 코드의 가독성이 올라갈 뿐만 아니라, 다른사람이 컴포넌트의 구조를 볼때 각 컴포넌트마다 필요한 데이터의 종류를 손쉽게 파악할 수 있다는 장점이 있다.

3. Children

지금까지 컴포넌트를 사용할때 전부 닫힌 괄호를 사용했다. children을 사용하면 컴포넌트 안에 다른 태그나 컴포넌트를 담을 수 있다. children 속성은 다른 속성들이 컴포넌트 태그에서 값을 대입하는 것과 다르게, *자식태그를 값으로 갖게된다. * 기존에 사용하던 div 태그에서 Layout 컴포넌트로 변경시켜준다. 이때 Layout의 children은 div 태그 하나와 Button 컴포넌트 2개로 이루어진 자식 태그를 그대로 전달한다.

리액트의 컴포넌트들은 여러가지 데이터를 받아야하는 경우가 많다. 이 데이터는 컴포넌트 내부에서 선언 할수도, 혹은 다른 컴포넌트로부터 넘겨받을 수도 있다. 여기서 내부에서 선언하고 관리되는 데이터를 state라고 하며, 컴포넌드로부터 받은 데이터를 Props라고 한다.

Props는 함수에 전달되는 매개변수, State는 함수에서 선언된** 변수 값, **useState는 이러한 state, 즉 상태를 선언하고 그 값을 변경하기 위한 함수이다.

먼저, 외부 모듈인 useState를 사용하기 위해선 import 구문을 사용해 react에서 useState Hook을 불러와야한다.

useState를 사용할 땐 초기값이 필요하다. 이렇게 넣어준 초기값은 상태 변수의 초기값으로 사용된다. 함수를 호출하면 배열이 리턴 되기 때문에, 상태 변수와 상태 값 변경 함수를 받아와야한다.

const[상태변수, 상태 값 변경함수]=useState(초기값);

const[number,setNumber]=useState(0)

setNumber(값)

상태 값으로 number, 변경함수로 setNumber라는 변수명을 사용했다고 가정할 때 setNumber 함수를 값과 함께 호출하면 number 변수의 값이 변경이 된다.

누르면 증가하는 버튼 만들기

XML에선 중괄호를 사용해 태그 내부에 자바스크립트 문법을 사용할 수 있다. 자바스크립트와 HTML을 사용할때와는 다르게, 함수 이름을 이벤트에 넣어야한다.

🧐 왜 var을 놔두고 useState를 사용하는가?

💡 변수가 변해도 렌더링이 다시 되지 않기 때문이다! 렌더링이란, 사용자 화면에 내용을 보여주는 것인데, 변수가 변해도 렌더링이 다시 되지 않는다는 것은 데이터의 변화를 사용자가 볼 수 없다는 것을 의미한다.

컴포넌트가 다시 렌더링이 되기 위해서는?

1. 자신의 상태가 변경될 때
2. 부모 컴포넌트가 리렌더링될 때
3. 부모에게 받은 Props가 변경될 때
4. forceUpdate 함수가 실행될 때

→ 단순히 var로 변수를 선언하게 되면** 변수값 자체는 증가** 하지만, *상태는 변경되지 않아 * 리렌더링이 일어나지 않는다. 즉, 데이터가 증가하는건 콘솔에 출력되지만 화면 리렌더링은 일어나지 않는다.

응용 : -1, *2 추가하기

출처: https://codemate.kr/project/WEB-%EB%A9%94%EC%9D%B4%ED%8A%B8-React-%ED%8E%B8/4-1.-Hook%EA%B3%BC-State

1. css

import'./App.css'로 파일을 불러와 css를 적용하는 많이 사용했던 방법이다.

먼저 'hello.css' 파일을 생성 후 title이라는 클래스를 갖는 태그에 스타일을 적용한다.

'hello.js', 'bye.js' 파일에 Hello, Bye 컴포넌트를 각각 만들어 준다. bye컴포넌트에는 css를 적용하지 않고 title이라는 클래스는 갖는 div태그만 반환한다. 결과 : 리액트는 모든 파일을 하나로 압축하는 과정에서 hello 컴포넌트와 bye 컴포넌트의 클래스의 이름은 똑같다고 처리하기 때문에 bye 컴포넌트에서 css를 불러오지 않더라도 hello 컴포넌트에서 불러온 css의 속성이 적용이된다.

따라서, css 클래스의 이름이 중복되지 않게 작성하기 위해서는 aaa-bb-cc와 같이 css 클래스 네이밍 규칙을 잘 따라야 했었는데 이를 해결하기 위해 나온것이 ** CSS Module** 이라는 것이다!

2. CSS Module

CSS Module을 사용하면 컴포넌트마다 고유한 클래스 이름을 가질 수 있다.

먼저, 기존 hello.css 파일명을 hello.module.css로 변경해준다. 단, module css를 사용하게 되면 css 적용방법이 달라지게 된다.

module css 파일에 선언했던 title 클래스가 hello_title__HhDNd 클래스로 변환한 것을 볼 수 있다. -JSX에서는 중괄호를 사용해 JSX 내부에 자바스크립트 문법을 사용 할 수 있다.

응용

HTTP의 정의

HTTP란? HTTP(Hypertext Transfer Protocol)으로 프로토콜이란 상호 간에 정의한 규칙을 의미하며 특정 기기 간에 데이터를 주고 받기 위해 정의 되었다. 웹에서는 브라우저와 서버 간에 데이터를 주고 받기 위한 방식으로 HTTP 프로토콜을 사용한다.

1. HTTP의 특징

• HTTP 프로토콜은 stateless 즉 상태가 없는 프로토콜로, 데이터를 주고 받기 위한 각각의 데이터 요청이 서로 독립적으로 관리가 된다는 뜻이다. 이전 데이터 요청과 다음 데이터 요청이 서로 관련이 없다는 말 ! 이러한 특징으로 서버는 세션과 같은 별도의 추가 정보를 관리 하지 않아도 되고, 다수의 요청 처리 및 서버의 부하를 줄일 수 있는 성능상의 이점이 생긴다. HTTP 프로토콜은 일반적으로 TCP/IP 통신 위에서 동작하며 기본 포트는 80이다.

2. Request & Response

HTTP 프로토콜을 데이터로 주고 받기 위해서는 요청(request)를 보내고 응답(response)을 받아야한다.

클라이언트(client)란 요청을 보내는 쪽을 의미하며 일반적으로 웹 관점에서는 브라우저를 의미한다. 서버(server)란 요청을 받는 쪽을 의미하며 일반적으로 데이터를 보내주는 원격지의 컴퓨터를 의미한다.

3. URL

Uniform Resource Locators의 약자로 서버에 자원을 요청하기 위해 입력하는 영문주수이다.

4. HTTP 요청 메서드

서버의 특정 동작을 수행하고 싶을땐 HTTP 요청 메서드(HTTP Request Method)를 이용한다. 일반적으로 HTTP 요청 메스드는 HTTP Verbs라고도 불리며 데이터에 대한 조회, 생성, 변경, 삭제 동작을 HTTP 요청메서드로 정의 할 수 있다. 때에 따라서 POST 메서드로 PUT, DELETE의 동작도 수행 할 수 있다.

• GET : 존재하는 자원에 대한 요청
• POST : 새로운 자원을 생성
• PUT : 존재하는 자원에 대한 변경
• DELETE : 존재하는 자원에 대한 삭제
• HEAD: 서버 헤더 정보를 획득, GET과 비슷하나 Response Body를 반환하지 않음
• OPTIONS: 서버 옵션들을 확인하기 위한 요청 CORS에서 사용

5. HTTP 상태코드

http 요청 메서드가 클라이언트에서 설정해야 할 정보라면 HTTP 상태코드(HTTP Status Code)는 서버에서 설정해주는 응답(Response) 정보이다.
ex)

http://domain.com/users

위 요청을 보내고 나면 서버에서 응답으로 오는 코드는 200(성공)혹은 404(실패)이다. 따라서 이 HTTP 상태 코드로 추가적인 로직을 구현 할 수 있게 된다.

2xx (성공)

200번대의 상태코드는 대부분 성공을 의미한다.

• 200: GET 요청에 대한 성공
• 204: No Content 성공은 했으나 응답 본문에 데이터가 없음
• 205: Reset Content 성공은 했으나 클라이언트의 화면을 새로고침하도록 권고
• 206: Partial Content 성공은 했으나 일부 범위의 데이터만 반환

3xx (리다이렉션)

300번대의 상태 코드는 대부분 클라이언트가 이전 주소로 데이터를 요청하여 서버에서 새URL로 리다이렉트를 유도하는 경우이다.

• 301: Moved Permanenetly 요청한 자원이 새URL에 존재
• 303: See Other, 요청한 자원이 임시 주소에 존재
• 304: Not Modified 요청한 자원이 변경되지 않았으므로 클라이언트에서 캐싱된 자원을 사용하도록 권고, ETag와 같은 정보를 활용하여 변경여부를 확인

Etag(entity tag) HTTP 응답의 헤더는 자원의 특정 버전에 대한 식별자이다. 콘텐츠가 변경되지 않은 경우 웹서버에서 전체 응답을 다시 보낼 필요가 없으므로 캐시를 보다 효율적으로 사용하고 대역폭을 절약 할 수 있다. 또한 리소스의 동시 업데이트가 서로를 덮어 쓰는 것을 방지하는데 도움을 준다.

4xx (클라이언트 에러)

400번대 상태코드는 대부분 클라이언트의 코드가 잘못된 경우이다. 유효하지 않은 자원을 요청했거나 요청한 권한이 잘못된 경우 발생한다. 우리가 가장 자주보는 에러코드는 404로 요청한 자원이 서버에 없다는 뜻이다.

• 400: Bad Request 잘못된 요청
• 401: Unauthorized 권한 없이 요청, Authorization 헤더가 잘못된 경우
• 403: Forbidden 서버에서 해당 자원에 대해 접근 금지
• 405: Method Not Allowed 허용되지 않은 메서드
• 409: Conflict 최신 자원이 아닌데 업데이트를 하는 경우 ex) 파일업로드시 버전 충돌

5xx (서버에러)

500번대 상태 코드는 서버 쪽에서 오류가 난 경우이다.

• 501: Not Implemented 요청한 동작에 대해 서버가 수행 할 수 없는 경우
• 503: Service Unvailable 서버가 과부하 또는 유지보수로 내려간 경우

_참고: _ https://joshua1988.github.io/web-development/http-part1/

타입이란? 프로그램에서 다룰 수 있는 값의 종류

1) 숫자(Number)

-Js는 정수와 실수를 따로 구분하지 않는다.

var num1 = 10;
var num2 = 10.1;

2) 문자열(String)

var str1 = "문자열1";
var str2 = '문자열2';
var str3 = "문자열'입니다";
var str4 = "문자열"입니다';

-문자열과 숫자를 합칠 수 있는 기능도 있다.

var num = 5;
var str = "Hello";

결과 : num+str 연산을 진행하면 자동으로 num이 문자열고 변환되어 5Hello가 나온다.

3) 불리언(Boolean)

var trueValue = true;
var falseValue = false;

4) null과 undefined

null '값'이 정해지지 않은 것 undefined '타입'이 정해지지 않은 것

5) 객체(Object)

키(key)와 값(value)로 이루어져있다 키(key)를 통해 값(value)을 불러올 수 있는 타입이다. (=파이썬 딕셔너리)

var dog = {name:"돌돌이", age:5};

name과 age가 키(key)값이고, "돌돌이"와 5가 값(value)에 해당한다.

변수

변수란? 데이터를 저장 할 수 있는 메모리 공간이며, 그 데이터(값)는 변경될 수 있다.

• 변수 사용의 특징 1) 선언되지 않은 변수를 사용하려고 하거나 접근하려 하면 오류가 발생한다.

  var num = 1; //정상
  str = "문자열" //오류

  2) 선언된 변수는 나중에 초기화 할 수 도 있고, 선언하면서 동시에 초기화도 가능하다.

  var num; //선언
  var str = "문자열"; //선언과 동시에 초기화
  num-10; //선언 후 초기화 

✅ typeof키워드를 통하여 변수의 타입 출력하기

결과 :

같은 폴더 내에 index.js라는 파일을 만들고 html과 js를 연결시켜준다. getElementsByTagName는 해당태그이름의 요소를 모두 선택함으로써 ('h1')에는 h1인 요소가 모두 선택되어 저장이 된다. 따라서 h1은 배열이 되므로 인덱스를 사용하여 'hello world"에 해당하는 요소를 선택하여 innerHTML을 "우리모두 화이팅"으로 바꿔주었다.

innerHTML 속성과 textContent 속성을 사용해서 문서 객체 내부의 글자를 조작 할 수 있다. 문서객체.textContent : 입력된 문자열을 그대로 넣어준다. 문서객체.innerHTML : 입력된 문자열을 HTML 형식으로 넣어준다.

버튼 생성하기

*script 순서가 바뀌지 않도록 주의 해야한다 ! 결과 : (클릭 전)

(클릭 후)

✅ 삼행시 만들어보기

DOM이란? Document Object Model의 약어로, 단순히 텍스트로만 작성된 HTML 파일을 트리형태로 표현한 객체를 말한다.

DOM을 통해 Javascript와 HTML 파일이 연결되고, document의 객체는 DOM 트리의 최상단에 있는 객체에 접근하게 해준다.

✅ DOM에 접근하는 방법 document라는 객체를 통해 id가 "header"인 태그를 선택하기 위해 getElementById라는 함수를 사용했고, 태그를 선택한뒤 innerHTML을 "우리모두 화이팅"으로 교체하였다.

div 태그 안에 div가 존재하고, 그안에 h3태그가 존재하는 것처럼 태그는 중첩이 가능하다.

✅ <!DOCTYPE html> 

▶ html 이 html5 버전임을 알려주는 코드
html도 언어인 만큼, 버전이 존재
html5가 가장 최근에 업데이트되고, 또 가장 많이 사용되는 버전


✅ <html> ~~~ </html>

▶ html 구조의 기본, 모든 html 문서는 html 태그로 감싸져 있다.


✅ <head> ~~~ </head>

▶ html 문서의 메타데이터를 모아놓는 부분이에요. 
웹사이트에 표시되진 않지만 웹사이트의 정보/데이터를 담아놓는 부분
head 안에 적는 주요한 태그로는 <meta> 태그, <title> 태그, <style> 태그, <script> 태그 등이 있다.


✅ <body> ~~~ </body>

▶ html 구조의 컨텐츠 영역을 의미
디자인/기능이 있는 태그들(h1, h2, ul, div, p 등등)을 body 안에 넣어야한다.

CSS

✅ h1 = 선택자

▶ 중괄호({, }) 안의 디자인 속성을 적용할 대상을 의미


✅ 중괄호

▶ CSS를 적을 때는 선택자를 작성한 후, 중괄호 안에 CSS 속성을 작성하고, 꼭 중괄호 짝을 맞춰주어야 한다.


✅ CSS 속성 선언 방법

위의 코드에서 color와 background-color는 CSS 속성 이름이고, 뒤의 red와 #582793은 지정하고자 하는 속성값이다.
각 속성값을 적은 뒤에는 세미콜론(;)을 붙여 코드가 끝났다는 걸 알려줘야 한다.

속성 이름 : 속성값 ;


* CSS를 선언할 때는 줄 바꿈, 띄어쓰기는 영향을 미치지 않는다 하지만 세미콜론은 잊지말기.

CSS 적용하는 3가지 방법

선택자

1) HTML 태그

html 태그에 대해 디자인 속성을 적용하면 html 문서 안의 모든 같은 이름의 태그에 적용된다. 따라서 html 태그는 아주 많이 사용하는 선택자는 아니며 기본으로 설정되어 있는 디자인 속성이 마음에 들지 않을 때 없애려는 목적으로 주로 활용한다.

2) 클래스 선택자

가장 많이 사용하는 선택자 중 하나로 한 html 요소의 특성을 보여주기 위해 사용한다. 원하는 html태그에 class="클래스이름"을 설정해 태그의 클래스를 설정한다.

<div class="color">색</div>

*클래스 선택자를 이용할 때는 클래스 이름 앞에 마침표를 붙인다. *

.color {
  color: purple;
}

color 라는 클래스를 가진 모든 html 태그에 대해 중괄호 안의 디자인 속성을 적용하겠다는 의미이다.

클래스 선택자는 한 태그에 여러 개의 클래스를 지정 할 수 있다. 이땐 띄어쓰기로 클래스 이름을 구분해주어야 한다. 그러므로 클래스의 이름에는 띄어쓰기가 들어가면 안된다. 따라서 보통 여러 단어로 클래스 명을 짓고 싶을 때는 -혹은 _표시를 사용한다. ex) title, red-text, center라는 3가지 클래스를 가진 div를 만든 코드이다.

<div class="title red-text center">나는 제목</div>

3) 아이디 선택자

클래스와 마찬가지로 많이 활용하며 id="아이디이름"을 html 여는 태그에 작성하면 된다. 클래스를 선택 할 때는 앞에 마침표를 사용했지만, 아이디를 사용할 때는 아이디는 이름 앞에 샾(#)을 붙이면 된다.

<div id="title">제목</div>

#title {
  background-color: red;
}

*주의 : 하나의 클래스를 여러 html에 사용해도 괜찮지만, 하나의 아이디는 왠만하면 하나의 html에만 사용하는 것이 좋다.

다양한 단위

1) 픽셀(px)

어떠한 상황에서도 변하지 않는 절댓값을 의미한다.

2) em / rem

em과 rem은 대값을 의미한다. ↓ em은 상위(부모)요소의 글자 크기를 1em으로 두고 계산하며,

↓ rem은 최상위(html) 요소의 글자크기를 1rem으로 두고 계산한다.

-상황에 따라 px, em, rem을 선택하여 사용하게 되는데 반응형 웹사이트를 만들땐 px보다 em, rem을 권장한다.

✅ 화면의 크기가 변할때 변해야 하는 수치인가 ? em, rem ✅ 화면의 크기가 변해도 변하지 않는 수치인가? px

반응형 웹(Responsive Web)이란? 하나의 웹사이트가 pc, 스마트폰, 태블릿 등 다양한 사이즈의 화면(디스플레이)에 따라 자동으로 화면 크기가 변하게 만드는 것을 의미한다.

3. 퍼센트 (%)

일반적으로 폰트 크기보다는 너비나 높이 등에서 주로 사용횐다. 퍼센트에서의 비율도 상위요소 기준이라는 것을 주의해야한다. ex) 상위요소의 너비가 50px이고, 현재요소의 너비가 50%라면>> 현재 요소의 너비는 25px로 설정이 된다.

Display 속성

1) display:block

대표주자 div태그로 기본적인 속성에서 width: 100%이므로 한즐 전체를 차지한다. width, height, margin, padding 값을 지정 할 수 있다.

2) display:inline

대표주자 span태그로 태그 내부의 텍스트/콘텐츠의 크기만큼 공간을 차지하게 되므로, width, height, margin(위, 아래), padding(위, 아래) 값을 지정 할 수 없다. 단, margin(좌, 우), padding(좌, 우)는 가능하다.

3) display:inline-block

inline 처럼 텍스트/콘텐츠 크기만큼 차지하되, width, height, margin, padding도 설정이 가능하다. div와 span 태그 중에는 div가 더 보편적이며 div 태그에 display:inline-block;속성을 설정하여 사용하는 경우도 많다. span의 경우 주로 div내에서 색깔, 폰트 크기가 다른 글자가 들어가야 할 경우에 많이 사용된다.

Position 속성

요소(태그)들을 어디에 배치할지 결정하는 속성, 즉 화면의 레이아웃을 만들때 유용하게 사용되는 속성이다. 주로 특정 위치에 고정되어 있도록 만들때 유용하게 사용된다.

1) Static

모든 태그의 기본 position 속성으로 position 속성을 따로 설정하지 않았을 때의 기본값이다. 기본 static 값일 경우 위치를 임의로 배치 할 수 없고, 알아서 배치된다.

2) Relative

static일 때의 원래 위치를 기준으로 상대적으로 위치를 지정 할 수 있는 속성이다.

3) Absolute

relative 속성인 상위 요소를 기준으로 상대 위치를 지정 할 수 있다.

4) Fixed

화면(디스플레이)을 기준으로 상대적인 위치를 설정 할 수 있다.

Flex 속성

복잡한 레이아웃을 구현하기 위한 css 속성으로 display 속성 값 중에 하나이다.

✅flex 적용해보기

1) "flex 레이아웃은 무조건 큰 박스 ▶ 작은 박스 순서로 만든다"

flex 레이아웃의 기본은 컨테이너(container)과 아이템(item)이다. 파란색의 배경박스가 가장 큰 박스이고, 그 안에 빨간색 테두리로 표시한 부분이 2번째 박스이다. 빨간색이 flex 레이아웃으로 배치하고 싶은 박스 아이템이 되고, 파란색이 아이템을 둘러싼 박스가 컨테이너가 된다.

컨테이너에 display:flex;속성을 !무조건! 설정하기

• 컨테이너에 display:flex; 속성이 적용되면 그 안에 속해있는 아이템에 flex 레이아웃에 적용 할 수 있는 다양한 속성을 설정 할 수 있다. (flex, flex-basis, flex-shrink, flex-grow 등)
• 아이템에서 flex:숫자;형태로 flex를 적용 할 수 있다. 이때 숫자는 컨테이너의 너비를 100이라고 했을때 해당 아이템이 차지할 면적의 비율을 의미한다.

  flex-direction - row vs column

  하나의 div 태그가 아이템이 될수도, 컨테이너가 될 수도 있다. flex의 레이아웃의 종류는 크게 2가지이다. 가로로 쌓이는 레이아웃(flex-direction:row → 기본설정) 세로로 쌓이는 레이아웃(flex-direction:column)

  ✅flex 레이아웃 속성의 2종류

  1) 아이템에 적용 할 수 있는 속성

• flex: 숫자; 속성*

(1) flex-basis 아이템의 기본 크기를 설정하는데 기본 크기란 flex-direction이 row일때는 너비, column일때는 높이를 의미한다.

(2) flex-grow 아이템이 얼마나 커질 수 있는지를 비율로 정하는 속성이다. 0일경우에는 기본 크기에서 절대 늘어나지 않고, 0보다 큰 값일 경우에는 다른 아이템가 flex-grow 비율만큼 늘어난다.

(3) flex-shrink flex-growth와 정반대의 속성으로 아이템이 얼마나 작아질 수 있는지를 비율로 정하는 속성이다. 0일경우에는 기본크기보다 절대 작아지지 않고, 0보다 큰 값일 경우 아른 아이템과 flex-shink 비율만큼 줄어든다.

*(4) flex-basis, flex-shrink, flex-grow를 한번에 * 띄어쓰기로 구분하여 3가지 값을 지정 할 수 있고, 각각 flex-grow, flex-shrink, flex-basis 순서로 지정이 된다. flex : 1 ▶ flex-grow: 1; flex-shrink: 1; flex-basis: 0% flex: 1 1 auto ▶ flex-grow: 1; flex-shrink: 1; flex-basis: auto;

다른 축약형으로는 auto, none 등이 있다. flex-basis를 auto로 설정하게 되면, item 안에 들어있는 콘텐츠(이미지, 텍스트) 크기만큼 자동으로 너비가 설정이 된다. flex: auto ▶ flex: 1 1 auto 와 동일 flex: none ▶ flex: 0 0 auto 와 동일

2) 컨테이너에 적용 할 수 있는 속성

(1) flex-direction flex의 레이아웃의 방향을 설정하는 속성으로 column과 row가 가능하고 column일 경우 가로로 쌓이는 flex 레이아웃, row일 경우 세로로 쌓이는 flex 레이아웃이다. flex-direction을 설정하지 않으면 기본으로 row가 설정된다.

(2) flex-wrap flex 아이템이 컨테이너 크기를 넘어갈 때 처리하는 방법 속성이다. flex-wrap 속성을 사용해 자동으로 여러줄이 생성되게끔 만들 수 있다. wrap ▶ 컨테이너 크기를 넘어가면 다음 줄로 표시 nowrap ▶ 컨테이너 크기를 넘어가도 다음 줄로 표시하지 않음 wrap-reverse ▶ 컨테이너 크기를 넘어가면 마지막 아이템부터 거꾸로 여러줄로 표시

(3) align-items 글자를 정렬할때 수평축과 수칙축 두가지가 있는데 align-item은 수직축으로 정렬 할 수 있는 속성이다. flex-directrion : row ▶ 레이아웃의 축 : 가로 flex-directrion : column ▶ 레이아웃의 축 : 세로 center ▶ 수직축의 가운데로 정렬 flex-start ▶ 수직축의 시작점에 정렬 flex-end ▶ 수직축의 끝에 정렬 stretch ▶ 수직축 방향으로 쭉~ 늘어나게 정렬 baseline ▶ 텍스트 베이스라인 기준으로 정렬 (❗ 텍스트 베이스라인이란 글자의 하단 정렬 선을 의미한다)

(4) justify-content 수평축(레이아웃의 축과 같은 방향)으로 정렬하는 속성이다. center ▶ 수평축의 가운데 정렬 flex-start ▶ 수평축의 시작점에 정렬 flex-end ▶ 수평축의 끝에 정렬 space-between ▶ 아이템들의 사이에 간격을 만들어 정렬 space-around ▶ 아이템들의 둘레에 간격을 만들어 정렬 space-evenly ▶ 아이템들의 사이와 양 끝에 간격을 만들어 정렬

space-between, space-around, space-evenly 속성을 그림을 통해 차이점을 알아보기

선택자 속성

여러가지 조건을 가진 선택자

1) AND 조건

띄어쓰기 없이 선택자를 붙여서 작성하면 AND 조건으로 CSS 속성이 적용된다. ✅ 선택자의 AND조건 div#name ▶ div 태그 중 name 아이디를 가진 요소에 스타일을 적용 div.menu#name ▶ div 태그 중 menu 클래스와 name 아이디를 가진 요소에 스타일을 적용 menu#name ▶ menu 클래스와 name 아이디를 동시에 가진 요소에 스타일을 적

2) OR 조건

선택자를 쉼표로 구분해서 나열하면된다. ✅ 선택자의 OR조건 #name, .menu ▶ name 아이디 혹은 menu 클래스를 가진 요소에 적용 item1, .item2, .item3 ▶ item1 클래스 혹은 item2 클래스 혹은 item3 클래스를 가진 요소에 적용

상위-하위 요소에 따라 결정되는 선택자

선택자1 요소 하위에 있는 선택자2 요소에 모두 적용된다. ✅ 하위 선택자 menu a ▶ menu 클래스 요소의 하위 요소 중 a 태그인 요소에 적용 menu #name ▶ menu 클래스 요소의 하위 요소 중 name 아이디를 가진 요소에 적용 div .menu #name ▶ div 태그 요소의 하위 요소 중 menu 클래스를 가진 요소의 하위 요소 중 name 아이디를 가진 요소에 적용

menu a가 menu 클래스의 하위 요소 중 a태그인 모든 요소에 적용되었다면, menu > a는 menu 클래스의 하위 요소 중에서 a 태그이고, menu 클래스와 a 태그 사이에 다른 태그가 없는 순수한 부모-자식 관계일 경우에만 적용된다. →menu 와 a 태그 사이에 div 태그가 하나 있으므로 적용되지 않는다. 대신 .menu-items > a 선택자는 적용되는데 .menu-items 와 a 태그 사이에 다른 태그가 없기 때문이다.

속성 선택자

특정 요소의 상태(state)에 따라 css속성 적용하기

• hover : 마우스를 해당 요소로 올린 상태를 의미하며 버튼에 마우스를 올리면 배경색과 글자색이 바뀐다.
• active : 마우스로 해당 요소를 클릭했을 떄 상태를 의미하며 버튼을 클릭하면 배경색이 빨간색으로 바뀐다.
• focus : 해당요소가 활성화 되었을 때를 의미하며, 활성화란 입력창에 입력 할 수 있도록 커서가 깜빡깜빡하는 상태를 의미한다.
• 상태를 지정할때는 태그:상태 말고도 선택자:상태로 지정 할 수 있으며 menu:hover, #name:active 이런식으로도 가능하다.

모두 섞어서 사용하기

div.menu > .name, div.menu > a menu > a > ul li div.menu > a:hover 이런식으로 모두 섞어서 사용 할 수 있다.

스크롤

** 스크롤은 언제 필요할까?** 안의 내용물이 컨테이너보다 클 때 스크롤이 필요하다. 안의 내용물이 컨테이너보다 큰지 작은지 알기 위해선 컨테이너의 사이즈가 정해져있어야한다.

Overflow 속성

(1) visible

overflow 속성을 설정하지 않았을땐, visible이 기본값이된다. 안의 내용물이 컨테이너보다 많으면 컨테이너를 뚫고 모두 그냥 보여지며, 스크롤은 생기지 않는다.

(2) auto

스크롤이 필요할때만 스크롤이 생기며, overflow 속성중에서 가장 많이 사용하는 값이다.

(3) scroll

언제나 스크롤이 뜨게 되며, 스크롤이 필요없는 경우에도 스크롤이 뜨게 된다.

(4) hidden

컨테이너 사이즈를 넘는 내용물을 보여주지 않게 하는 속성이다.

(5) overflow-x, overflow-y

overflow 라는 속성은 overflow-x와 overflow-y를 합친 속성이다. 따라서 overflow:auto를 설정하게 되면, 스크롤이 필요할때 x축,y축 스크롤이 모두 생긴다. 또한 따로 지정도 가능하다.

외부라이브러리

왜 외부라이브러리를 쓰는가? 라이브러리란 다른 사람들이 많이 쓰이는 코드, 프로그램을 미리 작성해놓은 것으로 원래는 한땀 한땀 코드를 직접 적어줘야하는 기능들을 라이브러리를 통해 쉽고 빠르게 적용 할 수 있다. ex) font-awesome, bootstrap

CDN 이란? Content Delivery Network의 약자로 협력하여 인터넷 콘텐츠를 고속 전송하는 지리적으로 분산된 서버 집단을 의미한다. 즉, CND 주소만 있으면 라이브러리를 자신이 개발하는 프로젝트로 가져올 수 있다.

*FONT-AWSOME 라이브러리 활용하는 방법 https://codemate.kr/project/WEB-%EB%A9%94%EC%9D%B4%ED%8A%B8-HTMLCSS-%EC%8B%AC%ED%99%94%ED%8E%B8/11-1.-%EC%99%B8%EB%B6%80-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC

참고 : https://codemate.kr/project/WEB-%EB%A9%94%EC%9D%B4%ED%8A%B8-HTMLCSS-%EC%8B%AC%ED%99%94%ED%8E%B8

HTML

(Hypertext Markup Language) 웹문서를 만드는데 사용하는 웹언어 중에 하나로 , 하이퍼테스트를 작성하기 위해 개발된 언어

html은 프로그래밍 언어가 아닌 마크업 언어이다.

Markup 언어란? 태크 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한가지

즉, 마크업 언어란 태그라는 것이 있고, 그 태그를 이용해 문서의 구조(뼈대)를 명시하는 언어이다. html은 태크를 사용해 웹사이트의 뼈대를 그리는 것이다.

태그의 종류 (html의 명령어는 태그(tag)로 "<>"로 나타낸다)

**<!DOCTYPE>** : 페이지의 html 버전이 무엇인지 브라우저에 알리는 역할

<html>  - 웹페이지의 시작과 끝

<head> - 웹 페이지의 정보, 문서에서 사용할 외부 파일들을 링크할 때 사용

<meta> - 문자 인코딩 및 문서 키워드, 요약 정보 ex) <meta charset="UTF-8">

<title> - 문서 제목

<body> - 브라우저에 실제 표시되는 내용

<h1 ~ h6> 숫자가 클수록 글자가 작아짐

<div> (division) - 영역을 나누는 기능 (한페이지 내에서 영역을 지정해줌), 자동 줄바꿈이 됨, 디자인 속성이 내장되어 있어 컬러를 지정하면 브라우저 전체에 박스를 생성한다. 

 <span> - 범위를 지정하는 기능 (영역을 나누거나 줄 바꿈을 하지 않고 일정 범위를 지정), 자동 줄바꿈이 되지 않음, 아무런 속성이 없어 컬러를 지정하면 텍스트 만큼만 생성한다. 

<a> - anchor, 웹 페이지나 외부 사이트 연결 ex) **<a href="링크" target="_blank">~~~</a>** 

(herf : 연결하고자 하는 링크, ~~~~: 링크가 생성 될 부분, target : 연결하는 창의 종류, _blank : 웹 브라우저의 새 창으로 연결되는 소스 = **target="_blank"**를 추가하면 링크를 클릭했을 때 새 창으로 열 수 있다.)

<img> - 이미지 삽입 ex) <imag src=”이미지 주소”>

<script> - 코드 삽입

<link> - 외부 파일을 연결할 때 사용

<p>(paragragh) - 문단을 지정하는 기능 (단락, 문단 바꿈)

<li> - <ul>과 <ol>안에서 각 항목을 나열할 때 사용

<ul> - unordered list, 순서가 없는 list

<ol> - olordered list, 순서가 있는 list

<style> - 스타일 정보를 정의할 때 사용하는 태그

<hr> - 수평선

<br>( line Break) - 줄을 바꾸는 기능 

<hn> - 제목

<input> - form의 요소중 하나, 사용자가 정보를 입력하는 부분을 만들어야 할 때 사용

<form> - form 생성

<iframe> - 외부 페이지 삽입

<nav> - 문서 연결 링크

<strong> - 중요한 내용 강조

<footer> - 제작 정보와 저작권 정보

<header> - 제목 지정

<button> - 버튼

<i> - italic, 기울임

<b> - bold, 진하게

<aside> - 본문 이외의 내용

CSS

(cascading style sheets) html에서 웹에 관한 내용을 구성한다면 css에서는 디자인의 역할을 맡고 있다. 텍스트의 크기나 굵기, 색깔, 폰트를 지정 해 줄 수 있다.

Style Sheet

1) Inline Style Sheet

h1 태그 안에 속성값을 만들어 글씨와 배경에 색을 적용 할 수 있다. 디자인 요소를 태그마다 하나하나 지정해 줘야하기 때문에 한계가 있으며 재사용이 불가능 하다는 단점이 있다.

2) Internal Style Sheet

style 태그를 넣어 디자인을 적용한다. html 문서 안의 여러요소를 한번에 꾸밀 수 있다는 장점이 있지만 다른 html 문서에는 적용 할 수 없다는 단점이 있다.

주로 style 태그는 head와 /head사이에 넣지만 어디에 넣어도 상관 없다.

3) Linking Style Sheet

별도의 css 파일을 생성하고 html문서에 연결하는 방법이며, 가장 유용하며 자주 쓰인다.

style.css 파일을 만들고 html 파일에 원하는 스타일 시트를 link 태그로 연결해준다.

ex) link rel = “stylesheet” href=”./style.css”/ : html과 css가 같은 폴더에 있으므로 href=”./style.css”고 작성한다. 만약 "design"이라는 폴더 안에 "style.css"라는 파일을 두면 href="./design/style.css"로 작성한다.

이것을 상대경로라고 한다.

*상대경로 * 해당 파일과 폴더의 위치를 상대적으로 표시한 경로 즉, 현재 위치한 곳을 기준으로 그곳의 위치

 / : 루트 (가장 최상의 디렉토리로 이동)
 ./ : 현재위치
 ../ : 현재위치의 상단 폴더
 ../../ : 두단계 상위 디렉토리로 이동

 ex) stlye.css가 C:\users\documents에 위치 한다

 / : C:

 ./ : document

 ../ : stlye

절대경로 어떠한 웹페이지나 파일이 가지고 있는 고유한 경로 ex) https://www.naver.com/를 절대경로라고 말하며 ‘위치’라는 개념을 주소라고 이해하면생각하면 쉽다.

글의 크기와 굵기

font-size

medium : 보통 크기 larger : 상대적으로 큰 크기 smaller : 상대적으로 작은 크기 length : px, %, em, rem

font-weight

normal : 보통 굵기 bolder : 상대적으로 굵은 굵기 lighter : 상대적으로 얇은 굵기 number : 100, 200, 300, 400, 500, 600, 700, 800, 900

• 폰트 적용하기 style은 html head안에 넣기 font-family는 css의 body안에 넣어서 적용하기 결과 :

class 속성

태그를 특정 클래스 이름으로 설정하면 css에서 디자인 속성을 한번에 지정 가능하며 클래스로 지정해놓으면 복잡하고 반복되는 코드를 피할 수 있다.

패딩(Padding)과 마진(Margin)

패딩과 마진은 가독성 때문에 중요하다

파란색 : 콘텐츠, 초록색 : 패딩, 주황색 : 마진

패딩(padding)

: 속을 넣다, 채워넣다.

padding: 20px;  ▶ 상하좌우 = 20px로 지정
padding: 3px 10px; ▶ 상하 = 3px, 좌우 = 10px로 지정
padding: 5px 10px 3px;  ▶ 위쪽 = 5px, 좌우 = 10px, 아래쪽 = 3px으로 지정
padding: 5px 10px 7px 3px; ▶ 위쪽 = 5px, 오른쪽 = 10px, 아래쪽 = 7px, 왼쪽 = 3px으로 지정

마진(margin)

: 여백, 여유

margin: 20px;  ▶ 상하좌우 = 20px로 지정
margin: 3px 10px; ▶ 상하 = 3px, 좌우 = 10px로 지정
margin: 5px 10px 3px;  ▶ 위쪽 = 5px, 좌우 = 10px, 아래쪽 = 3px으로 지정
margin: 5px 10px 7px 3px; ▶ 위쪽 = 5px, 오른쪽 = 10px, 아래쪽 = 7px, 왼쪽 = 3px으로 지정

✅ width(폭)과 height(높이)가 200px인 분홍색 박스를 만들고 padding과 margin을 상하좌우 모두 20px로 지정해보시오. 결과 : 문제점 : margin을 20px로 지정 했으나 마진의 폭이 전체로 지정이 되었다. 입력하지 않은 "div { display: block; }"라는 요소가 자동으로 배치되어있음

(display: block; : 앞뒤로 줄바꿈이 이루어져서 가로는 100%, 세로는 내용만큼 차지함)

해결법 :

css파일에 “dispaly:inline-block;”을 추가하여 줄바꿈 없이 박스를 표시 할 수 있게 해줌

단위와 위치

단위

절대단위 : 고정된 값을 출력 (출력장치의 물리적 속성을 아는 경우 효율적) → in, cm, mm, pt, pc

상대단위 : 다른요소의 크기에 영향을 받아 크기가 변함 (호환성을 유지하는데 유리) → em, ex, px, %

✔ em : font_size, 해당 폰트의 대문자 M의 너비를 기준으로 함

✔ ex : x-height, 해당 폰트의 소문자 x의 높이를 기준으로 함

✔ px : pixel, 출력장치에 따라 상대적인 크기를 가짐

✔ % : percent, 기본글꼴의 크기에 대하여 상대적인 값을 가짐

단위끼리 변환도 가능하다.
px  = pt / 0.75
pt   = px * 0.75
em = pt / 12
%    = pt * 100 / 12

단위변환 사이트 : http://pxtoem.com/

위치

1) Static

모든 요소의 default 값, 포지션 속성을 따로 설정하지 않았을때 가장 위쪽, 왼쪽으로 자동 저장이 된다.

2) Relative

위치를 이동하고 싶을때 사용하는 태그로 top, bottom, right, left를 사용하여 조절 할 수 있다.

3) Absolute

위치를 이동하고 싶을때 사용하는 태그로 top, bottom, right, left를 사용하여 조절 할 수 있다.

• relative와 absolute의 차이 relative → static 속성을 기준으로 상대적인 위치를 지정 absolute → stacic 속성이 아닌 요소를 기준으로 상대적인 위치를 지정 부모태그인 relative를 기준으로 위치를 정하는 것이 absolute

4) Fixed

위치를 고정해주는 역할로 스크롤을 내여도 fixed된 요소는 그자리에 고정된다.

도형만들기

border-radius는 모서리를 둥글게 만들어주는 역할이다. 정사각형을 만드는 코드에서 "border-radius: 50%;" 즉, 네 변을 모두 50%씩 둥글데 만들어서** 원**을 만든다.

정사각형의 꼭짓점만 둥글게 하고 싶다면 속성값을 위, 오른쪽, 아래, 왼쪽 순으로 지정하면 된다.

• border 속성

  border-width : 선 굵기 border-style : 선 모양 solid (실선) dotted (점선) dashed (대쉬선) double (이중실선) border-color : 선 색깔

✅ 네변을 다른 속성을 이용한 네모 만들기 결과 :

🔗css 전용 도형 사이트 링크 : https://css-tricks.com/the-shapes-of-css/

UI (User Interface) 사용자가 시스템을 제어하기 위해서 사용하는 조작장치 ex) 버튼

API (Application Programming Interface) 어플리케이션을 만들기 위해서 프로그래밍을 할때 사용하는 조작장치들

alert 창을 만들기 위한 코드에는 경고창의 기능이나 모양 같은게 설명되어 있지 않다.

Why? 웹브라우저를 만드는 사람들이 경고창을 미리 만들어 놓았다가 함수를 실행하면 띄우도록 만든 경고창 실행 조작장치이다.

Open API 특정 서비스를 제공하는 서비스 업체가 자신들의 서비스에 접근 할 수 있도록 그 방법을 외부에 공개한 것으로 해당 서비스로 접근하기 위한 규칙을 정의한 것

ex) 네이버 오픈 API, 정부 3.0 공공데이터 포털

기존의 API를 이용해 새로운 프로그램을 만드는 것을 매쉬업(Mash Up)이라고 하는데 대표적인 예로 구글지도와 부동산 매물정보가 만들어진 구글 하우징 맵스가 있다.

피그마를 사용하게 된 계기 2022년 1월 말쯤 아이디어 해커톤에 참여하게 되었었는데 아쉽게도 우리 팀원 중에 디자이너가 없었다. 그나마 나는 포토샵을 어느정도 할 줄 알았기에 프론트엔드 겸 디자인을 맡았었다. 하지만 디자인을 배워 본 적이 없기 때문에 막막하던 찰나 팀원 덕분에 피그마를 알게 되었고, ui/ux에 대하여 배워보는게 도움이 될 것이라 생각하여 사용하게 되었다.

UI란 user interface로 사용자가 앱을 사용 할 때 마주하는 디자인, 레이아웃, 기술적인 부분이다. 디자인의 구성 요소인 폰트, 색깔, 줄간격 등 상세한 요소가 포함되고, 기술적 부분은 반응형이나 애니메이션 등이 포함되며 사용자가 사용 할때 큰 불편함이 없이 만족도를 높여야한다.

UX는 User eXperience의 약자로 앱을 주로 사용하는 사용자들의 경험을 분석하여 더 편하고 효윻적인 방향으로 프로세스가 진행될 수 있도록 만드는 것이다. UX는 통계자료, 데이터를 기반으로 앱을 사용하는 유저들의 특성을 분석하여 상황과 시점에 맞도록 변화 시킬 수 있어야한다.

피그마란?

웹기반 UI/UX 디자인 및 프로토타이핑툴로 설치가 따로 필요하지 않아 인터넷이 가능한 곳이면 어떤 운영체제를 사용하던지 동일하게 작업 할 수 있다. 또한 따로 저장이 존재하지 않으며 작업을 하는 순간 순간 자동 저장이 된다는 특징이 있다.

기능

1. 다양한 프레임

좌측 상단 우물정자 표시의 아이콘을 누르면 폰, 태블릿, 데스크탑 등등의 프레임을 선택 할 수 있다. *포토샵을 사용 할 때는 일일이 기기의 크기를 찾아보곤 했는데 그럴 필요가 없어졌다는게 너무 편했다.

2. 동시 작업

포토샵으로 작업을 할때에는 완성하고 파일을 보내면 수정할 사안을 따로 전달받아 다시 작업을 해야한다는게 너무 불편했다. 하지만 피그마를 사용하면 링크를 카카오톡으로 공유 받아 같이 작업을 진행하여 상대의 마우스 커서가 어디있는지, 어느 부분을 수정하는지를 실시간으로 볼 수 있다는 점이 가장 큰 이점인것 같다.

3. 폰트의 다양성

구글폰트(900여 개 이상의 무료폰트)를 다운받지 않고 활용할 수 있어 협업 과정에서도 별도로 설치하지 않아도 되고, 폰트 때문에 글씨가 깨지거나 사라지는 일이 없다. 또한 사용자가 별도로 보유하고 있는 폰트도 적용 할 수 있다.

4. 재사용이 가능한 컴포넌트

수정이 필요 할 때 마다 모든 페이지를 다 열어서 버튼의 색을 바꾸는 번거로움이 있었는데 피그마에서는 많이 사용하는 요소들을 컴포넌트로 묶어 메인 컴포넌트만 수정하면 되는 효율성을 가졌다.

5. 개발 툴바

개인적으로 개발 툴바 기능에 너무 놀랐었다.또한 마우스 툴바로도 수치 값을 확인 할 수 있다는 점이 디자이너 뿐만 아닌 개발자들의 관점에서도 신경을 되게 많이 쓴 페이지라고 생각이 들었다.

마무리

이외에도 직관적인 UI에 처음 피그마를 접하는 나도 이것 저것 만져보니 금세 익숙해졌었다. 디자인은 아직 나에게 너무 어렵지만 피그마를 경험함으로써 꼭 UI/UX가 디자이너에게만 한정되는 영역은 아닌것 같다는 생각이 들었다. 피그마를 통해 아직 경험해보지 못한 zeplin 기능이나 스크롤 기능 등 여러가지를 공부 할 예정이다.

프레임워크(Framework)

-소프트웨어의 구체적인 부분에 해당하는 설계와 구현을 재사용이 가능하게끔 일련의 협업화된 형태로 클래스들을 제공하는 틀이다. -재사용이 가능하도록 소프트웨어 구성에 필요한 기본을 제공한다. -정보시스템의 개발 및 운영을 지원하는 도구 및 가이드 등을 포함한다.

Spring, React, Angular, View, Django

• 특징

• 구성요소

라이브러리 (Library)

-모듈과 패키지를 총칭하며, 효율적인 프로그램 개발을 위해 필요한 프로그램을 모아 놓은 집합체를 의미한다. _*모듈이 개별 파일이라면 패키지는 파일들을 모아 놓은 폴더라고 볼 수 있다. _

Bootstrap, jQuery

라이브러리는 도움말, 설치 파일, 샘플 코드 등으로 구성된다.

• 라이브러리 종류

• 표준 라이브러리 상세

*1) 문자열 라이브러리 함수 * 문자열 함수를 사용하기 위해서는 string.h 헤더 파일을 include하여 사용한다.

2) 표준 라이브러리 함수 표준 라이브러리 함수를 사용하기 위해서는 stdlib.h. 헤더 파일을 include 하여 사용한다.

3) 수학 라이브러리 함수 _수학 라이브러리 함수를 사용하기 위해서는 math.h 헤더 파일을 include하여 사용한다. _

프레임워크 VS 라이브러리 비교

가장 큰 차이점은 개발의 주도권을 누가 가지고 있는가다!

프레임워크는 개발 주도권이 프레임워크에 있어 웹개발 시작부터 기능 구현까지 다 프레임워크를 따라야 하지만 라이브러리는 개발 주도권이 개발자에게 있어 원하는 라이브러리를 가져와 개발자가 원하는대로 기능만을 사용 할 수 있다.