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 요청 시 데이터..
Clean Code 클린 코드 애자일 소프트웨어 장인 정신 - Robert C. Martin 0장 들어가면서 깨끗한 코드를 작성하는 방법은 배우기 어렵다 단순히 원칙과 패턴을 안다고 깨끗한 코드가 나오지 않는다. 잘 그린 그림과 그렇지 않은 그림을 구분할 줄 안다고 해서 그림을 잘 그릴 수 있는 게 아니듯이 스스로 연습하고 실패도 해보며 고생을 해야 한다. 1장 깨끗한 코드 코드가 존재하리라 코드는 더 이상 문제가 아니고, 모델이나 요구사항에 집중해야 한다고 생각하는 사람도 있을 것이다. 코드를 자동으로 생성하는 시대가 다가오면 프로그래머는 필요가 없게 될 것이다. 챗GPT? 코드가 사라질 가망은 전혀 없다. 왜? 코드는 요구사항을 상세히 표현하는 수단이기 때문 기계가 실행할 정도로 상세하게 요구사항을 ..
DOM 요소의 스타일 변경 1) className Product Name 60/60 Submit input.warning { background-color: rgb(248, 191, 145); } #remaining-chars.warning { color:rgb(211, 109, 26); } const spanElement = document.getElementById('remaining-chars'); spanElement.className = 'warning'; element.className('some-class')로 해당 요소에 클래스명을 추가할 수 있다. className으로 css 클래스 추가할 때의 단점 : 이미 클래스를 가지고 있는 요소의 경우, 해당 클래스가 새로운 클래스로 덮어씌어진다...
Event 유저가 사이트의 특정 부분에 입력, 클릭, 스크롤 하는 등의 행동을 의미한다. 자바스크립트를 사용하면 이벤트를 탐지하여 특정 코드를 실행하도록 할 수 있다. 웹의 경우 이벤트는 브라우저 윈도우 내에서 발생되는데, 다음와 같은 다양한 이벤트 타입들이 있다. 유저가 어떤 요소를 선택하거나 어떤 요소 위에 커서를 올려둔다(hover). 유저가 키보드에서 키를 선택한다. 유저가 브라우저 창의 크기를 재조정하거나 닫는다. 웹 페이지가 로딩을 완료했다. 양식(form)이 제출되었다. 비디오가 재생되거나, 멈추거나, 혹은 끝났다. 오류가 발생했다. 이벤트리스너의 콜백함수 let paragraphElement = document.body.firstElementChild; function changeParag..
