Today 요약

1. 자바스크립트 강의
2. 코딩 테스트

---

1. What I Learned?

자바스크립트 강의

실행 컨텍스트

실행 컨텍스트는 전역 공간, 함수 등에서 생성되며 변수 환경, 외부 참조, this 바인딩 등의 정보를 담고 있습니다.

코드가 실행되는 동안의 환경입니다.

실행 컨텍스트의 환경 레코드에는 변수나 함수 등의 정보를 담고 있고, 외부 참조는 현재 실행 컨텍스트가 연결되어 있는 외부 실행 컨텍스트의 정보를 담고 있습니다. 그리고 this 바인딩에는 현재 실행 컨텍스트가 참조하고 있는 this의 정보가 담겨있습니다.

클론 코딩 강의

SWR

리액트 쿼리처럼 서버와 통신하며 데이터를 효율적으로 가지고 와서 사용할 수 있는 상태관리 라이브러리

import axios from 'axios'

const fetcher = (url: string) =>
  axios.get(url, { withCredentials: true }).then((response) => response.data)

export default fetcher

const { data: userData, error, mutate } = useSWR('/api/users', fetcher)

사용 방법은 리액트 쿼리와 유사하다. 서버에서 데이터를 가지고 오기 위해서 요청하는 건 주로 get 요청이니까 fetcher 함수를 위와 같이 작성하고, 그걸 useSWR의 인자로 전달한다.

withCredentials는 쿠키에 저장된 정보를 api 요청에 담아서 보내기 위해 설정한다.

2. What I did?

코딩 테스트

A로 B 만들기

문제 설명

문자열 before와 after가 매개변수로 주어질 때, before의 순서를 바꾸어 after를 만들 수 있으면 1을, 만들 수 없으면 0을 return 하도록 solution 함수를 완성해보세요.

---

제한사항

• 0 < before의 길이 == after의 길이 < 1,000
• before와 after는 모두 소문자로 이루어져 있습니다.

---

입출력 예

before	after	result
"olleh"	"hello"	1
"allpe"	"apple"	0

---

1. 문제 이해하기

before가 가지고 있는 문자를 이용해서 after를 만들 수 있느냐 아니냐이기 때문에 문제 자체를 이해하는 건 크게 어렵지 않았다.

2. 접근 방법

단순하게 before와 after의 문자 자체를 배열로 만든 다음에 정렬하고 그 둘을 비교했을 때 일치하면 문제가 해결될 것 같다.

3. 코드 설계

after = “olleh” 의 문자를 split를 이용해서 배열로 변환

배열로 변환된 두 가지를 비교하기 위해서는 join을 이용해서 문자열로 변환한 뒤 일치하는 지 확인

일치한다면 1을 반환하고 일치하지 않는다면 0을 반환하게 한다.

4. 코드 구현

function solution(before, after) {
  let beforeArr = before.split('')
  let afterArr = after.split('')

  if (beforeArr.sort().join() !== afterArr.sort().join()) {
    return 0
  }
  return 1
}