혼자 적어보는 노트

타입스크립트를 가볍게 접한 후에 프로젝트를 진행하며 사용을 해보니 조금 더 깊게 알아야겠다는 생각이 들어서 구매했다. 알고 있던 부분은 넘어가고 알게된 부분이나 기억해야될 부분을 정리해서 작성해보기로 했다. 1장~2장 동적 타입의 자바스크립트는 프로그램 실행 전에는 타입을 알 수 없다. 또한 암묵적 타입 변환을 통해 원하지 않는 값으로 타입 변환이 되는 문제가 생겼을 경우 런타임 시점에 알게되니 추적하기에 어려움이 있다. 타입스크립트는 정적으로 코드를 분석해서 코드를 실행하기 전인 컴파일 시점에서 에러를 띄운다. 타입스크립트는 그저 동적으로 타입을 지정하는 자바스크립트에 정적인 타입을 붙여준 것이니 점진적으로 마이그레이션이 가능하다. 3장. 타입의 모든 것 - 어노테이션은 생략할 수 있다면 생략하자 : ..

아이폰의 heic 파일을 업로드할 경우 이미지가 엑박이 뜨는 현상이 발생했다. 업로드 시 heic파일을 제한하면 되겠지만 사용자의 편의를 위해 변환해주는 방법을 알아보았다. heic2any 라이브러리 사용 간단하게 라이브러리를 설치하여 해결할 수 있었다. import heic2any from 'heic2any'; const UploadImage = ({ onChange, defaultImage, ...props }) => { const [imageSrc, setImageSrc] = useState(defaultImage); const fileInputRef = useRef(null); const handleFileChange = async (e) => { let fileBlob = e.target.fil..

svg로 도형 만들기 ✍ 코드 ✅ 결과 태그들이 작성된 순서와 상관 없이 좌표를 지정해줄 수 있다. 만든 도형이 겹칠경우 html상에서 아래에 위치한 것이 앞으로 나타난다. 좌표들은 설명을 들었을 때는 이해가 잘 안되었는데 직접 좌표를 조정해서 위치를 바꿔보며 감을 익힐 수 있었다. fill, opacity 속성 fill속성을 사용하여 도형내부의 색을 채울 수 있다. rgba를 사용하여 투명도를 조절할 수도 있고 opacity를 사용하여 조절할 수도 있다. ✍ 코드 ✅ 결과 line * line은 stroke 속성이 지정되어 있어야 화면에 출력된다. * fill로 색상 지정 하는거 아님 ✍ 코드 ✅ 결과 직접 태그 안의 속성으로 지정하지 않고 css로 지정할 수 있다. ✍ 코드 ✅ 결과 그룹화 g태그를 ..

✅ 오늘의 학습 📌 데이터 시각화(1) 데이터 시각화에 대한 이론적인 부분과 라이브러리 소개, 그리고 SVG의 기본 태그, 속성들에 대해 학습했다. D3(Data Driven Documents) 데이터 기반으로 DOM을 다루는 자바스크립트 기반의 라이브러리이다. 데이터 시각화를 하기 위해 사용된다. 특징 - 다양한 데이터 포맷 처리 - HTML과 SVG 웹 표준 기줄을 다양하게 사용 - 데이터와 DOM element를 결합 - 화면의 해상도에서 깨지지 않는 Visualizing 가능 => 분석툴이 아니고 하나하나 구현을 해주어야 한다. D3을 사용하기 전에 SVG로 도형을 직접 만들면서 조금 익히는 시간을 가졌다. SVG로 도형만들기 SVG를 사용하여 그래프 만들기 기본적인 SVG 도형을 다루고 실습으로..

이미지 업로드시 이미지 압축 프로젝트 리팩토링을 하는 과정에서 이미지를 등록할 때 제한이 없었어서 용량 제한을 걸어주었었다. 하지만 사용자 입장에서 불편함이 느껴져서 차라리 사용자는 자유롭게 업로드를 하고 프론트에서 압축을 해서 서버에 보내주는 방법으로 변경을 하게 되었다. browser-image-compression 라이브러리 사용 const actionImgCompress = async (fileSrc) => { const options = { maxSizeMB: 1, maxWidthOrHeight: 1920, useWebWorker: true, }; try { return await imageCompression(fileSrc, options); } catch (error) { alert(erro..

✅ 오늘의 학습 📌 React 심화(7) - Strapi + Apollo + GraphQL+ Next.js NextLinkComposed Component Next의 Link는 스타일이없는 바닐라 태그를 렌더링하기 때문에 a태그로 구성된 Link컴포넌트를 새로 만들어주어 사용할 수 있다. import Link, { LinkProps } from "next/link"; interface NextLinkComposedProps extends Omit, Omit { href: LinkProps["href"]; as?: LinkProps["as"]; } const NextLinkComposed = ({ as, href, replace, scroll, shallow, prefetch, locale, ...prop..

✅ 오늘의 학습 📌 React 심화(6) - Strapi + Apollo + GraphQL+ Next.js 이해가 잘 안되었던 부분이나 처음 알게된 부분 위주로 정리했다 1. Strapi Relation 유저는 여러개의 포스트를 가지기 때문에 일대 다의 관계를 가짐 post에서는 user를 가지고 user에서는 posts를 가진다. 지정한 field가 어떤 것인지 잘 확인해야 함. 2. Strapi User 데이터 연결 테스트를 통해 게시물을 등록해보면 relations에 user가 자동으로 연결되지 않는다. 해당 게시물의 주인을 구분할 수 없으니 create/update/delete를 모든 유저가 할 수 있게 된다. -> 그래서 strapi 서버 파일에서 직접 설정해주어야 한다. (복잡주의) REST ..

✅ 오늘의 학습 📌 React 심화(5) - GraphQL - Apollo Client GraphQL - RestAPI의 한계를 극복하기 위해 등장했다. - RestAPI의 경우 특정 데이터를 받기 위해 필요없는 데이터 까지 불러올 때가 있다 - GraphQL의 쿼리 문법을 통해 필요한 데이터만 받아올 수 있고 페이지에 필요한 데이터를 한번에 받아올 수 있다. GraphQL의 규칙 1. POST 메서드로만 요청한다. 2. 백엔드에서 타입을 정의해야 한다. 3. 쿼리 변경은 mutaion을 사용한다. GraphQL의 단점? - 러닝커브가 RestAPI에 비해 높다. - HTTP 캐싱 -> 하나의 URI로만 모든 데이터를 가져오다보니 캐싱이 애매하다 -> 라이브러리를 통해 해결 가능 - 필요한 필드를 모두 ..