728x90 개발일지64 TypeScript 기초 문법 정리 TypeScript 기본 문법 기본 TS 타입 선언 // 문자열 let str: string = "hello"; // 숫자 let num: number = 100; // 배열 let arr: Array = [10,20,30]; let arr2: number[] = [10,20,30]; let arr3: Array = ["hello","hellololo" ]; let arr4: [string, number] = ["hello", 182]; // 객체 let obj:object = {name:"hello", age:29}; let person:{name: string, age:number}; // Boolean let isAvaliable: boolean = true; // 함수 선언 parameter와 r.. 2022. 11. 1. javaScript 스프레드 연산자로 객체 다뤄보기 js에서 객체는 동일한 key값(프로퍼티명)이 있는 경우 뒤의 프로퍼티가 첫 번째 프로퍼티를 덮어쓴다. let a = {x: 1, x: 2} console.log(a) // {x: 2} 이를 이용해 객체를 스프레드 연산자로 가져오면서 수정을 해줄 수 있다. let obj = { name: "john", job: "dev", }; console.log({ ...obj, job: "devdevdevdevdev" }); // => { name: 'john', job: 'devdevdevdevdev' } 혹시라도 객체 안에 객체가 또다시 있는 형식의 데이터에서 수정이 이뤄져야 한다면, 유사하게 아래와 같이 적용해줄 수 있다. let obj = { name: "1223", job: "222222", count: .. 2022. 10. 7. React useNavigate로 props 넘기기 useNavigate로 다른 페이지의 화면으로 이동할 때, props처럼 값을 넘기는 방법을 알아봤다. // 보내는컴포넌트.jsx import { useNavigate } from "react-router-dom"; const 어떤함수=()=>{ const navigate = useNavigate() let someDatas = { name:"hihi" value:"here" } return navigate(`/다른페이지주소`,{ state: someDatas });}> 다른페이지로 갑니당 } // 받는 컴포넌트.jsx import { useLocation } from "react-router-dom"; const 어떤함수=()=>{ const location = useLocation(); console.. 2022. 10. 5. CSS position을 알아보자 어떤 태그의 위치를 지정할 때 사용하는 position 요소는 타입을 선언하고 top bottum left right 속성으로 배치한다. relative 일반적인 문서의 흐름에 따라 배치한다. 요소 자기 자신의 원래 위치를 기준으로 배치한다. 원래 위치를 기준으로 얼마만큼 떨어질지 결정한다.(top bottom...) 위치를 이동하면서 다른 요소에 영향을 주지 않는다 문서 상 원래 위치가 그대로 유지된다.(개인적으로 header 나 무한스크롤 위치 지정 등에 이용 용이했다.) absolute 요소를 일반적인 문서 흐름에서 제거한다. 가장 가까운 위치에 있는 부모 요소를 기준으로 배치한다. 부모 요소 위치를 기준으로 얼마만큼 떨어질지 결정한다.(top bottom...) 부모 중 Position을 가진 요.. 2022. 10. 3. 이전 1 ··· 6 7 8 9 10 11 12 ··· 16 다음 728x90
