1. 리액트 등장배경 & 필요성

< Web App (웹앱)의 등장 >

• 모바일의 앱과 비슷한 사용성(UI, UX)을 제공하는 웹을 의미
• 새로고침없이 페이지 이동 가능 → 사용자 경험 증대 → 구매전환에 효과가 있음이 입증됨
• 이런 웹앱(SPA)을 만들기 쉽게 해주는 대표적인 라이브러리 : React, Vue, Angular이 있음
• 웹앱은 앱과 비슷하므로 앱으로 만들기 용이 : pwa, react native등을 사용하면 됨

2. 리액트 구조 & 동작방식

< Setting >

• node 설치 : node -v
• npm, npx 설치 : node 설치하면 자동적으로 설치됨 → npm -v npx -v
  • npm : node.js 기반의 라이브러리들을 설치할 수 있는 스토어 (앱스토어 느낌)
  • npx : npm처럼 완전히 설치하는 것이 아니라 프로젝트를 만들때 가장 최신의 버전을 기반으로 만드는 것
• vscode 설치

< create-react-app >

→ SPA를 만들기 위한 가장 보편적인 템플릿 (boilerplate)를 제공하는 라이브러리. (명령어 하나로 프로젝트 셋업을 끝낼 수 있음)

→ create-react-app 없이도 SPA를 만들 수 있음. 대부분의 현업에서는 create-react-app를 사용하지 않고 프로젝트에 맞는 커스터마이징을 위해 처음부터 빌드하는 경우가 많음

• folder structure

  • node_modules : 프로젝트에 필요한 모든 라이브러리들이 저장된 폴더

  • public : static(정적인) 파일들이 저장된 폴더

    • index.html : 프로젝트의 유일한 html 파일 → SPA 특징
    • robots.txt : SEO 로봇들이 해당 웹을 탐색할때 필요한 파일
    • build : 프로젝트를 배포할때 바벨을 통해 압축된 파일들이 저장됨
    • etc : favicon, image등이 저장됨

  • src : source code를 저장하는 폴더 → 주로 작업하는 폴더

    • index.js : index.html (html)과 App.js(react)를 연결시켜주는 파일

      → html의 id == root인 div안에 App.js와 기타 리액트 파일들이 생성한 JS파일들을 주입시켜주는 역할을 함

    • app.js : 리액트의 메인 파일.

    • app.css & index.css : 각각 app.js와 index.css를 꾸며주는 css파일 BUT 생략가능

  • package.json : 설치된 모든 라이브러리들의 이름과 버전이 기록됨.

    → 필요한 이유 : 배포를 할 때 node_modules까지 포함될 경우 너무 무거워지므로 node_modules 없이 배포를 함. 하지만 다른 사용자의 경우 해당 node_modules가 없으면 프로젝트를 실행할 수 없으므로 이때 package.json을 사용해서 해당 프로젝트에 필요한 모든 dependencies들을 한꺼번에 다운받을 수 있음 : npm install 명령어로 설치가능

  • package-lock.json : 라이브러리들안에는 또 세부적인 패키지들이 들어있음. 이 세부적인 패키지들의 이름과 버전까지 기록된 파일.

  • .gitignore : git의 tracking을 받지않는 파일들을 명시하는 곳.

    → node_modules, build와 같은 폴더들이 주로 해당됨

    

• 프로젝트 실행 : npm start → localhost:3000 에서 웹페이지 볼 수 있음

3. JSX 문법

< JSX (JavaScript XML) >

• react 고유문법

• render안에서 사용됨

• html과 javascript가 결합된 문법 → 리액트는 js파일내에서 html문법을 사용할 수 있도록 JSX를 만듦

• JSX안에서 javascript를 사용할때는 {} 안에 작성해야함

• class가 아닌 className을 사용 → 자바스크립트의 className api를 사용하는 것

• inline style을 작성할 경우 자바스크립트 문법 + 객체를 사용 → {{ }} 안에 작성해야함

  • 속성은 - 대신 camelcase를 이용 (ex. background-color ⇒ backgroundColor)
  • 스타일 구분은 , 로 함
  • 속성값의 숫자의 디폴트 단위는 px 임
  • 속성값은 문자열 아니면 숫자로 작성됨

• 반드시 상위태그는 하나만 존재해야함

  → error message : `

  → 상위 태그가 필요없는 경우 : 태그 사용 ( <> 로 대체가능 )

• 데이터 바인딩이 쉬움

  • 데이터 바인딩 : 데이터를 html에 집어넣는 것

    → 자바스크립트에서는 document.getElement ~~ 등 여러줄의 코드를 써야함

    → 리액트에서는 변수에 저장뒤 바로 html tag사이에 {변수} 를 사용해서 집어넣을 수 있음

4. State

< 데이터를 저장하는 2가지 방법 >

• 변수에 저장 : 데이터가 변경이 되어도 자동적으로 리랜더링이 진행되지 않음 → 새로고침을 해야지 업데이트된 내용을 볼 수 있음
• state에 저장 : 데이터가 변경되면 자동적으로 리랜더링이 됨 → 새로고침없이 웹앱처럼 동작

⇒ 결론: 정적인 데이터는 변수에 저장, 동적인 데이터 (값이 변경되는 데이터)는 state에 저장

< state 사용방법 >

• class component

• function component

  • state를 사용하기 위해서 hook를 사용해야함 → useState (import 필요)

  • useState(초기값)는 [초기값, 값을 변경하는 함수]를 리턴함

    → destructure 문법 (es6)을 사용하여 배열에 담음

    → 보통 [데이터이름, set데이터이름] 형태로 지음

    → useState의 인자로는 배열, 객체등이 들어갈 수 있음

```jsx
import React, {useState} from 'react'

function App() {
    return(
        const [count,setCount] = useState(0) // count=0, setCount는 함수
    )
}
```

5. 이벤트 리스너 적용

• DOM의 모든 노드 (element)에는 이벤트를 적용할 수 있음

< 이벤트 리스너 적용 방법 >

• addEventListener(event 종류, event 발생시 실행시킬 함수 - 콜백)
• html element의 속성으로 onEventName , 속성값으로 콜백함수 or 함수이름 주기
  • 콜백함수 : arrow function
  • 함수이름 : () 호출없이 함수이름만 !!

<이벤트 리스너를 사용해서 state값을 변경할 때 >

• state값을 변경할 때는 반드시 setState 함수를 사용해야함!!

  • setState를 사용해야지만 리랜더링이 발생하기 때문

  • setState에서는 기존의 값의 부분을 재할당할 수 없음. 통으로 대체하는 방식임

      import React, {useState} from 'react'
    
      function App() {
          const [menu, setMenu] = useState(['icecream', 'donut', 'burger']);
    
          return (
              <>
                  <button onClick={() => setMenu(menu[0] = 'pizza')}>메뉴변경</button>  //불가
                  <button onClick={() => setMenu(menu = ['pizza','donut', 'burger'])}>메뉴변경</button> //가능
              </>        
          }
      }

6. State 변경 방법 - Deep Copy

< State를 변경하는 방법 >

1. 대체할 값을 통으로 넣기 : 위에서 언급한 방법

2. 복사본을 생성 → 수정 → setState함수에 전달하는 방법

   • Deep Copy : array, object와 값이 reference data type (참조 자료형)의 경우 복사본을 그냥 만드면 복사가 아닌 값을 공유함 → 제대로 된 복사가 일어나지 않아서 deep copy를 사용해야함

     • 방법 : es6에서는 spread operator ... 를 이용함

   • Shallow Copy : 일반적인 자료형의 경우 사용하는 방법.

     • 방법 : 새로운 변수에 할당

     let menu = ['icecream', 'burger', 'cake'];
     let coffee = 'americano';
     
     <<<< SHALLOW COPY >>>>>
     let newMenu = menu
     newMenu[0] = 'pizza'
     setMenu(newMenu)      //배열의 경우 shallow copy가 불가!! 
     
     let newCoffee = coffee;
     newCoffee = 'latte';
     setCoffee(newCoffee);   //일반적인 자료형의 경우 shallow copy 가능
     
     <<<< DEEP COPY >>>>>
     let newMenu = [...menu];
     newMenu[0] = 'pizza'
     setMenu(newMenu)       //배열의 경우 deep copy를 하면 완전히 새로운 복사본이 생김!

7. Component

< Component란? >

• 하나의 UI 단위 : 함수 or 클래스는 html 코드를 리턴 or 랜더

< Component 만드는 방법 >

• class component
• function component

< Component를 만드는 기준 >

1. 코드가 자주 반복되는 경우 → 가독성 향상. 재사용성 증가. 유지보수 용이
2. 값이 자주 변하는 UI의 경우 → 성능 향상
3. page 단위의 경우

< Component의 단점 >

• state를 넘겨주는 것이 번거로울 수 있음

  → state의 경우 해당 component (함수/클래스) 안에서만 사용될 수 있으므로 다른 component에서 사용할 경우 다른 과정을 거쳐야함.

• 파이썬

  ⇒ import re : re = regular expression라는 라이브러리 사용

  ⇒ re.findall(정규표현식, string) 으로 사용

    regex = r'0\d{1,2}[ -]?\d{3,4}[ -]?\d{3,4}'  
  
    search_target = '''Luke Skywarker 02-123-4567 luke@daum.net
    다스베이더 070-9999-9999 darth_vader@gmail.com
    princess leia 010 2454 3457 leia@gmail.com'''
  
    import re
    result = re.findall(regex, search_target)
    print("\n".join(result))   //모든 결과를 개행해서 보여줌

Syntax

Practice

< 문제 1 > 
=> 전화번호 선택하기
010-000-00000
010.000.00000
010 000 00000
02-000-00000

< 풀이 >
step1 : \d\d\d-\d\d\d-\d\d\d\d
step2 : \d{2,3}[,. ]\d{3}[,. ]\d{4}

< 문제 2 > 
=> email 선택하기
dream.coder.ellie@gmail.com
hello@daum.net
hello@daum.co.kr

< 풀이 >
내답 : \w+.\w+.\w+@\w+.\w+.\w+
정답 : [a-zA-Z0-9_.+-]+@[a-zA-Z0-9]+\.[a-zA-Z0-9.]+
    -> @앞: 문자,숫자,특수문자들이 한개이상 반복될 수 있음
    -> @뒤: 문자,숫자들이 한개이상 반복될 수 있음 + 특수문자 . + 문자,숫자들이 한개이상 반복될 수 있음

< 문제 3 > 
=> 유튜브 주소 뒤에 아이디만 선택하기
https://www.youtu.be/-ZClicWm0zM
https://youtu.be/-ZClicWm0zM
youtu.be/-ZClicWm0zM

< 풀이 >
내답 : (.*youtu.be)?
정답 : (?:https?:\/\/)?(?:www.)?youtu.be\/([a-zA-Z0-9-]{11})
    -> 그룹1 : https?:\/\/  => http:// or https:// 선택  => "?:" 그룹을 무시, "?" 0-1번 반복
  -> 그룹2 : www.  => "?:" 그룹을무시, "?" 0-1번 반복
    -> youtu.be\/  => youtu.be/ 선택
  -> 그룹3 : 문자,숫자,-로 구성된 11개 조합 

  => ?: 을 그룹1,2에 넣음으로써 그룹3만 선택될 수 있음!! 매칭된 그룹으로

참고링크

프로그래머스 정규표현식 : https://programmers.co.kr/learn/courses/11 엘리님 정규표현식 강의 : https://www.youtube.com/watch?v=t3M6toIflyQ 정규표현식 표 : https://ccambo.blogspot.com/2014/10/regular-expression.html

내 풀이 1.

⇒ 정규표현식 사용

import re

def solution(new_id):
    answer = ''

    #대문자를 소문자로 치환
    new_id = new_id.lower()

    #소문자,숫자,-,_,.제외
    new_id = re.sub('[^0-9a-z-_.]','',new_id)

    #.가 2번 이상 반복 -> 하나로 치환
    new_id = re.sub('[.]{2,}','.',new_id)

    #.가 처음이나 끝에 위치하는 경우 제거
    new_id = re.sub('^\.|\.$','',new_id)

    #빈 문자열인 경우 a를 대입
    new_id = 'a' if len(new_id) == 0 else new_id

    #길이가 16이상이면 15뒤 제거
    new_id = new_id[:15] if len(new_id)>=16 else new_id

    #끝에 . 있으면 제거
    new_id = re.sub('\.$', '', new_id)

    #길이2 이하이면 마지막 문자를 길이가 3될때까지 반복
    new_id = new_id+new_id[-1]*(3-len(new_id)) if len(new_id)<=2 else new_id


    return new_id

⇒ 헷갈린 개념 :

• $를 사용할때는 원하는 문자$ 형식으로 써야함
• ^를 사용할때는 ^원하는 문자 형식으로 써야함

⇒ 개선사항

• 3번째 조건 : 2번 이상 반복을 한번으로 치환하는 것 → [.]{2,} 를 \.+ 로 바꿀 수 있음 (한번으로 치환가능하므로)
• 6,7번째 조건 합칠 수 있음 → new_id = re.sub('[.]$', '', new_id[:15]) 로 한꺼번에 처리가능

다른 사람 풀이1.

import re

def solution(new_id):
    st = new_id
    st = st.lower()
    st = re.sub('[^a-z0-9\-_.]', '', st)
    st = re.sub('\.+', '.', st)
    st = re.sub('^[.]|[.]$', '', st)
    st = 'a' if len(st) == 0 else st[:15]
    st = re.sub('^[.]|[.]$', '', st)
    st = st if len(st) > 2 else st + "".join([st[-1] for i in range(3-len(st))])
    return st

다른 사람 풀이 2.

from re import sub

def solution(new_id):
    new_id = new_id.lower()
    new_id = sub("[^a-z0-9-_.]", "", new_id)
    new_id = sub("\.+", ".", new_id)
    new_id = sub("(^\.|\.$)", "", new_id)
    new_id = new_id if new_id else "a"
    new_id = sub("\.$", "", new_id[:15])
    new_id = new_id if len(new_id) > 3 else new_id + new_id[-1] * (3 - len(new_id))
    return new_id

https://programmers.co.kr/learn/challenges

SELECT

[ 모든 레코드 조회하기 ]

Q ) 동물 보호소에 들어온 모든 동물의 정보를 ANIMAL_ID순으로 조회하는 SQL문을 작성해주세요.

SELECT *
FROM ANIMAL_INS
ORDER BY ANIMAL_ID

[ 역순 정렬하기 ]

Q ) 동물 보호소에 들어온 모든 동물의 이름과 보호 시작일을 조회하는 SQL문을 작성해주세요. 이때 결과는 ANIMAL_ID 역순으로 보여주세요.

SELECT NAME, DATETIME
FROM ANIMAL_INS
ORDER BY ANIMAL_ID DESC

[ 아픈 동물 찾기 ]

Q ) 동물 보호소에 들어온 동물 중 아픈 동물1의 아이디와 이름을 조회하는 SQL 문을 작성해주세요. 이때 결과는 아이디 순으로 조회해주세요.

SELECT ANIMAL_ID, NAME
FROM ANIMAL_INS
WHERE INTAKE_CONDITION = 'Sick'
ORDER BY ANIMAL_ID   #생략가능(defult)

[ 어린 동물 찾기 ]

Q ) 동물 보호소에 들어온 동물 중 젊은 동물1의 아이디와 이름을 조회하는 SQL 문을 작성해주세요. 이때 결과는 아이디 순으로 조회해주세요.

SELECT ANIMAL_ID, NAME
FROM ANIMAL_INS
WHERE INTAKE_CONDITION <> 'Aged'     
ORDER BY ANIMAL_ID   #생략가능(default)

TIP )   not 연산자:   <>  or  !=  사용가능

[ 동물의 아이디와 이름 ]

Q ) 동물 보호소에 들어온 모든 동물의 아이디와 이름을 ANIMAL_ID순으로 조회하는 SQL문을 작성해주세요.

SELECT ANIMAL_ID, NAME
FROM ANIMAL_INS
ORDER BY ANIMAL_ID   #생략가능(default)

[ 여러 기준으로 정렬하기 ]

Q ) 동물 보호소에 들어온 모든 동물의 아이디와 이름, 보호 시작일을 이름 순으로 조회하는 SQL문을 작성해주세요. 단, 이름이 같은 동물 중에서는 보호를 나중에 시작한 동물을 먼저 보여줘야 합니다.

SELECT ANIMAL_ID, NAME, DATETIME
FROM ANIMAL_INS
ORDER BY NAME, DATETIME DESC

TIP ) NAME은 ASC가 생략된 것임 ( default = ASC )

[ 상위 n개 레코드 ]

Q ) 동물 보호소에 가장 먼저 들어온 동물의 이름을 조회하는 SQL 문을 작성해주세요.

SELECT NAME
FROM ANIMAL_INS
ORDER BY DATETIME
LIMIT 1

IS NULL

[ 이름이 없는 동물의 아이디 ]

Q ) 동물 보호소에 들어온 동물 중, 이름이 없는 채로 들어온 동물의 ID를 조회하는 SQL 문을 작성해주세요. 단, ID는 오름차순 정렬되어야 합니다.

SELECT ANIMAL_ID
FROM ANIMAL_INS
WHERE NAME is NULL
ORDER BY ANIMAL_ID    #생략가능

[ 이름이 있는 동물의 아이디 ]

Q ) 동물 보호소에 들어온 동물 중, 이름이 있는 동물의 ID를 조회하는 SQL 문을 작성해주세요. 단, ID는 오름차순 정렬되어야 합니다.

SELECT ANIMAL_ID
FROM ANIMAL_INS
WHERE NAME is not NULL
ORDER BY ANIMAL_ID    #생략가능

SUM, MAX, MIN

[ 최댓값 구하기 ]

Q ) 가장 최근에 들어온 동물은 언제 들어왔는지 조회하는 SQL 문을 작성해주세요.

SELECT MAX(DATETIME)
FROM ANIMAL_INS

or...

SELECT DATETIME
FROM ANIMAL_INS
ORDER BY DATETIME DESC  #오름차순 (가장 최근순)
LIMIT 1