본문 바로가기

분류 전체보기

 (85)
프론트엔드 심화: 상태 관리와 비동기 처리(1)-task-app 만들기 상태관리 라이브러리 종류🔸Redux🔸Mobx🔸Zustand🔸Recoil🔸Context (React)✨.ts .tsx 차이🔸리액트 컴포넌트를 사용하는곳에서는 .tsx파일 확장자를 사용하고그냥 TS만 사용할때는 .ts 확장자명을 사용하면 된다.❄️task앱 개발을 위해 나눠놓은 파일들🔸필요한 컴포넌트들을 생성해줬다.필요한 패키지 설치하기reduxyarn add @reduxjs/toolkityarn add react-reduxclsxyarn add clsxvanilla-extract/cssyarn add @vanilla-extract/cssyarn add @vanilla-extract/css-utilsyarn add @vanilla-extract/vite-pluginreact-iconsyarn a..
프론트엔드 기초: 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 감소관계연산자🔸두 개의 피연산자로 관계를 따지는 연산자로 같은지 다른지 어느쪽인지 큰지 작은지 비교하는 연산자논리연산자🔸두 개의 조건식을 결합하여 하나의 결과 값을 만들어낸다.논리 연산자의 종류논리 연산자의 의미!피연..

티스토리툴바