본문 바로가기

분류 전체보기

 (1092)
[프로그래머스] 예상 대진표 - JavaScript 풀이 본 게시물은 프로그래머스의 연습 문제 풀이입니다. 저작권은 (주) 그랩에게 있습니다 자바스크립트 코드(나의 풀이) function solution(n,a,b) { let matchNumber = 0; ​ while (true) { // 경기 수 더하기 matchNumber += 1; // 각 선수가 이겼을 때 받게 되는 번호 넣기 a = Math.ceil(a / 2); b = Math.ceil(b / 2); // 받게 되는 번호가 같으면 중단 if (a === b) break; } ​ return matchNumber; } Reference 프로그래머스
WIL(22.08.07) 내가 배운것 프로그래머스 문제 풀이 차주에 진행할 것 이직 준비 프로그래머스 문제 풀이 Nomad Coders - React JS 마스터클래스 완강 Effective TypeScript 팀 개발을 위한 Git, GitHub 시작하기 React 공식 문서 읽기 앞으로 진행할 것 React 벨로퍼트와 함께하는 모던 리액트 Hook Redux TypeScript OPP Design Pattern Test 시각적 회귀 Refactoring(마틴 파울로) 2판 읽기 외출난이도 리팩터링
[프로그래머스] 폰켓몬 - JavaScript 풀이 본 게시물은 프로그래머스의 연습 문제 풀이입니다. 저작권은 (주) 그랩에게 있습니다 자바스크립트 코드(나의 풀이) function solution(nums) { const pickableNumber = nums.length / 2; const ponketMonSet = new Set(nums); return Math.min(pickableNumber, ponketMonSet.size); } Reference 프로그래머스
[프로그래머스] 최댓값과 최솟값 - JavaScript 풀이 본 게시물은 프로그래머스의 연습 문제 풀이입니다. 저작권은 (주) 그랩에게 있습니다 자바스크립트 코드(나의 풀이) function solution(s) { const numberArray = s.split(' '); return `${Math.min(...numberArray)} ${Math.max(...numberArray)}`; } Reference 프로그래머스
styled-components를 활용한 전역 스타일링과 테마 서론 현재 근무하고 있는 회사의 프론트엔드 소스코드에서 스타일링은 대부분 SCSS로 정의되어 있다. 이는 과거 퍼블리셔가 있던 흔적으로, 퍼블리셔가 마크다운과 스타일링을 하여 프론트엔드에게 넘겨주고 이를 받아 마크다운은 React JSX로 마이그레이션하고 SCSS로 스타일링을 하였다고 들었다. 하지만, 퍼블리셔가 없고 프론트 엔지니어만 있는 현재, 이 방식은 대단히 불편하다. React에서 컴포넌트 정의와 스타일링을 JS와 SCSS를 오가며 해야하는 것이 비효율적이라고 생각하기 때문이다. 또, 컴포넌트 스코프에만 스타일 시트를 적용하기 위해 classnames라는 라이브리를 사용해야 하는데 아래와 같이 보일러 플레이트가 많이 발생하는 것도 좋지 않았다. import classnames from 'clas..
Suspense & ErrorBoundary 서론 기존의 리액트 소스코드를 다루면서, 로딩처리와 에러처리는 많이 하게 되는 일들이다. 로딩 처리는 API를 호출하고 그 응답을 기다리는 동안 사용자에게 로딩 화면을 보여주는 처리이다. UX 측면에서 있어야하는 것이고 동시에 불러오지 않은 데이터에 접근함으로 발생하는 에러또한 막을 수 있다. 에러처리는 async를 사용한다면 보통 try, catch문을 사용하고 Promise Chaining을 사용한다면 catch 메서드를 사용하여 다루게 된다. 분명 에러를 방지하여 런타임 자체가 죽어버리는 문제는 막을 수 있지만 문법 특성상 반복적으로 사용할 수밖에 없다. 특히 프로젝트에서 API 호출이 많아질수록 에러처리에 대한 보일러플레이트가 그에 비례하여 늘어난다. React에서는 이 두 처리를 선언적으로 할 ..
Router 서론 이전에는 기본적인 구조와 디자인 패턴을 정하였다. 그 다음으로는 소스코드 전반에 걸쳐 사용될 Router 구성 전략을 세우고 실제로 어떻게 적용할 것인지 예시를 들어볼 것이다. 1. Router 구성 전략 사용할 패키지는 react-router-dom 패키지를 사용 v6이 나왔다. Major 버전 업데이트라서 여러가지 변화한 부분들이 많은데, 추후 개발을 위해서라도 처음부터 v6를 쓰는 것이 유지, 보수 측면에서 좋을 것 같다고 생각하였다. 배우는 데 약간의 시간이 걸리더라도 그 비용이 그리 크지 않았고 당장의 도입을 위해 v5를 도입하면 기술부채가 생겨버리는 것이기 때문이었다. 또 Switch가 Routes로 바뀌고 exact가 없어지는 등 더 직관적이고 사용하기 편리해졌다는 생각이 들었다. 로딩..
Hook 규칙, Custom Hook 1. Hook 규칙 최상위에서만 Hook을 호출 반복문, 조건문, 중첩된 함수에서 Hook 호출하지 말 것 조건문을 Hook내부에 사용하는 것은 가능(useEffect) 이 규칙을 따라야 동일한 순서로 Hook 호출되는 것이 보장 React 함수 내에서만 Hook을 호출 JavaScript 내에서 호출하지 말 것 규칙을 지켜야하는 이유 모든 상태 관련 로직을 소스코드에서 명확하게 보이도록 할 수 있음 2. Custom Hook 컴포넌트 로직을 함수로 뽑아 재사용 공통의 로직을 뽑아내 새로운 함수를 만드는 것으로 작동 방식과 순서에는 변화가 없음 관습적으로 use prefix를 붙일 것 같은 Hook을 사용하는 컴포넌트들은 state를 공유하지 않음 서로 독립된 state를 받음 기존의 Hook과 동일하게..

티스토리툴바