joycie416 님의 블로그

프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr문제 이해이 문제는 주어진 숫자를 잘 조합해서 가장 큰 수를 만드는 문제이다. 그래서 기본적으로 내림차순 정렬을 해야하지만, 320과 32이 주어진 경우 32320이 32032보다 더 크다는 것에 유의해야 한다. 그래서 이 문제는 sorting을 조금 더 효율적으로 다룰 수 있는지 확인할 수 있는 문제인 것 같다. 먼저 내 첫 풀이는 맞는 풀이인 것 같지만 너무 시간이 오래 걸려서 시간 초과로 실패했다. 그래서 다른 사람 코드를 참고했다. 다른 분들 풀이를 보니 아이디어가 대단해보였다. ㅜ 방법 1이 방법은 위에 ..

우리는 외부에서 데이터를 가져와서 사용해야 하기 때문에 이를 위한 관리 도구가 필요하다. 이전에 다루었던 것처럼 이번에도 역시 TanStack Query(React Query)를 사용할 것이다. 참고로 Next.js에서는 `fetch`를 최적화해서 제공하기 때문에 `axios`를 사용하지 않고 `fetch`를 사용할 것이다. 세팅 : app route 사용, src 폴더 사용 1. `server-action.ts` 만들기먼저 server component를 만들었던 것처럼 파일 맨 상단에  `"use server"`를 추가하자. 그러면 해당 `server action` 파일에 비동기 함수를 모아 api처럼 활용할 수 있다. 이러한 `server-action.ts` 파일은 서버 측에서 비동기 함수를 실행할..

기본적으로 React와 react-router-dom으로만 구성된 경우, client component로만 구성된다는 것을 알고 시작하자. 먼저 `app/page.tsx' 내용을 모두 지우고 아래 내용을 넣어 `yarn dev`로 실행해보자.// src/app/page.tsxexport default function Home() { console.log("Hello Hello"); return ( Next.js를 시작해보자 );} 그러면 브라우저 콘솔창에는 콘솔이 나오지 않지만 터미널에서는 'Hello Hello'가 적혀있는 것을 확인할 수 있다. 즉 해당 페이지는 서버에서 렌더링된 페이지라는 것이다. 자세히 말하자면 브라우저가 아닌 서버를 돌리고 있는 `localhost:3..

프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr문제 이해처음 문제를 보자마자 재귀함수를 써야겠다고 생각했다. 아니면 JS의 재귀함수 횟수를 고려해서 배열을 써야겠다고 생각했다. 그래서 DFS와 BFS를 각각 재귀함수와 배열로 구현했는데, 시간이 초과되어 검색해볼 수 밖에 없었고 DP를 써야한다는 것을 알게 되었다. 방법 1 - DFS먼저 가장 먼저 시도한 깊이 우선 탐색(DFS) 코드는 다음과 같다. 가장 값이 크게 변할 것 같은 연산부터 진행했다.function solution0(x, y, n) { let answer = null; const DFS = ..

지난번 팀 프로젝트에서 CORS 오류를 겪었는데, Next.js를 사용하면 해결할 수 있다고 한다.Next.js 프레임워크를 사용해보자! 1. Next.js 소개Next.js는 다음을 충족하는 고품질 웹사이트를 만들 수 있게 해준다. 1. 성능서버 사이드 렌더링(SSR), 정적 사이트 생성(Static Site Generation, SSG) 기능을 제공해 초기 로드 시간을 단축함.코드 스플리팅 및 이미지 최적화와 같은 기능을 통해 런타임 성능을 향상시킴.2. SEO (Search Engine Optimization)서버 사이드 렌더링(SSR)을 통해 웹페이지의 콘텐츠가 초기 로드 시 완전히 렌더링되므로, 검색 엔진이 콘텐츠를 쉽게 인덱싱할 수 있음.정적 사이트 생성으로 미리 생성된 HTML 파일을 제공하..

오늘은 어제 예고한대로 Generic과 Utility type에 대해 정리해보려고 한다. 1. Generic 제네릭제네릭은 지난번 게시글에서 잠깐 보고 지나쳤다.let oneToSeven: number[] = [1, 2, 3, 4, 5, 6, 7];let oneToSeven: Array = [1, 2, 3, 4, 5, 6, 7];let array: (string | number)[] = ["Apple", 1, 2, "Banana", "Mango", 3];let array: Array = ["Apple", 1, 2, "Banana", "Mango", 3]; 이처럼 ``내부에 작성하는 방법을 generic이라고 한다. 이렇게 작성하면 마치 클래스나 함수에 parameter를 입력하는 것처럼 타입을 사용할 수..

React+vite에 typescript로 작성하려고 한다. Javascript와의 차이점과 typescript의 특징에 대해 약간 정리한 후 코드 예시를 살펴보려고 한다. 1. Typescript = Javasript + 정적 type 시스템먼저 타입 시스템이란 프로그래밍 언어가 프로그램에서 가질 수 있는 타입을 이해하는 방법에 대한 규칙 집합이다. 타입이란 null, undefined, boolean, string, number 등을 의미한다. 동적 타입 언어는 프로그램을 실행한 이후에 변수, 함수의 타입이 결정되는 언어이며 JS는 동적 타입 언어이다. 또한 타입이 고정되지 않아서 같은 벼수에 여러 타입의 값을 자유롭게 할당 할 수 있다.let ex = '문자열'ex = 1 TS는 JS와 달리 정적 ..

추석 연휴를 제외하고 약 일주일간 아웃소싱 프로젝트를 진행했다. 우리 팀은 각종 공연 정보를 제공하고, 공연에 대한 간략한 글과 공연에 대한 후기를 작성할 수 있는 사이트를 만들었다. 처음에 공연 정보를 불러오기 위해 공공 api인 KOPIS API를 사용하기 위해 엄청 고군분투했다. CORS 오류가 생겨 데이터가 불러와지지 않았고 우리는 결국 확장 프로그램을 이용해 임시로 해결하여 진행했다. 먼저 우리 조는 인터파크 티켓에서 큰 디자인을 차용해왔다. 1. 메인 페이지메인 페이지에서는 오늘 진행 중인 공연에 대해서 KOPIS에 등록된 순서대로 공연을 나열하면서 캐러셀로 랜덤 선택된 8개 공연을 보여준다. 이를 위해서 먼저 공연 정보를 불러와야 한다. 처음에는 캐러셀을 위한 컴포넌트와 하단 장르별 데이터를..

이번 프로젝트의 css는 모두 Tailwindcss를 사용하기로 했다. 처음이라 모든 속성을 홈페이지에서 검색해서 써야하는 번거로움이 있었지만, 적응되니 생각보다 쓸만했다.! 오늘은 아주 기초적인 사용법을 정리해보려고 한다. 1. Arbitrary value 적용하기먼저 기본적으로 height를 적당히 적용하려면 홈페이지에서 height를 검색해서 주어진대로 사용해도 된다.하지만 주어진 값 외엔 제대로 적용되지 않는 불편함이 있다. 이때 해당 페이지를 맨 아래로 내리면 arbitrary value를 사용할 수 있는 방법을 알려준다. 이렇게 크기를 임의로 입력하는 방법은 대체로 다 적용된다. Padding도 margin도 다 가능하다. 즉 `width: 30px; height; 80px;` 짜리 div를 ..

프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 문제 이해모든 경우를 탐색해야 한다. 탐험할 수 있는 최대 길이를 구하는 문제이므로 DFS를 사용해야 할 것 같다. 아직도 DFS를 구현하는 것이 힘들어서 다른 사람 코드를 참고했다.ㅜ 방법깊이 우선 탐색은 방문한 것은 스택으로, 방문해야할 것을 큐로 저장해야한다.왜냐하면 노드를 타고 최대한 깊게 들어간 후, 다시 경로를 타고 올라와서(스택) 다음 경로로 가야하기(큐) 때문이다. function solution(k, dungeons) { let answer = 0; // 방문했는지 확인하기 위한 배열 con..