본문 바로가기

전체 글124

[React] Hooks란? 사용방법과 배경 정리 (useEffect, useState, Custom Hook) Hook Hook을 사용하여 기존 Class 바탕의 코드를 작성할 필요 없이, 상태 값 관리와 여러 React 기능을 사용할 수 있다. (v16.8 부터 추가됨) Hook이 만들어진 배경 기존 컴포넌트 사이에서 상태 로직 재사용이 어려웠다. React는 컴포넌트 간 재사용 가능한 로직을 붙이는 방법을 제공하지 않는다.(ex. 스토어에 연결) 따라서, render props나 HOC(고차 컴포넌트) 패턴으로 해결해 왔지만, 이런 패턴은 컴포넌트 재구성을 강요하며, 코드 추적을 어렵게 만든다. provicders, consumers, HOS, render props 그리고 다른 레이어로 둘러싸인 wrapper hell이 될 수 있다. 그래서 React는 상태 관련 로직 공유를 위한 좀 더 좋은 기초 요소가 .. 2023. 4. 21.
[OpenAI] 음악 추천 서비스 만들어보기 (React) 2.5부 오늘은 2부에 이어서 가볍게 2.5부로 리팩토링을 진행해보도록 하겠습니다. 원래 다음 포스팅은 3부로 기분 / 날씨 / 장르 등 키워드를 선택하여 노래 추천받는 기능 및 디자인까지 마무리 지으려고 했는데, 중간점검할 겸 조금이나마 정리된 코드를 공유하려고 합니다. 2부 포스팅은 아래를 클릭하면 볼 수 있습니다. [OpenAI] 음악 추천 서비스 만들어보기 (React) 2부 오늘은 저번에 이어서 OpenAI 를 사용한 서비스를 만들어보겠습니다. 1부 포스팅은 여기에서 볼 수 있습니다. 1부: https://bolob.tistory.com/entry/OpenAI-%EC%9D%8C%EC%95%85-%EC%B6%94%EC%B2%9C-%EC%84%9C%EB%B9%84%EC%8A%A4-%E bolob.tistor.. 2023. 3. 21.
[Level 3][그래프] 가장 먼 노드 (JavaScript) 문제 설명 n개의 노드가 있는 그래프가 있습니다. 각 노드는 1부터 n까지 번호가 적혀있습니다. 1번 노드에서 가장 멀리 떨어진 노드의 갯수를 구하려고 합니다. 가장 멀리 떨어진 노드란 최단경로로 이동했을 때 간선의 개수가 가장 많은 노드들을 의미합니다. 노드의 개수 n, 간선에 대한 정보가 담긴 2차원 배열 vertex가 매개변수로 주어질 때, 1번 노드로부터 가장 멀리 떨어진 노드가 몇 개인지를 return 하도록 solution 함수를 작성해주세요. 제한사항 노드의 개수 n은 2 이상 20,000 이하입니다. 간선은 양방향이며 총 1개 이상 50,000개 이하의 간선이 있습니다. vertex 배열 각 행 [a, b]는 a번 노드와 b번 노드 사이에 간선이 있다는 의미입니다. 입출력 예 n verte.. 2023. 3. 11.
[Level 3][이분탐색] 입국심사 (JavaScript) 문제 설명 n명이 입국심사를 위해 줄을 서서 기다리고 있습니다. 각 입국심사대에 있는 심사관마다 심사하는데 걸리는 시간은 다릅니다. 처음에 모든 심사대는 비어있습니다. 한 심사대에서는 동시에 한 명만 심사를 할 수 있습니다. 가장 앞에 서 있는 사람은 비어 있는 심사대로 가서 심사를 받을 수 있습니다. 하지만 더 빨리 끝나는 심사대가 있으면 기다렸다가 그곳으로 가서 심사를 받을 수도 있습니다. 모든 사람이 심사를 받는데 걸리는 시간을 최소로 하고 싶습니다. 입국심사를 기다리는 사람 수 n, 각 심사관이 한 명을 심사하는데 걸리는 시간이 담긴 배열 times가 매개변수로 주어질 때, 모든 사람이 심사를 받는데 걸리는 시간의 최솟값을 return 하도록 solution 함수를 작성해주세요. 제한사항 입국심사.. 2023. 3. 11.
[Tistory] 티스토리 코드블럭 스타일 변경하기 - highlight.js 티스토리 블로그 코드블록 스타일을 변경하는 방법에는 2가지가 있습니다. 1. 플러그인 적용하기 저는 플러그인을 적용해서 사용해 왔는데요, 여전히 코드블록이 마음에 들지 않아서 직접 수정해 보기로 했습니다. 2. 스킨 편집 메뉴에서 html, css 수정하기 먼저 html > head 태그 안에 아래 코드를 추가해주세요. {스타일_제목}이라고 되어 있는 부분에 스타일 제목을 넣어주면 됩니다. 참고로 저는 base16/chalk 테마를 선택했습니다. 스타일 입력 시, 대문자는 소문자로, 띄어쓰기는 - 로 바꾸어서 입력하면 됩니다. 예시) Atom One Dark -> atom-one-dark highlight.js 웹에서 사용법(Usage) 확인 가능합니다. (링크: https://highlightjs.or.. 2023. 2. 23.
[OpenAI] 음악 추천 서비스 만들어보기 (React) 2부 오늘은 저번에 이어서 OpenAI 를 사용한 서비스를 만들어보겠습니다. 1부 포스팅은 여기에서 볼 수 있습니다. 1부: https://bolob.tistory.com/entry/OpenAI-%EC%9D%8C%EC%95%85-%EC%B6%94%EC%B2%9C-%EC%84%9C%EB%B9%84%EC%8A%A4-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EA%B8%B0-React-1%EB%B6%80 [OpenAI] 음악 추천 서비스 만들어보기 (React) 1부 오늘은 ChatGPT에 사용된 OpenAI를 사용해서 음악 추천 서비스를 만들어보려고 합니다! 어떻게 만들면 되는지 과정을 기록해보고 공유해보겠습니다. OpenAI 가이드를 따라서 하면 어렵지 않게 서비스 bolob.tistor.. 2023. 2. 22.
[OpenAI] 음악 추천 서비스 만들어보기 (React) 1부 오늘은 ChatGPT에 사용된 OpenAI를 사용해서 음악 추천 서비스를 만들어보려고 합니다! 어떻게 만들면 되는지 과정을 기록해보고 공유해보겠습니다. OpenAI 가이드를 따라서 하면 어렵지 않게 서비스를 만들 수 있습니다. 아래 OpenAI 링크에서 가이드를 확인할 수 있어요. OpenAI 링크: https://platform.openai.com 0. 먼저 Api Key를 발급받아 저장해둡니다. 첫 번째 발급받을 때에는 영구히 유지할 수 있는데, 두 번째 발급부터는 기간이 있다고 하니 나중에 만료일자 신경쓰지 않아도 되도록 잘 저장해두어야겠어요. 저는 메모장과 노션에 따로 저장해두었습니다. 1. 먼저 저는 빠른 세팅을 위해서 CRA로 React 프로젝트를 생성해주었습니다. 음악 추천 서비스이니 이름은.. 2023. 2. 18.
[Level 3][DFS] 네트워크 (JavaScript) 문제 설명 네트워크란 컴퓨터 상호 간에 정보를 교환할 수 있도록 연결된 형태를 의미합니다. 예를 들어, 컴퓨터 A와 컴퓨터 B가 직접적으로 연결되어있고, 컴퓨터 B와 컴퓨터 C가 직접적으로 연결되어 있을 때 컴퓨터 A와 컴퓨터 C도 간접적으로 연결되어 정보를 교환할 수 있습니다. 따라서 컴퓨터 A, B, C는 모두 같은 네트워크 상에 있다고 할 수 있습니다. 컴퓨터의 개수 n, 연결에 대한 정보가 담긴 2차원 배열 computers가 매개변수로 주어질 때, 네트워크의 개수를 return 하도록 solution 함수를 작성하시오. 제한사항 컴퓨터의 개수 n은 1 이상 200 이하인 자연수입니다. 각 컴퓨터는 0부터 n-1인 정수로 표현합니다. i번 컴퓨터와 j번 컴퓨터가 연결되어 있으면 computers[.. 2023. 2. 10.
[Level 2][BFS] 게임 맵 최단거리 (JavaScript) 문제 설명 ROR 게임은 두 팀으로 나누어서 진행하며, 상대 팀 진영을 먼저 파괴하면 이기는 게임입니다. 따라서, 각 팀은 상대 팀 진영에 최대한 빨리 도착하는 것이 유리합니다. 지금부터 당신은 한 팀의 팀원이 되어 게임을 진행하려고 합니다. 다음은 5 x 5 크기의 맵에, 당신의 캐릭터가 (행: 1, 열: 1) 위치에 있고, 상대 팀 진영은 (행: 5, 열: 5) 위치에 있는 경우의 예시입니다. 위 그림에서 검은색 부분은 벽으로 막혀있어 갈 수 없는 길이며, 흰색 부분은 갈 수 있는 길입니다. 캐릭터가 움직일 때는 동, 서, 남, 북 방향으로 한 칸씩 이동하며, 게임 맵을 벗어난 길은 갈 수 없습니다. 아래 예시는 캐릭터가 상대 팀 진영으로 가는 두 가지 방법을 나타내고 있습니다. 첫 번째 방법은 11.. 2023. 2. 10.

티스토리툴바