Chrome, React, TypeScript, Framer-motion 왼쪽이 크롬이고 오른쪽이 사파리이다. 둘은 같은 코드이다. gif라서 프레임 드랍이 있는걸 감안하더라도 오른쪽 사파리에서는 사각형이 scale이 커지면서 한바퀴 완전하게 돌아가는 애니메이션인 반면, 크롬에서는 뭔가 감칠맛나게 살짝 또잉 튕기기만 할뿐 scale과 rotate 애니메이션이 제대로 작동하지 않는 것을 볼 수 있다. gif의 첫번째 상자와 두번째 상자를 비교해서 보면, 첫번째 rotate뿐만 아니라 두번째 orchestration 애니메이션도 어딘가 엉성하다. orchestartion: 부모 요소와 자식 요소들의 애니메이션이 딜레이되며 자연스럽게 이어지는 variants 사파리에서는 위에서 아래로 약간의 튕기는 느낌까지 ..
자바스크립트의 비동기 코드의 처리에 대해 공부한 내용을 정리했다. 블로킹과 논블로킹, 동기와 비동기 비동기 처리 및 그와 관련된 개념을 정리하기 전에 블로킹과 논블로킹, 동기와 비동기에 대한 개념부터 다시 잡고 가야할 것 같아서 내용을 찾아보았다. 동기, 비동기 : 코드의 순서와 실행 순서가 일치하는가 동기(Synchronous) : 코드가 순서대로 실행된다 비동기(Asynchronous) : 코드가 순서대로 실행되지 않는다. 블로킹, 논블로킹 : 코드의 실행이 다른 코드의 실행을 막는가 블로킹(Blocking) : 코드의 실행이 다른 코드의 실행을 막는다. 논블로킹(Non-blocking) : 코드의 실행이 다른 코드의 실행을 막지 않는다. 노드에서는 비동기면 논블로킹인 경우가 많다고 한다. fs같..
개인 프로젝트를 진행 중에, 크롬과 사파리 간의 차이로 인해 발생한 이슈를 트러블슈팅한 내용을 기록한다.사용 스택: React, TypeScript, TailwindCSS, Framer-motion 발단데스크탑의 개발자 도구에서 본 모바일 화면과 실제 모바일 기기로 본 화면은 차이가 있어서, vercel로 중간 단계에 배포 후 실제 내 핸드폰(아이폰 13pro)으로 반응형이 잘 구현됐는지 살펴보려는데, 시작 화면부터 아래처럼 버튼 컴포넌트가 깜빡였다. 처음엔 인터넷 이슈인줄만 알았는데, 계속 그랬다. 뭔가 이상했다. 나는 윈도우 데스크탑과 맥북 랩탑에서는 브라우저로 크롬을 쓰지만, 모바일에서는 사파리를 쓴다. 컴퓨터를 켜고 맥북 사파리로 확인해도 똑같았다. 브라우저 차이로 인해 발생한 것이다. 그래서 사..
Dart란 구글에서 제작한 프로그래밍 언어로, 멀팃 플랫폼 상에서 동작하는 앱을 만들기 위해 고안되었다. UI 제작에 최적화가 잘 되어있다. 매우 빠르고, 많은 플랫폼에 컴파일이 가능하다. 개발자 경험이 뛰어나다. 플랫폼별 컴파일 Dart Web Dart로 작성한 코드를 JavaScript로 변환해주는 컴파일러 Dart Native 디바이스(모바일, 데스크톱, 서버, 임베디드 등)를 대상으로 하는 프로그램의 경우 Dart Native를 이용한다. 여기에는 순수 Dart 인터프리터와 JIT(Just-In-Time) 컴파일러, AOT(Ahead-Of-Time) 컴파일러가 모두 포함되어 있다. 두 가지 컴파일러로 인해 개발과 배포 두 가지 경우 모두 편리하다. AOT (Ahead-Of-Time) 프로그램 실행..
배포 (Deployment) 단순히 웹사이트 코드를 취하는 것을 의미한다. 개발된 웹앱 또는 웹사이트를 실제로 인터넷에 공개하여 실행 가능하도록 만드는 과정이다. 파일 전송 개발한 웹사이트 파일들을 로컬 개발 환경에서 웹호스팅 서버로 전송하여야 한다. 이는 주로 FTP(File Transfer Protocol), SCP(Secure Copy Protocol) 등을 사용하여 이루어진다. 환경 설정 웹사이트가 실행될 호스팅 서버에서는 필요한 서버 소프트웨어, DB 설정, 보안 설정 등이 완료되어야 한다. 도메인 구성 IP 주소 대신 도메인을 사용한다. 사용자들이 기억하기 쉽기 때문이다. 호스팅 (Hosting) 웹페이지, 이미지, 스크립트 등 웹사이트의 모든 파일을 저장하고 관리하는 프로세스이다. 호스팅 서..
💡 사용한 폰트는 둥근모꼴이며, 전체적인 디자인 컨셉은 디자이너 길형진님 블로그의 둥근모꼴 소개 게시글에서 따왔다. 해당 게시글은 둥근모꼴 폰트를 Fixedsys 폰트와 결합하고 다듬어서 퍼블릭 도메인 라이센스로 배포한 페이지이다. FormData FormData 는 브라우저에 내장된 API로 HTML 폼 데이터를 쉽게 처리하고 전송할 수 있는 객체이다. new 키워드는 자바스크립트 객체의 새로운 인스턴스를 생성할 때 사용된다. 생성자 함수를 호출할 때 new 키워드를 사용하면 해당 함수가 생성자로 동작하며 새로운 빈 객체가 반환된다. 이렇게 생성한 FormData 객체의 다양한 메서드를 활용하여 폼 데이터에 대한 작업들을 처리할 수 있다. ex. 폼 데이터 수집, 파일 업로드, AJAX 요청 시 데이터..
💡 TIL 20231029 - Recoil Selector Selector란? Derived state 입력받은 state를 변형해 반환하는 순수함수를 거쳐 반환된 값 Selector는 파생된 state(derived state)의 일부를 나타낸다. 즉, 기존 state를 가져와서, 기존 state를 이용해 새로운 state를 만들어서 반환할 수 있다. 기존 state를 이용만할 뿐 변형시키지 않는다. derived state는 다른 데이터에 의존하는 동적인 데이터를 만들 수 있기 때문에 강력한 개념이다. atom의 output을 변형시켜 주는 개념 To Do 목록들을 카테고리별로 분류하려면 어떻게 할까? 컴포넌트 자체에서 전체 To Dos 배열을 불러온 뒤 분류할 수도 있지만, 이것은 데이터 자체를 바..
💡 TIL 20231019 - React-hook-form 복습 - register, validate, errors, handleSubmit React-hook-form import useForm 컴포넌트에서 useForm을 호출하면 register와 handleSubmit을 사용할 수 있다. form 내의 유효성 검사가 필요한 input들에 register 함수를 호출한다. required, minLength/maxLength, pattern, validate 등 💭 Register 함수 ; useForm hook으로 불러올 수 있음 검사가 필요한 input에서 register 함수를 호출 react-hook-form이 알 수 있도록 input에 이름을 부여해야 함 {...register("email..
