전체 글119 기술 블로그 모음 국내 CompanyURL 11번가 https://11st-tech.github.io/ 29CM https://medium.com/29cm 44BITS https://www.44bits.io/ko 농심데이타시스템 https://tech.cloud.nongshim.co.kr/techblog/ 당근마켓 https://medium.com/daangn 드라마앤컴퍼니 https://blog.dramancompany.com/ 데일리호텔 https://dailyhotel.io/ 레진 https://tech.lezhin.com/ 렌딧 https://lenditkr.github.io 리디 https://www.ridicorp.com/blog/ 마켓컬리 https://helloworld.kurly.com 매스프레소 http.. 2021. 8. 24. smartphone emulation 4일 동안 미니 smartphone emulation을 만들어 보았다. 일정 관리 Github Link 요구사항 분석 4개의 화면으로 구성되어있다. 홈 화면 알림 화면 메모 화면 사진 화면 각각의 화면에 대해 기능 별로 구역을 나눠서 구현을 했다. home은 root 태그 안에 추가되며, 홈 화면의 최상위 태그이다. 각 앱별로 navigation의 구성요소가 달라져서 navigation을 home 내부 요소에 포함시켰다. home-inner는 실제 home의 content가 들어가는 공간이다. dragzone은 dragzone안의 draggable="true"인 앱들에 대해 드래그 할 수 있는 구역이다. navigation은 각 앱 상단에 위치하며, 현재 시간에 맞게 갱신된다. alarm은 알람 화면의 .. 2021. 8. 22. 가로 스크롤 앨범을 만들어보자. 기본적으로 가로/세로 스크롤 바는 노드들의 크기가 브라우저 뷰포트보다 클 때 생긴다. 우리는 또한, css로도 스크롤바를 만들 수 있다. 가로 스크롤 바는 overflow-x와 white-space 속성으로 만들 수 있다. .photo-scroll { overflow-x: scroll; white-space: nowrap; } .photo-scroll-image { width: 50px; height: 50px; border-radius: 10px; margin: 0 16px; } const imageTagWrapper = ({ src, name }: { src: string; name: string }): string => { return ``; }; const photoScrollWrapper = (.. 2021. 8. 22. [Typescript] TS2550: Property 'padStart' does not exist on type 'string'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2017' or later. 충격!!! 원인 padstart가 es2017에 나온거라니..ㅠㅠ 오.. 비교적 최근에 생긴것이다!! es6를 사용하고 있어서 오류가 났다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padStart typescript polyfill const padStart = (targetLength: number, padString: string, str: string): string => { return str.length >= targetLength ? str : new Array(targetLength - str.length + 1).join(padString) + str; }; 2021. 8. 22. [Typescript] TS2307: Cannot find module '.png' or its corresponding type declarations. webpack에서 이미지도 번들링 해주려고, 아래와 같이 설정을 해주니 typescript 쪽에서 해당 에러가 발생했다. // webpack.config.js ... { test: /\.(png|jpe?g)$/, use: { loader: 'file-loader', options: { name: '[path][name].[ext]', }, }, }, ... TS2307: Cannot find module './webpack.png' or its corresponding type declarations. 원인은 타입이 정의되어 있지 않아서 이다. Typescript에서 .d.ts 파일을 추가해줘서 타입을 추가할 수 있다. (단, index.d.ts 파일은 index.ts 파일이 생성했다고 Typescrip.. 2021. 8. 22. SPA 란? (History API) SPA 란? SPA는 Single Page Application의 약자이다. SPA의 대표적인 라이브러리/프레임워크에는 Backbone.js, React, Vue, Angular가 있다. 과거에는 클라이언트가 웹페이지를 요청할 때마다 서버로부터 리소스들과 데이터를 가져와 화면에 렌더링 하는 방식을 사용했다. 그러나 웹 사이트가 고도화됨에 따라, 한 페이지의 페이지 용량이 커지고, 매번 새로운 페이지를 전달하는게 점점 버거워지게 되었다. 그래서 어떤 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 SPA가 등장한다. SPA 방식은 브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식이다. SPA에서 라우팅은 서버로.. 2021. 8. 20. 이전 1 2 3 4 5 6 7 8 ··· 20 다음
