본문 바로가기

분류 전체보기222

[React.js] 코드 스플리팅 (Loadable) [React.js] 코드 스플리팅 코드스플리팅 (Code Splitting) 코드 스플리팅이란 말 그대로 코드를 잘라주는 것을 의미한다. 리액트의 라우터파일에서 아래와 같이 Login, Signup과 같은 컴포넌트가 있을때 각 컴포넌트가 필요할 때만 import 해주는 것이 코드 스플리팅이다. 아래 코드에선 Loadable이라는 라이브러리를 활용해서 코드 스플리팅을 위한 import문을 만들었다. import React from 'react'; import { BrowserRouter, Route, Routes } from 'react-router-dom'; import loadable from '@loadable/component'; const LogIn = loadable(() => import('@.. 2022. 12. 12.
[React.js] 제로초 웹게임 - 7. 틱택토 (useReducer, memo) 강의를 통해 배운 점 useReducer를 사용해 state를 한곳에서 관리 하는 방법을 배웠다. useReducer 자체가 redux의 스토어와 같은 역할을 하고, action 객체를 dispatch를 통해 실행신다는 개념 또한 리덕스의 Flux 패턴을 채용했다고 한다. 정석적인 공부 로드맵에 비해 useReducer를 배우는 타이밍이 많이 늦었는데, 그래도 좋은 강의 덕에 잘 살펴보아서 좋았다. useReducer 사용 import React, { useReducer } from 'react'; import Table from './Table'; const initialState = { winner: '', turn: 'O', tableData.. 2022. 12. 1.
[React.js] 제로초 웹게임 - 6. 로또 (useCallback, useMemo) 강의를 통해 배운 점 1달만에 강의 수강을 다시 시작했다. 그러다보니 클래스 컴포넌트 만드는게 살짝 잊혀져서 “어떻게하더라?” 라며 멍때리게 되더라. 노션에 메모 해둔 시리즈를 보면서 다시 기억을 되살릴 수 있었는데, 정말 노션과 블로깅은 개발자에게 필수인것 같다. 한번 습득했던 기술은 언제든 기억에서 사라질 수 있고, 그럴 때 기록했던 내용을 보면서 복기하면 다시 기억을 되살릴 수 있다는걸 깨달았다. 노션 기록과 블로깅이 꽤나 귀찮은 일이지만 최대한 열심히 해야함을 제대로 느꼈다. 클래스 컴포넌트 (강의코드) import React, { Component } from 'react'; import Ball from './Ball'; import { getWinNumbers }.. 2022. 12. 1.
[회고] 네트워크 스터디 회고 후회 또는 아쉬움 용산 스터디에서 네트워크 스터디를 1회차 한 뒤로 후회 아닌 후회를 하게되었다. 이전에 했던 공부가 효과적이지 못했었다는 것에 대한 후회였다. 부트캠프를 들어가기 전 네트워크 공부를 위해 MOOC에서 네트워크 입문 강의를 한바퀴 돌린적이 있었다. 명강의로 소문난 강의였고, 명성대로 정말 좋은 강의였다. 그 당시 나는 영상을 보고 노션 필기를 하고, 그 필기를 그대로 티스토리에 올리는 방법으로 공부했다. 마지막 강의까지 본 뒤엔 강의에 대해 스스로 생각하며 글로 쏟아내어 보는 정도의 학습만 진행했었다. 시험도 없었고, 누군가와 이야기할 수 없는 혼자 공부하는 상황이라 그렇게만 공부했었다. 인풋 아웃풋 관점에서 인풋은 10시간 가량, 아웃풋은 1시간 조차 되지 않는 수준이었다. 그러다 보니.. 2022. 11. 24.
[Javascript] (프로그래머스 level 2) 튜플 [Javascript] (프로그래머스 level 2) 튜플 💡 구글에 Javascript 풀이가 많이 없거나, 배운 점이 있으면 포스팅합니다. 내 풀이 function solution(s) { // {가 시작되면 }가 나올때까지 temp에 담는다. // 이temp를 temps에 담는다. const temps = []; for (let i = 1; i a.length - b.length) const ans.. 2022. 11. 22.
[Javascript] (프로그래머스 level 2) 캐시 [Javascript] (프로그래머스 level 2) 캐시 💡 구글에 Javascript 풀이가 많이 없거나, 배운 점이 있으면 포스팅합니다. 내 풀이 function solution(cacheSize, cities) { let time = 0; const cache = []; const isFull = () => cache.length >= cacheSize; const isCached = (city) => cache.indexOf(city) !== -1; const cacheHitTime = () => time += 1; const cacheHit = (city) => { const indexOfCachedData = cache.indexOf(city) cache.splice(indexOfCached.. 2022. 11. 22.
[Javascript] (프로그래머스 level 2) h-index [Javascript] (프로그래머스 level 2) h-index 💡 구글에 Javascript 풀이가 많이 없거나, 배운 점이 있으면 포스팅합니다. 내 풀이 function solution(citations) { citations.sort((a, b) => b - a) let count = 0; for (let i = 0; i citations[i]) { return count } } return count } 배운 점, 느낀 점 쉬운문제인데 1시간 30분에 걸쳐서 풀었습니다. 로직상 맞는것같은데 계속 틀려서 결국 구글링해서 힌트를 얻어 풀었습니다. 뭐때문에 이리 오래걸.. 2022. 11. 22.
[Javascript] (프로그래머스 level 2) 멀리 뛰기 [Javascript] (프로그래머스 level 2) 멀리 뛰기 💡 구글에 Javascript 풀이가 많이 없거나, 배운 점이 있으면 포스팅합니다. 내 풀이 function solution(n) { let count = 0; const arr = []; function DFS(L, sum) { if (sum > n ) return; if (sum >= n || L === n) { if (sum === n) { count++; } } else { DFS(L + 1, sum + 1) DFS(L + 1, sum + 2) } } DFS(0, 0) return count % 1234567; } 이번에도 어설프게 재귀함수 배웠다고 사용해봤다가 시간초과로 실패했습니다!! 어떻게 푸는건지 궁금해서 검색해보니 이건 DP.. 2022. 11. 21.
[Javascript] (프로그래머스 level 2) 점프와 순간이동 [Javascript] (프로그래머스 level 2) 점프와 순간이동 💡 구글에 Javascript 풀이가 많이 없거나, 배운 점이 있으면 포스팅합니다. 내 풀이 function solution(n) { const dp = Array(n + 1).fill(0); dp[1] = 1; for (let i = 2; i 0) { if (i % 2 === 0) { i = i / 2 } else if (i % 2 === 1) { count++; i = (i-1) / 2 } } return count; } 그래서 위 두번째 풀이처럼 n을 2로 나누다가 나머지가 생길때마다 count++을 해주는 형태로 간단하게 계산하였습니다. 이럴 경우 시간복잡도는 O(logN)이죠? 다른 사람들 풀이 참고 const solution.. 2022. 11. 21.
[Javascript] DFS 부분집합 만들기 부분 집합 수학 싫어하면 패스 😅 중고등학교 수학시간에 1,2,3을 가지고 부분집합을 만들려면 포함/미포함 2가지 경우를 3번 곱해서 (곱의법칙) 2x2x2 = 8가지의 경우의 수가 나온다고 배웠습니다. 이는 두가지 경우의 수를 3번 시행하는거라 뎁스4의 이진 트리와 같습니다. 모르겠고 그냥 구현하고 싶다면 수학적인 내용 모르겠고 그냥 구현만 하려면 아래 코드를 보시면 됩니다. 지금 내 수준으로 간단하게 DFS를 이야기해보면 DFS 함수 내에는 2가지 로직부분이 존재합니다. if문을 통해 예외처리를 하거나 마지막 처리를 해주고 (basecase) 탐색을 하는 부분 (순서가 중요함) 그래서 부분집합 탐색에서 어쩃든 포함/미포함, 1/0으로 트리가 나누어 질수 있다는 걸 깨닫고, 1로 탐색하는 방향, 0으로.. 2022. 11. 8.

티스토리툴바