⚡문제정보 https://leetcode.com/problems/deepest-leaves-sum/ Deepest Leaves Sum - LeetCode Can you solve this real interview question? Deepest Leaves Sum - Given the root of a binary tree, return the sum of values of its deepest leaves. Example 1: [https://assets.leetcode.com/uploads/2019/07/31/1483_ex1.png] Input: root = [1,2,3,4,5,null,6,7, leetcode.com 가장 깊은 잎의 값들을 반환하면 되는 문제입니다. 위 이진트리에서 가장 깊은 de..
타입스크립트로 타입을 정해주면서 가장 헷갈렸던게 않이 이거 함수를 어떻게 정해주지..? 였읍니다. 😲기본적인 형태 interface login { (username:string, password:string) : boolean } let loginUser: login = (username:string, password:string) => { console.log('엄') return true } 기본적인 사용례는 다음과 같이 표현할 수 있습니다. 타입을 통해 표현하는 경우 다음과 같아집니다. type login = { (username:string, password:string) : boolean } let loginUser: login = (username:string, password:string) ..
🐕 인트로 https://xionwcfm.tistory.com/256 저번에 학습한 React.lazy의 연장선으로 코드 스플리팅을 도와주는 라이브러리인 Loadable Components를 학습해보려고 합니다. 이 라이브러리는 서버 사이드 렌더링을 지원한다는 장점이 있습니다. 또한 렌더링 하기 전에 필요할 때 스플리팅 된 파일을 미리 불러올수도있고요! $ yarn add @loadable/component 먼저 install을 해주고 사용해봅시다. 👻loadable 문법과 React.lazy 문법 import logo from './logo.svg'; import './App.css'; import React, { useState} from 'react'; import loadable from '@lo..
https://xionwcfm.tistory.com/156 요약 정리는 못 참지 않을까요? (13) 브라우저의 렌더링 과정 🙄파싱이 뭔가요? 파싱이란 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해하고 토큰에 문법적 의미와 구조를 반영하여 xionwcfm.tistory.com 😑브라우저의 렌더링 과정을 설명해보아요 예전에 정리를 한 기억이 있긴 한데 복습을 한다는 마음가짐으로 정리하도록 하겠습니다. 키워드를 중심으로 이야기 하는 형식으로 작성했습니다. 브라우저의 렌더링 과정은 다음과 같습니다. HTML, CSS , 자바스크립트, 이미지, 폰트파일 등 렌더링에 필요한 리소스를 먼저 서버에 요청하고 서버의 응답을 받아야합니다. 브라우저의 렌더링..
👱♂️간헐적 회고 나오늘 뭐했냐 1. redux-toolkit을 typescript와 연결해서 사용해보기 2. next.js 설치하고 한번 찍먹해보기 3. typescript 개발 환경 만들어보고 react랑 연결해보기 4. 브라우저 렌더링 과정에 대해서 포스팅으로 정리하기(~ing) 5. 인터페이스와 타입의 차이..(간략하게만 알게됨) 내가 아는 타입과 저것들을 연결해서 사용하는 타입스크립트가 많이 다르네요.. 타입스크립트 희망편을 보다가 바로 절망편으로 들어가는 느낌 하지만 자동완성기능이 너무나도 달달하고 익숙해지면 정말 편해질것 같습니다. 내일도 몸비틀어서 타입스크립트와 좀 더 친해져보는걸로..
그냥 쓰면 되지 않으려나...했는데 type의 벽에 가로막혀서 이거 어케 쓰냐... 하지말까...란 생각이 들었지만.. 아무튼 극복함 이렇게 올리기 버튼을 누르면 숫자가 2 오르고 내리기 버튼을 누르면 숫자가 2 내려가는 버튼을 만들어보겠습니다. npm install react-redux @reduxjs/toolkit src/modules/CounterSlice.ts import { createSlice } from '@reduxjs/toolkit'; const CounterSlice = createSlice({ name: 'CounterSlice', initialState: { number: 0 }, reducers: { up: (state, action) => { state.number += acti..
🐕 인트로 { "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": tr..
🐕 코드 스플리팅 리액트 프로젝트를 완성하여 사용자에게 제공할 때에는 빌드 작업을 거쳐 배포해야 합니다. 빌드 작업을 통해 자바스크립트 파일 안에서 불필요한 주석, 공백 등을 제거하여 파일크기를 최소화하기도 하고 브라우저에서 JSX 문법이나 최신 자바스크립트 문법이 원활하게 실행될 수 있도록 코드의 트랜스파일 작업도 같이 수행하곤 합니다. 만약 프로젝트내에 이미지와 같은 정적 파일이 있다면 해당 파일을 위한 경로도 설정하고요! 이러한 작업은 Create React-app에서는 웹팩이 담당합니다. 웹팩에서 별도의 설정을 해주지 않으면 프로젝트에서 사용 중인 모든 자바스크립트 팡리은 하나의 파일로 합쳐지고 모든 CSS 파일도 하나의 파일로 합쳐지게 됩니다. CRA로 프로젝트를 빌드하는 경우 최소 두개 이상의..
