본문 바로가기

전체 글368

[Typescript] Omit? Partial? Pick?

Partial 특정 타입의 부분 집합을 만족하는 타입을 정의할 수 있다. interface Product { id: number, name: string, price: number } type PartialProduct = Partial const empty: PartialProduct = {}; const water: PartialProduct = {name: 'water'}; const paper: PartialProduct = {price: 1000}; Pick 특정 타입에서 몇 개의 속성을 선택해서 타입을 정의한다. type CreateTodo = Pick; Omit 특정 속성만 제거한 타입을 정의합니다. type CreateTodo = Omit; interface Product { id: num.. 2022. 10. 11.

[Javascript] Array.prototype.fill()

const arr = Array(100).fill() console.log(arr); // [ undefined,undefined,undefined,undefined,undefined ...] console.log(arr.length); // 100 const arr = Array(10).fill('👍')// ['👍','👍','👍','👍','👍','👍','👍','👍','👍','👍'] 숫자만큼 1부터 숫자까지 배열 만들기 const arr2 = Array(10).fill().map((_, i) => i+ 1) console.log(arr2); // [1,2,3,4,5,6,7,8,9,10] 2022. 10. 9.

[typescript]tsconfig.json 설명하기

tsconfig.json 용도: 컴파일 때 사용됨. 추가적으로 vscode의 intellisense에도 적용됨 { "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch": true, "module": "esnext", "moduleResolution": "node", "resolveJs.. 2022. 10. 8.

[AWS] CloudFront + S3(Vuejs) Access Denied 에러 해결

개요 S3 버킷을 사용하여 웹 사이트를 호스팅하거나 요청을 리디렉션할 수 있다. 정적 웹 사이트 호스팅이 가능한건데, S3 > bucket > 타겟버킷 페이지에서 '속성' 탭에 제일 아래로 내리면, 정적 웹 사이트 호스팅 설정을 할 수 있다. vue.js로 개발된 앱을 S3 bucket에 올렸다. 브라우저에서 S3 버킷 웹 사이트 엔드포인트로 접근하면, 웹이 잘 켜진다. S3원본을 CloudFront에 붙여서 CloudFront 도메인으로 접근하니, 다음처럼 Access Denied가 발생하였다. 원인 CloudFront의 작업하는 배포의 원본 설정에 보면, 원본 도메인을 선택하게 되어 있다. 나는 검색하면 나오는 작업한 S3 버킷을 선택하였다. CloudFront URL로 접근하니까, Access De.. 2022. 10. 5.

[jest] TypeError: Cannot read property 'components' of undefined

jest 테스트 에러 TypeError: Cannot read property 'components' of undefined 해결 방법 export default { name: '', mixins: [doBookmark], 👈 삭제 ... } 2022. 10. 5.

[Nextjs] useRouter의 query를 useEffect에서 사용하기

개요 구현하려는 기능은, 원래 작성되어 있는 블로그 글을 다시, 업데이트하는 기능이다. 우선, 해당 페이지는 pre-rendering이 필요없는 페이지이다. 그래서, CSR을 사용하려고 했다. nextjs의 dynamic route 스펙을 사용해서, /wirte/[id].js라는 page를 만들었고, [id].js에서 useRouter hook을 사용해서, [id]의 id를 추출했다. 그리고, useEffect hook을 사용해서, nextjs의 api routes의 api를 호출했다. api routes의 url은 '/post/[id]'이다. 그래서, 다음 코드처럼, 호출했는데, 에러가 발생하였다. /** * @description CSR */ export default function WriteId(.. 2022. 10. 4.

[IOS]ViewController > Fatal error: Unexpectedly found nil while unwrapping an Optional value

에러 Fatal error: Unexpectedly found nil while unwrapping an Optional value 원인 ViewController의 버튼 변수가 스토리보드의 버튼과 연결되지 않아서 발생함. 해결방법 버튼 드래그해서, viewController에 변수에 연결 2022. 10. 3.

[CSS]textarea 세로로만 늘어나게 설정하기

https://developer.mozilla.org/en-US/docs/Web/CSS/resize resize - CSS: Cascading Style Sheets | MDN The resize CSS property sets whether an element is resizable, and if so, in which directions. developer.mozilla.org textarea 세로로만 늘어나게 하는 방법임. 2022. 10. 1.

[WEB] 웹 바이탈이 비즈니스에 미치는 영향

https://web.dev/vitals-business-impact/ The business impact of Core Web Vitals This article will help you understand how Core Web Vitals correlate with key business metrics by exploring examples of companies which have already seen positive impact for their users and business. web.dev 위 글을 정리한 글입니다. 소요된 시간에 관계없이 의사 결정자는 이를 비즈니스 성장에 대한 장기적인 투자로 간주해야 한다. 빠르고 원활한 탐색 경험을 제공하면 사용자들를 즐겁게 하고 충성도가 높고 재방.. 2022. 10. 1.

참고 사이트

https://mdxjs.com/ Markdown for the component era | MDX MDX allows you to use JSX in your markdown content. You can import components, such as interactive charts or alerts, and embed them within your content. This makes writing long-form content with components a blast. mdxjs.com https://github.com/react-syntax-highlighter/react-syntax-highlighter GitHub - react-syntax-highlighter/react-syntax-h.. 2022. 9. 29.

티스토리툴바