생각하다 생각하다

분할 정복(Divide and Conquer) 알고리즘에 대해 알아보자 안녕하세요 👀 오늘은 분할 정복(Divide-Conquer) 알고리즘에 대해서 배워볼게요. 분할 정복 알고리즘은 제가 좋아하는 수학자 존 폰 노이만이 개발한 정렬 알고리즘이에요. 정렬은 컴퓨터 과학에서 가장 기본적이면서 중요한 작업 중 하나인데요. 대용량의 데이터를 효율적으로 정렬하는 것은 많은 애플리케이션에서 핵심적인 부분이기 때문입니다. 이번 포스팅에서는 분할정복 알고리즘에 대해 알아볼게요 🧐 🍊 분할 정복(Divide and Conquer)이란? 분할 정복(Divide and Conquer) 알고리즘은 큰 문제를 작은 부분 문제로 분할하여 각각을 해결하고, 그 결과를 다시 결합하여 원래의 문제를 해결하는 알고리즘입니다. 분할 정..

🧐 React Hooks의 useMemo를 알아보자 안녕하세용. 오늘은 리액트 hooks 중에서도 자주 사용되는 편인 useMemo에 대해서 알아보려고 합니다. useMemo() 훅은 React에서 제공하는 하나의 최적화 기술로, 계산 비용이 많이 드는 함수 호출을 메모이제이션하는 데 사용됩니다. 이를 통해 컴포넌트의 리렌더링을 줄이고 성능을 향상시킬 수 있습니다. 본 포스팅은 react 공식 문서를 참고하여 작성되었습니다. 오늘은 useMemo Hook에 대해 알아보고 사용해 볼게용 🧐 🍊 useMemo는 뭐고, 어디에 사용될까? useMemo()는 React Hook 중 하나로, 함수형 컴포넌트에서 계산량이 많은 연산을 최적화하는 용도로 사용됩니다. useMemo()는 메모리에 값을 저장해두고, 해당..

자바스크립트에서 Set과 Map의 차이점에 대해 알아보자 자바스크립트에서 사용하는 Set과 Map은 알고리즘을 풀 때 유용하게 사용하는 함수인데요. 이번 포스팅에서는 자바스크립트의 Set과 Map에 대해 비교해보고, 각각의 활용법에 대해 알아볼게요 🧐 🍊 Set이란? Set은 중복을 허용하지 않는 값들의 집합입니다. 이는 고유한 값을 저장하고 검색하기 위해 사용됩니다. Set은 순서가 없기 때문에 요소에 인덱스로 접근할 수 없으며, 반복문을 통해 요소를 순회할 수 있습니다. Set은 주로 중복된 값을 제거하거나 고유한 값들을 추출하는 용도로 사용됩니다. 📍Set 생성하기 const set = new Set(); 📍값 추가하기 set.add(1); set.add(2); set.add(3); 📍값 삭제하기 ..

🧐 React Hooks의 useContext를 알아보자 props를 사용할 때 가끔 비효율적이라고 느낄 때가 있죠. 그럴 때 사용할 수 있는 것이 바로 context입니다. 본 포스팅은 react 공식 문서를 참고하여 작성되었습니다. 오늘은 useContext Hook에 대해 알아보고 사용해 볼게용 🍊 useContext란 무엇일까?useContext란 리액트 hook의 하나로, 부모 컴포넌트에서 생성한 context를 읽고(read), 구독(subscribe)할 수 있게 하는 도구입니다. 🤷🏻‍♀️ context? 그게 뭔데요context란 말이 와닿지 않을 수 있습니다. context를 직역하면 문맥, 배경, 상황이라는 뜻인데, props의 대안으로 나온 것이기 때문에 중간 컴포넌트를 거치지 않아도..

Next.js 파일 기반 라우팅과 동적 라우팅을 알아보자 👀 React에서 주로 사용되는 라우팅 라이브러리는 코드 기반 라우팅을 제공하고 있습니다. 이 방식은 라우팅을 컴포넌트 내에서 코드로 관리하죠. 일반적으로 URL 경로에 대한 라우팅 정보와 해당 경로에 렌더링할 컴포넌트를 매핑하는 방식으로 사용하고 있죠. 반면에, Next.js에서는 조금 다르게 라우팅을 합니다. 간단히 말하면, 프로젝트 디렉토리 내의 페이지 파일의 경로와 URL 경로가 일치하는 것입니다. 오늘은 이 파일 기반 라우팅에 대해서 알아볼게요 🧐 🍊 파일 기반 라우팅이란? Next.js 에서는 파일을 기반으로 라우팅됩니다. 🙋🏻‍♀️ 파일 기반 라우팅? 이게 무슨 소린가요 🧑🏻‍🏫 파일 이름이 곧 url 경로가 된다는 소리입니다! 📍 페..

리액트에서 컴포넌트와 태그의 차이점은 무엇일까? react에서 a 태그와 Link 컴포넌트는 링크를 생성하고 페이지를 전환할 때 사용됩니다. 그런데 이 두 접근 방식은 서로 다른 용법을 갖고 있습니다. 이번 포스팅에서는 a 태그와 Link 컴포넌트의 차이점에 대해 설명하고, 각각의 장단점과 어떤 상황에서 사용해야 하는지에 대해 알아보도록 할게요 🧐 🍊 태그란? 태그는 HTML에서 하이퍼링크를 생성하는 태그로 다른 웹 페이지, 문서, 이미지, 동영상 등 다양한 리소스에 대한 링크를 생성할 수 있습니다. 사용자가 클릭하면 해당 링크가 이동하거나 특정 동작을 수행하게 됩니다. 📍 태그 사용법 a태그란 by 3o14 웹 페이지에서 태그를 클릭하면 브라우저는 해당 링크의 주소로 이동하며, 새로운 페이지를 불러옵니..

next.js 새 프로젝트 생성하기 안녕하세요! 요즘 react의 프레임워크인 next.js를 공부 중이에요. 오늘은 next.js 프로젝트 생성하는 방법에 대해서 알아볼게요. 👀 🍊 Next.js란? Next.js는 리액트 기반의 프레임워크로, 웹 애플리케이션 개발을 더욱 쉽고 효율적으로 만들어줍니다. 이 Next.js는 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하여 페이지의 초기 로딩 속도를 향상시키고 SEO(검색 엔진 최적화)를 개선할 수 있습니다. 이는 사용자 경험과 웹 애플리케이션의 성능을 향상시켜줍니다. 🍊 Next.js의 특징 📍 서버 사이드 렌더링(SSR) Next.js는 서버 사이드 렌더링(Server Side Rendering)을 지원하여 초기 로딩 속도를 향상시키..

프로그래머스 Lv1. 게임 맵 최단거리 [자바스크립트] 🧶 문제 설명 ROR 게임은 두 팀으로 나누어서 진행하며, 상대 팀 진영을 먼저 파괴하면 이기는 게임입니다. 따라서, 각 팀은 상대 팀 진영에 최대한 빨리 도착하는 것이 유리합니다. 지금부터 당신은 한 팀의 팀원이 되어 게임을 진행하려고 합니다. 다음은 5 x 5 크기의 맵에, 당신의 캐릭터가 (행: 1, 열: 1) 위치에 있고, 상대 팀 진영은 (행: 5, 열: 5) 위치에 있는 경우의 예시입니다. 위 그림에서 검은색 부분은 벽으로 막혀있어 갈 수 없는 길이며, 흰색 부분은 갈 수 있는 길입니다. 캐릭터가 움직일 때는 동, 서, 남, 북 방향으로 한 칸씩 이동하며, 게임 맵을 벗어난 길은 갈 수 없습니다. 아래 예시는 캐릭터가 상대 팀 진영으로 가..