본문 바로가기

분류 전체보기321

학원 끝! 타입스크립트 시작! https://youtu.be/VJ8rvsw2j5w 타입스크립트는 자바스크립트를 사용하며 모든 기능을 포함하나 자바스크립트에 포함되지 않은 새로운 기능이 있다. 즉, 자바스크립트의 타입부분을 업그레이드한 것 - 변수 값에 데이터 타입 지정 가능 function add (a, b) { return a+b; } console.log(add('3', '5')); // 35 //////// function add (a: number, b:number) { return a+b; } console.log(add('3', '5')); // error - 객체지향적 프로그래밍 지향 - 컴파일 타임 오류 발견 가능 타입스크립트는 프로그래밍 언어인 동시에 컴파일러인 것이다. 타입스크립트 개발 환경 설정 npm i -g t.. 2023. 4. 20.
우당탕탕.. 팀프로젝트 리액트로 드래그 앤 드롭 구현하기 바닐라 JS 로 했듯... 이번에도 드래그앤드롭 구현을.. 맡아버렸다 근데 좀더... ?? 띠용한거 같다... 왜냐하면 전에 드래그앤드롭은 그냥 아무 위치에 스티커를 붙여주는 느낌이라면 이번 프로젝트는 드롭 타겟에 촥!! 붙어야 하는데 이게 가능할지 잘 모르겠다 ...ㅠㅠ 일단은 서칭과 노가다의 힘으로 드래그앤 드롭은 되긴한다! const onDragOver = e => { e.preventDefault(); }; const onDragStart = e => { e.dataTransfer.effectAllowed = 'move'; const originPosTemp = { ...originPos }; originPosTemp.x = e.target.offsetLeft; //칸반보드 컨텐츠 부분부터 ori.. 2023. 4. 12.
리덕스 정리 - 1 Action 상태에 어떠한 변화가 필요하게 될 때 액션을 발생시킨다. 이는 하나의 객체로 표현되며, { type: 'value', } type 필드를 필수적으로 가지고 있어야 하며, 나머지 값들은 추가해줄 수 있다. Action 생성 함수 액션 생성 함수란, 액션을 만드는 함수로 단순히 파라미터를 받아와서 액션 객체 형태로 만들어준다. export function 함수명(데이터) { return { type: 'value', } } 리턴값은 type 을 포함하는 액션 객체여야 한다. 액션 생성 함수는 필수는 아니지만 액션을 손쉽게 사용하기 위해서 사용해준다. Reducer 변화를 일으키는 함수로, 첫번째 파라미터는 state / 두번째 파라미터는 action 이다. export default functi.. 2023. 4. 10.
리액트와 리덕스로 TodoList 만들기 (삭제, 완료, 추가) 리액트, 리덕스 연습 겸 TodoList 를 만들어보았다. 디자인은 styled components로 간단하게... 만들었다. 배운 내용을 토대로 id를 nextId 로 따로 만들어서 state 로 빼줘서 처리해줬다. 삭제와 완료는 모두 해당 id 를 활용했으며 filter 메서드를 사용했다. // 초기 상태 const initState = { todoList: [], }; // id 제공을 위한 길이 let count = initState.todoList.length; initState['nextId'] = count; // 액션 타입 선언 const ADD = 'todo/ADD'; const REMOVE = 'todo/REMOVE'; const DONE = 'todo/DONE'; // 액션 함수 선언.. 2023. 4. 9.

티스토리툴바