전체 글

타입별칭 타입 별칭을 이용하면 다음과 같이 변수를 선언하듯 타입을 별도로 정의할 수 있습니다. type 타입_이름 = 타입 형태로 타입을 정의합니다. //타입별칭 type User = { id: number; name: string; nickname: string; birth: string; }; // 같은 스코프 내에서는 중복정의 X function func(){ type User = { // 이 스코프 내에서는 User를 이런식으로 정의, 밖에서는 저런식으로 정의 } } let user: User ={ id: 1, name: "정지응", nickname:"Becky", birth: "1999.06.30", } let user2: User ={ id:2, name:"이동웅", nickname: "이동곰..

타입 스크립트는 어떻게 실행될까? 정리하자면 타입스크립트는 컴파일 결과 타입검사를 거쳐 자바스크립트 코드로 변환되는데, 이때 만약 코드에 오류가 있다면 컴파일 도중 실패하게 되므로 자바스크립트를 보다 더 안전하게 사용하는 미리 한번 코드를 검사하는 용도로 사용된다고 볼 수 있겠습니다~ 기본타입 기본타입이란 타입스크립트가 자체적으로 제공하는 타입들을 말합니다. (내장타입) 다음 그림은 타입스크립트가 제공하는 기본 타입들을 계층에 따라 분류한 "타입계층도" 그림입니다 그림을 자세히 보면 null, undefined,number,string 처럼 우리가 흔히 알고 있는 타입들도 존재하고 그 외의 any,void,never 같은 처음보는 타입도 존재합니다. 그리고 이런 타입들은 서로 부모, 자식 관계를 이루면서..

타입시스템이란? 언어에서 사용할 수 있는 아주 여러가지 값들을 어떤 기준으로 묶어서 타입으로 정할지 결정하고,또 코드의 타입을 언제 검사할지 그리고 어떻게 검사할지 등 우리가 프로그래밍 언어를 사용할 때 타입과 관련하여 지켜야 하는 규칙들을 모아둔 체계입니다. 이 타입시스템은 크게 두가지로 나눌 수 있는데, 첫번째는 모든 변수의 타입을 고정적으로 결정하는 정적 타입 시스템이있고, 나머지 하나는 코드를 실행하기 전에는 타입을 결정하지 않고, 코드를 실행하고 나서 그때그때 마다 유동적으로 변수의 타입을 결정하는 동적 타입 시스템이 있습니다 보통 C 나 Java 같은 엄격한 문법을 가진 언어들은 당연히 엄격한 정적 타입 시스템을 사용하고 있고, 파이썬이나 자바스크립트 같은 유연한 문법을 가진 언어들은 동적 타..

// 구조분해할당 function solution(dot) { const [num,num2] = dot; const check = num * num2 > 0; return num > 0 ? (check ? 1 : 4) : (check ? 3 : 2); } function solution(num_list) { const [a, b] = [...num_list].reverse(); return [...num_list, a > b ? (a-b):a*2]; } //const [a, b]는 [...num_list] 의 원소 중 순서대로 a와 b에 할당하는구나 // 콜백함수를 작성할때 {()=>{return A}} or (() => a) // {}를 쓰면 반드시 return 을 써줘야 하고, 만약 {}를 쓰지않으면..

코드스테이츠에서 솔로프로젝트로 쇼핑몰을 만들었다 8일동안 정말 고생을 많이 했다.. 처음에 react-router를 설치할때부터 오류가 났으니,,, 한마디로 첫 프로젝트는 오류 범벅이었다 개발속도도 느렸을 뿐더러, 보기좋은 코드를 작성한 것도 아니었다. 북마크 state를 정의할 최상위컴포넌트를 잘못잡아서, 중간에 아예 컴포넌트 props 연결을 갈아엎기도 했다.. (앞으로 꼭 프로젝트 구조도를 작성해야지!) 우여곡절이 많았지만 어찌저찌 그래도 프로젝트를 완성했다. 정말 치열했던, 그리고 어려웠던 8일이었지만 그만큼 배운게 참 많다. 무엇을 배우고 깨달았는지, 그리고 앞으로의 공부방향은 어떻게 잡는게 좋을지 적어보겠다 ㅎㅎ 개발 방법 1. 요구사항들을 메모장에 적은뒤, 하루동안 개발할 기능을 적는다 2...

이번과제는? 이번 과제에서는 Figma에서 디자인된 컴포넌트를 React 컴포넌트로 구현해야 합니다. 이를 위해, Figma에서 추출한 디자인 토큰과 Styled Components을 사용하여 일관된 디자인을 유지하고, Storybook을 사용하여 각각의 컴포넌트에 대한 문서화를 진행합니다. 이 과정을 통해 디자인 시스템 구축 및 코드로 디자인을 구현하는 경험을 쌓을 수 있습니다. 수업내용이 거의 문서로 진행되서 진짜 이해가 안되었다 ㅜ 페어분이 설명을 들은 뒤, 나만의 언어로 정리해보았다! 피그마에서 컴포넌트를 보고, 달라지는 요소에 대한 키와 값을 고민한다 이때 hover 기능인지, active 기능인지에 따라 외형적 기준이 달라진다 (잘 모르겠으면 input.js 와 inputsories.js 를 ..

Custom Hooks 개발자가 스스로 커스텀한 훅을 의미합니다 Custom Hooks은 코드 상에 반복되는 로직을 뽑아내어 재사용 하는 것을 말합니다 여러 url을 fetch 할때, 여러 input에 의한 상태변경 등 반복되는 로직을 동일한 함수에서 작동하고 싶을때 커스텀 훅을 사용합니다 (커스텀 훅도 일종의 함수, 다만 일반 함수와 다른 점은 커스텀 훅 내부에서 내장 hook을 불러 사용할 수 있다는 것) 아래의 두 컴포넌트는 동일한 로직을 포함하고 있습니다 //FriendStatus : 친구가 online인지 offline인지 return하는 컴포넌트 function FriendStatus(props) { // 동일로직 const [isOnline, setIsOnline] = useState(nul..

React.lazy() 와 Suspense는 코드분할과 지연된 컴포넌트 로딩을 간편하게 구현할 수 있습니다. 코드분할과 지연된 컴포넌트 로딩은 초기시간이 감소, 성능향상 등의 장점이 있습니다. 코드분할은 무엇일까? React에서 코드 분할하는 방법은 dynamic import(동적 불러오기)를 사용하는 것입니다. React 에서의 코드분할 form.addEventListener("submit", e => { e.preventDefault(); /* 동적 불러오기는 이런 식으로 코드의 중간에 불러올 수 있게 됩니다. */ import('library.moduleA') .then(module => module.default) .then(someFunction()) .catch(handleError()); }..