일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- 리액트 공식문서
- 타입스크립트 props
- 자바스크립트
- typeScript
- Next 팀 프로젝트
- 파이썬 slice
- 파이썬 for in
- 타입스크립트
- 파이썬 replace
- 프로그래머스
- tanstack query
- 내일배움캠프 최종 프로젝트
- REACT
- 파이썬 enumerate
- 내일배움캠프
- 내일배움캠프 프로젝트
- 리액트 프로젝트
- 파이썬 for
- 내배캠 프로젝트
- 타입스크립트 리액트
- 파이썬 딕셔너리
- 리액트
- 리액트 훅
- useState
- 한글 공부 사이트
- React Hooks
- useEffect
- 파이썬 반복문
- JavaScript
- 코딩테스트
- Today
- Total
목록전체 글 (300)
sohyeon kim
📝 문제닝닝이는 예, 아니오로 답할 수 있는 질문을 좋아한다. 닝닝이 한 첫 번째 질문의 답은 "예"였다.이후, 2번째부터 닝닝이는 다음과 같은 형태의 질문을 계속해서 할 것이다.1 x y : x 번째 질문부터 y 번째 질문의 답이 모두 "예"였습니까?2 x y : x 번째 질문부터 y 번째 질문의 답이 모두 "아니오"였습니까?닝닝이가 위 질문을 하는 시점에, 당신은 이미 닝닝이가 한 x 번째 질문부터 y 번째 질문에 답한 적이 있다. 닝닝이가 하는 질문에 모두 답하는 프로그램을 작성하시오. 첫째 줄에, 닝닝이가 한 첫 번째 질문을 제외한 질문의 개수 N 이 주어진다. 즉, 닝닝이는 총 N 개의 질문을 했다.이후 N 개의 줄에, 닝닝이가 한 각 질문이 차례대로 1 x y 또는 2 x y의 형태로 주어진..
💡 Record : 객체의 key 와 value 값의 타입을 따로 지정하고 싶을 때 활용한다.interface PageInfo { title: string;}type Page = 'home' | 'about' | 'contact';const x: Record = { // key 에 Page 가, value 에 PageInfo 타입이 적용됐다. home = { title: 'home' }, about = { title: 'about' }, contact = { title: 'contact' },} 💡 Extract : Exclude 와 반대로 포함되어 있는 타입을 반환한다.type T0 = Extract;// 'a'type T1 = Extract void), Function>;// () => v..
💡 인터페이스와 타입 별칭의 차이점을 알아보자. 확장성 : interface 는 확장이 가능하지만, type 은 그렇지 않다.동일한 타입에 새로운 속성을 추가해야 하는 경우 인터페이스를 사용하자.반대로 의도치 않은 확장을 막기 위해 type 을 사용하는 경우도 있다.interface Hello{ name: string;}interface Hello{ age: number;} // 이제 Hello 는 name 과 age 를 둘 다 포함type Hello2{ name: stirng;}type Hello2{ age: number;} // 불가능 복잡한 타입 표현 : type은 유니언 및 인터섹션 타입을 정의할 수 있지만, interface는 불가하다.인터페이스는 주로 객체 형태의 타입을 정의하는데에..
📝 문제다솜이는 은진이의 옆집에 새로 이사왔다. 다솜이는 자기 방 번호를 예쁜 플라스틱 숫자로 문에 붙이려고 한다.다솜이의 옆집에서는 플라스틱 숫자를 한 세트로 판다. 한 세트에는 0번부터 9번까지 숫자가 하나씩 들어있다. 다솜이의 방 번호가 주어졌을 때, 필요한 세트의 개수의 최솟값을 출력하시오. (6은 9를 뒤집어서 이용할 수 있고, 9는 6을 뒤집어서 이용할 수 있다.) 🫠 나의 풀이import sysinput = sys.stdin.readlineN = input().strip()dic = {'0': 0, '1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, '7': 0, '8': 0, '9': 0}for i in N: dic[i] += 1dic['6'] =..
💡 리액트 공식문서 정리 : 탈출구 - Effect 로 값 동기화하기, Effect 가 필요하지 않은 경우 1. Effect 로 값 동기화하기 : 컴포넌트를 외부 시스템과 동기화하는 방법이벤트 핸들러와 달리 Effect 를 사용하면 렌더링 후에 코드를 실행해 React 외부의 시스템과 컴포넌트를 동기화할 수 있다.e.g. 채팅 서버에 대한 연결 설정, 컴포넌트가 화면에 나타났을 때 분석 로그 전송 Effect 란 무엇이고 이벤트와 어떻게 다른가?우선 컴포넌트 내부의 2가지 로직 유형에 대해 알아보자.렌더링 코드를 주관하는 로직컴포넌트 최상단에 위치props 와 state 를 적절히 변형해 결과적으로 JSX 를 반환렌더링 코드 로직은 순수해야 함수학 공식과 같이 결과만 계산해야 하고, 그 외엔 아무것도 ..
💡 리액트 공식문서 정리 : State 관리하기 - State 로직을 리듀서로 작성하기, Context 를 사용해 데이터를 깊게 전달하기, Reducer 와 Context 로 앱 확장하기 5. State 로직을 reducer 로 작성하기 여러 이벤트 핸들러를 통해 많은 state 업데이트가 이루어지는 컴포넌트는 관리하기 어려울 수 있다.이를 위해 컴포넌트 외부에서 'reducer'라는 단일 함수를 사용해 모든 state 업데이트 로직을 통합할 수 있다.이벤트 핸들러는 오로지 사용자의 'action'만을 명시하므로 간결해진다. reducer 를 사용해 state 로직 통합하기아래의 TaskApp 컴포넌트는 state 에 tasks 배열을 보유하고 있고, 세 가지 이벤트 핸들러를 통해 task 를 추가,..
💡 리액트 공식문서 정리 : State 관리하기 - 컴포넌트 간 State 공유하기, State 를 보존하고 초기화하기 3. 컴포넌트 간 State 공유하기 : state 를 부모 컴포넌트로 끌어올려 props 로 내려준다.두 컴포넌트의 state 가 항상 함께 변경되기를 원할 때➡️ 각 컴포넌트에서 state 를 제거하고 가장 가까운 공통 부모 컴포넌트로 옮겨 props 로 전달한다. 아래에서 각 패널은 독립적인 state 를 가지고 있어 show 버튼을 눌러도 다른 패널에 영향을 미치지 않는다.function Panel({ title, children }) { // 비제어 컴포넌트. 부모로무터 제어되지 않는다. const [isActive, setIsActive] = useState(false);..
📝 문제이번에는 학생들을 더욱 효율적으로 관리하기 위해 학생마다 고유한 학생 번호를 부여하기로 하였다. 학생 번호는 0부터 9 사이의 숫자로 이루어진 문자열로, 모든 학생들의 학생 번호는 서로 다르지만 그 길이는 모두 같다.학생들의 번호를 부여해 놓고 보니, 김진영 조교는 어쩌면 번호가 지나치게 긴 것은 아닌가 싶은 생각이 들었다. 예를 들어 아래와 같은 7자리의 학생 번호를 보자.오민식1212345김형택1212356이동호0033445 이처럼 학생 번호를 굳이 7자리로 하지 않고, 뒤에서 세 자리만을 추려서 남겨 놓아도 모든 학생들의 학생 번호를 서로 다르게 만들 수 있다.오민식345김형택356이동호445 하지만 세 자리보다 적게 남겨 놓아서는 모든 학생들의 학생 번호를 서로 다르게 만들 수 없다.학생..