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 요청 시 데이터..
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..
1. 변환 Transformations 요소의 모양을 이동하거나 변경하는 것 (ex. hover) 변환은 transform 속성을 사용하는데 이 속성은 변환하려는 요소에 추가하는 것이 아니라, 변환을 발생시키는 요소에 추가한다. 아래 예시를 통해 다시 살펴보자. .card-container { background-color: rgb(255, 255, 255); width: 350px; margin: 50px auto; box-shadow: 3px 3px 10px rgb(201, 200, 200); } .card-container:hover { transform: scale(1.05); } 변환하려는 요소는 .card-container이지만 여기에 transform 속성을 추가하는 것이 아니고, .card..
💡 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..
💡 TIL 20230914 - 비동기 함수로부터 받아오는 data에 제네릭 사용하기 비동기 함수로부터 받아오는 data에 타입 에러 발생 useMutation.tsx에서 useMutation 훅을 통해 받아오는 데이터의 형식을 아래와 같이 지정해두었다. // src/hooks/useMutation.tsx interface UseMutationState { loading: boolean; data?: object; error?: object; } // src/components/Auth/Auth.tsx // 생략 return ( // ... 중간 생략 {data?.ok ? null : ( {method === "email" ? ( 그랬더니 위의 data?.ok 부분에서 'Property 'ok' does ..
💡 TIL 20230912 - HTTP 상태 코드 자주 쓰는 HTTP 상태 코드 ✅ 200 OK 요청이 성공적으로 되었습니다. (성공) 👎 400 Bad Request 이 응답은 잘못된 문법으로 인하여 서버가 요청을 이해할 수 없음을 의미합니다. (클라이언트에서 Request할 때 발생한 문제) 🔐 401 Unauthorized 요청된 리소스에 대한 유효한 인증 자격 증명이 없기 때문에 클라이언트 요청이 완료되지 않았음을 나타냅니다. ⛔️ 403 Forbidden 클라이언트는 콘텐츠에 접근할 권리를 가지고 있지 않습니다. 401과 다른 점은 서버가 클라이언트가 누구인지 알고 있습니다. 🚫 405 Method Not Allowed 요청한 메서드는 서버에서 알고 있지만, 제거되었고 사용할 수 없습니다. (허..
