본문 바로가기

분류 전체보기198

[LeetCode] 100문제 달성 LeetCode에서 100문제를 풀었습니다. 역시나 아직 미천한 실력이기에 Easy 위주로 풀었지만, 앞으로 점점 실력이 늘어날거니 신경쓰지 않고 200문제를 향해 가야겠습니다. 2023년도 목표가 하루 1문제씩 풀어 400문제를 달성하는것이었는데, 1월이 끝나지 않아 벌써 100문제를 달성하니 기분이 좋네요 ㅎㅎ 이렇게 하루 1문제씩 꾸준히 풀어나가면 400문제는 꼭 풀수있을것 같습니다. 물론 난이도가 점점 높아지겠지만... 실력도 같이 높아질테니 할수.. 있겠..죠?? ㅎㅎ 스타트업에서 프론트엔드 개발자로 일한지 1달이 다되어 가네요. 아직 probation 기간이지만 최선을 다해 배우고 싶습니다. 프론트엔드 개발자로 일하다 보니 문제풀이가 업무에 어떤 도움이 되는건지? 살짝 의구심이 생기긴하는데요 .. 2023. 1. 25.
[Javascript] (LeetCode) 17. Letter Combinations of a Phone Number (Medium) [Javascript] (LeetCode Medium) 17. Letter Combinations of a Phone Number 💡 구글에 Javascript 풀이가 많이 없거나, 배운 점이 있으면 포스팅합니다. 내 풀이 /** * @param {string} digits * @return {string[]} */ //숫자들이 주어진다. // 숫자들은 각 후보가 주어진다. // 숫자들을 돌면서 어떤 후보가 뽑힐수있는지 모든 경우의 수를 잡는다. const letterMap = ['','','abc', 'def', 'ghi', 'jkl', 'mno', 'pqrs', 'tuv', 'wxyz' ] var letterCombinations = function(digits) { const result = [] .. 2023. 1. 1.
[Next.js] Next.js 에서 aos 사용법 (Animation On Scroll) 1. AOS 설치 yarn add aos yarn add @types/aos 또는 npm i aos --save npm i @types/aos --save 2. AOS Init() import AOS from 'aos'; import 'aos/dist/aos.css'; export default function AOSPage() { useEffect(() => { AOS.init() }, []); return ( 넥스트에서도 AOS 된당!!! ); } 저는 AOS에서 하라는대로 했는데 Next.js라 그런지 자꾸 안되어 Github issue를 뒤져서 방법을 찾아냈습니다. 저 같은 경우 import ‘aos/dist/aos.css’를 하지 않아서 css가 안먹은거였습니다. 아.. 2022. 12. 22.
[Javascript] (LeetCode Medium) 841. Keys and Rooms 💡 구글에 Javascript 풀이가 많이 없거나, 배운 점이 있으면 포스팅합니다. 내 풀이 /** * @param {number[][]} rooms * @return {boolean} */ var canVisitAllRooms = function(rooms) { const visitedSet = new Set([0]) const keys = [0] let keyIndex = 0 while (keyIndex { if (!keys.includes(key)) { keys.push(key) } }) visitedSet.add(visiting) keyIndex++ } r.. 2022. 12. 21.
[Javascript] (프로그래머스 level 2) n^2 배열 자르기 💡 구글에 Javascript 풀이가 많이 없거나, 배운 점이 있으면 포스팅합니다. 내 풀이 // 최대 차수 n까지 // 해당 차수의 // 행 채우기 // 열 채우기 function solution(n, left, right) { const arr = Array(n).fill().map((x) => Array(n)) for (let k = 0; k < n; k++) { arr[k][k] = k + 1 for (let i = 0; i < k; i++) { arr[k][i] = k + 1 arr[i][k] = k + 1 } } const firstOrder = arr.flat() return firstOrder.slice(left, right + 1) } 위와 같이 하면 로직은 맞다. 하지만 채점 하면 메모.. 2022. 12. 15.
[Next.js] Next.js 특징, 프로젝트 초기 세팅 1. Next.js 시작하기 넥스트는 리액트 프레임웤이다. 라이브러리에 비해 기능도 다양하고 라이브러리 사용하지 않고도 많은 문제들을 해결할 수 있도록 설계해두어서 편리하게 개발이 가능하다. Next.js의 특징 1. SSR Next.js는 SSR을 지원한다. 이를 통해 SPA의 단점이었던 SEO문제가 해결이 되며, 같은 페이지 컴포넌트를 실행할 때 발생하는 무의미한 깜박거림(Flickering) 현상을 방지할 수 있다. 또한 SSR로 미리 생성해 둔 HTML을 그대로 렌더하기에 한층 더 빠르게 화면에 표현해줄 수 있다. 이외에도 Next.js와 Next.js의 개발사인 Vercell에서 제공하는 Next/image, CDN, Edge Computing 등의 라이브러리와 기법들이 존재하는데 이를 통해 강.. 2022. 12. 13.
[React.js] 제로초 슬랙 클론코딩 - 1. 회원가입/로그인 페이지 (SWR) 강의를 통해 배운 점 SWR을 활용해서 data fetching을 효과적으로 관리할 수 있다. 비동기 처리 뿐 아니라 다양한 방식으로 전역상태를 관리할 수 있는데, 이름 자체가 stale-while-revalidate 인것처럼 api 호출을 효율적으로 관리해주는 것이 가장 큰 장점인것 같다. SWR이 좋다는 이야기도 많이 들었고, 캐싱 기능 등이 강력하고 Next.js와 함께 사용하면 엄청 좋다는 이야기를 많이 들었는데, 이번 강의를 통해 사용해볼수 있어서 좋았다. 로그인, 회원가입, 로그아웃 시 유저정보가 있는지에 따라 Redirecting을 해주는 방법을 배웠다. 이전에 프로젝트를 진행할 땐 스토리지에 토큰이 있는지 없는지를 확인해서 리다이렉션을 진행했는데 이번엔 유저 정보를 받으면 로그인이 되어있다.. 2022. 12. 12.
[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 &#39;react&#39;; import Table from &#39;./Table&#39;; const initialState = { winner: &#39;&#39;, turn: &#39;O&#39;, tableData.. 2022. 12. 1.
[React.js] 제로초 웹게임 - 6. 로또 (useCallback, useMemo) 강의를 통해 배운 점 1달만에 강의 수강을 다시 시작했다. 그러다보니 클래스 컴포넌트 만드는게 살짝 잊혀져서 “어떻게하더라?” 라며 멍때리게 되더라. 노션에 메모 해둔 시리즈를 보면서 다시 기억을 되살릴 수 있었는데, 정말 노션과 블로깅은 개발자에게 필수인것 같다. 한번 습득했던 기술은 언제든 기억에서 사라질 수 있고, 그럴 때 기록했던 내용을 보면서 복기하면 다시 기억을 되살릴 수 있다는걸 깨달았다. 노션 기록과 블로깅이 꽤나 귀찮은 일이지만 최대한 열심히 해야함을 제대로 느꼈다. 클래스 컴포넌트 (강의코드) import React, { Component } from &#39;react&#39;; import Ball from &#39;./Ball&#39;; import { getWinNumbers }.. 2022. 12. 1.

티스토리툴바