본문 바로가기

TIL -일간학습기록31

비동기 흐름 이해하기 동기적이란(synchronous)? 간단하게 그림으로 설명 하자면... |A시작-----------------A종료| |B시작---------------B종료| A업무를 마칠때까지 B업무를 막아두는것을 Blocking이라고하고, 끝나는 시점과 시작하는 시점이 같기때문에 동기적이라고 말한다. 비동기적이란(asynchronous)? |A시작-----------------A종료| |B시작---------B종료| 대표적 비동기 함수인 setTimeout 함수의 경우 이렇게 실행된다. https://poiemaweb.com/img/event-loop.gif A,B가 병렬로 진행된다. 순차적으로 실행 되지않는다. 자바스크립트 엔진은 단순히 작업이 요청되면 Call Stack을 사용하여 요청된 작업을 순차적으로 실행.. 2022. 2. 13.

Stateairline-client 과제 [React] 데이터 흐름의 이해와 비동기 요청 처리 이틀에 걸쳐 데이터의 흐름, state상태 끌어올리기와 useEffect AJAX요청에 대해 공부했다. 리액트의 컴포넌트는 1가지의 일만 하고 단방향의 데이터 흐름을 가진다. 그래서 데이터를 어디에 담아줘야할지 정해줘야한다.(데이터정의) 부모가 데이터를 가지고 자식에게 props(읽기적용)로 내려준다(인자 혹은 속성처럼 내려줌) 자식은 데이터를 내려받지만 데이터가 어디에서 왔는지는 알지못한다. [상태끌어올리기] 데이터의 흐름이 top-down 방식이지만, 자식컴포가 부모컴포의 상태를 바꿔야하는 경우에는 (예. 자식컴포에 전송버튼이 있어 클릭시 부모의 데이터 목록이 업데이트 되어야 하는경우) 부모컴포내에 상태를 변경하는 함수를 두고 자식컴포에 이 상태 .. 2022. 2. 9.

Weather API & data component 오늘자 todolist 작업 1. 와이어 프레임 + 컴포넌트 나누기. 2.Data , Weather Component 만들기. 1. 와이어 프레임 + 컴포넌트 나누기. 전체 페이지는 App에 띄우고, 다른 컴포넌트들은 각자 할일을 작게 나누어 만들기로 했다. App에 표시될 컴포넌트 외에는 List폴더에 따로 담아두었다. 어떻게 state와 props를 내려주어야 할지 헷갈릴것 같아서 부모자식간의 트리구조도 표현해봤다. 매일 반복할 일정을 띄울 DayLoop와 당일 일정후엔 리셋 될 TodoList는 AddList를 통해 사용자가 일정을 추가할때 토글버튼을 이용해 맞는 컴포넌트Prop으로 내려 줄 예정. remove는 어디에 포함해야할지 잘모르겠어서 진행하다가 끼워넣을거 같은데 아마 addlist에 들어.. 2022. 2. 5.

[React 자습서] Tic Tac Toe.. 투두리스트를 시작 하기에 앞서 리액트를 너무 모르는거 같아, 공식문서 자습서의 틱택토를 공부하고있다. function Square(props) { return ( {props.value} ); } class Board extends React.Component { constructor(props){ super(props); this.state = { squares: Array(9).fill(null), xIsNext : true, }; } handleClick(i) { const squares = this.state.squares.slice(); if(calculateWinner(squares) || squares[i]){ return; } squares[i] = this.state.xIsNext ? '.. 2022. 2. 3.

[TodoList]create react app 설치 프론트엔드 개발셋팅을 도와주는 툴 인 create react app 을 이용하여 투두 리스트를 시작하려고 한다 터미널에 `npx create-react-app todo` 를 넣었는데 뭔가 에러가뜸. 읽어보니 버전의 문제인것같고 해결하기 위한 명령어와 참고할 사이트 주소를 알려주어서 검색해봄. 리액트 공식문서에 가보니 이전에 create react app을 전역적으로 설치하였을 경우 삭제후 재설치하여 항상 npx 최신 버전을 사용하는것을 권장함. 그래서... 위의명령어로 삭제 해보려했는데 뭔가...무서워서 npm 버전 확인후 업데이트 하는법을 검색 해서 -g를 넣은 (-g는 global로 전역 설치?? 를말하는것 같다 npm 명령어 인듯) cra를 다시 설치 해봤지만 이버전은 안쓰이는 버전인것같다. 얼른 .. 2022. 1. 30.

리액트로 Todo list를 만들어보자 투두리스트를 쓰고싶은데 마음에 드는게 없어서 만들어보기로함 공부에 도움될수있도록 리액트 날씨api 비동기(어디서 들어가야할진 모르겠지만..) 부캠에서 배우는것들을 되도록 많이 사용해볼예정 2022. 1. 30.

Call back 함수로 Method 만들기 학습목표 forEach() ,indexOf(), map(), slice(), reduce(), filter()와 같은 메서드를 자바스크립트 코드로 만들고 만든 함수를 콜백하여 다른 함수를 만들어보자!😎 (비동기에서 콜백을 원활히 쓰기위한 선행학습) 만든것 예제.slice() _.slice = function (arr, start, end) { let _start = start || 0, _end = end; // 입력받은 인덱스가 음수일 경우, 마지막 인덱스부터 매칭 // (ex. -1 => arr.length - 1, -2 => arr.length - 2) // 입력받은 인덱스는 0 이상이어야 한다. if (start < 0) _start = Math.max(0, arr.length + start); .. 2022. 1. 24.

22.01.23 내가 자료구조를 쉽게 쓰는 날이 올까? 어려워서 너무 하기 싫다 + 중요한거라 자꾸 미루고싶다 그래도 꾸준히 해보고 포기하지말자 화이팅😣 2022. 1. 24.

Class와 Instance 학습목표 클래스와 인스턴스라는 용어를 이해할 수 있다. new 키워드의 사용법을 이해할 수 있다. class 키워드의 사용법을 이해할 수 있다. 현실 세계의 모델을 바탕으로 클래스의 메서드와 속성을 디자인할 수 있다. 객체 지향 프로그래밍 특징을 이해할 수 있다. 캡슐화 상속 추상화 다형성 JavaScript에서 객체 지향 프로그래밍을 구현할 수 있다. Prototype이 무엇인지 이해할 수 있다 객체 지향 프로그래밍의 상속(Inheritance)의 개념을 이해하고 코드로 작성할 수 있다. 상속관계를 가진 현실 세계의 모델을 코드로 작성할 수 있다. 클래스 상속의 원리를 이해할 수 있다. Prototype chain을 이해하고 설명할 수 있다. (__proto__) 면접에 자주등장하는 개념이라고 하니 잘.. 2022. 1. 22.

이전 1 2 3 4 다음

티스토리툴바