all is well!!

이때까지 package.json에 들어가 있는 내용에 대해 잘 모르고 그냥 clonecoding때 쓸 라이브러리들을 무지성으로 받았는데 오늘 갔던 회사 면접에서 면접관님들께서 velog 1차 clonecoding이 담긴 git을 훑어봐 주시고 피같은 어드바이스를 해주셨다. ( 감사합니다..! 면접관님🥹 ) 그래서 또 잊지않게 기록해보는 package.json에 dependencies와 devDependencies의 라이브러리 분리 * dependencies 배포할때 포함되는 라이브러리가 들어오는 곳으로 애플리케이션의 동작을 도와주는 라이브러리들이 저장된다. npm install [라이브러리명] 으로 설치하면 dependencies에 들어간다. *devDependencies 배포할때 포함되지 않는 라이브러..

interface object의 모양을 알려주고 싶을때 사용한다. interface는 객체 지향 프로그래밍의 개념이 담겼고 type은 더 유연하다. type으로 정의할때 type Player = { nickname:string, healthBar:number } interface로 정의할 때 interface Player { nickname:string, healthBar:number } Function makeUser(user: Player) : Player{ return { nickname : ’subin’, healthBar : 10 } } interface Hello = string; // interface는 오직 object의 모양만 설정할 수 있기때문에 에러가 난다. type은 더 유연하기 때..

Abstract class (추상클래스) Typescript와 객체지향 프로그램에서의 추상클래스 abstract class User{ constructor( private firstName: string, private lastName: string, Public nickname: string, ){} } class Player extends User{} const subin = new Player(‘subin’, ‘las’, ‘bin’) 추상클래스는 오직 다른 클래스가 상속받을수 있는 class 직접적으로 extends를 만들지 못한다. 만약에 const subin = new User(‘subin’, ‘las’, ‘bin’) 바로 Player가 아닌 User을 가져오면 에러가 난다. Abstract m..

Polymorphism type SuperPrint = { (arr: number[]):void (arr: boolean[]):void (arr:string[]):void (arr: boolean|number[]):void } const superPrint: SuperPrint = (arr) => { arr.forEach(i=>console.log(i)) } const a = superPrint([1,3,9]) const b = superPrint([‘1’,’3’,’9’]) const c = superPrint([false,3,9]) 함수에 따라서 넣는 매개변수에 따라 Call signatures는 형태의 다양성을 가질 수도 있다. Generic 하지만 매개변수에 들어올 확실한 타입을 모르는 Call s..

Overloading 앞에서 call signatures는 이렇게 간단하게 작성할수도 있지만 type Add = (a:number, b:number) => number 오버로딩을 위해서 이렇게 작성할 수도 있다. type Add = { (a:number, b:number) : number } 오버로딩은 외부 라이브러리에 자주 보이는 형태로 함수가 여러개의 다른type의 call signatures를 가질때 발생한다. 그리고 next.js에서 라우팅때도 연관되어 있다. type Config = { path: string, state: object } type Push = { (path: string): void (config: Config): void } const push: Push = (config) ..

call signatures 함수의 매개변수들의 타입을 직접 지정해줄 수 있다. const add = (a:number, b:number) => a+b 이게 내가 이때까지 조금은 많이 썼던 방법이었다. typescript는 함수만의 타입도 미리 정해줄 수 있다. 함수의 매개변수부터 리턴의 타입까지. type Add = (a:number, b:number) => number const add:Add = (a, b) => a+b 이렇게 함수의 인자부터 타입까지 정해주는 call signature 타입을 만들어서 해당 함수에 타입을 붙여주고 마우스를 함수에 올리면 내가 원하는 type이 적용된걸 볼 수 있다. 그래서 미리 함수의 타입을 만들 수 있고 함수가 어떤 타입으로 작동하는지 미리 지정해둘수 있다. *출..

👀 velog clone coding에 적용 1. next.js 2. typescript 3. redux toolkit 👀 velog clone coding에 위 3가지를 적용한 이유 1. 전 회사에서 next.js를 처음 접했는데 그 프로젝트를 중간 투입되어서 next.js가 그냥 react와 뭐가 다른지 영문도 모르고 지나가서 처음 설정부터 도전해보고 싶었다. 2. typescript도 좋다는 이야기만 자주 스쳐들었고 찍먹만 했는데 쓰면서 직접 장점을 느껴보고 싶었다.(아직도 찍먹느낌.. 2주간 신청해놓은 챌린지를 통해 좀 더 파볼예정) 3. redux toolkit은... 전역 상태관리도 하고 부끄럽지만 firebase 대용으로 써보기로 했다. 그리고 redux와 다른점도 궁금했고. 👀 velog ..

👀 1차 전체적인 목표 🟣 Main 카드 - 작성 날짜(4일전 ,6일 전…), 댓글 수, 카드 호버시 애니메이션 🟣 detail 좋아요 작성자 모든 포스트 목록 보기 댓글쓰기 🟣 write 작성글 실시간 미리보기 뒤로가기 임시저장 기능 Input 저장 기능 ⚽️ Daily Goal 1. editor 코드 정리 2. 뒤로가기 버튼 3. Input 내용 저장 기능(출간하기)