본문 바로가기

전체 글

내일 배움 캠프 23_07_26 TIL TypeScript에서의 제네릭 타입에 대해서 알게 되었는고 또한 객체지향 프로그래밍에 대해서도 알게되었고 객체 지향 설계 원칙 - S.O.L.I.D 에 대해서도 알게되었다 내용은 아래에 서술하고 이미 존재하는 React 프로젝트에서 TypeScript로 전환하는 과정을 맨 아래에 서술해두겠다. [partial] interface Person { name: string; age: number; } const updatePerson = (person: Person, fields: Partial): Person => { return { ...person, ...fields }; }; const person: Person = { name: "Spartan", age: 30 }; const changedPers.. 더보기
내일 배움 캠프 23_07_25 TIL 오늘은 TypeScript에 대해서 이론과 간단한 프로젝트 설정 및 기본 코드에 대해서 배웠는데 TypeScript는 JavaScript의 약점을 보완하려 나온 플랫폼인데 자바 스크립의 약점으로는 1. 실행 시간에 결정되는 변수 타입 -JavaScript는 변수의 타입이 실행 시간에 결정된다 -이에 따라 개발자의 실수로 인한 오류가 발생하기 쉽고 찾기도 까다롭ㄴ다 -변수에 잘못된 타입의 값이 할당되어 발생한 오류를 찾기 위해서는 실행 시간에 변수의 값과 타입을 모두 확인해야해서 번거롭다 2.약한 타입 체크 -JavaScript는 let, const 와 같이 변수/ 상수를 구분하는 정도의 키워드만 제공됨 -예를 들면, let a = 1, a = "Hello"; 가 얼마든지 가능하고 이렇게 되면 예상하지 못.. 더보기
내일 배움 캠프 23_06_14 TIL 리액트에서 재렌더링을 위해 상태를 반영할 수 있는 state에 대해서 배웠는데 const [Todo, setTodo] = useState([ { id: id, Title: "리액트 공부하기", Content: "리액트 기초를 공부해봅시다.", }, ]); 이런식으로 Todo라는 배열에 State를 사용한다고 선언해주고 const clickAddButtonHandler = (event) => { event.preventDefault(); const newTodo = { id: id, Title, Content, }; //입력된 내용을 Todo 객체 배열을 불러와서 풀어준 후 newTodo를 추가해서 다시 디스플레이 setTodo([...Todo, newTodo]); //아래 두개는 입력 폼 비워주는 코드 .. 더보기
내일 배움 캠프 23_06_13 TIL 그동안 프로젝트 하느랴 뭐 하느랴 갖은 변명을 하며 못써왔던 TIL을 다시 작성하고자 다짐하며 글을 써 봅니다 이번 주에 들어서 드디어 주특기 트랙인 React를 배우게 됐는데 React는 함수형 컴포넌트와 클래스형 컴포넌트가 존재하며 주 도구로는 함수형 컴포넌트를 사용하며 React에서는 컴포넌트를 통해 UI를 재사용이 가능한 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다. 이에 관한 예시로는 원래 js로 작성을 하게되면 변경사항을 수정하고 변경사항을 저장하게되면 지금은 따로 DB를 사용하지 않기에 원래 기본적으로 존재하는 리액트 공부하기 Todo-List만 존재하고 아래의 열심히 공부하기 Todo-List는 사라지지만 React는 컴포넌트별로 재렌더링을 하기 때문에 우측 위에서 Reac.. 더보기
내일 배움 캠프 23_05_25 TIL 내일은 내일배움캠프 2주차의 마지막날로 개인과제를 주신다고하여 오늘까지 지급해주신 강의를 모두 듣자 하고 마지막 5주차 강의를 듣게되었는데 처음으로는 DOM Tree에 대해서 배우게되었다. JavaScript가 알아들을 수 있는 방식으로 해석한 내용을 토대로 DOM Tree를 구성하게되는데 DOM Tree는 HTML을 계층화하는것이 DOM Tree이다 CSS를 Tree로 세분화한 CSSOM Tree도 있는데 DOM Tree와 CSSOM Tree를 묶어서 Render Tree를 구성하게된다. 또한 DOM이란 브라우저에 기본적으로 내장되어있는 API이기 때문에 콘솔창에서 HTML을 제어할 수 있다. 또 API란 것에 대해서 배웠는데 API란 다른 시스템에서 제공하는 기능을 사용할 수 있도록 도와주는 중간자 .. 더보기
내일 배움 캠프 23_05_24 TIL 오늘은 콜백함수와 콜백함수에서의 this 바인드 그리고 동기와 비동기에대해서 강의를 들었고 비동기 처리를 하는 방법에 대해서도 배웠는데 후아 개념에 대해서는 어려웠지만 여러번 보면서 이해를 해나갔는데 이 개념을 코드에 적용시키는 건 또 다른 문제가 되었다 4주차 강의에 숙제가 있었는데 주어진 코드에서 class HttpError extends Error { constructor(response) { super(`${response.status} for ${response.url}`); this.name = 'HttpError'; this.response = response; } } function loadJson(url) { return fetch(url) .then(response => { if (re.. 더보기
내일 배움 캠프 23_05_23 TIL 오늘은 어제에 이어서 JS문법 3주차 강의를 들으며 공부를 하였다 var a = 1; var outer = function () { var inner = function () { console.log(a); var a = 3; }; inner(); console.log(a); }; outer(); console.log(a); 이 코드에서 실행을 예상했을 때 나는 단순히 맨위에서 전역변수로 a = 1 을 할당했으니까 첫 console.log(a)에서 1이 나오고 두번째 세번째 모두 1이 나올 줄 알았는데 실행값은 undefined 1 1 이였다 알아보니 이는 JS의 호이스팅 개념때문에 이렇게 된 것이였다. 다행히 공부를 하는 지금 틀려보면서 개념을 잡을 수 있었기에 다행인 것 같았고 this 바인딩에 대해.. 더보기
내일 배움 캠프 23_05_22 TIL 오늘은 내일 배움 캠프 2주차가 시작이 되었다 새로운 팀원들과 만나게 되었고 JS문법에 관해서 배우는 시간을 갖게 되었다 오늘 배운 JS 문법중에 1주차로는 기본적으로 알고 있던 let var const 변수 선언 for문을 비롯해서 switch case 문 do while문 문자열 과 Boolean 및 배열 선언 논리 연산자 및 다항 연산자 사용과 지역변수 선언 및 전역 변수 선언 을 알고있었기에 추후에 복습 때 부족한부분 더욱 깊게 공부해보기로하며 간단하게 한번 씩 보고 넘어갔고 2주차 강의에서는 Spread Operator 및 콜백 함수와 고차 함수에 관해서 배웠고 배열로 함수를 할당하고 저번에 프로젝트를 할 때 사용했었던 filter()함수 및 map()함수와 Set()함수를 배웠다 3주차 강의부.. 더보기

티스토리툴바