TS의 Generic 문법은 새싹 수업에서도 배우긴 했는데, 지금 코드를 다시 보니까 굉장히 짧게 배웠길래 이번에 배운 내용을 블로그에 기록해둔다. 사실 Generic 문법의 원리가 어려운건 아니라서, 이번에도 그리 길게 배우진 않았음!😝※ 새싹 수업 당시의 기록은 여기 → https://hjinn0813.tistory.com/50#Generic-1함수 Genericinterface Obj { x: number;}type Arr = [number, number];// 제너릭 문법으로 타입을 파라미터로 전달function toArray(a: T, b: U): [T, U] { return [a, b];}console.log( // 꺽쇠 괄호로 타입을 명시적으로 지정, 추론 가능하여 생략 가능 toA..

새싹 수업 때부터 학습내용을 내가 이해하기 쉬운 언어로 기록해두는 이유는, 내가 기억력이 좋지 않아서 나중에 까먹었을때 찾아보기 위함이다. 이번에도 TS에서의 클래스를 공부하면서 이거 어디서 본 것 같다고 생각했는데, 알고보니 새싹 수업 당시에 JS 클래스를 배웠던 기억 때문에 그렇게 생각했던 것 같다.😅(접근제한자는 상반기에 정보처리기사 필기 공부하면서 책에서 얼핏 봤던 것 같다.)아무튼 혹시 클래스가 뭔지 기억나지 않는다면 아래 링크 참고!https://hjinn0813.tistory.com/37 [코딩온] 프론트엔드 입문 15주차 Day 38 (JS 전개구문, 구조분해할당, 클래스)이날부터 드디어 전체 교육과정의 세번째 파트가 시작되었다. 이번 파트에서 다루는 내용은 나도 처음 배우는거고, 그동안..

오버로딩 (Overloading)함수의 이름은 같지만 매개변수의 타입 또는 개수가 다른 여러 함수를 정의하는 방법.객체지향 언어에서 가질 수 있는 특징이다.// 타입 선언function add(a: number, b: number): number;function add(a: string, b: string): string;// 함수 구현function add(a: any, b: any) { return a + b;}add(1, 2); // 숫자의 덧셈 출력add('hello', ' 바보'); // 문자열 결합 출력// add(1, ' 바보'); -> 인자의 타입이 달라서 오류 발생a, b가 어떤 타입이든 받을 수 있으라고 함수에서는 any 타입으로 지정한다.하지만 타입 선언을 저렇게 했기 때문에, 함수..

새싹 수업 당시에 TypeScript를 배웠지만, 빠르고 짧게 배워서 어설프게 아는 상태였다. 이번에 새로 들어온 교육에서도 속성이긴 했지만 더 어려운 내용들을 배웠다. 토이 프로젝트 마무리하고 포트폴리오 정리하느라 일주일이 지난 오늘에야 학습 내용들을 블로그에 정리해본다.타입 단언 (Type Assertion)컴파일 시점에 변수를 특정 타입으로 이해하도록 강제시키는 방법.const el = document.querySelector('body') as HTMLBodyElement;el.textContent = 'Hello, World!';→ 여기서 변수를 선언할 때, as HTMLBodyElement 부분이 없으면 TS는 el이 'null'을 갖고 있다고 생각할 수 있다.따라서 el 변수가 HTMLEle..

지난 2월에 새싹 수업과정을 듣던 중에 GitHub 프로필을 꾸밀 수 있다는걸 알게 된 후, 마크다운 문법과 다양한 뱃지들을 활용해서 개인 프로필을 꾸몄다. 배우는 기술이 추가될 때마다 기술 뱃지도 하나씩 추가하면서 꾸준히 develop을 했다. 이번에 8월 매칭데이를 준비하면서, 기존 프로필을 포트폴리오 느낌으로 변경하고 싶어서 약간의 업그레이드를 했다.※ 이전 글 확인하기 - https://hjinn0813.tistory.com/14gist로 커밋 시간 통계, github stats 노출하기GitHub 프로필에 올릴 수는 없고, 레포 리스트로 pin해야 하는 것 같다.6월 중순쯤, 나는 언제 커밋을 많이 하는지 통계가 궁금해서 했다. gist를 처음 사용해보는거라 너무 어려워서 아래 블로그 링크에서 ..

이력서랑 PPT 버전 포트폴리오를 정리하던 도중에, 웹사이트 버전 포트폴리오를 제작하면서 사용했던 기술들을 정리하지 않았다는게 생각나서 급하게 정리해본다.이것도 토이 프로젝트처럼 React로 만들고 싶었지만, 토이 프로젝트와 포트폴리오 사이트 모두 7월이 끝나기 전에 완성해야했어서 3월에 HTML + CSS + JS로 만들어둔 것을 수정/보완하는 형식으로 제작했다. 사실 새로운 프로젝트가 추가되거나 한다면 포트폴리오 사이트에도 반영을 해야하므로 현재 상태가 100% 완성이라고 볼 수 없지만..😅※ 3월의 기억 - https://hjinn0813.tistory.com/27 github.io 제작하기hjinn0813.tistory.com타이핑 애니메이션See the Pen text typing anima..

이번에 React로 토이 프로젝트를 진행하고, 배포과정에 Vercel을 이용하면서 있었던 경험담을 기록하려고 한다.일단 Vercel을 GitHub 연동해서 가입하고 레포를 불러오는건 구글링하면 많이 나오니까 생략하고..😆GitHub에서 레포를 성공적으로 불러오면, 아래 사진처럼 Import할건지 묻는 페이지를 볼 수 있다. 여기서 Import를 클릭하면, 'Configure Project'라는 배포 직전 설정 페이지로 이동하게 된다. Project Name : 배포할 프로젝트의 이름. GitHub에서 가져온 레포 이름 그대로 입력되길래 굳이 수정하지 않았다.Framework Preset : 프로젝트의 빌드/배포에 사용할 프레임워크, 또는 런타임 환경에 필요한 빌드/배포 설정을 자동 구성한다. 프로젝트를..

운세 보는걸 좋아하는 편인데 이번달 운세에 학업과 휴식을 적절히 병행해야 한다고 해서, 주말에는 항상 느긋하게 가벼운 작업만 하는 편이다. 지난 주말에는 컨디션도 좋지 않아서, 이력서만 수정하고 휴식했다.※ 이전 포스팅 - https://hjinn0813.tistory.com/857월 15일 월요일'회원가입' 페이지 제작 결정, 기본 구조와 디자인 작업→ 로그인 페이지에 아이디/비번 입력창이 있는데 회원가입 페이지가 없다는게 말이 안 되는거 같아서 만들었다.'로그인' 페이지에 '회원가입' 버튼 만들고 app.js에서 라우팅 설정, 디자인 완료→ '로그인' 페이지의 '확인' 버튼과 중요도를 다르게 설정해야해서 전체적인 버튼 디자인을 변경했다.→ 새로운 페이지가 만들어질 때마다 app.js에서도 라우팅 설정..

TS 개발환경 구성의 순서1. 폴더 만들고 터미널에서 명령어 입력하여 프로젝트 생성$ npm init -y2. HTML은 ts 확장자를 실행할 수 없으니까 패키지 설치 (parcel이 번들링하여 실행 가능)$ npm i -D parcel typescript3. HTML의 헤드 태그에 type="module" 속성 추가 → ts 확장자를 HTML 파일에서 불러오기 위한 설정 4. TS의 구성옵션을 제공하기 위해 tsconfig.json 파일 생성 $ npx tsc --init5. TS 파일은 터미널에서 명령어로 실행해야 함 (React에서 npm start 명령어를 사용하는 것과 동일) $ npm run dev이렇게 실행하면 dist 디렉토리가 생성되고 번들링된 파일이 실행됨dist/index.html 파..

기본적인 개념 정리가 필요할 것 같아서 기록하는 글.netlify와 vercel을 비교하려고 구글링하다가 CI/CD를 알게 되었는데, 상반기에 정보처리기사 필기시험 준비하면서 책에서 얼핏 본 기억이 나서 오랜만에 책을 펼쳐봤다. 결론부터 말하자면 '빌드 자동화 도구'를 설명하는 파트에서 잠깐 스치듯 지나간 단어였다.😂소프트웨어 패키징모듈별로 생성한 실행 파일들을 묶어 배포용 설치 파일을 만드는 것.소스 코드는 관리를 위해 기능별로 모듈화하여 패키징하고, 사용자 중심으로 진행한다.소프트웨어 패키징 순서기능 식별 : 코드의 기능 확인모듈화 : 확인된 기능 단위로 코드 분류 및 모듈화 진행빌드 : 모듈 단위로 실행 파일을 제작하는 것또는 소스코드 파일을 컴퓨터가 실행 가능한 소프트웨어로 변환하는 과정(코드 ..