Next.js는 사전 렌더링이 가능하다는 특장점을 갖고 있는 리액트 프레임워크이다. React로 개발을 해봤다면 useEffect Hooks를 써봤을 것이다. 이 useEffect Hook에서 의존성 배열(dependency array)에 빈 대괄호를 넣을 경우 최초 렌더링 시에만 1회 실행된다. 그렇지만 이 경우 비어있는 배열에 바로 값이 저장되는 형태가 아닌, 최초 렌더링 시에는 비어있는 형태로 렌더링이 되었다가 useEffect가 실행되면서 내부 함수가 실행되는 과정 이후 한 번의 렌더링이 더 있은 후에야 해당 useEffect가 적용이 되는 형태이기 때문에 안좋은 사용자 경험(예를 들면 페이지 접속 시 깜빡인다든가)을 제공한다. 예를 들어 아래의 컴포넌트가 있다고 해보자. SampleCompone..
어제 급하게 달렸던 소프트웨어공학 프로젝트가 마무리되었다. 계속 까먹고 있었는데 제한 접근 라우팅은 로그인 기능이 있는 대부분의 서비스에서 필수로 요구되는 기능이다. 나는 localStorage를 사용해서 구현했다. App.js import React from "react"; import { Route } from "react-router-dom"; import Manager from "../src/pages/Manager"; import Main from "../src/pages/Main"; import Start from "./pages/Start"; import Login from "./pages/Login"; import Complete from "./pages/Complete"; import O..
const dataArray = [ { "orderCode": "0001", "orderDetails": { "메뉴이름31": 1, "메뉴이름35": 1, "메뉴이름36": 1, "메뉴이름40": 1, "메뉴이름41": 1, } }, ]; 이런 형태의 JSON 파일이 있다고 해보자. 여기서 나는 "메뉴이름31": 1을 빼오고 싶었다. 아니 그냥 map함수를 돌면서 안에 있는 값들을 전부 빼오고 싶었다. 그래서 그냥 단순하게 아래와 같이 뽑아오면 될 거라고 생각했다. {dataArray.map((data) => ( {data.orderCode} {data.orderDetails} )}; 근데 에러가 뜨는 것이었다. 생각해보니 data.orderDetails는 또 사전식 데이터이기때문에 저런 식으로 빼올 ..
배운 것, 공부한 것, 메모할 것 1. React - 소프트웨어공학 API통신 계속.. 다른 팀원이 맡은 부분 중 UI구현마저 잘 안되어있는 부분이 있어서 개고생함.. 2. 전공(SW&AI) - 네트워크 시험공부 4장 시작..
프로젝트를 진행중에, 페이지의 컨텐츠를 SNS에 공유하거나 URL을 복사하는 기능을 구현하게 됐다. 이전에 카카오톡으로 공유하기를 만들 때 귀찮았던 기억이 나서 고민을 하다가 좀 찾아봤는데 react-share 라는 아주 괜찮은 라이브러리가 있어서 소개하고자 글을 쓴다. (카카오톡만 해봐서 다른 SNS로의 공유는 귀찮은지 편한지 잘 모른다) npm 주소 https://www.npmjs.com/package/react-share react-share Social media share buttons and share counts for React. www.npmjs.com react-share라는 라이브러리인데, 주간 다운 횟수가 20만회라서 괜찮아 보였지만 근 9개월간 없데이트 였던 점을 보고 앞으로도 더..
오늘 성공한건 카테고리를 눌렀을 때 그 카테고리를 가진 JSON 배열을 띄워주는 것이었는데, 처음 해본건데 돼서 신기했다. const menuArray = [ { id: 1, category: "커피", name: "아메리카노(ICE)", price: "4,100원", imgUrl: Americano, }, { id: 2, category: "커피", name: "아메리카노(ICE)", price: "4,100원", imgUrl: Americano, }, { id: 3, category: "에이드", name: "사과에이드", price: "5,200원", imgUrl: Americano, }, { id: 4, category: "커피", name: "아메리카노(ICE)", price: "4,100원"..
링크 https://www.acmicpc.net/problem/14725 난이도(solved.ac 참고) 골드2 풀이 딕셔너리 선언 후 값을 받아서 맨 앞의 숫자는 빼준 뒤에 차례차례 트리 형태처럼 계층을 가지게끔 add 함수를 재귀적으로 반복하면서 넣어준다. 3 2 B A 4 A B C D 2 A C 이 예시를 보게 되면 딕셔너리에 크게 B와 A가 들어가게 되고, A안에 다시 B, C, D 순으로 딕셔너리가 들어가며 다른 가지로 C가 들어가게 된다. 이 형태가 되는 것이다. 여기서 각각은 모두 딕셔너리이며 이렇게 add 함수를 통해 이러한 계층 구조를 완성시킨다. 왼쪽 가지를 보면 A의 value는 B와 C이고(모두 딕셔너리), B의 value는 C(딕셔너리), C의 value는 D(딕셔너리)이다. 마..
링크 https://www.acmicpc.net/problem/1516 난이도(solved.ac 참고) 골드3 풀이 이 문제는 위상정렬을 이용한 동적계획법 문제이다. 위상정렬의 알고리즘은 다른 곳에 이미 잘 나와있으므로 짧게 얘기하면 아래와 같은 방식이다. 1. 진입차수가 0인 노드를 큐에 넣는다. 2. 큐가 빌 때까지 다음의 과정을 반복한다. 1) 큐에서 원소를 꺼내 해당 노드에서 출발하는 간선을 그래프에서 제거한다. 2) 새롭게 진입차수가 0이 된 노드를 큐에 넣는다. tower 배열의 마지막 값은 늘 -1이며 이것은 신경쓸 필요가 없으므로 그 이전 부분까지만 고려한다. tower의 첫번째 값은 해당 인덱스 번째 건물의 완성 시간을 나타내며 두번째 값부터 -1 전까지의 값의 개수만큼 진입차수를 갖고,..
링크 https://www.acmicpc.net/problem/6497 난이도(solved.ac 참고) 골드4 풀이 오랜만에 쓰는 알고리즘 포스팅이다. 이번에는 최소 스패닝 트리의 대표적인 예시인 크루스칼 알고리즘을 사용하여 문제를 풀었다. 크루스칼 알고리즘의 구현 과정은 아래와 같다. 1) 간선 데이터를 비용에 따라 오름차순으로 정렬 2) 간선을 하나씩 확인하며 현재의 간선이 사이클을 발생시키는지 확인 2-1) 사이클이 발생하지 않는 경우 최소 스패닝 트리에 포함 2-2) 사이클이 발생하는 경우 최소 스패닝 트리에 포함 X 3) 모든 간선에 대해 2)의 과정을 반복 find_parent 함수를 통해 매개변수 x의 루트 노드를 찾고, union_parent 함수를 통해 두 원소가 속한 집합을 합친다. p..
링크 https://www.acmicpc.net/problem/2960 난이도(solved.ac 참고) 실버4 풀이 쉬운 문젠데, 에라토스테네스의 체의 개념을 메모해두기 위해 포스팅한다. 에라토스테네스의 체는 N 아래의 소수를 빠르게 구하는 방법으로, 2부터 N까지의 인덱스가 True로 되어있는 배열들에 대해 i에 해당하는 값을 소수 배열에 넣은 뒤 그 i의 자연수 배수의 값들을 하나씩 False로 만들어주는 방식으로 소수를 구하는 방법이다. 예를 들어 2를 primes 배열에 넣는다면, 자연수 배수인 4, 6, 8, ... 의 값들을 모두 False 처리를 해주는 것이다. 이 문제는 K번째로 지워지는 수를 구해야 되었기 때문에 우선 result라는 배열에 지워질 값들을 전부 넣고 k-1번째 인덱스의 값..