본문 바로가기

반응형
SMALL

전체 글

15508 - Xayahh-Rakann at Moloco (Easy) 15508 - Xayahh-Rakann at Moloco (Easy)신의 직장을 아는가 ? 네카라쿠배당토몰두샌 여기서 몰을 담당하고 있는 몰로코가 신의 직장이라고 하더라 ...blog.naver.com 이사갔어요 더보기
[리액트 스터디] - Choosing the State Structure State를 얼마나 잘 구조화 하는가가 리액트 숙련도를 좌지우지함State 구조화 원칙state를 만들 때 더 나은 선택을 할 수 있는 선택지들이 있음 1. 연관된 state 그룹화하기 => 단일 state로 변수를 하나로 합치도록 병합하기2. state의 모순 피하기 => 여러 state가 모순되면 제거하기3. 불필요한 state 피하기 => props나 기존의 state 변수로 일부 정보를 계산할 수 있으면, 제외하기4. state의 중복 피하기 => 동기화 유지가 어려우니 중복을 없애자5. 깊게 중첩된 state 피하기 => 업데이트가 쉽지 않으니, 평탄화를 하자 결국 최종 목표는 오류 없이 상태를 쉽게 업데이트 하는 것임 아이슈타인이 아래와 같은 말을 했다.당신의 state를 가능한 단순하게 만들.. 더보기
[리액트 스터디] - Reacting to Input with State 리액트는 UI를 직접 조작하는거 대신 State를 따라서 UI를 변경하게 된다.선언형 UI와 명령형 UI 비교명령형 프로그래밍이 뭘까 ? 예시를 사용자가 폼을 제출한다고 했을 때로 하나 들어보자 - 폼에 무언가를 입력하면 "제출" 버튼이 활성화될 것- "제출" 버튼을 누르면 폼과 버튼이 비활성화되고 스피너가 나탈 것- 네트워킹 요청이 성공하면 폼은 숨겨질 것이고, "감사합니다." 메시지가 나타날 것- 네트워크 요청이 실패하면 오류 메시지가 보일 것이고 폼은 다시 활성화될 것 위 요청대로 개발을 하면 명령형 프로그래밍임 정확한 지침에 따라 코드를 자겅해야 JS가 정상적인 동작을 하게 되는 구조  UI가 복잡해질수록 구현 난이도가 어려워짐 그러니 UI 조작은 리액트에게 맡기고, 무엇을 보여주고 싶은지만 선언.. 더보기
[리액트 스터디] - Updating Arrays in State 배열 JS에서는 변경 가능하지만, state로 저장할 때에는 변경할 수 없도록 처리해야함. 객체랑 마찬가지로, state에 저장된 배열을 업데이트하고 싶을 땐, 새 배열을 생성한 뒤 이를 이용하여 업데이트해야함. 학습내용- React state에서 배열의 항목을 추가, 삭제 또는 변경하는 방법- 배열 내부의 객체를 업데이트하는 방법- Immer로 덜 반복해서 배열을 복사하는 방법변경하지 않고 배열 업데이트하기JS에서 배열은 객체의 다른 종류임. 객체처럼 React state에서는 배열도 읽기 전용이 되어야함. 재할당 이런거 하지마셈 (arr[0] = 'test' / push() / pop())  왜 state 변경 권장하지 않을까 ?1. 디버깅 힘듦, 렌더링 사이에 state가 어떻게 바뀌었는지 명확하게.. 더보기
[리액트 스터디] - Queueing a Series of State Updates state 변수를 설정하면 큐에 다음 렌더링이 들어간다고 했음. 근데, 다음 렌더링을 큐에 넣기 전에 그 값을 가지고 다른 수행도 하고 싶을 때가 있을거 같은데,,,, 이 시점을 어떻게 조절할 수 있을까 ? React state batches 업데이트  react.dev - CodeSandboxreact.dev using react, react-dom, react-scriptscodesandbox.io 이 전 장에서 한 번에 3씩 증가하는게 아닌 1씩 증가하는 것으로 알 수 있었다. state의 값은 그 시점의 값으로 고정되어 있기 때문이라 했는데, 한 가지 더 알아둬야 할 점이 있다. React는 state 업데이트 하기 전 이벤트 핸들러의 모든 코드가 실행될 때까지 기다린다.   어떤 손님이 "양념 .. 더보기
[리액트 스터디] - State as a Snapshot State읽고 쓴다는 점에서 JS 변수와 유사해보이지만, state를 이용하면 리렌더링을 발생시킬 수 있다. State 설정하면 렌더링이 동작사용자 이벤트가 UI가 바뀐다고 생각할 수 있는데, React의 개념에서는 state가 UI를 바꾸는거임. 즉, event => state 변경 => 리렌더링 개념   react.dev - CodeSandboxreact.dev using react, react-dom, react-scriptscodesandbox.io 위 예시에서 "Send"를 누르게되면 ? 1. onSubmit 실행2. setIsSend(true)가 실행됨. isSent를 true로 설정하고, 새로운 렌더링을 큐에 넣음3. React가 윙 돌면서 컴포넌트를 다시 렌더링 렌더링은 그 시점에 스냅샵을.. 더보기
21. Merge Two Sorted Lists https://leetcode.com/problems/merge-two-sorted-lists/description/ 이 문제는 풀긴 풀었다 # Definition for singly-linked list. # class ListNode: # def __init__(self, val=0, next=None): # self.val = val # self.next = next class Solution: def mergeTwoLists(self, list1: Optional[ListNode], list2: Optional[ListNode]) -> Optional[ListNode]: ans = ListNode(0) tmp = ans while list1 != None and list2 != None: if (.. 더보기
9375 - 패션왕 신해빈 9375번: 패션왕 신해빈 첫 번째 테스트 케이스는 headgear에 해당하는 의상이 hat, turban이며 eyewear에 해당하는 의상이 sunglasses이므로 (hat), (turban), (sunglasses), (hat,sunglasses), (turban,sunglasses)로 총 5가지 이다. www.acmicpc.net import sys input = sys.stdin.readline T = int(input()) dic = {} arr = [] R = 1 for _ in range(T): R = 1 arr = [] dic = {} N = int(input()) for __ in range(N): W, P = input().split() if dic.get(P) != None: arr.. 더보기

반응형
LIST