코딩애벌레

Typescript는 굉장히 까다로운 친구로, Props로 데이터를 전달 받았다면 해당하는 데이터의 타입을 정의해주어야 사용가능하다. 이때 총 3가지 방법이 있는데, 동일하게 Generic(제너릭)을 사용한다. interface / type / 직접정의 하는 방법이다. 빠르게 살펴보도록하자. /////////////// App.tsx ///////////////import React from "react";import TodoList from "./components/TodoList";const App: React.FC = () => { // ts 구간 const todos = [{ id: "1", text: "Finish the course" }]; return ( // html 구간 ..

이번엔 Saving(적금)을 해보자. Deposit(예금)과 동일하다고 생각할 수 있으나, 디테일 페이지에서 자유적립식과 정액적립식을 구분해놨기 때문에, 예금처럼 상품명 만으로는 해당 상품을 찾기 어렵다. 필요다면 Option의 데이터 정보에 자유적립인지 정액적립인지 구분하여 조건문을 통해 filter하거나 새로운 배열을 할당하면 된다. 하지만 도표는 양쪽 다 출력할 예정이기 때문에 결국 Detail을 dialog할 때는 같은 정보를 보여줄 예정이다. 즉! 적금과 똑같이 사용할 것이다. (실제 Detail 데이터는 도표기준으로 구분하지 않았다, List만 구분됨) 그리고 추가로 어제는 예상치 못했는데, dialog는 view(최상위 컴포넌트)에 변수가 존재하는데, 하위 컴포넌트에 OK 버튼이 존재하는 문..

올게 와버렸다. 마치 한국어(Python)를 하다가 외국어(JavaScript) 배우는 기분... 너무 묘한거 같다. 하지만 한국에서는 python 취직이 어려우니 javascript라도 잘해야지.... 화이팅하자 Function 함수 : 함수를 호출해서 실행할 수 있는 재사용 가능한 코드 블럭 `function` 이라는 키워드를 사용하여 정의하고 매개변수를 사용하여 값을 반환할 수 있는 타입 : 참조 자료형에 속하며 모든 함수는 Function object이다. 저번 표를 다시 살펴보자 function 키워드 : 함수 시작 functionName : 함수의 이름 params1, params2 : 함수의 매개변수들 statements : 표현식 return : 반환 값 (return 값이 없다면 unde..

오늘 배워볼 것은 JavaScript를 사용할 때 필요한 문법들을 배워볼 것이다. 3달전에 파이썬 문법 배울때가 새록새록한데 벌써 JS 문법을 배운다니... 정말 많이 배우고 있는 것 같다. 파이썬과 다른 부분이 많다보니 헷갈리는 문법들이 많은데, 그래도 뉘앙스가 비슷해서 이해하기는 쉬웠던 것 같다. 오늘도 화이팅. 아직 공식문서를 보는것이 익숙치는 않은데, 해당 페이지는 한국어로도 잘 해석되어있고 뭔가 귀여워서 보면서 하는게 좋을 것 같아서 링크를 첨부했다. JavaScript Standard Style English • Español (Latinoamérica) • Français • Bahasa Indonesia • Italiano (Italian) • 日本語 (Japanese) • 한국어 (Kor..

이제 웹의 구성을 모두 알게되는 파트다. 정적인 홈페이지에서는 크게 쓰이지 않던 언어가 2015년부터 동적 사이트가 유행하게되면서 필수요소가 되어버렸다. javascript의 역사나 지식은 크게 중요하다고 생각들지 않아서 스킵하고 바로 사용해보자. 나중에 이 언어로 백준을 풀어볼 날이 올까? DOM(The Document Object Model) : 웹 페이지를 구조화된 객체로 제공하여 프로그래밍 언어가 페이지 구조에 접근하는 방법을 제공한다. 이를 통해 문서의 구조, 스타일, 내용 등을 변경할 수 있다. DOM API는 다른 프로그래밍 언어가 웹 페이지에 접근 및 조작 할 수 있도록 페이지 요소들을 객체 형태로 제공하며 그에 따른 메서드까지 제공한다. : DOM에서는 모든 요소, 속성, 텍스트는 하나의..