본문 바로가기

분류 전체보기

 (92)
프론트엔드 기초: React + TypeScript(10)-todo, props, detailModal, 공부방향 propstodo 모달창을 통해 상세보기Todolist.tsxTodoModal.tsx프론트엔드 기초과정을 마치며프론트엔드 공부방향🔸클론 코딩 위주의 학습보다는 프로그래밍 기초 개념 및 원리 이해 중심으로 학습하기🔸개발은 기술 하나하나를 습득하는 것보다 패턴을 이해하는 것이 중요🔸HTML, CSS와 같은 UI 디자인도 중요하지만, 그보다는 로직과 기능 구현에 집중하기🔸객체지향 철학에 늘 관심을 가지기 (모든 분야의 개발 기반은 대부분 객체지향 기반)🔸우리의 목표는 FE나 BE, 웹 개발자보다 그냥 '개발자'가 되자❗
프론트엔드 기초: React + TypeScript(9)-todo 리액트의 컴포넌트클래스형 컴포넌트함수형 컴포넌트Todolist만들기state가 array 또는 object 자료일 경우현재코드 확장 개선🔸spread문법 ...은 배열의 새로운 복사본을 만들고 무장해제라는 뜻🔸이것을 이해하려면 참조형에 대해 이해해야 한다.🔸독립적인 메모리 공간이 생김타이머 만들기시계 만들기✨todo리스트 추가와 삭제
프론트엔드 기초: React + TypeScript(8)-리액트, 프로젝트생성 타입스크립트 기반의 리액트리액트란?React (웹 프레임워크)🔸React.js는 자바스크립트 라이브러리의 하나임🔸사용자 인터페이스를 만들기 위해 페이스북(조던 워크)에서 개발🔸싱글 페이지 어플리케이션(SPA) 및 모바일 어플리케이션 개발 가능🔸2011년 페이스북의 뉴스피드에 처음 적용, 2012년 인스타그램닷컴에 적용🔸2013년 발표, 오픈소스화 됨React 사이트🔸우리는 배우는 차원에서 스스로 할 수 있는 수준까지 되도록 끊임없이 고민해야함🔸공식문서 및 검색에 익숙해져야 함리액트의 동작원리🔸초기 랜더링🔸가상 DOM 변경🔸재조정🔸실제 DOM 업데이트(파셜랜더링)🤓프로젝스 생성하기.jsx
프론트엔드 기초: React + TypeScript(7)-타입스크립트 타입방법, 캡슐화, getter와 setter 리터럴 타입 (객체리터럴)🔸enum보다 심플한 방법🔸리터럴 타입은 특정 값을 나타내는 타입으로 해당 값이 정확하게 일치해야 한다.🔸타입 스크립트에서 사용되는 리터럴 타입에는 다양한 종류가 있다.🔸문자열 리터럴 타입✨클래스에서 인터페이스를 상속받을 때, as const로 타입을 추론할 수 있다.리터럴 타입을 사용하면 좋은 점🔸코드의 가독성이 높아진다.🔸잘못된 값이 들어오는 것을 방지할 수 있다.any 타입🔸타입스크립트는 타입에 관한 정보가 많을수록 좋다.🔸타입 정보는 개발자의 의도를 명확하게 전달할 수 있다.🔸효과적은 코드의 유지보수가 가능하다.🔸any 타입을 일부러 사용하지는 말자🔸타입을 지정할 수 없는 제한적인 경우에만 any 타입을 사용하라.유니온 타입🔸제한된 타입을 동시에 지정..
프론트엔드 기초: React + TypeScript(6)-타입스크립트, 타입추론, 타입명시, 인터페이스, ?선택적 프로퍼티, 열거형 타입스크립트 기초타입스크립트가 왜 필요할까?🔸자바스크립트 코드가 너무 지저분하다.🔸코드 스케일이 커지면서 코드 관리가 되지 않는다.타입스크립트를 사용하면 좋은 점🔸자바스크립트 기반보다 버그를 줄일 수 있다.🔸유지보수가 쉽다.🔸강력한 높은 퀄리티의 코드를 생산할 수 있다.수업대상🔸자바스크립트 기초 숙지🔸버그 위험을 낮추고 싶은 개발자선행학습🔸숫자, 문자열, 배열, 객체, 함수 데이터 타입🔸변수 객체지향철학, 동적메모리의 동작 원리타입스크립트 = 자바스크립트 + 타입체크🔸타입스크립트 환경에 자바스크립트를 코딩하면 동작함🔸자바스크립트 환경에 타입스크립트를 코딩하면 동작안함데이터 타입을 표기하면 좋은 점🔸컴파일 타임시 오류 체크🔸TS에서 바로 웹브라우저는 해석하지 못하기 때문에,JS를 통..
프론트엔드 기초: React + TypeScript(5)-함수포인터, 객체지향, 클래스, 오버로딩, 오버라이딩, 인터페이스, 람다식 함수 포인터함수 포인터의 사용🔸함수명 앞에 *만 붙여주면 함수 포인터가 선언된다.자료형 (*함수 포인터 이름)(인자목록);int (*func)(int a);🔸함수 포인터도 포인터이므로 주소값을 저장한다.🔸형식은 함수이지만 함수가 아닌 주소값을 저장하는 포인터 변수일뿐이다.🔸함수의 주소값만 저장하기 때문에 함수 포인터라고 한다.🔸함수 포인터를 만들땐 함수의 자료형과 같아야 한다. 함수 포인터 선언해서 사용해보기 함수 포인터 반복문 돌면서 switch case 값에 따라 주소값 바꿔서 printf() 찍어보기🔥함수 포인터의 사용 이유직접 함수를 호출하면 되는데 왜 복잡하게 함수 포인터를 사용할까?메모리의 크기 및 위치가 결정되는 시점은 컴파일 타임 또는 런타임 시점이다.컴파일 타임 시점에 크기나 ..
프론트엔드 기초: React + TypeScript(4)-포인터 변수 연산자🔸정적인 데이터들을 유기적으로 행동하게 하여 새로운 가치를 창출해 내는 것🔸예를 들어 학생들 과목 당 성적 데이터는 그 자체로는 의미가 없다.🔸총점 및 평균을 데이터화 해야 그 의미가 있다.산술연산자🔸사칙연산이 기본대입연산자🔸오른쪽에 있는 값을 왼쪽에 대입하는 역할증감연산자증감 연산자 종류증감 연산자 의미전위++aa의 값을 1 증가시킨 후 연산을 진행--aa의 값을 1 감소시킨 후 연산을 진행후위a++연산을 진행한 후 a의 값을 1 증가a--연산을 진행한 후 a의 값을 1 감소관계연산자🔸두 개의 피연산자로 관계를 따지는 연산자로 같은지 다른지 어느쪽인지 큰지 작은지 비교하는 연산자논리연산자🔸두 개의 조건식을 결합하여 하나의 결과 값을 만들어낸다.논리 연산자의 종류논리 연산자의 의미!피연..
프론트엔드 기초: React + TypeScript(3)-프로그래밍 기본 원리(C언어를 통한) 과정소개프로그래밍의 기본 원리코드의 내부 동작 구조를 이해하기기본원리를 이해하게되면 -> 알고리즘적인 사고 가능공통적인 로직 익힐 수 있음포인터의 개념 (사용하지 않더라도 이해는 해야함)함수 포인터 (변수에 담는 것)구조체, 공용체, 열거형객체지향 철학의 이해타입스크립트 기초타입스크립트를 쓰는 이유 이해하기타입스크립트 기반의 리액트프로그래밍 기본 원리왜 컴파일 기반 언어를 이해해야 할까?모든 프로그래밍 언어의 동작 원리는 거의 똑같다자바스크립트와 같은 스크립트 언어로는 동작 원리를 이해하기 힘든 구조이다C언어의 변수와 데이터 타입, 배열, 포인터 등의 동작 원리들은 자바스크립트 언어 동작의 근간을 이룬다.타입을 변수와 함수에 기본으로 사용해보면 타입스크립트를 더 쉽게 이해할 수 있다.프로그래밍의 개념프로..

티스토리툴바