반응형 Study34 [React] React hooks 정리 part.1 - useState, useEffect, useRef, useContext + Context API [React] React hooks 정리 part.1 - useState, useEffect, useRef, useContext + Context API 매일 React hook에게 다져지는 내 자신이 안타까워 나는 오늘로서 hook을 잘게 다지기로 하였다. 뚜둔. 하지만 너무 길어서 최적화 부분은 Part.2로 넘겨야겠닫..ㅎ 🔗 useState useState는 매우 중요하기 때문에, 별도로 정리해놓은 포스팅이 있으니 그곳으로 ㄱㄱ https://heeeming.tistory.com/entry/React-Hook-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%9B%85%EC%9D%98-state-%EA%B4%80%EB%A6%AC-%ED%95%A8%EC%88%98-useState-%ED%95.. 2023. 2. 20. [Git] 깃의 기본에 대해 공부해보자. part2 (revert reset restore push clone pull pull-request stash) [Git] 깃의 기본에 대해 공부해보자. part2 (revert reset restore push clone pull pull-request stash) 오늘은 깃을 사용하다가 실수했을 때 복구하는 방법 (revert reset restore) 로컬저장소의 코드를 원격저장소로 올리는 방법 (push) 원격저장소를 로컬저장소로 가져오는 방법 (clone / pull) 브랜치를 병합하는 방법 (pull request) 커밋 할 때 함께 올리기 싫은 코드들을 잠깐 보관하는 방법 (stash)에 대해 정리해보려 합니다 후후후 드디어 나도 깃의 기본개념은 이해하고 있는 새럼,,🙋♀️ 깃허브 기본 파트는 바로 아래 요기로~~! https://heeeming.tistory.com/entry/Git-%EA%B9%8.. 2023. 2. 12. [Git] 깃의 기본에 대해 공부해보자. (깃 기본 명령어 branch merge delete) [Git] 깃의 기본에 대해 공부해보자. (깃 기본 명령어 branch merge delete) 두려워서 피하기만 했던 깃 공부를 해보려 합니다. 🧐 깃 기본 명령어 정리(git basic) git init git 저장소 초기화 방법 git add index.html(파일명) 선택한 파일을 스테이징 영역에 올린다. git add index.html style.css .. 이런식으로 파일을 여러개 추가 가능 git add . 이렇게 하면 모든 파일을 스테이징 영역에 올리겠다는 뜻 git commit -m ‘커밋할 메시지’ 커밋 메시지와 함께 깃 레파지토리로 파일을 올린다. git restore --staged index.html (파일명) 스테이징 된 파일을 취소하고 싶을 때 사용하는 명령어 git sta.. 2023. 2. 11. [React] React Portal 기술을 이용하여 Modal을 만드는 방법(실습파일 하단 첨부) [React] React Portal 기술을 이용하여 Modal을 만드는 방법(실습파일 하단 첨부) 요즘 리액트 고급 기술들을 격파하고 있습니다. 그 중에 하나인 React Portal을 활용하여, Modal을 만들어봤습니다. Portal? Portal은 리액트 프로젝트에서 컴포넌트를 렌더링하게 될 때, UI 를 어디에 렌더링 시킬지 DOM 을 사전에 선택하여 부모 컴포넌트의 바깥에 렌더링 할 수 있게 해주는 기능입니다. 초기 세팅 //App.js import React, { useState } from "react"; import "./App.css"; import { MyModal } from "./MyModal"; import { ModalPortal } from "./ModalPortal"; co.. 2023. 2. 6. [React] React-query 정리 [React] React-query 정리 리액트를 공부하긴 했으나, API 관련 기술을 딥하게 다루거나, 서버 데이터 패치 라이브러리를 이용하여 데이터를 매핑한 경험은 거의 없거든요. React portal 부분과 React-query 부분은 아무리 봐도 이해가 되질 않아서 이번 주 내내 React-query에 대해 스터디하고 정리하였습니다. 원래는 노션에 정리하였습니다만, 블로그에도 같이 올려보려 합니다. (노션 진짜 최고다.. 내다버린 티스토리..ㅎ) 참고자료들 Codevolution의 강의를 따라서 실습해보고 공식문서(한글번역판 포함)보면서 이해하면 흠! 이런 거였꾼! 상태로는 돌입할 수 있는 것 같다. 🤔 (물론 이것은 돌머리인 내 기준쓰) Codevolution이 제공하는 스타터용 소스코드도 깃.. 2023. 2. 3. [TypeScript] 타입스크립트 기본 유니온타입 인터섹션타입 (TS basic Union Type & Intersection Type) [TypeScript] 타입스크립트 기본 유니온 타입 인터섹션 타입 (TS basic Union Type & Intersection Type) 🌱 들어가기 전 유니온 타입이란? 유니온 타입(Union Type)이란 자바스크립트의 OR 연산자(||)와 같이 A이거나 B이다 라는 의미의 타입이다. 1. 유니온타입 정의 //변수에 유니온타입 선언 var foo: string | number | boolean; // string과 number, boolean 타입을 허용한다. //함수 인자에 유니온타입 선언 function unionFunc(value: string | number) { // string과 number 타입만 인자로 받을 수 있다. console.log(value); } unionFunc('he.. 2022. 12. 14. [TypeScript] 타입스크립트 기본 인터페이스(interface) [TypeScript] 타입스크립트 기본 인터페이스(interface) 🌱들어가기 전 타입스크립트 인터페이스(interface)란? 타입스크립트 인터페이스(interface)란 상호 간의 정의한 약속 혹은 규칙을 의미하는데, 쉽게 말하면 인터페이스에 선언된 프로퍼티 또는 메소드의 구현을 강제하여 일관성을 유지할 수 있도록 하는 것. 1. 인터페이스 선언 interface User { age: number; name: string; } //변수에 활용한 인터페이스 const heeming: User = { //인터페이스 User의 구조와 같은 객체 구조를 만들지 않으면 문법 오류가 뜸 age: 100, name: '히밍', } 1. 인터페이스 생성 시 interface 키워드를 이용하여 생성 2. inte.. 2022. 12. 13. [TypeScript] 타입스크립트 기본 자료형 타입 선언(TS basic data type) [TypeScript] 타입스크립트 기본 자료형 타입 선언(TS basic data type) 타입스크립트 기본 타입 설정 :를 이용하여 자바스크립트 코드에 타입을 정의하는 방식을 타입 표기(Type Annotation)라고 한다. 1. 문자형(String) const str: string = 'hello'; //문자형 선언 2. 숫자형(Number) const num: number = 10; //숫자형 선언 3. 배열(Array) let arr1: Array = ['일','이','삼'] //문자 자료형 배열 선언(제네릭 방식) let arr2: Array = [1,2,4] //숫자 자료형 배열 선언(제네릭 방식) let numbers: number[] = [1,2,3] //숫자 자료형 배열 (리터럴 방.. 2022. 12. 10. [TypeScript] 타입스크립트 설치 명령어와 컴파일 명령어 [TypeScript] 타입스크립트 설치 명령어와 컴파일 명령어 타입스크립트 사용 이유? 타입스크립트는 자바스크립트 기반으로 한 번 컴파일해주는 언어이다. 공식문서에 따르면 타입스크립트는 Type을 추가함으로서 코드가 올바르게 작동하는지 확인할 수 있다. 라고 말하듯이 타입스크립트를 사용하므로서 에러를 사전에 방지하고 VScode 편집기 내부가 타입스크립트로 작성되어 있어 타입스크립트 개발에 친화적이기 때문이다. 1. 타입스크립트 설치 방법 1-1. 노드 설치 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 노드.js 공식 홈페이지로 이동하여 안정적.. 2022. 12. 9. 이전 1 2 3 4 다음 반응형
