There is a programming language with only four operations and one variable X: ++X and X++ increments the value of the variable X by 1. --X and X-- decrements the value of the variable X by 1. Initially, the value of X is 0. /** * @param {string[]} operations * @return {number} */ var finalValueAfterOperations = function(operations) { return operations.reduce(((acc, cur) => cur[1] === '+'? ++acc:..

디바운스 (Debounce) 한번 요청된 것으로 기준으로 wait time이 지나지 않으면 다시 요청을 보내지 않는다. 만약 이벤트가 계속 발생하면 타이머가 계속 초기화된다. Leading edge에 실행될지 trailing edge에 실행될지 선택할 수 있다. 주로 ajax 검색에 쓰인다. 쓰로틀 (Throttle) 한번 함수가 실행된 후에 wait time이 지난 이후에만 다시 함수가 실행된다. 함수의 실행 시간과 관련 있다. 주로 스크롤을 올리거나 내릴 때 사용된다. 활용 검색 자동 완성 기능 매번 Request를 보내는 것이 아니라 디바운스나 쓰로틀을 사용하여 request를 보내는 빈도를 조절할 수 있다. 디바운스 : 타이핑을 하는 동안에는 요청을 보내지 않다가 타이핑을 멈추면 요청을 보낸다. ..

프론트엔드 면접 대비 (자바스크립트) var, let, const 차이 Var var는 이전에 변수를 선언하는 방식으로 더 이상 권장되지 않는다. var는 기존에 선언된 변수의 값을 덮어쓰며, 함수 스코프를 기준으로 동작한다. 문제점 var의 경우 변수를 선언할 때 선언과 초기화가 동시에 이뤄지기 때문에 호이스팅이 가능하게 된다. 블록 스코프를 무시하기 때문에 문제를 일으킬 수 있다. let es6에 새롭게 추가된 변수 선언 방식으로 블록 스코프를 가지며 선언, 초기화, 할당이 따로 이루어지기 때문에 호이스팅이 불가능하다. 재선언을 허용하지 않는다. const es6에 새롭게 추가된 변수 선언 방식으로 불변값을 가진다. let과 마찬가지로 블록 스코프를 가지며 호이스팅이 불가능하고 재선언을 허용하지 않는..

글을 추가하면 자동으로 새로고침 될 수 있도록 refresh 해보자 handlingSubmit에서 getPost를 하면 된다. 글을 삭제해보자 api.js에 deletePost를 추가해준다.App.js로 돌아와서 삭제 버튼을 만들고 onClick했을 때 handlingDelete가 동작 되도록 한다. handlingDelete = async (event) => { await api.deletePost(event.target.value) //delete 완료 후에 새로고침 되도록 동기화 시킴 this.getPosts() } render(){ return ( (내용 생략) this.state.results.map((post) => // 이거 안 감싸면 오류남 로 감싸도 됨 삭제하기 //글 삭제하기 delet..

hook? react 버전 16.8부터 새로 추가되었음 State를 쓸 수 없었던 function의 약점 보완 serState Import React, {useState} from 'react'; Const[상태명, set상태명] = useState(초기값) set상태명을 setState처럼 사용 State Stateless Function ○(hook) ○ Class ○ ○ 리액트 구조 간략히 리액트 구조를 확인해볼 수 있는 사이트 https://divjoy.com/

Life Cycle ? 컴포넌트의 요람에서 무덤까지 컴포넌트가 계속 변화하기 때문에 중요 핵심 4가지 Contructor State 구조 설정 컴포넌트가 Mount 하기 전에할 설정 setState X CompopnentDidMount 필요한 데이터 요청 각종 비동기 요청 (Subsription) ComponentDidUpdate 업데이트 이후 수정할때 If(){ setState() } //무한 반복 방지를 위해 조건문을 적용 ComponentWillUnmount 데이터 요청, 비동기 함수, 타이머 종료 -> data leak 방지 *setState X * console.log로 살펴보기 앞서 수정했던 App.js의 구조를 보면 다음과 같이 이루어져 있다. 자식 컴포넌트 :WorldClock 부모 컴포넌..

event? 웹 상에서의 모든 행위 React에서 이벤트를 나타내는 prop에는 on[Event] 이벤트를 처리하는 함수에는 handle[Event]\ 이벤트를 만드는 3단계 state 만들기 Handling 함수 만들기 이벤트가 발생하는 HTML 태그에서 on[Event]를 통해 handling 함수를 부른다. event를 활용해 stop 버튼 만들기 // 1단계 class WorldClock extends React.Component{ constructor(props){ super(props) this.state = { hour: this.props.time, minute : 0, stop: false, } //this.setState this.timer = setInterval(()=>{ this...

이전 글에서 만든 WorldClock 컴포넌트는 하나 추가할 때마다 일일히 태그를 작성해야되는 귀찮음이 있었다. 이를 해결하기 위해서 리스트로 간편하게 바꿀 수 있다. function App() { const cityTimeData = [ ['서울',10], ['베이징',9], ['시드니',12], ['LA',17], ['부산',10] ] const WorldClockList = cityTimeData.map((citytime,index)=> ) return ( Hello World {WorldClockList} } ); }결과가 동일하게 나오는 것을 볼 수 있다. 반복성 있는 컴포넌트에서 엘리먼트는 반드시 고유한 key를 가져야한다..