웹 스토리지? 저장할 데이터가 별로 중요하지 않거나, 유실되어도 무방할 데이터라면 서버 단에서 데이터를 저장하는 것이 낭비일 수도 있습니다. 클라이언트 단, 브라우저 상에 데이터를 저장할 수 있는 기술인 웹 스토리지를 활용해봅시다. 2가지 종류 웹 스토리지에는 크게 localStorage 와 sessionStorage가 있습니다. 두 개의 매커니즘 차이점은 데이터가 어떤 범위 내에서 얼마나 오래 보존되느냐 입니다. 세션 스토리지는 웹 페이지의 세션이 끝날 때 저장된 데이터가 지워지는 반면, 로컬 스토리지는 웹 페이지의 세션이 끝나더라도 데이터가 지워지지 않습니다. -> 💥브라우저에서 같은 웹 사이트를 여러 탭이나 창을 띄우면, 여러 개의 세션 스토리지에 데이터가 서로 격리되어 저장되며, 각 탭이나 창이 ..
타입스크립트를 사용할 때 가장 큰 혜택 두 가지를 뽑는다면 자동완성 문서화 기능 이라고 할 수 있습니다. 타입을 잘 사용하면 직접 모든 코드를 작성하지 않고 IDE(우리의 경우엔 vscode)가 추론해준 선택지들 사이에서 고르는 방식으로 코드 개발이 가능합니다. 물론 타입스크립트를 제대로 작성했을 때, TS가 잘 추론할 수 있겠죠. 1️⃣자동완성 IDE뒷단에서 돌고 있는 LSP(Language Server Protocol)에 의해 개발자가 작성된 코드의 타입이 실시간으로 체크됩니다. 그래서 가끔 타입 추론이 제대로 되지 않을 때는 TS Server를 재시작해주면 됩니다. (종종 타입 체킹이 안될 때가 있는데.. 새로고침을 하면 됩니다. 아예 모를 때는 vscode를 껐다가 켰네요. ) 타입스크립트 파일을..
브랜치 종류 main(구: master) : 프로젝트 최종 배포 중심 브랜치 develop: 개발이 진행되는 브랜치, 배포할 수준의 기능을 갖추면 relese 브랜치로 머지 feature: 기능을 개발하는 브랜치, develop 브랜치에서 파생되는 브랜치며 develop 브랜치로 머지 release: 개발된 내용을 배포하기 위해 준비하는 브랜치, 충분한 테스트를 통해 버그를 검사하고 배포할 준비가되었다고 판단하면 main으로 머지하여 배포한다. 버그 수정 내용을 develop 브랜치에도 반영하고, 최종적으로 main에 머지 hotfix: 출시 버전(main)에서 버그를 수정하는 브랜치, main브랜치에서 생성되며, 수정이 완료되면 dev, main 브랜치에 수정 사항을 반영 브랜치 네이밍 feature:..
프론트엔드 과제를 하면서 구현되어있는 백엔드 api를 쓰기 위해 로컬에서 서버를 켰는데 네트워크 요청이 자꾸 실패하는 상황이었습니다. 첫번째로 원인 파악에 나선 것은 endpoint 였는데, 아무리 봐도 문제가 없었고 next.js에서 서버를 구동했을 때, 붉은 폰트가 나오는 것이 에러메세지가 아니라 정상 구동됐을 때도 저렇게 떴기 때문에 제대로 읽지 못하고 넘겨버린 것이 문제였습니다. 결론적으로 1시간정도 헤맸었는데 그냥 8080 포트를 이미 사용중인 프로그램이 있기 때문에 해당 프로그램을 kill해주면 되는 문제였습니다. (에러 메세지가 뜨면 제대로 확인하자..^ ^) 8080포트로 다른 프로그램을 실행 시킨 기억이 없어서 vscode를 다 끄고 다시 재가동했어도 똑같은 에러메세지가 발생해서 결국 직..
TS에서 프로미스는 Promise 타입으로 표시합니다. const p1 = Promise.resolve(1) //Promise .then((a) => a + 1) //Promise .then((a) => a + 1) //Promise .then((a) => a.toString()); // Promise //then을 전부 다 실행시킨 최종 결괏값을 p1에 리턴한다. const p2 = Promise.resolve(2); // Promise const p3 = new Promise((res, rej) => { setTimeout(res, 1000); }); Promise.all([p1, p2, p3]).then((result) => console.log(result)); //결과: ['3',2,undefi..
Required 분석 { interface Profile { name?: string; age?: number; married?: boolean; } type Name = Profile["name"]; type R = { //-? 의미: 옵셔널(?)을 빼라 라는 의미("-"의 명칭은 modifier ?) //T라는 인터페이스의 프로퍼티의 key를 가져올 때 optional은 빼고 가져오라는 의미 [key in keyof T]-?: T[key]; }; //type Required = { [P in keyof T]-?: T[P]; } // P = key // Readonly //type Readonly = { readonly [P in keyof T]: T[P]; }; //만약에 남의 타입을 가져올 때 re..
Partial interface Profile { name: string; age: number; married: boolean; } const cong: Profile = { name: "cong", age: 27, married: false, }; //Partial의 기능: 프로퍼티들을 전부 "?" 옵셔널로 만들어 준다.(필수값이었던 것들을) const noMarriedCong: Partial = { name: "cong", age: 28, }; Partial 을 직접 구현해보기 //Partial을 직접 구현해보기 //맵드 타입스랑 인덱스드 시그니처 사용 type Name = "Human" | "Animal"; //keyof 뒤에는 interface가 올 수 있다. (type alias도 가능, js..
오버로딩 타입을 하나로만 정의하는 것이 베스트긴하지만 다 정의하지 못할 때 사용한다.(제네릭으로 깔끔하게 못만들겠다 싶을때 쓰면 좋을듯) 오버로딩을 했으면 실제 구현부에서는 any를 사용해도 된다. (아래 추가설명) 함수도 앞에 declare키워드를 붙이고 오버로딩이 가능하다. (declare키워드가 붙은 함수는 TS를 속여 body부분을 작성해주지 않고 선언부만 적어도 된다.) -> 여기서 실제 사용할 때의 구현부 타입은 any로 지정해줘도 된다(오버로딩된 타입들이 제대로 작성되어 있다면). // declare를 함수 앞에 붙이면 선언만하고 구현부(body부분)는 쓰지 않아도 TS가 인식하기로는 구현부는 다른 곳에 있구나 //라고 속일 수 있다. declare function add(x: number,..
- Total
- Today
- Yesterday
- 프리온보딩 프론트엔드 챌린지 3월
- 원티드 FE 프리온보딩 챌린지
- text input pattern
- 항해99추천비추천
- is()
- 원티드 3월 프론트엔드 챌린지
- float 레이아웃
- D 플래그
- getStaticPaths
- 항해99프론트후기
- 항해99프론트
- 프리렌더링확인법
- reactAPI
- aspect-ratio
- Prittier
- ~ ^
- fs모듈 넥스트
- 틸드와 캐럿
- nvm경로 오류
- nvm 설치순서
- getServerSideProps
- 원티드 프리온보딩 프론트엔드 챌린지 3일차
- 원티드 프리온보딩 FE 챌린지
- && 셸 명령어
- 형제 요소 선택자
- 타입스크립트 장점
- 부트캠프항해
- 타입스크립트 DT
- tilde caret
- grid flex
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |