이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅같은 코드를 반복하지 말라 (DRY : Don't repeat yourself) 원칙을 타입에도 적용해야 한다 ✅타입 인덱싱, extends를 통해 인터페이스 필드의 반복 줄일 수 있음 ✅추가로 keyof, typeof, 매핑된 타입을 활용 ✅제네릭 타입은 타입을 위한 함수이며 제네릭 매개변수를 제한하기 위해 extends 활용 가능 ✅Pick, Partial, ReturnType 같은 유틸리티 타입에 익숙해야 함 📍코드 반복 줄이기 1 사용한 개념 1️⃣타입 인덱싱 2️⃣매핑된 타입 3️⃣Pick 유틸리티 타입 interface State { userId: string; pageTitle: string; recentFiles: string..

📍요약- AWS CLI를 통해 빌드한 폴더 S3에 올리기aws s3 sync build/ s3://bucketname(로컬에서 하위 디렉토리에 build가 있을 경우) 📍과정1️⃣AWS CLI 검색하여 Windows 용 64비트 AWS CLI 프로그램 설치- 설치 후 aws --version 입력하여 설치가 잘 됐는지 확인 2️⃣터미널 접속 (프로필 생성 단계)- aws configure --profile 입력- AWS 액세스 키와 비밀번호 입력- 기본 지역 ap-northeast-2 입력- output format은 그냥 엔터 입력 3️⃣S3 버킷 리스트 확인aws s3 ls 4️⃣S3 버킷에 업로드(복사)aws s3 cp  ⭐cp : 파일 하나만 다룸⭐sync : 폴더 단위 다룸 5️⃣S3 버..

📍요약1️⃣버킷 기본 설정 그대로 만들기2️⃣정적 파일들 업로드3️⃣정적 웹사이트 호스팅 설정4️⃣버킷 정책 생성 완료5️⃣URL 접속 📍버킷 만들기 클릭- 나머지는 기본 설정대로 진행하고, 태그에 키, 밸류 페어 추가 📍S3에 업로드- 폴더 만들고 업로드 클릭- 이미지 파일 추가- 속성 -> 스토리지 클래스 -> 스탠다드 선택 (기본값) -> 업로드- 이후 파일명 클릭 -> 열기 선택하면 이미지 확인 가능- 객체 URL 클릭 -> 실패 (public access 불가능하게 기본설정 했기 때문) 📍퍼블릭 액세스 설정- 버킷 설정 -> 권한 -> 퍼블릭 액세스 차단 편집- 모든 퍼블릭 액세스 차단 해제 후 저장 -> 확인 입력- 권한 -> ACL(access control list) 편집 -> 모든..

📍문제 링크 https://www.acmicpc.net/problem/13565 13565번: 침투 첫째 줄에는 격자의 크기를 나타내는 M (2 ≤ M ≤ 1,000) 과 N (2 ≤ N ≤ 1,000) 이 주어진다. M줄에 걸쳐서, N개의 0 또는 1 이 공백 없이 주어진다. 0은 전류가 잘 통하는 흰색, 1은 전류가 통하지 않 www.acmicpc.net 📍알고리즘 분류 - 그래프 이론 - 그래프 탐색 - 너비 우선 탐색 - 깊이 우선 탐색 📍문제 풀이 높이 m, 너비 n 의 사각형이 주어질 때, 1번째 row의 0이 마지막 row의 0까지 연결되어 있는지를 확인 DFS를 통해 연결된 경로가 있으면 바로 YES를 출력하면 된다 📍코드 (JavaScript) const [in1, ...map] = re..

원티드 프론트엔드 프리온보딩 (22.12.19 월 ~ 23.01.20 금) 📍횡단 관심사란? - Cross-cutting concerns - 어플리케이션 내 여러 핵심 비즈니스 로직들에 걸쳐서 실행되어야 하는 동작들 예시 - 인증 & 인가 - 로깅 (로그 남기기) - 트랜잭션 처리 - 에러 처리 📍HTTP 통신에서 횡단 관심사 처리하기 - 프론트엔드에서 가장 흔하게 생각할 수 있는 횡단관심사는 인증 & 인가 - 백엔드 서버와 통신할 때 HTTP 프로토콜을 이용 - HTTP 프로토콜의 가장 큰 특징 : stateless 즉, 매번 별개의 요청으로 취급하며, 매번 header나 body에 값을 채워서 보내줘야 함 - 인증 예시 - httpClient.js class HttpClient { // 1. base..

원티드 프론트엔드 프리온보딩 (22.12.19 월 ~ 23.01.20 금) 1. 클린 코드 📍프로그램 복잡도와 개발 생산성은 반비례 - 프로그램 복잡도가 올라갈 수록 코드 작성 및 수정에 걸리는 시간이 증가 - 개발 초기 단계부터 좋은 코드를 사용하지 않으면 Snowball로 인해 개발 생산성 악화에 Drive - 그럼 좋은 코드란? 2. 관심사의 분리(Seperation of Concerns), SoC 📍관심사란? 하나의 모듈이 수행하고자 하는 목적 (모듈 : 함수, 클래스 등의 단위) - 관심사의 분리란, 각 모듈들이 하나의 관심사만 처리하도록 모듈을 분리하는 것 📍관심사를 분리하는 이유? - 소프트웨어의 특정 부분이 변경되는 이유를 한가지로 제한하기 위해 - 소프트웨어는 유지보수(기존의 기능을 수정..

📍문제 링크 https://www.acmicpc.net/problem/16173 16173번: 점프왕 쩰리 (Small) 쩰리는 맨 왼쪽 위의 칸에서 출발해 (행, 열)로 나타낸 좌표계로, (1, 1) -> (2, 1) -> (3, 1) -> (3, 3)으로 이동해 게임에서 승리할 수 있다. www.acmicpc.net 📍알고리즘 분류 - 구현 - 그래프 이론 - 브루트포스 - 그래프 탐색 - 너비 우선 탐색 - 깊이 우선 탐색 📍문제 풀이 구현으로도 해결할 수 있는 문제이지만 DFS를 사용해서 풀자 - 크기가 작아서 구현으로 해결 가능 DFS를 사용하는 이유 - 빠르게 목표 지점에 도달하는 경로 하나만 찾으면 프로그램을 종료할 수 있어서 📍의사 코드 /* 1. 행렬 형태로 주어진 데이터를 2차원 배열로..

원티드 프론트엔드 프리온보딩 (22.12.19 월 ~ 23.01.20 금) 1. useEffect useEffect에서 의존성 배열 자세히 살펴보기 📍의존성 배열이란? 의존성이란? - A라는 요소가 온전히 동작하기 위해서 B, C 등의 다른 요소들을 필요로 한다면 - A는 B, C 등에 의존하고 있다고 표현 ⭐B, C 등이 A의 의존성이 된다 useEffect 의 의존성 배열 - effect 함수가 사용(의존하고 있는) 외부 값들의 모음 📍의존성 관점에서 useEffect 제대로 사용하기 ⭐가능한 의존성 적게 만들기 ⭐setState 함수도 의존성 배열에 넣어야 - bad // 많은 의존성 사용 function App() { const [count, setCount] = useState(0); useEf..