원티드 프론트엔드 프리온보딩 (22.12.19 월 ~ 23.01.20 금) 1. 렌더링📍렌더링이란?브라우저에서의 렌더링 : DOM 요소를 계산하고 그려내는 것- JavaScript DOM API 가 담당 React의 렌더링- 실제 렌더링 과정은 React에서 대신 처리해주고, 개발자는 UI 를 설계하는데 집중 (선언형 프로그래밍)- React 내부에서 렌더링이 어떻게 실행되는지 이해하고, 이를 최적화할 필요가 있다 📍React에서 리렌더링이 발생하는 시점⭐state가 변했을 때⭐특정 컴포넌트의 state가 변하면, 해당 컴포넌트와 하위 컴포넌트가 모두 리렌더링됨 state를 사용하는 이유- state(변경될 수 있는 데이터)를 UI와 연동하기 위해서 📍React의 렌더링 과정1️⃣기존 컴포넌트의 U..

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅타입과 인터페이스는 대개 공통적이지만, 차이점도 있다 📍타입 확장 : 둘 다 가능 type TState = { name: string; capital: string; } interface IState { name: string; capital: string; } // 인터페이스는 타입 확장 가능 interface IStateWithPop extends TState { population: number; } // 타입도 인터페이스 확장 가능 type TStateWithPop = IState & { population: number; }; IStateWithPop 과 TStateWithPop 는 동일 📍Class implements : 둘 다 ..

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅매개변수나 반환 값에 타입을 명시하는것 보다 함수 표현식 전체에 타입을 할당하는 것이 좋다 (재사용성, 간결성 증가) ✅다른 함수의 시그니처를 참조하려면 typeof (함수 이름) 을 사용하면 된다 📍statement (문) vs expression (표현식) 함수를 문, 표현식 방법으로 정의할 수 있다 // Statement function rollDice1(sides: number): number { /* ... */ } // Expression const rollDice2 = function(sides: number): number { /* ... */ } const rollDice3 = (sides: number): number =>..

📍문제 링크https://www.acmicpc.net/problem/1475 1475번: 방 번호첫째 줄에 다솜이의 방 번호 N이 주어진다. N은 1,000,000보다 작거나 같은 자연수이다.www.acmicpc.net 📍알고리즘 분류- 구현 📍문제 풀이1 ~ 1,000,000 사이의 숫자가 주어진다. 0 ~ 9 의 숫자들이 쓰인 횟수 중 가장 많은 횟수를 구하라- 단, 6, 9 는 뒤집어서 서로 대체할 수 있다 각 숫자들이 쓰인 횟수를 딕셔너리에 기록하고, 6과 9의 경우, 평균을 구해 올림하여 기록한다.그리고 딕셔너리를 순회하며 최댓값을 구하면 된다 📍코드 (Python)import math# 숫자를 입력받고 하나씩 쪼개 배열에 저장num_arr = list(map(int, list(input..

📍참고 https://www.aurigait.com/blog/drag-and-drop-in-react-without-using-any-external-library/ Drag and Drop in React without using any External Library - Auriga IT Drag and Drop feature in React with little effort using useRef hook. Here we'll see it in action by implementing an easy drag and drop list. www.aurigait.com https://developer.mozilla.org/ko/docs/Web/API/HTML_Drag_and_Drop_API HTML 드래그..

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍잉여 속성 체크 (Excess Property Checking) 객체 리터럴을 변수에 할당하거나 함수에 매개변수로 전달할 때, 정의된 타입 이외의 타입이 할당되는 것을 방어 - 객체 리터럴에서 타입 안정성을 확보하는 수단 - 구조적 타이핑 (aka. 덕 타이핑) 과 배치되는 개념인가 싶지만... - 예시 interface Room { numDoors: number; ceilingHeightFt: number; } // 타입이 Room 인 변수에 객체 리터럴 할당 // 1. 해당 타입의 속성이 있는지, // 2. 그 외의 속성은 없는지 확인 : Excess Property Checking const r: Room = { numDoors: 1, cei..

원티드 프론트엔드 프리온보딩 (22.12.19 월 ~ 23.01.20 금) 📍필요없는 것들은 제거하기 1️⃣불필요한 파일 Create React App 의 경우 - reportWebVitals 등.. 2️⃣사용하지 않는 변수와 import 제거 - 뿐만 아니라, 사용하지 않는 라이브러리도 제거 📍상수화를 통한 가독성, 유지보수성 향상 예를 들어, signIn, signUp 같은 문자열 state에 따라 조건부 렌더링을 할 때, Snake Case로 상수를 만들어 사용하는 것이 좋다 - 문자열을 전부 바꿔야 하는 경우가 있을 수 있는데, 하나만 놓쳐도 에러를 유발한다 - 상수는 변하지 않는 값이므로 state가 아님 - 예시 const SIGN_IN = "SIGN_IN"; // 최상단에 배치 const S..

📍개요Take Me Home, Country Roads 노래 가사를 워드 클라우드로 만들어 어떤 단어가 자주 등장하는지 알아보기 📍전체 코드import wordcloudfrom matplotlib import pyplot as pltsample_text = """Almost heaven, West VirginiaBlue Ridge Mountains, Shenandoah RiverLife is old there, older than the treesYounger than the mountains, growin' like a breezeCountry roads, take me homeTo the place I belongWest Virginia, mountain mamaTake me home, count..