[React] Why React
React 2022. 7. 28. 13:58

첫번째, React JS로 만들어진 웹사이트가 많다. 신기술을 배울 때 중요한 것은 누가 이 기술을 사용하는지, 그들의 규모가 얼마나 큰지, 이 기술이 그들에게 얼마나 중요한 지 꼭 살펴봐야 한다. 상위 1만 개의 웹 사이트 중 44.76%는 React.js 사용한다. 에어비앤비, 인스타그램, 페이스북, 넷플릭스와 같은 큰 회사들이 React를 사용한다. 그럼 React JS가 그들에게 얼마나 중요할까? 넷플릭스 웹사이트가 넷플릭스에게 얼마나 중요할까? 페이스북 웹사이트가 페이스북에게 얼마나 중요할까? 당연히 매우 중요하다. 그러므로 그들에게 React JS는 매우 중요하다!! 위를 토대로, 이런 거대한 회사에서는 안정적이고, 작동하는 것을 선택해야 한다. 만약 이런 사람들이 사용하는 library나 f..

[Medium] 707. Design Linked List
leetCode 2022. 7. 28. 09:52

문제 Design your implementation of the linked list. You can choose to use a singly or doubly linked list. A node in a singly linked list should have two attributes: val and next. val is the value of the current node, and next is a pointer/reference to the next node. If you want to use the doubly linked list, you will need one more attribute prev to indicate the previous node in the linked list. As..

[Medium] 1797. Design Authentication Manager
leetCode 2022. 7. 28. 09:50

문제 There is an authentication system that works with authentication tokens. For each session, the user will receive a new authentication token that will expire timeToLive seconds after the currentTime. If the token is renewed, the expiry time will be extended to expire timeToLive seconds after the (potentially different) currentTime. Implement the AuthenticationManager class: AuthenticationManag..

[Medium] 341. Flatten Nested List Iterator
React 2022. 7. 27. 09:52

문제 You are given a nested list of integers nestedList. Each element is either an integer or a list whose elements may also be integers or other lists. Implement an iterator to flatten it. Implement the NestedIterator class: NestedIterator(List nestedList) Initializes the iterator with the nested list nestedList. int next() Returns the next integer in the nested list. boolean hasNext() Returns tr..

[Medium] 155. Min Stack
leetCode 2022. 7. 27. 09:47

문제 Design a stack that supports push, pop, top, and retrieving the minimum element in constant time. Implement the MinStack class: MinStack() initializes the stack object. void push(int val) pushes the element val onto the stack. void pop() removes the element on the top of the stack. int top() gets the top element of the stack. int getMin() retrieves the minimum element in the stack. You must i..

[React] 전역 상태 관리
React 2022. 7. 27. 01:39

Context API ✨ 전역 상태 관리 전역적으로 관리되고 있는 상태 값에 접근하여 사용할 수 있는 것 🤔 전역 상태 관리는 언제 필요할까? 로그인한 유저 정보 Theme style 이 밖에도 웹 어플리케이션을 개발하다보면 전역 상태로 관리해야 하는 값들이 꽤 많이 생긴다. 이제 전역 상태 관리는 잠시 잊고 props에 대해 생각해보자. App이라는 최상위 컴포넌트가 있고 그 아래로 A, B, C, D 컴포넌트(children)가 있다. D가 그려야 하는 정보를 A 컴포넌트가 가지고 있다고 가정해보자. props는 어떤 데이터를 하위 요소에 전달할 수 있는 좋은 방법 중 하나이다. 그러나 props의 한계는 바로 위 요소인 C 요소에게 props를 전달 받을 수 밖에 없다. A 컴포넌트가 가지고 있는 ..

[React] 'react-scripts'은(는) 내부 또는 외부 명령 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.
Error 오류 잡기 2022. 7. 27. 01:22

제로베이스 예제 코드를 복사해서 npm start를 했을 때, 아래와 같은 오류가 발생했다. 이런 오류를 해결하는 방법을 포스팅 하려고 한다. 문제점 package.json 을 살펴보면 다음과 같은 예시의 스크립트를 볼 수 있는데, 이때문에 react-scripts 명령어가 실행되는걸 볼 수 있다. package.json npm "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, 해결 방법 1) 제 프로젝트에 react-scripts 설치하기 - npm npm install -save react-script..

[React] 비동기 프로그래밍과 API 호출
React 2022. 7. 26. 16:23

비동기 프로그래밍과 Promise async await fetch API axios useEffect 내에서 API 호출 시, 주의할 점 useEffect에서 첫번째 인자로 함수를 받는다. useEffect(() => { async function fetchData(){ const result = await axios.get( "https://jsonplacceholder.typicode.com/posts" ); console.log(result); console.log(result.data); return result.data; } fetchData().then((res) => { setDocs(res); }); }, []); 별도로 async 함수를 만들고 그 함수를 호출하는 방식으로 함수를 만들었다..