🫧 문제 정확한 문자열 타입이고 양쪽 끝의 공백이 제거된 새 문자열을 반환하는 Trim를 구현하십시오. type trimmed = Trim // 기대되는 결과는 'Hello World'입니다. ☀️ 테스트 케이스 type cases = [ Expect, Expect, Expect, Expect, Expect, Expect, Expect, Expect, ] 🎱 정답 type Space = "\n" | '\t' | ' ' type Trim = S extends `${Space}${infer T}` | `${infer T}${Space}`? Trim : S 💭 해설 type Space = "\n" | '\t' | ' ' Space라는 유니온 타입을 먼저 정의해준다. 해당 타입은 공백 문자들인 \n (개행), ..
액티비티 다이어그램이란? 객체의 상태가 아닌 처리 로직이나 조건에 따른 처리흐름을 순서에 따라 정의한 다이어그램 로직, 절차, 흐름을 기술 (플로우 차트와 유사) 업무 프로세스, 코드 실행 로직을 표현할 때 주로 사용 분기 처리를 표현할 수 있는 다이어그램 예시 구성 요소 초기 노드 (검은색 원) : 활동의 시작을 나타낸다. 제어 흐름 (화살표) : 단계, 절차, 이동 순서를 연결한다. 액션(모서리가 둥근 사각형) : 어떤 일들의 처리와 실행을 의미한다. 끝 노드(이중 원) : 하나의 액티비티의 끝을 알린다. 결정 노드 : 분기 처리할 때 조건을 나타낸다. 조건 : 조건을 나타냄 병합 노드 : 분기처리로 흩어졌다가 다시 모일 때 사용한다 (생략하는 경우도 많음) 포크 노드 : 병렬로 실행되는 것을 표현...
JSX를 작성할 때 루트 JSX 요소가 1개만 있어야 하고 나란히 있으면 안된다. ... return ( Hi! This does not work! ); 해결 방법 1. div 로 감싸기 ... return ( Hi! This does not work! ); 전체를 div 로 감싸서 루트 JSX 요소가 1개만 있게 만든다. 2. 배열로 감싸기 아래 코드와 같이 배열 요소로 JSX를 묶어서 반환하는 방법이 있습니다. ... return [ Hi! , This does not work! ]; 이때 전체를 감싸고 있는 중괄호{} 가 있다면 제거 해야합니다. 예를 들어 이런 코드가 있다면 ... return ( {error && ( )} ) ... return [ error && ( ) ] 위 처럼 변경 해줘야..
타입스크립트로 에러 처리하기 } catch (err) { console.error(err.message); // Object is of type 'unknown' } 타입스크립트에서 error의 object가 unknown 타입으로 정의되어 에러가 발생하게 된다. Any 타입으로 강제 변경 catch (e: any) { return e.message; } as로 타입 단언 } catch (e) { return (e as Error).message; } instanceof로 타입 가드 type을 정하지 않고 any로도 캐스팅 하지 않는 가장 안전한 방법이다. } catch (e) { if (e instanceof Error) { return e.message; } }
코드로 종료 process.exit() process.exit(0 혹은 생략) // 성공 코드로 종료 process.exit(1) // 실패 코드로 종료 터미널로 종료 1. Ctrl + C 를 이용해 종료하는 방법 2. 터미널이 켜지지 않은 상태일 때 localhost 종료 방법 윈도우 netstat -a 명령어로 사용중인 포트를 확인합니다. taskkill /f /pid (종료할 pid) 를 입력해줍니다. 맥 lsof -i :포트번호\ 위의 명령어로 해당 로컬호스트 포트의 PID를 찾습니다. (ex> lsof -i :3000) kill -9 PID번호 PID 번호로 해당 포트 서버를 종료합니다. (ex> kill -9 35452)
기존 라우팅 방식 기존에는 페이지에서 페이지로 이동을 하기 위해서 a 태그를 사용해 이동을 했습니다. Home 구현 화면 실제 화면에서 클릭을 해 다른 페이지로 이동을 하면 상단 로고가 새로고침 되는 것을 확인할 수 있습니다. 그렇다면 Next.js에서는? 하지만 Next.js에서는 a 태그를 사용해 페이지 간 이동을 구현하게 되면 다음과 같이 eslint 오류가 납니다. Do not use an element to navigate to /. Use from next/link instead. 즉 태그 대신 태그를 사용하라는 것입니다. 사용법 안에 프로퍼티를 작성해주면 됩니다. 따라서 태그를 사용한 코드는 다음과 같습니다. export default function NavBar() { return ( Ho..
도입 이번에 우아한테크코스 프리코스를 진행하면서 과제를 총 4번 진행했습니다. 3주차 미션부터 공통적으로 있던 요구사항이 있습니다. 핵심 로직을 구현하는 코드와 UI를 담당하는 로직을 구분한다. 바로 이 요구사항입니다. 도메인과 뷰를 담당하는 로직을 분리하라는 요구사항이었습니다. 도메인과 뷰 로직을 분리하라는 요구사항은 즉 출력을 담당하는 뷰, 미션을 진행함에 있어 필요한 데이터를 관리하는 도메인으로 나누라고 이해를 했습니다. 이렇게 로직을 분리하는 것이 MVC패턴에 맞다고 생각이 들어 MVC패턴에 대해 학습을 진행했습니다. 하지만 다른 분들의 코드를 리뷰해보다 보니 제가 생각하나 MVC패턴과는 다른 흐름으로 진행이 되고 있는 것 같아 학습을 하고자 글을 작성하게 되었습니다. 왜 MVC 패턴을 사용할까?..
이번주 계획 이번주 목표 3주차에 학습했던 객체를 객체답게 사용하는 방법에 대해 학습을 진행하자! 구현을 함에 있어서 학습 목표는 다음과 같았다. 도메인과 UI로직을 분리해서 구조를 작성하기 단방향 흐름을 잘 지키기 의존성을 주입을 통해 테스트를 하기 쉬운 코드를 작성하기 이번주 내 활동 🔍 피어리뷰 스터디 디스커션을 보다가 정말 열심히 같이 성장하고 있는 스터디의 리뷰가 올라온 것을 포착했다. 공유해주신 스터디 요약을 보고 그 분들이 다른 동료들에게 남겨준 피어리뷰를 확인해보니 배울 것이 많은 스터디 같았다. 바로 해당 스터디원에게 슬랙으로 DM을 보냈다…! 스터디원분들이 전부 동의를 해주셨고 그렇게 스터디를 같이 진행하게 되었다.🤗 일주일동안 슬랙에서 같이 모각코를 진행하고 미션을 제출한 수요일 저녁..
이번주 계획 이번주 목표 2주차 피드백을 참고해 저번주에 아쉬웠던 점을 최대한 3주차에 반영해보자!!! 구현을 함에 있어서 목표는 다음과 같았다. 하나의 클래스에는 객체가 하는 일만 메서드로 사용하기 다양한 예외사항 생각해보기 객체의 원시값을 캡슐화하고 해당 객체의 메세지를 전달하는 방식으로 구현하기 지난 주에 받았던 피드백이 정말 내 2주차 미션 진행 시 했던 행동들을 CCTV로 감시받는 느낌으로 하나하나 나한테 대한 피드백들이었다. 이번주에는 좀 더 성장해봅시다. 그렇다면, 이번주 미션 진행시 주의사항은? Readme.md를 프로젝트 관리하는 부분 처럼 작성해보자. 기능목록을 너무 자세히. 즉, 메서드 명까지 적지 말아라.(변경될 수 있으니!) 메서드는 하나의 역할을 하도록 분리해보자. 객체지향에 대..
🗓이번주 목표 수요일에 코수타가 끝나자마자 피드백을 확인하고 2주차 미션을 진행하면서 내가 달성하고 싶은 목표를 생각해봤다. 지난 주 부족했던 기능 목록 작성과 함수의 역할 분리를 연습해보는 것이 목표였다. 또한, 시간을 잘 놔누어서 계획을 짜고 시작해보려고 했다. 기능 목록 작성(~수요일) 전체적인 기능 목록을 작성 한다. 세부적으로 추가할 부분이 있거나 생각하지 못한 예외사항이 있으면 추후에 추가한다. 구현(~금요일) 일단 처음부터 모든 구조를 신경써서 깔끔하게 짜려고 하지 않고 전체적으로 기능이 동작하도록 작성한다. 리팩토링(~일요일) 세부적으로 함수가 하나의 일을 하는지, 해당 메서드 또는 변수명은 올바른 지 등을 체크하고 구조상 바꿔야 하면 리팩토링을 한다 회고(~화요일) 미션을 진행하면서 시도..
