오열매의 코딩 공간

* 설치 type -p curl >/dev/null || (sudo apt update && sudo apt install curl -y) curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | sudo dd of=/usr/share/keyrings/githubcli-archive-keyring.gpg \ && sudo chmod go+r /usr/share/keyrings/githubcli-archive-keyring.gpg \ && echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/githubcli-archive-keyring.gpg] ht..

interface와 type은 TypeScript에서 타입을 정의하는 두 가지 방법입니다. 둘 다 객체, 함수, 클래스 등을 포함한 모든 타입을 정의할 수 있습니다. 그러나 두 방법은 몇 가지 차이점이 있습니다. interface는 주로 객체의 구조를 정의할 때 사용되고, type은 주로 타입(alias)을 정의할 때 사용됩니다. interface는 확장(extends)이 가능하지만, type은 불가능합니다. interface는 선언 합침(declaration merging)이 가능합니다. 즉, 같은 이름의 인터페이스를 여러 번 선언할 수 있고, TypeScript는 이를 자동으로 합쳐줍니다. type은 합칠 수 없습니다. interface는 구조가 비슷한 다른 인터페이스와 함께 사용될 때 유용합니다. ..

Github 저장소에 들어가면 Settings가 있다. 이 곳에서 저장소 이름을 수정하면 된다. 하지만 로컬의 원격 저장소 이름은 수정되지 않는다. 이를 위해서 아래의 과정을 진행한다. git remote -v 위 명령어를 통해 현재의 원격 저장소 이름을 확인한다. 그 후, 바뀐 저장소의 주소를 가져와서 아래의 코드에 넣어 명령어를 입력한다. git remote set-url origin # git branch 명 변경 git branch -m 참고) - https://iambeginnerdeveloper.tistory.com/82 - https://www.freecodecamp.org/korean/news/git-rename-branch-how-to-change-a-local-branch-name/

자바스크립트에서 배열과 객체를 복사할 때, 얕은 복사와 깊은 복사를 구분하여 사용합니다. 얕은 복사 얕은 복사는 객체나 배열의 1단계 프로퍼티와 요소들만 복사하는 것을 말합니다. 객체나 배열 내부에 객체나 배열이 포함되어 있을 경우, 내부 객체나 배열은 참조 관계를 유지하게 됩니다. 얕은 복사는 배열의 slice() 메소드를 이용하여 구현할 수 있습니다. const arr1 = [1, 2, [3, 4]]; const arr2 = arr1.slice(); // 얕은 복사 console.log(arr1[2] === arr2[2]); // true 위의 코드에서 arr1 배열을 slice() 메소드를 이용하여 복사하였습니다. arr2는 arr1과 같은 배열이지만, 내부의 배열 [3, 4]는 참조 관계를 유지하..

예제를 통해 살펴본다. (예제: React와 Typescript 이용 / react-beautiful-dnd 이용) ... function App() { const [toDos, setToDos] = useRecoilState(toDoState); const onDragEnd = (args) => { // args 의 타입 미지정 에러 console.log(args); }; return ( ... args의 타입을 알아야 한다. 하지만, onDragEnd에 대해 아는 정보가 없다. 아래와 같이 코드를 수정한다. ... function App() { const [toDos, setToDos] = useRecoilState(toDoState); const onDragEnd = (args) => { // ar..

* 설치 yarn add react-beautiful-dnd yarn add @types/react-beautiful-dnd * 세팅 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; // test array const toDos = ["a", "b", "c", "d", "e", "f", "g"]; function App() { // drag가 끝났을 때 실행할 함수 const onDragEnd = () => {}; return ( // DragDropContext ~ onDragEnd 필수 {/* Droppable ~ droppableId 필수 */} {/* Droppable에는 제공되는 props 존재-> chil..

카카오톡에 링크를 공유했을 때 나오는 미리보기를 Meta Tag 의 og 를 이용하여 설정할 수 있다. # 양식 https://example.com/page.html"> https://example.com/image.jpg"> * index.html 의 head 태그 안에 정의한다. 만약 설정했는데 카카오톡에서 미리보기가 제대로 나오지 않는 경우, https://developers.kakao.com/tool/debugger/sharing 위의 kakao developers의 공유 디버거에서 캐시 초기화를 하면 된다. 참고) - https://velog.io/@byeol4001/Meta-Tag-OG%EC%98%A4%ED%94%88%EA%B7%B8%EB%9E%98%ED%94%84-%EC%82%AC%EC%9A..

not not 연산자와 non-null assertion 연산자는 모두 JavaScript와 TypeScript에서 사용되는 연산자 중 하나이지만, 다른 목적으로 사용됩니다. 1. not not(!!) 연산자 not not(!!) 연산자는 Boolean 값을 반환합니다. 이 연산자는 값을 불린값으로 변환할 때 사용됩니다. 이 연산자를 사용하면, 값이 존재하면 true를 반환하고, 값이 존재하지 않으면 false를 반환합니다. 예를 들어, 다음과 같이 사용할 수 있습니다. const myValue = 0; const myBoolean = !!myValue; // false not not(!!) 연산자는 값이 falsy한 값일 경우 false를 반환합니다. JavaScript에서는 다음과 같은 값을 fals..

이번 예시는 React Query v4 의 useQuery라는 훅의 Option인 queryFn을 예시로 살펴본다. queyrFn는 promise를 반환하는 함수여야 한다. useQuery는 주로 데이터 fetching으로 사용하는데, 이를 위해 fetch 와 axios를 이용한 다양한 표현들을 알아보자. 각 api는 async/await 와 Promise chaining 을 사용하여 나타낼 수 있다. 참고로, axios와 fetch의 성능 차이는 크게 없으며, 아래 함수들의 return값은 모두 Promise{} 이다. axios와 fetch의 성능 차이는 크게 없다. 다만, axios가 가독성이 더 좋고 사용할 수 있는 기능이 많기 때문에 더 선호되는 경향이 있다. fetch는 웹 내장 함수이기 때문..

fetch API에서 async/await과 then은 모두 비동기 코드를 작성하는 방법입니다. 각각의 사용 시기는 코드 구조 및 개발자 선호도에 따라 다를 수 있습니다. async/await를 사용한 비동기 작업 async/await는 비동기 코드를 작성할 때 사용됩니다. fetch API는 네트워크 요청이 비동기적으로 처리되기 때문에, async/await를 사용하여 코드를 동기적으로 작성할 수 있습니다. async function fetchData() { try { const response = await fetch('https://example.com/data.json'); const data = await response.json(); console.log(data); } catch (error..