개발적인/웹 개발12 자바스크립트 new Date 객체의 크로스 브라우징 문제 문제 발생 어플라이 프로젝트를 만들면서 아래와 같이 코드를 작성해주고, currentTime에 따른 변수가 startTime과 endTime 안에 속할 때 열리는 페이지를 구상을 했다. ("YY:MM:DD HH:mm:ss") 다음과 같은 날짜 양식을 지정을 해주었고, 이 양식은 Edge, Opera, Firefox, Chrome 브라우저에서는 동작을 잘 하지만, IOS(Safari)의 경우 NaN을 나타내고 있었다. 문제 해결 Media Query를 통해 모바일 해상도의 접근을 막아놓긴 했지만, Safari로 접속을 하는 태블릿의 경우는 이 문제점을 발견할 수 있다. 그래서, ("YY-MM-DD HH:mm:ss") 와 같이 시간 규격을 변경해주거나 아래와 같은 표준 방식으로 변경을 해주어야한다. let .. 2023. 2. 17. TypeScript useRef "Object is possibly null" error? 문제 발생 프로젝트에서 TypeScript 환경에서 useRef를 활용할 일이 있었는데, 해당 DOM 객체의 타입을 명시해주었음에도 불구하고 에러가 발생 문제 해결 const linkRef = useRef(null); // useRef 지정 if (linkRef.current !== null) { // null 값 체크 linkRef.current.focus(); } useRef를 통해 지정을 해주고, null 값을 체크해주면서 해결을 할 수 있다. const myRef = useRef(null); // useRef 지정 myRef.current?.focus(); // ES2020의 optional chain을 통해 다음과 같이 지정도 가능하다. ES2020의 optional chaing을 통해 위와 같.. 2023. 2. 17. 이벤트 버블링이란? 서론 웹 개발을 하는 사람이라면 버블링와 캡쳐링에 대해서 한번쯤은 들어보았을 것이다. 프로젝트를 진행하면서 애매모호했던 프론트엔드 지식들을 구체화시키고자 오늘의 포스팅은 `버블링과 캡쳐링` 이라는 주제로 포스팅을 해보려고 한다. 버블링이란 특정 화면 요소에서 이벤트가 발생했을 때, 해당 이벤트가 더 상위의 화면 요소들로 전달되어가는 특성을 의미한다. 첫 이벤트가 발생했을 때 브라우저는 이벤트를 하위 컴포넌트에서 상위 컴포넌트로 전파시키는 방식을 가지는데, 이를 이벤트 버블링이라고 한다. 버블링의 원리 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고 이어서 부모 요소의 핸들러가 동작을 한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다.. 2023. 1. 2. 기존 React 프로젝트에 TypeScript 적용하기 서론 기존 리액트 프로젝트에서 토이프로젝트를 리팩토링하면서 타입스크립트를 적용해야하는 일이 생겼다. 이번 게시물에서는 타입프로젝트에 관련된 내용과, 타입스크립트를 적용하는 방법을 알아보려고 한다. (타입스크립트 공부를 위해 포스팅을 한 게시물이니, 코드가 필요하신 사용자들은 적용하기 파트부터 봐주시기 바랍니다) 타입스크립트란? 마이크로소프트가 발표한 타입스크립트(TypeScript)는 자바스크립트를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어이다. 프로젝트에서 프론트엔드 분야에서 널리 흔하게 사용되고 있으며, 필연적으로 사용되는 기술이 되어버렸다. 컴파일 언어이면서 동시에 정적 타입의 언어이다. 자바스크립트의 경우 인터프리터 언어로 런타임에서 오류를 발견할 수 있다. 반대로 타입스크립트는 정적 타입.. 2022. 12. 29. [React] UI 라이브러리 Onsen UI UI 라이브러리 스타일링 된 컴포넌트 제공 기본적인 기능 제공(ex. Action Sheet) JS / VUE / React / Angular 모두 서포트 가능하다 모바일 대응 안드로이드 / 아이폰 대응 다양한 컴포넌트 모바일 케이스 대응 아이콘 Font-awesome / Ionicons 문서 최신화 잘 안되는 듯 (React에 불친절) Ant Design React 리액트를 베이스로 하는 디자인, 그렇기에 공식문서를 복사해서 붙여넣기 하면 된다. Day.js Ant Design도 Moment.js를 제거하는 것을 지향하며, Day.js를 사용할 때 해당 라이브러리를 추천한다. Design 철학 단순한 컴포넌트 제공 + @ Typography 다양한 사이즈의 Text Layout 화면 구.. 2022. 12. 26. 템플릿 리터럴 (Template literals) 이란? 문득 React의 Styled-Components와 Emotion 등 스타일 라이브러리를 공부하다가, 템플릿 리터럴이라는 용어에 대한 의문이 들었다. 뭔가 문법에서 자연스레 쓰고 있었던 것 같은데.. 이게 대체 무엇일까? MDN Web Docs에 따르면 아래 내용에 명시가 되어있다. 더보기 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다. 이전 버전의 ES2015사양 명세에서는 "template strings" (템플릿 문자열) 라고 불려 왔습니다. `string text` `string text line 1 string text line 2` `string text ${expression} string text` tag `st.. 2022. 12. 19. 이전 1 2 다음
