❌문제코드 예시

구현된 코드의 의도

1. 부모 컴포넌트에서 string[]타입의 textList 변수를 자식 컴포넌트로 전달
2. 자식 컴포넌트에서는 전달받은 string[]타입의 변수를 map을 통해 출력

function ParentComponent () { //부모 컴포넌트
  const [textList, setTextList] = useState<string[]>([]);

  return (
    <Box>
      <ChildComponent list={textList} />
    <Box>
  )
}

function ChildComponent (list: string[]){ //자식 컴포넌트
    return (
    <>
      {list.map((listItem, index) => (
        <Typography key={index}>{listItem}</Typography>
      ))}
    </>
  );
}        

위와 같은 코드가 있을 때, 그냥 봤을 때는 문제가 없어보인다. 하지만 이렇게 구현하면 아래와 같은 오류가 나타난다.

💥Type '{ list: string[]; }' is not assignable to type 'IntrinsicAttributes & string[]'. Property 'list' does not exist on type 'IntrinsicAttributes & string[]'.

오류의 원인은 ChildComponent에서 list라는 값을 props로 받아야 하는데, 현재는 그저 함수의 매개변수로만 정의되어 있기 때문이다. 즉, ChildComponent의 list는 props 객체의 속성인데, 이를 배열처럼 취급하고 있으니 타입이 맞지 않는다는 오류를 나타내는 것이다.

이렇게 말하면 이해가 조금 어려울 수 있으니 아래의 옳은 코드와 함께 이해해보자.

⭕옳은 코드

function ParentComponent () { //부모 컴포넌트
  const [textList, setTextList] = useState<string[]>([]);

  return (
    <Box>
      <ChildComponent list={textList} />
    <Box>
  )
}

interface ChildComponentProps{
 list: string[] 
}  

function ChildComponent ({ list }: ChildComponentProps){ //자식 컴포넌트
    return (
    <>
      {list.map((listItem, index) => (
        <Typography key={index}>{listItem}</Typography>
      ))}
    </>
  );
}        

정말 단순하다 !

자 이제 문제의 코드와 옳은 코드를 비교하여 설명해보자면 ...

1. 함수의 매개변수로 labelList를 받는 경우

function ChildComponent(list: string[]){ 
    return ( ... )

React 컴포넌트는 props를 객체로 받기 때문에, ChildComponent에서 list를 받아올 때도 객체 형태로 받아야 한다. 즉, list는 props 객체의 속성으로 전달된다. props로 전달되는 데이터가 객체 형태임에도 불구하고, 이 방식은 배열로 처리하려 하기 때문에 TypeScript는 list가 배열이 아니라 props 객체라고 인식하게 된다.

-> 결국 위처럼 입력하면 React 컴포넌트가 아닌 일반 함수처럼 동작한다.

2. interface를 사용하여 props를 정의하는 경우

interface ChildComponentProps{
 list: string[] 
}  

function ChildComponent ({ list }: ChildComponentProps){ 
    return ( ... )

이 방식은 React에서 props를 받는 정확한 방식이다. 여기서 ChildComponent는 React 컴포넌트로 동작하며, props는 객체 형태로 전달된다. 이때 list는 ChildComponentProps로 타입이 정의된 객체의 속성으로 받아야한다.

-> React 컴포넌트로서 정상 작동

문제/입력/출력

예제 입출력

문제 바로가기

백준 20920번

💡풀이방법

• 접근방법
  • 영단어 정렬 조건 정리
    1. 자주 나온 단어부터
    2. 긴 단어부터
    3. 사전순으로
    4. 공통조건: M보다 짧은 단어는 제외함
  • 정리
    • 각 단어별로 조건 확인
    • 길이가 M 이상인지 확인 후, true라면 단어의 빈도수를 저장

✏️관련 개념

• ** collections의 Counter** 데이터의 빈도수를 계산하고 관리하는데 사용함 리스트의 각 항목이 몇 번 나타나는지를 계산하여 딕셔너리 형태로 저장

  data = ['apple', 'orange', 'apple', 'orange', 'banana']
  counter = Counter(data) 
  print(counter) # Counter({'apple': 2, 'orange': 2, 'banana': 1})
  print(dict(counter)) # {'apple': 2, 'orange': 2, 'banana': 1}

• 코드 내에서의 Counter 반복을 돌면서 word_count.items()에서 각 (word, count)쌍 순회하며 리스트 요소로 변환

  filtered_words = [
    (word, count) for word, count in word_count.items()
    if (len(word) >= M) 
  ]
  print(filtered_words) # [('apple': 2), ('orange': 2), ('banana': 1)]

• lambda 이용 -x[1]: count값(빈도수)이 큰 것부터(내림차순) -len(x[0]): word의 길이가 긴 것부터(내림차순) x[0]: 알파벳 순(오름차순)

  filtered_words.sort(key = lambda x: (-x[1], -len(x[0]), x[0]))

💡구현 코드

from collections import Counter
import sys
input = sys.stdin.read()

def word_study(N, M, words):
    word_count = Counter(words)
    filtered_words = [
        (word, count) for word, count in word_count.items()
        if (len(word) >= M) 
    ]

    filtered_words.sort(key = lambda x: (-x[1], -len(x[0]), x[0]))

    for word, _ in filtered_words:
        print(word)

data = input.split()
N = int(data[0])
M = int(data[1])
words = data[2:]

word_study(N, M, words)

기본적으로 이미 몇번이나 짚었던 개념인데, 한번 더 정리하면서 확인해보기로 하자.

HTTP(Hyper Text Transfer Protocol)은 클라이언트와 서버간에 요청/응답으로 데이터를 주고 받을 수 있는 프로토콜이다.

• TCP/IP 기반
• request(요청)/response(응답) 형태

HTTP 구조

• HTTP method: 요청의 목적을 담고 있는 GET, POST, PUT, DELETE 등이 있다.
  • GET: 자원에 대한 요청(조회 개념)
  • POST: 새로운 자원 생성
  • PUT: 자원에 대한 변경(수정 개념)
  • DELETE: 존재하는 자원 삭제

HTTP/2, HTTP/3 ?

최초의 버전이 HTTP/1.1 이다. HTTP/2, HTTP/3은 예상할 수 있듯이 프로토콜 자체를 업그레이드한 버전이며, 데이터 전송 시스템을 수정하여 효율성을 개선한 것이다.

• HTTP/2 : 텍스트 형식 대신, 바이너리로 데이터를 교환
• HTTP/3: 실시간 스트리밍 및 기타 최신 데이터 전송 요구사항을 보다 효율적으로 지원

✔️그렇다면 HTTPS는 뭘까?

HTTP는 암호화되지 않은 데이터를 전송하는 프로토콜이기 때문에, 보안면에서는 문제가 될 수 밖에 없다. 이러한 문제를 해결하기 위해 HTTPS가 등장하게 된 것이다.

HTTPS(Hyper Transfer Protocol Secure)는 말 그대로 HTTP에 데이터 암호화가 추가된 프로토콜 이다. 즉, 데이터를 안전하게 전송하기 위해 사용된다.

HTTPS의 암호화

암호화는 데이터를 읽을 수 없는 형태로 변환하는 과정이며, 대칭키와 비대칭키 방식 2가지가 존재한다.

• 대칭키 암호화
  • 암호화와 복호화에 동일한 키 사용
  • 빠르고 효율적
  • 키를 안전하게 공유하기가 어려움 (키를 교환하는 과정에서의 도청될 위험)
• 비대칭키 암호화
  • 암호화와 복호화에 다른 키 사용
  • 공개키와 개인키로 구성됨(공개키- 누구나 접근 가능, 개인키- 소유자만이 접근 가능)
    • 공개키와 개인키는 한 쌍
    • 공개키 암호화-개인키 복호화: 개인키는 소유자만이 갖고 있으므로, 소유자만이 볼 수 있음
    • 개인키 암호화-공개키 복호화: 공개키는 모두에게 공개되어 있으므로, 소유자가 인증한 정보임을 알려 신뢰성을 보장할 수 있음
  • 높은 보안성
  • 대칭키에 비해 떨어지는 성능

HTTPS 동작 과정

1. 클라이언트(브라우저)가 서버로 최초 연결 시도를 함
2. 서버는 공개키(엄밀히는 인증서)를 브라우저에게 넘김
3. 브라우저는 인증서의 유효성을 검사하고 세션키 발급
4. 브라우저는 세션키를 보관하며 추가로 서버의 공개키로 세션키를 암호화하여 서버로 전송
5. 서버는 개인키로 암호화된 세션키를 복호화하여 세션키 얻음
6. 클라이언트와 서버는 동일한 세션키를 공유하므로 데이터를 전달할 때 세션키로 암호화/복호화 진행

결국 HTTP와 HTTPS의 가장 큰 차이는 보안과 관련된 부분이라고 볼 수 있다.

문제/입력/출력

문제 바로가기

백준 10814번

✏️관련 개념

• lambda 이용

  people.sort(key=lambda x: (x[0], x[2]))

  이전 append를 통해 people리스트는 (age 나이, name 이름, i 인덱스)형식의 튜플로 이루어져있음 이 상태에서 우선 x[0](나이)로 정렬 후, x[2](인덱스-입력된 순서)로 정렬하는 방식으로 풀어냄

  people = [(25,"Alice", 1), (21, "Minsu", 2), (21, "Bob", 3)] #예시: 튜플을 담고 있는 배열

• 튜플 리스트: [], 튜플: () 리스트: 요솟값의 수정, 삭제 가능 튜플: 요솟값을 바꿀 수 없음

    t1 = (1, 2, "a", "b")
    t1[0] // 1
    t1[3] // "b"

💡구현 코드

import sys
input = sys.stdin.read
data = input().splitlines()

n = int(data[0])

people = []
for i in range(1, n + 1):
    age, name = data[i].split()
    age = int(age)
    people.append((age, name, i))

people.sort(key=lambda x: (x[0], x[2]))

for person in people:
    print(person[0], person[1])

: Single Page Application 하나의 HTML 페이지와 애플리케이션 실행에 필요한 JavaScript와 CSS와 같은 모든 리소스를 로드하는 애플리케이션

쉽게 말해, 그 전에는 웹을 보여줄 때 여러 페이지로 구성되어있었다. 이러한 방식은 페이지를 로딩할때마다 서버에서 리소스를 전달받아와서 렌더링을 하기 때문에, 규모가 커짐에 따라 데이터 전송 과부화로 인한 속도 저하와 같은 문제점이 발생한다. 이를 개선하기 위해 React를 사용한다.

• 다른 주소에 다른 화면을 보여주는 것을 Routing(라우팅)이라고 함

✔️JSX

• 자바스크립트의 확장 문법
• 자바스크립트에서 HTML을 작성하듯이 비슷하게 작성할 수 있도록 해 주는 것이 JSX의 가장 큰 장점

JSX 특징

컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나가 감싸는 형태

예시 - 잘못된 코드❌

function App(){
    return(
        <h1>테스트1</h1>
        <h2>테스트2</h2>
    )
}

예시 - 옳은 코드⭕

function App(){
    return(
        <div>
            <h1>테스트1</h1>
            <h2>테스트2</h2>
        </div>
    )
}

자바스크립트 표현 : 자바스크립의 값을 JSX 안에서 렌더링할 수 있음

import React from 'react';

function App() {
    const name = '리액트';
    return (
    <>
        <h1>{name}</h1>
        <h2>test</h2>
    </>
  );
}

export default App;

참고사이트 React 공식문서 React - SPA란?

TS + React + Recoil 환경의 개발을 진행하던 중, 기본적인 문제에 부딪혀 한번 짚고넘어가기 위해 글을 작성한다.

👀오류발생하는 부분을 확인해보자

• RecoilState 정의하는 atom.tsx

  //recoil state 생성
  export interface UserTypes {
  memberName: string;
  memberPhone: string;
  memberPassword: string;
  }
  
  

export const userState = atom({ key: "user", default: { memberName: "", memberPhone: "", memberPassword: "", }, });

<br/>

- SignUpForm.tsx
```ts
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const {
      target: { name, value },
    } = e;

      // 비밀번호
      if (name === "password") {
      setMemberPassword((prevUser) => ({
        ...prevUser,
        memberPassword: value,
      }));
    }

    // 비밀번호 확인
    if (name === "password_confirm") {
      setMemberPasswordConfirm(value);

      if (value?.length < 8) {
        setError("비밀번호는 8자리 이상으로 입력해주세요.");
      } else if (value !== memberPassword) {
        setError("비밀번호가 일치하지 않습니다.");
      } else {
        setError("");
      }
    }
  };

여기서 문제가 발생한 부분은 바로 memberPasswordConfirm가 memberPassword와 일치하는지 확인하는 부분이다.

value !== memberPassword
//Error: 'string'이(가) 'UserTypes'과(와) 겹치지 않으므로 이 비교는 의도하지 않은 것 같습니다.`

💥오류내용: 사용자가 회원가입하기 위해 입력하는 value 값은 string 타입인데, memberPassword는 UserTypes타입으로 인식하기 때문에 두 값의 타입이 맞지 않아 비교할 수 없음을 의미한다.

💡제대로 객체의 프로퍼티에 접근하자

✅해결방법: memberPassword로 되어있는 부분을, memberPassword.memberPassword로 수정해주면 된다.

• memberPassword: UserTypes의 객체 전체를 의미
• memberPassword.memberPassword: UserTypes 객체에서 memberPassword 필드에 해당하는 값을 의미 (실제 password 값)

정확히 확인해보기 위해 콘솔값을 띄워보았다.

if (name === "password") {
    setMemberPassword((prevUser) => ({
       ...prevUser,
    memberPassword: value,
    }));
    console.log(memberPassword); // 콘솔확인
}

만약 memberPassword변수가 memberPassword의 값만을 나타낸다면, 콘솔엔 비밀번호값만 떠야 맞지만, 객체를 나타낸다면, memberName과 memberPhone값을 나타낼것이다.

👀Console 확인

• memberPassword 확인 -> 객체 전체의 값이 나타남

• memberPassword.memberPassword 확인 -> password값만 나타남

특히 useState를 난무하는 경우가 발생하며, react의 특성 중 하나인 ‘단방향 데이터 흐름’으로 인해 useState로 상태가 변경된 값을 props를 특정 컴포넌트로 계속 전달 → 전달 → 전달하는 방식이 된다.

즉, 복잡한 상태 관리를 위해 여러 개의 useState를 사용해야 하기 대문에 상태가 복잡해지면 코드가 길어지면서, 컴포넌트 계층 구조가 깊어질수록 상태 전달이 번거롭다는 단점이 발생한다.

나는 이러한 상태관리의 복잡성과 번거로움에 지쳐 이를 해결하고자 Recoil 사용을 도입하였다.

Recoil

Recoil 장점:

• 비동기 처리를 용이하게 지원하여 비동기 데이터 흐름 관리 가능
• 액세스 가능한 상태와 상태 간의 의존성 추적을 제공하여 업데이트를 자동으로 처리 가능
• useState 와 유사하게 생겼으며 [get, set] 기능 또한 동일하여 쉽게 접근할 수 있음

// useState
const [id, setId] = useState(0);

// recoil
const [count, setCount] = useRecoilState(countState);

• Recoil을 사용하기 위해서는 부모 컴포넌트에 <RecoilRoot> 를 사용해야함 - 보통 전역으로 사용하므로 루트 컴포넌트에 넣는게 좋음

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { RecoilRoot } from 'recoil';

ReactDOM.render(
  <React.StrictMode>
    <RecoilRoot>
      <App />
    </RecoilRoot>
  </React.StrictMode>,
  document.getElementById('root')
);

✔️Recoil의 atom

Recoil의 경우, 공식 문서에서 예시 코드를 잘 보여주고 있다.

Atoms | Recoil

✏️Atom이란?

쉽게 말해 react의 단방향 데이터 흐름 특성으로 인해 생기는 불편함을 해소시켜준다. useState를 사용하는 경우, 상태 전달이 번거로웠지만, atom을 이용하여 해당 상태 구조를 정의해주기만 하면, 그 상태를 어느 컴포넌트에서도 쉽게 접근할 수 있다.

• 예시 코드
  • key : atom을 식별하는데 필요한 고유한 문자열
  • default : 초기값

export const todoListState = atom({
  key: 'TodoList',
  default: [],
});

• useState 와 비교

// useState
const [id, setId] = useState(0);

// atom으로 상태 구조 
export const idState = atom({
  key: 'idStateKey',
  default: 0,
});

//recoil
const [id, setId] = useRecoilState(idState);

✔️Recoil의 Selector

Selectors | Recoil

✏️Selector이란?

• atom에서 불가능한 비동기 처리와 복잡한 로직 구현 가능
• 기존에 선언한 atom 을 전/후 처리하여 새로운 값을 반환하거나 기존 atom 값을 수정하는 역할 수행

Selector: derived state(파생된 상태)를 나타내는데 사용 파생된 상태란 기본 상태를 입력으로 받아 변환된 값을 출력하는 상태

• 예시 코드
  • key : 고유한 문자열
  • get : 다른 atom이나 selector의 상태를 읽는 데 사용
    • 다른 atom/selector의 값을 가져와 현재 selector에서 사용할 수 있음
  • set : atom의 상태를 설정하거나 업데이트하는 데 사용
    • 주로 비동기 작업을 수행한 후 atom의 상태를 업데이트할 때 사용
    • 2개의 매개변수: 첫번째- recoil의 상태(textState), 두번째 - 어떤값으로 바뀔지, 즉 새로운 값

// 사용자의 입력을 저장하는 atom
const textState = atom({
  key: 'textState', // 고유한 키
  default: '', // 기본값
});

// 텍스트의 길이를 계산하는 selector
// set 함수: 입력된 텍스트를 대문자로 변환하여 atom을 업데이트
const textLengthSelector = selector({
  key: 'textLengthSelector',
  get: ({get}) => {
    const text = get(textState);
    return text.length;
  },
  set: ({set}, newValue) => {
    // 예를 들어, 텍스트를 대문자로 변경
    const upperCaseText = newValue.toUpperCase();
    set(textState, upperCaseText);
  }
});

• 컴포넌트에서 이용

// import문은 생략

function TextComponent() {
  const [text, setText] = useRecoilState(textState);
  const textLength = useRecoilValue(textLengthSelector);

  return (
    <div>
      <input type="text" value={text} onChange={(e) => setText(e.target.value)} />
      <p>Text Length: {textLength}</p>
    </div>
  );
}

문제 / 제한사항

입출력 예

문제 바로가기

프로그래머스 - Lv1. 달리기 경주

💡풀이방법

• 문제를 쉽게 풀어보면, callings에서 불린 선수 순서대로 해당 선수의 앞 선수와 순서를 바꾸면서 players의 인덱스 값을 갱신
• 접근 방법
  1. players 배열을 딕셔너리(player_list)를 통해 초기 위치 정보를 저장
  2. 반복문을 통해 callings의 배열에 들어가 있는 선수를 차례대로 호출
  3. 현재 불린 선수의 인덱스(current_index) 확인
  4. 현재 불린 선수와 그 앞의 선수 인덱스 swap
  5. player_list의 현재 불린 선수의 인덱스(current_index) -1
     • 현재 불린 선수의 앞에 위치했던 선수의 인덱스는 current_index로 갱신

👀전체코드

def solution(players, callings):
    # 딕셔너리를 통해 선수들의 초기 위치 저장
    player_list = {player: i for i, player in enumerate(players)}
    for i in range(len(callings)):
        # 현재 불린 선수
        calling_player = callings[i]
        # 현재 불린 선수의 위치 (인덱스)
        current_index  = player_list[calling_player]
        # calling 선수와 그 앞의 선수의 순서 변경
        players[current_index], players[current_index - 1] = players[current_index - 1], players[current_index]
        # 변경된 순서로 list에 index값 갱신
        player_list[calling_player] = current_index - 1
        player_list[players[current_index]] = current_index

    return players

문제/제한사항

입력/출력

문제 바로가기

PCCP 기출문제 1번

💡풀이방법

• 입출력 예를 보면, 시간이랑 attacks의 배열 값의 첫번째 인덱스 값(공격시간)이 같은 경우 공격을 받게 된다.
• 변수
  • current : 현재 체력
    • count : 연속체력회복
    • attack_fount : 공격여부

1. 공격시간인 경우 (attacks 배열값의 첫번째 값)
   • 연속회복횟수 = 0
   • 현재 체력 - 공격값
   • 이때 현재 체력 < 0 or == 0인 경우: return -1
2. 공격시간 아닌 경우
   • bandage[1]만큼 체력 회복
   • 연속회복횟수 += 1
   • 이때 연속회복횟수 == bandage[0]인 경우: 현재 체력 + bandage[2]

👀전체코드

def control_health(num, max_):
    print("control")
    if num > max_:
        print("health", max_)
        return max_
    else:
        print("current", num)
        return num

def solution(bandage, health, attacks):
    current = health # 현재 체력
    count = 0 # 연속 성공

    for i in range(1, attacks[-1][0] + 1):
        current_attack = 0
        attack_found = False 

        for subattack in attacks:
            if i == subattack[0]: #시간 초와 공격시간 같은 경우
                current_attack = subattack[1]
                attack_found = True # 공격 받음
                break

        # 공격 받은 경우
        if attack_found:
            current -= current_attack 
            count = 0
            if current < 0 or current == 0:
                return -1

        # 공격 받지 않은 경우 - 회복
        else: 
            count += 1
            # 연속 회복 성공
            if count == bandage[0]:
                current = current + bandage[1] + bandage[2]
                count = 0
            else:
                current += bandage[1]

        # 회복한 체력이 최대 체력을 넘지 않도록 제어
        current = control_health(current, health)

    return current

버튼에 따라서 숫자값이 +1 되거나 -1 되는 기능

HTML

• count_number : 버튼에 의해 값이 바뀌는 text
• button : 버튼에 따라 값 증가, 감소, 리셋

...
  <body>
    <div class="container">
      <div class="title">Counter</div>
      <div class="count_number">0</div>
      <div class="button_block">
        <button class="btn_decrease">DECREASE</button>
        <button class="btn_reset">RESET</button>
        <button class="btn_increase">INCREASE</button>
      </div>
    </div>
  </body>
...

Javascript

• querySelector 을 통해 각 버튼의 class 명을 불러옴

• 각 버튼마다 addEventListener 을 통해 click 이벤트 생성

• textContent로 count 값을 불러와 새로운 숫자 값 부여

  document.addEventListener("DOMContentLoaded", function () {
  const count = document.querySelector(".count_number");
  const btnDec = document.querySelector(".btn_decrease");
  const btnRe = document.querySelector(".btn_reset");
  const btnInc = document.querySelector(".btn_increase");
  
  btnDec.addEventListener("click", function () {
    let num = count.textContent;
    num = Number(num) - 1;
    count.textContent = num;
    colorChange();
  });
  
  btnRe.addEventListener("click", function () {
    count.textContent = 0;
    colorChange();
  });
  
  btnInc.addEventListener("click", function () {
    let num = count.textContent;
    num = Number(num) + 1;
    count.textContent = num;
    colorChange();
  });
  
  function colorChange() {
    if (Number(count.textContent) < 0) {
      count.style.color = "red";
    } else if (Number(count.textContent) > 0) {
      count.style.color = "green";
    } else if (Number(count.textContent) == 0) {
      count.style.color = "black";
    }
  }
  });

구현결과

💭다른 분의 코드

HTML

...
<body>
    <div class="container">
      <div class="title">Counter</div>
      <div class="count_number">0</div>
      <div class="button_block">
        <button class="btn decrease">DECREASE</button>
        <button class="btn reset">RESET</button>
        <button class="btn increase">INCREASE</button>
      </div>
    </div>
  </body>
...

JS

document.addEventListener("DOMContentLoaded", function () {
    let count = 0;
    const value = document.querySelector(".count_number");
    const btns = document.querySelectorAll(".btn");

    btns.forEach(function (btn) {
        btn.addEventListener("click", function (e) {
            const classes = e.currentTarget.classList;
            if (classes.contains("decrease")) {
                count--;
            } else if (classes.contains("reset")) {
                count = 0;
            } else if (classes.contains("increase")) {
                count++;
            }
            if (count < 0) {
                value.style.color = "red";
            } else if (count > 0) {
                value.style.color = "green";
            } else if (count === 0) {
                value.style.color = "black";
            }
            value.textContent = count;
        });
    });
});

구현결과

👀관련개념

1. forEach()

• 배열의 크기만큼 반복 실행되며, 배열 요소의 개수에 따라 콜백 함수가 호출되는 횟수가 결정됨

  const numbers = [10, 25, 30, 45];
  

let foundNumber = null;

numbers.forEach(function(number) { if (number > 30) { foundNumber = number; } });

console.log(foundNumber); // 출력: 45

- `forEach()` 함수는 반환 값이 없으므로 새로운 배열을 생성하지 않음
```js
const numbers = [1, 2, 3, 4, 5];

const result = numbers.forEach(function(number) {
    return number * 2; 
  // 어떤 값을 반환해도 forEach()의 반환 값은 여전히 undefined
});

console.log(result); // 출력: undefined

2. currentTarget 속성

• target : 이벤트가 발생한 바로 그 요소를 직접 가리킴
• currentTarget : 이벤트 리스너(EventListener)를 가진 요소

3. classList

• DOMTokenList 객체로 element의 class 속성을 보여줌

  const classes = element.classList;

• class 추가

  let div = document.querySelector('#content');
  div.classList.add('info');

• class 삭제

  // remove only
  let div = document.querySelector('#content');
  div.classList.remove('visible');
  

// remove multiple let div = document.querySelector('#content'); div.classList.remove('block', 'red');

- 이외에도 replace(교체), contains(존재 확인), toggle(토글) 이 있다.

<br/>

### 4. textContent 
- 텍스트노드를 추가하고, 해당 엘리먼트의 텍스트 값을 반환함

```js
var msg = document.querySelector('p').textContent;
console.log(msg);

// return : Hello World! 

[참고자료]

classList 속성

버튼을 클릭하면 랜덤으로 배경색이 바뀌는 기능

HTML

• container: background
• contenst안에 배경색을 나타내는 p와 클릭 버튼 button 생성

  ...
  <body>
    <div class="container">
      <div class="contents">
        <p>Background Color: <span class="color">mint</span></p>
        <button class="button">Click Me!</button>
      </div>
    </div>
  </body>
  ...

Javascript

• querySelector 를 이용하여 특정 요소를 찾는다.
• 랜덤으로 변경시킬 color값을 colors 에 배열 형태로 집어 넣는다.
• handleClick : 버튼이 클릭되었을 때 실행할 동작 정의
  • randomNumber: colors 경우만큼의 랜덤 숫자
  • background.style.backgroundColor : colors 의 color 로 색상 변경
  • colorText.style.color : colors 의 color 로 텍스트 색상 변경
  • colorText.textContent : colors 의 name 으로 텍스트 변경

$(document).ready(function () {
  $(function () {
    const background = document.querySelector(".container");
    const colorText = document.querySelector(".color");
    const btn = document.querySelector("button");

    const colors = [
      { id: 1, name: "red", color: "#ff0000" },
      { id: 2, name: "orange", color: "#FFA500" },
      { id: 3, name: "yellow", color: "#ffff00" },
      { id: 4, name: "lime green", color: "#32cd32" },
      { id: 5, name: "skyblue", color: "#87CEEB" },
    ];

    const handleClick = () => {
      const randomNumber = Math.floor(Math.random() * colors.length);
      background.style.backgroundColor = colors[randomNumber].color;
      colorText.style.color = colors[randomNumber].color;
      colorText.textContent = colors[randomNumber].name;
    };

    btn.addEventListener("click", handleClick);
  });
});

구현 결과

👀관련 개념

1. querySelector

특정 name,id,class를 제한하지 않고 css선택자를 사용하여 요소를 찾는다. - querySelector(#id) => id 값 id를 가진 요소를 찾는다. - querySelector(.class) => class 값 class를 가진 요소를 찾는다.

2. getElementbyId

괄호 안에 id값을 집어넣어 사용한다.

• html 코드

  <button id="test-btn">바뀌기 전 text</button>

• javascript 코드: test-btn 이라는 id 값을 가진 버튼 요소를 찾고, 해당 버튼을 click 했을 때, 텍스트를 변경하는 코드

  const mode = document.getElementById("test-btn");
  mode.addEventListener("click", function() {
    if (mode.innerText === "바뀌기 전 text") {
        mode.innerText = "바뀐 text!";
    } else {
        mode.innerText = "바뀌기 전 text";
    }
  });

  
  

3. document.body.style.backgroundColor

body 요소의 배경색을 설정하거나 가져온다.

document.body.style.backgroundColor = 'lightblue';

4. Math.floor()

소수 부분을 버림하여 정수 부분만 남긴다.

let number = 5.78;
console.log(Math.floor(number)); // 5

5. Math.random()

0 이상 1 미만의 난수를 반환한다.

// 0부터 5까지의 랜덤 숫자를 얻기
const randomNumber = Math.floor(Math.random() * 6);

// 1부터 5까지의 랜덤 숫자를 얻기
const randomNumber = Math.floor(Math.random() * 5) + 1;

• 간단히 개념만 짚으려는 목적이기 때문에 상세 설명은 생략한다.

✅숫자 올림/내림/반올림 - Math 이용

• Math.ceil : 올림

  // 1.올림
  const ceil_1 = Math.ceil(1); // 1
  const ceil_2 = Math.ceil(1.3); // 2
  const ceil_3 = Math.ceil(1.7); // 2
  

// 2. null 또는 0인 경우 const ceil_4 = Math.ceil(null); // 0 const ceil_5 = Math.ceil(0); // 0

// 3. 음수인 경우 const ceil_6 = Math.ceil(-1); // -1 const ceil_7 = Math.ceil(-1.2); // -1 const ceil_8 = Math.ceil(-1.9); // -1

<br/>

- Math.floor : 내림
```js
// 1.내림
const floor_1 = Math.floor(1); // 1
const floor_2 = Math.floor(1.3); // 1
const floor_3 = Math.floor(2.2); // 2
const floor_4 = Math.floor(2.9); // 2

// 2. null 또는 0인 경우
const floor_5 = Math.floor(null); // 0
const floor_6 = Math.floor(0); // 0

// 3. 음수인 경우
const floor_7 = Math.floor(-1); // -1
const floor_8 = Math.floor(-1.2); // -2
const floor_9 = Math.floor(-1.9); // -2

• Math.round : 반올림

  const round_1 = Math.round(1); // 1
  const round_2 = Math.round(1.3); // 1
  const round_3 = Math.round(1.7); // 2
  

// 2. null 또는 0인 경우 const round_4 = Math.round(null); // 0 const round_5 = Math.round(0); // 0

// 3. 음수인 경우 const round_6 = Math.round(-1); // -1 const round_7 = Math.round(-1.2); // -1 const round_8 = Math.round(-1.9); // -2

---

### ✅parseInt: 문자열 -> 숫자 변환
- 문자열의 첫글자가 숫자가 아닌 경우, `NaN`
- 실수값 -> 정수값으로 변환
- 숫자가 아닌 값은 무시하고, 그 이전의 값까지만 출력
- 2진법, 16진법도 처리 가능
```js
console.log(parseInt("10")); // 10
console.log(parseInt("-10")); // -10
console.log(parseInt("10.9")); // 10
console.log(parseInt(10)); // 10
console.log(parseInt("10nnn13")); // 10
console.log(parseInt("10n")); // 10
console.log(parseInt("k10")); // NaN
console.log(parseInt("10", 2)); // 2 (2진법)
console.log(parseInt("0xF")); // 15 (16진법)

✅tilde() 연산자, double tilde() 연산자

• tilde(~): NOT의 비트연산자

  const a = 5;     // 0000000000000101
  console.log(~a); // 1111111111111010
  // expected output: -6
  

const b = -3; // 1111111111111101 console.log(~b); // 0000000000000010 // expected output: 2

- **double tilde(~~)**: Math.floor()와 같은 역할
    - 속도측면에서 빠름 (`~~`> `Math.floor`> `parseInt`)
```js
console.log(~~(-4.7)) // -4
console.log(~~(3.7))  // 3

✅최대공약수(gcd), 최소공배수(lcm) - 유클리드 호제법

유클리드 호제법: 두 수가 서로 상대방 수를 나누어서 결국 원하는 수를 얻는 알고리즘

• 최대공약수 (gcd)
  • 두 수 A와 B의 공통된 약수 중에 가장 큰 정수

방법1: 재귀 이용⭕

let getGCD = (num1, num2) => (num2 > 0 ? getGCD(num2, num1 % num2) : num1);

방법2: 재귀 이용❌

let getGCD2 = (num1, num2) => {

    while(num2 > 0){
        let r = num1 % num2;
        num1 = num2;
        num2 = r;
    } 

    return num1;
}

• 최소공배수

  • 두 수, 혹은 그 이상의 여러 수의 공통인 배수 중 가장 작은 수

    let getLCM = (num1, num2) =>{
    let lcm = 1;
    

  while(true){ if((lcm % num1 == 0) && (lcm % num2 == 0)) break; lcm++; } return lcm }

✅map, has, set, get

(추후 자세히 정리하여 올릴 예정)

✅문자열 역순 - 내장함수 / 반복

방법1. 내장함수 이용 - split(), reverse(), join()

function reverseString(str) {
    var splitString = str.split(""); 
    var reverseArray = splitString.reverse(); 
    var joinArray = reverseArray.join(""); 
    return joinArray; 
}
reverseString("hello"); // "olleh"

방법2. for문 이용

function reverseString(str) {
    var newString = "";
    for (var i = str.length - 1; i >= 0; i--) { 
        newString += str[i]; 
    }
    return newString; 
}

reverseString('hello');// "olleh"

👀풀이 코드 (20문제)

1. 두 수의 합

def solution(num1, num2):
    answer = -1

    answer = num1 + num2
    return answer

2. 두 수의 차

function solution(num1, num2) {
    var answer = 0;
    answer = num1 - num2
    return answer;
}

3. 두 수의 곱

function solution(num1, num2) {
    var answer = 0;
    answer = num1 * num2
    return answer;
}

4. 몫 구하기

function solution(num1, num2) {
    var answer = 0;
    answer = ~~(num1/num2)
    return answer;
}

5. 두 수의 나눗셈

function solution(num1, num2) {
    var answer = Math.floor(num1 / num2 * 1000)
    return answer;
}

6. 숫자 비교하기

function solution(num1, num2) {
    if (num1 == num2){
        return 1
    } else { return -1 }
}

7. ✔️분수의 덧셈

function cal_gcd(a, b) {
    return a % b === 0 ? b : cal_gcd(b, a % b)
}

function solution(denum1, num1, denum2, num2) {
    let denum = denum1 * num2 + denum2 * num1;
    let num = num1 * num2;
    let gcd = cal_gcd(denum, num);

    return [denum / gcd, num / gcd]
}

8. 배열 두 배 만들기

function solution(numbers) {
    var answer = [];
    for (let num of numbers){
        answer.push(num*2)
    }
    return answer;
}

9. 나머지 구하기

function solution(num1, num2) {
    var answer = num1 % num2;
    return answer;
}

10. 중앙값 구하기

function solution(array) {
    var answer = 0;
    array = array.sort((a,b) => a-b)
    answer = parseInt(array.length / 2)
    return array[answer]
}

11. ✔️최빈값 구하기

function solution(array) {
    let counting = new Map();
    let countArray = new Array;
    let maxKey;
    let maxValue = -1;
    let hasMultipleMaxValues = false;

    for (let i of array){
        if (!counting.has(i)){
            counting.set(i,1);
        }else if (counting.has(i)){
            counting.set(i, counting.get(i)+1);
        }
    }

    for (let [key, value] of counting) {
        if (value > maxValue) {
            maxValue = value;
            maxKey = key;
            hasMultipleMaxValues = false;
        }else if (value === maxValue) {
            hasMultipleMaxValues = true;
        }
    }
    return (hasMultipleMaxValues) ? -1: maxKey;
}

12. 짝수는 싫어요

• n이하의 홀수가 오름차순으로 담긴 배열 출력

  function solution(n) {
    var answer = [];
    for (i=0; i<=n; i++){
        if (i%2 != 0){
            answer.push(i)
        }
    }
    return answer;
  }

13. 피자 나눠먹기(1)

• 일곱조각의 피자를 n명이 나눠먹을때, 모든 사람이 한 조각 이상 먹기 위해 필요한 피자의 수

  function solution(n) {
    return Math.ceil(n/7)
  }

14. 피자 나눠먹기(2)

function solution(n) {
    let pizza = 6;
    while (pizza % n !== 0) {
        pizza += 6
    } return pizza / 6
}

15. 피자 나눠먹기(3)

• 피자 조각 수 slice
• 피자를 먹는 사람의 수 n

function solution(slice, n) {
    var answer = 0;
    return answer = Math.ceil(n/slice);
}

16. 배열의 평균값

function solution(numbers) {
    var num = 0;
    for (i = 0; i < numbers.length; i++){
        num += numbers[i]
    }
    return num/numbers.length;
}

17. 옷가게 할인 받기

• 10만 원 이상 사면 5% 할인
• 30만 원 이상 사면 10% 할인
• 50만 원 이상 사면 20% 할인

  function solution(price) {
    var answer = 0;
    if (price >= 500000){
        return Math.floor(price*0.8)
    }else if (500000 > price && price >= 300000){
        return Math.floor(price*0.9)
    }else if (300000 > price && price >= 100000){
        return Math.floor(price*0.95)
    }else{
        return price
    }
  }

18. 아이스 아메리카노

• 아이스 아메리카노: 한잔에 5,500원
• money로 최대로 마실 수 있는 아메리카노의 잔 수와 남는 돈 출력

  function solution(money) {
    var answer = [];
    answer.push(parseInt(money/5500))
    money = money - 5500 *(parseInt(money/5500))
    answer.push(money)
    return answer;
  }

19. 나이 출력

• 2022년을 기준 출생 연도 출력

  function solution(age) {
    var answer = 0;
    answer = 2023 - age;
    return answer;
  }

20. 배열 뒤집기

function solution(num_list) {
    var answer = [...num_list].reverse();
    return answer;
}

• 참고자료 Math ceil, floor, round JS 최대공약수, 최소공배수

문제/입력/출력

예제 입출력

문제 바로가기

백준 15659번

💡풀이 방법

1. 1부터 검사 -> 끝까지 출력하면, 그 다음 순서 진행
   • 1부터 n까지 반복 (for i in range(1, n+1))
     2. 길이가 m이라면 return
     3. dfs 이용!

💡구현 코드

 n,m = list(map(int,input().split()))
s = []

def dfs():
    if len(s)==m:
        print(' '.join(map(str,s)))
        return

    for i in range(1,n+1):
        if i not in s:

            s.append(i)
            dfs()
            s.pop()
dfs()

2606번

문제/입력/출력

예제 입력 및 출력

문제 바로가기

백준 2606번

💡풀이 방법

우선 해당 문제는 DFS 알고리즘을 이용하였다. 1에서부터 이어지는 모든 컴퓨터들을 방문하여 확인해야한다.

나같이 dfs, bfs 문제에 약한 사람들은 접근 자체를 어떻게 해야할지 막막할 수 있다. 나는 아래와 같은 순서로 접근하였다.

1. 특정 컴퓨터와 이어진 컴퓨터의 숫자값을 각 배열에 추가한다.
   • 예를 들어, 1번이 2번과 이어져 있다면, array_1에 2라는 값을 추가해주고, array_2에는 1을 추가해준다.
     2. 컴퓨터 수+1만큼의 length를 가지는 배열(visit)을 선언해준다.
     • 이는 바이러스가 방문했을 경우: 1, 안했다면: 0이 된다.
   • 모든 인덱스의 default값: 0
     3. dfs를 통해 visit값을 set한다.
     • array_1부터 시작했을 때, array_1에 들어있는 값은 컴퓨터 1번과 이어져있다는 뜻. 즉, 배열1에 저장되어있는 값의 배열에 방문하여 또 다시 visit값을 1로 set.
   • ex. array_1 = [3,4]라면, visit의 3번째, 4번째의 값을 1로 set하고, array_3에 접근하여 해당 배열에 저장된 숫자 값도 visit값을 1로 set

💡구현 코드

1. 특정 컴퓨터와 이어진 컴퓨터의 숫자값을 각 배열에 추가한다.

   n = int(input()) #컴퓨터 수 
   m = int(input()) #간선 (이어진 쌍의 수)
   

graph = [[] for _ in range(n+1)] #컴퓨터 수 +1 만큼의 배열

간선 수만큼 반복

for i in range(m): x, y = map(int, input().split())

graph[x].append(y)
graph[y].append(x)

<br/>

2. 컴퓨터 수(n)+1만큼의 length를 가지는 배열(`visit`)을 선언해준다.
- 컴퓨터 수+1만큼으로 지정하는 이유: 컴퓨터 1번이 방문한 값을 확인하려면 인덱스 값과 동일하게 맞춰주는 것이 편하기 때문 (인덱스 1번 == 컴퓨터 1번이 방문한 컴퓨터)
```python
visit = [0] * (n+1)

3. dfs를 통해 visit값을 1로 set한다.

   def dfs(graph, v, visited):
    visit[v] = 1
    for i in graph[v]:
        if visit[i] == 0:
            dfs(graph, i, visited)
   

dfs(graph, 1, visit)

---

### 👀전체 코드
```python
n = int(input())
m = int(input())

graph = [[] for _ in range(n+1)]

for i in range(m):
    x, y = map(int, input().split())

    graph[x].append(y)
    graph[y].append(x)

visit = [0] * (n+1)

def dfs(graph, v, visited):
    visit[v] = 1
    for i in graph[v]:
        if visit[i] == 0:
            dfs(graph, i, visited)

dfs(graph, 1, visit)
print(visit.count(1) - 1)

📁HTML

Hyper Text Markup Laungauge

📁HTML 문서 골격

DOCTYPE이란?

쉽게 말해, 문서의 타입을 지정

• 세가지 문서 유형: HTML5, XHTML, HTML
• 일관된 렌더링을 위해 DOCTYPE 명시하는 것이 중요

<head>의 meta 태그

• '데이터에 대한 데이터', '어떤 목적으로 만들어진 데이터'를 의미
• 인코딩 방식, 뷰포트 지정뿐만 아니라 더 많은 작업 수행

📁시맨틱 태그 (Semantic tag)

• 의미에 맞는 태그를 사용해 문서를 작성하는 것
• 특별한 의미가 없는 <div> 태그 대신 <section> <article> <nav> <footer> <aside>와 같은 태그를 상황에 따라 사용하는 것

<article> vs <section>

1. ** <article>** : 요소 자체가 하나의 의미 있는 콘텐츠 블록 영역
   • 독립적으로 배포되거나 재사용
2. ** <section>** : 페이지의 단일 부분을 그룹화하는데에 유용
   • 요소의 콘텐츠를 함께 묶는 것이 합리적일 때 사용

📁SEO (Search Engine Optimization)

사이트를 잘 찾기 쉽도록하는 검색 엔진 최적화

1. 시멘틱하게 HTML 작성
2. <title>을 놓치지 말고 적절하게 작성
3. <meta name="description"> 이용
4. <meta charset="UTF-8"> 이용

📁HTML 요소 분류

• 요소(3가지): Content(내용), Start Tag(시작 태그), End Tag(종료 태그)

인라인 vs 블록

1. 인라인 요소 (inline)

   • 텍스트나 이미지의 크기에 맞는 필요한 공간만을 차지
   • 높이나 너비를 지정할 수 없으며, 줄 내부 어디서든 시작
   • ex) <span> <button> <img>

2. 블록 요소 (block)

   • 이전 요소와 상관없이 개행해 새로운 줄에서 시작
   • 너비는 좌우 양쪽으로 부모의 100% 차지
   • ex) <div> <article> <form>

• 이러한 HTTP의 문제점을 HTTPS 프로토콜은 SSL(보안 소켓 계층)을 사용함으로써 해결
• SSL - 서버와 브라우저 사이에 안전하게 암호화된 연결을 만들 수 있게 도와주고 서버 브라우저가 민감한 정보를 주고받을 때, 이가 도난 당하는 것을 막아줌
  • 사용자가 사이트에 제공하는 정보를 암호화

• HTTPS는 TLS(전송 계층 보안) 프로토콜을 통해서도 보안 유지
  • TLS - 데이터 무결성을 제공하기 때문에 데이터가 전송 중에 수정되거나 손상되는 것을 방지, 인증 기능도 제공

📁출처 (URL의 구성)

• Protocol + Host + Port 가 같으면 동일 출처(Origin)이라고 한다.

📁CORS (Cross-Origin Resource Sharing, 교차 출처 자원 공유)

• 출처가 다른 자원들을 공유한다는 뜻
• 한 출처에 있는 자원에서 다른 출처에 있는 자원에 접근하도록 하는 개념

다른 출처의 위험성

• CORS 정책이 없고 모든 다른 출처 요청이 가능한 경우
• 굉장히 중요한/유용한 정보를 담고 있는 사이트도 열람 가능

• 예시⤵️

  🗣 홈페이지를 서핑하고 있는데, script가 심어진 evil.com 페이지를 열었다고 가정하자. 굉장히 유용한 정보를 담고 있는 사이트이지만, 페이지를 열면서 script가 실행되어 은행에 'Delete /account'를 요청하도록 되어 있다. 결국 AJAX 호출로 은행 API를 호출하여 나의 은행 계좌를 삭제해버리는 사고가 발생한다.

📁SOP (Same-Origin Policy, 동일 출처 정책)

• 다른 출처로부터 조회된 자원들의 읽기 접근을 막아 다른 출처 공경을 예방
• 단, 다른 출처에서 얻은 이미지를 담는 <img>, 외부 주소를 담는 <link> 같은 여러 태그들을 허용

• 서버/클라이언트 간 웹페이지 같은 자원을 주고받을 때 쓰는 통신 규약
• WWW 상에서 웹페이지나 이미지 같은 정보를 요청과 응답에 의해 주고받는 프로토콜

📁HTTP 특징

1. Request & Response

- 클라이언트가 서버로 HTTP 요청 보내면 서버는 요청에 대한 결과를 만들어서 응답

2. Connectionless (비연결성)

- 클라이언트와 서버가 한 번 연결을 맺은 후, 클라이언트 요청에 대해 
서버가 응답을 마치면 맺었던 연결을 끊어버리는 성질

• 장점: 연결 유지를 위한 리소스를 줄이면 더 많은 연결을 할 수 있음
• 단점: 서버는 클라이언트를 기억하고 있지 않기 때문에, 매번 새로운 연결을 시도/해제의 과정을 거쳐야하므로 연결 및 해제에 대한 오버헤드 발생

3. Stateless (무상태)

클라이언트: 전에 뭘 보냈었지? 
서버: 전에 뭘 보냈었지?

• HTTP에서 요청을 보낼 때 마다 새로운 응답이 생성
• 클라이언트와 서버가 서로 연결되어 있는 것이 아니기 때문에 각각의 통신이 독립적
• 서버가 클라이언트의 상태를 유지하지 않기 때문에 요청을 보낼 때마다 모든 데이터를 매번 보내야함
• 클라이언트가 서버에 요청할 때 데이터를 담아서 보내기 때문에 아무 서버나 호출해도 됨

Connectionless 단점 극복 - KeepAlive

• 오버헤드를 줄이기 위해 HTTP1.1에서 KeepAlive 제공하여 한번에 여러 요청-응답 가능
• 지정된 시간동안 서버와 클라이언트 사이에서 패킷 교환이 없을 경우, 상대방의 안부를 묻기 위해 패킷을 주기적으로 전송 → 이때 반응이 없으면 접속을 끊게 됨
  • 주기적으로 클라이언트의 상태를 체크 → 근본적인 해결책 X

Stateless 단점 극복 - (1) Cookie

🍪 stateless이기 때문에, 상태값을 사용할 수 없음 → 단점보완 / 대안책?

• 쿠키(Cookie): 서버에서 응답으로 보내진 Set-Cookie 라는 헤더 필드에 의해 쿠키를 클라이언트에 보존하게 됨
  • 클라이언트가 다음번에도 같은 서버로 요청을 보내면 자동적으로 쿠키를 싣어서 송신하고, 서버는 클라이언트가 같이 보낸 쿠키를 통해 상태를 관리하고 체크하여 그에 맞는 응답을 보냄

Stateless 단점 극복 - (2) Session

🌐 쿠키는 사용자 정보가 브라우저에 저장되기 때문에 보안에 취약함 → 단점보완

• 세션(Session): 브라우저가 아닌 서버에서 사용자 정보를 저장하는 구조
  • 서버의 메모리를 차지하게 되고, 만약 동시 접속자 수가 많은 서비스의 경우, 서버 과부화의 원인이 될 수 있음

👀쿠키와 세션 비교(상대적)

Stateless 단점 극복 - (3) Token 사용 (OAuth, JWT)

🔒 쿠키와 세션의 단점보완

• Token 기반의 인증 방식 : 보호할 데이터를 토큰으로 치환하여 원본 데이터 대신 토큰 사용
  • 중간에 공격자로부터 토큰이 탈취당하더라도 데이터에 대한 정보를 알 수 없으므로, 보안성이 높음
  • 대표적으로는 OAuth와 JWT이 있습니다.

문제 / 입력 / 출력

예제 입력 및 출력

문제 바로가기

백준 1018번

💡풀이 방법

.

1. n, m 값 입력받기

2. 길이 m으로 이루어져있는 문자열 B, W을 n개 입력받기

3. 각 입력받은 문자열 한 줄씩 검사

   3-1. 만약 문자열이 'BBBBBBBBBWBW'로 이루어질 때, (1)보다 (2)가 더 문자열 바꿀 경우가 적기 때문에 (2)가 더 효율적이며 최솟값을 출력함

   3-2. 체스판이 8X8이므로, 주어진 문자열 길이에 따라 검사 횟수가 달라짐 ex) 문자열이 12일 경우, 총 검사하게 될 횟수는 5개

    (BBBBBBBB, BBBBBBBB,BBBBBBBW, BBBBBBWB, BBBBBWBW)

   

4. i,j를 기준으로 (a,b)에서 a+b값이 짝수인 경우 같은 문자이고, 홀수인 경우 다른 문자이다.

💡구현 코드

n, m = map(int, input().split())
board = []
result = []

for _ in range(n):
    board.append(input())

for i in range(n - 7):
    for j in range(m - 7):
        # 첫번째 문자열이 B인 경우와 W인 경우를 나눠서 검사
        first_B = 0
        first_W = 0

        for a in range(i, i + 8):
            for b in range(j, j + 8):
                if (a + b) % 2 == 0:
                    # i+j과 a+b의 값 차이가 짝수일 경우 같은 값을 가짐
                    if board[a][b] != 'B':
                        first_B += 1
                    if board[a][b] != 'W':
                        first_W += 1
                else:
                    if board[a][b] != 'W':
                        fi rst_B += 1
                    if board[a][b] != 'B':
                        first_W += 1

        result.append(first_B)
        result.append(first_W)

print(min(result))

Firebase에 대해 간단한 개념을 우선 정리해보자.

Firebase : 실시간 DB, 인증, 스토리지, 분석 등 다양한 기능을 제공하는 모바일/웹앱 개발 플랫폼

1) Authentication: 간편한 다중 플랫폼 로그인 - 이메일 인증, 소셜미디어 계정 인증, 전화번호 인증방식 제공 - 보안강화, 사용자 인증 과정 안전하게 처리 2) FireStore: NoSQL DB - Firebase에서 제공하는 NoSQL형식의 클라우드 DB - 실시간 데이터 동기화 지원 (ex. 실시간 채팅) 3) Storage: 사진 및 동영상 저장 - 사용자 파일 저장 및 공유, 강력한 보안 4) Hosting: 웹앱 호스팅 - 정적 및 동적 콘텐츠 모두 호스팅 가능, 웹앱 간단 배포

장점

• 백엔드 서버 없이 개발 가능
• 실시간 데이터베이스
• Google 플랫폼 통합

단점

• 쿼리 제한
• 비용
• migration 어려움

코드 살펴보기

👀Firebase 연동

• firebaseConfig
  • Firebase 연동에 필요한 값들은 모두 .env에 따로 저장해두었다.
  • Firebase앱의 구성 정보를 포함하는 JS 객체
  • Firebase를 사용하여 웹 애플리케이션을 초기화하고 firebase 앱 인스턴스를 설정하는 typescript 코드
  • Firebase 프로젝트 구성정보 포함
  • 환경변수를 통해 동적으로 코드

import { initializeApp, FirebaseApp, getApp } from "firebase/app";
import "firebase/auth";

export let app: FirebaseApp;

const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_ID,
};

try {
  app = getApp("app");
} catch (e) {
  app = initializeApp(firebaseConfig, "app");
}

const firebase = initializeApp(firebaseConfig);

export default firebase;

• Firebase 앱 인스턴스를 초기화 시도
  • app이라는 이름의 Firebase 앱이 존재하지 않는 경우, initializeApp을 통해 Firebase 앱 초기화

    try {
    app = getApp("app");
    } catch (e) {
    app = initializeApp(firebaseConfig, "app");
    }

👀login 상태 확인

• 사용자가 login인 상태: 로그인 상태임을 콘솔에 띄움
• 사용자가 logout인 상태: 로그아웃 상태임을 콘솔에 띄움

import {getAuth, onAuthStateChanged} from "firebase/auth"

//mount시 useEffect를 통해 초기 사용자 로그인 상태 확인
useEffect(()=>{
  onAuthStateChanged(auth, (user)=>{
    if(user) {
      console.log("로그인 상태")
    }else {
      console.log("로그아웃 상태")
    }
    setInit(true)
  })
}, [auth]);

• onAuthStateChanged: Firebase Authentication 서비스에서 제공하는 메서드, 인증 상태가 변경될때마다 호출되는 리스너 설정
  • 사용자 객체를 인자로 받는 콜백 함수 등록
  • 사용자의 로그인 상태 확인 후 적절한 작업 수행
  • 로그인 상태일 때는 사용자의 정보를, 아니라면 null return

👀signUp 구현

• email: 정규식을 이용하여 입력값 형식 제한
• password: 8자리 이상의 입력값으로 제한
• passwordConfirm: password값과 일치해야함

  //회원가입 입력값 관리
  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const {
      target: { name, value },
    } = e;

    if (name === "email") {
      setEmail(value);
      console.log(value);
      //email 정규식
      const emailRegex = /^[a-zA-Z0-9-_]+@[a-zA-Z.]+$/;

      if (!value?.match(emailRegex)) {
        setError(
          "이메일 형식이 올바르지 않습니다. 영문 대소문자, 숫자와 특수기호(_),(-),(@)만 사용 가능합니다."
        );
      } else {
        setError("");
      }
    }
    if (name === "password") {
      setPassword(value);

      if (value?.length < 8) {
        setError("비밀번호는 8자리 이상으로 입력해주세요.");
      } else if (passwordConfirm?.length > 0 && value !== passwordConfirm) {
        setError("비밀번호와 비밀번호 확인 값이 다릅니다.");
      } else {
        setError("");
      }
    }
    // 비밀번호 확인 (passwordConfirm)도 위와 비슷한 형태

  //'회원가입하기' 버튼 클릭 시  
  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    try {
      const auth = getAuth(app);
      await createUserWithEmailAndPassword(auth, email, password);
      toast.success("회원가입에 성공하였습니다.");
      navigate("/");
    } catch (error: any) {
      toast.error(error?.code);
      console.log(error);
    }
  };

✔️회원가입 input값 관리

• *이벤트 객체 타입 지정 부분 *

  e: React.ChangeEvent<HTMLInputElement>

• 비구조화 할당
  • e로부터 taget속성 추출
  • input의 name과 input의 value(현재 입력값)

    const {
    target: { name, value },
    } = e;

비구조화 할당 : JS나 TypeScript와 같은 프로그래밍언어에서 변수를 객체나 배열에서 추출하여 사용하는 문법 -> 객체나 배열의 내부 속성이나 요소를 간편하게 변수에 할당. 할당하려는 변수의 이름과 일치하는 속성이나 요소를 추출하여 할당

const person = {name: "John", age: 30}
const {name, age} = person;
console.log(name) //John
console.log(age) //30

• email input값

  • name이 email인 경우

  • 입력된 값으로 email값을 설정 setEmail

  • 만약 입력된 값이 emailRegex(이메일 정규식)에 벗어날 경우 error

    if (name === "email") {
    setEmail(value);
    const emailRegex = /^[a-zA-Z0-9-_]+@[a-zA-Z.]+$/;
    
    if (!value?.match(emailRegex)) {
      setError(
          "이메일 형식이 올바르지 않습니다. 영문 대소문자, 숫자와 특수기호(_),(-),(@)만 사용 가능합니다."
      );
    } else {
      setError("");
    }
    }

✔️'회원가입하기' 버튼 클릭 시 (onSubmit)

• React에서 사용자가 form을 제출할 때 실행될 이벤트 핸들러

  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {}

• e.preventDefault() 기본 제출 동작을 중단, form이 실제로 서버 제출되는 것을 중단하고 JS 함수가 대신 실행되도록 함

• createUserWithEmailAndPassword 입력된 email, password를 해당 메서드에 전달하여 회원가입에 성공할 경우 toast.success를 띄우고, useNavigate를 통해 홈화면으로 가도록 구현

  await createUserWithEmailAndPassword(auth, email, password);
  toast.success("회원가입에 성공하였습니다.");
  navigate("/");

👀login 구현

• login input값의 onChange는 회원가입과 매우 비슷한 형태로 구현됨

• '로그인하기'버튼을 클릭했을 때 동작하는 onSubmit

  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    try {
      const auth = getAuth(app);
      await signInWithEmailAndPassword(auth, email, password);
      toast.success("로그인에 성공하였습니다.");
    } catch (error: any) {
      toast.error(error?.code);
      console.log(error);
    }
  };

• signWithEmailAndPassword 입력한 email과 password값을 해당 메서드로 전달

👀logout 구현

• logout 버튼 클릭 시

  const onSignOut = async () => {
  try {
    const auth = getAuth(app);
    await signOut(auth);
    toast.success("로그아웃 되었습니다.");
  } catch (error: any) {
    console.log(error);
    toast.error(error?.code);
  }
  };

문제

• 전화번호부에 적힌 전화번호 중, 한 번호가 다른 번호의 접두어인 경우가 있는지 확인하려 합니다.

• 전화번호부에 적힌 전화번호를 담은 배열 phone_book 이 solution 함수의 매개변수로 주어질 때, 어떤 번호가 다른 번호의 접두어인 경우가 있으면 false를 그렇지 않으면 true를 return 하도록 solution 함수를 작성해주세요.

제한사항

• phone_book의 길이는 1 이상 1,000,000 이하입니다.
  • 각 전화번호의 길이는 1 이상 20 이하입니다.
  • 같은 전화번호가 중복해서 들어있지 않습니다.

문제 바로가기

프로그래머스 - 전화번호 목록

💡풀이 코드

1. 받은 문자열을 sort

2. phone_book[i+1]에서 phone_book[i]만큼 자른 값이 phone_book[i]와 같은 경우, 접두어 -> false 반환 -> 아니라면 true 반환

   function solution(phone_book) {
    phone_book.sort(); 
   
    for (let i = 0; i < phone_book.length - 1; i++) {
        if (phone_book[i] === phone_book[i + 1].substring(0, phone_book[i].length)) {
        return false;
        }
    }
    return true; 
   }