본문 바로가기

분류 전체보기

(1092)
WIL(22.09.25) 내가 배운것 프로그래머스 문제 풀이 프로그래머스의 코딩테스트 광탈 방지 A to Z : JavaScript 차주에 진행할 것 이직 준비 Nomad Coders - React JS 마스터클래스 완강 Effective TypeScript 팀 개발을 위한 Git, GitHub 시작하기 React 공식 문서 읽기 프로그래머스의 코딩테스트 광탈 방지 A to Z : JavaScript 앞으로 진행할 것 React 벨로퍼트와 함께하는 모던 리액트 Hook Redux TypeScript OPP Design Pattern Test 시각적 회귀 Refactoring(마틴 파울로) 2판 읽기 외출난이도 리팩터링
[프로그래머스] 두 큐 합 같게 만들기 - JavaScript 풀이 본 게시물은 프로그래머스의 연습 문제 풀이입니다. 저작권은 (주) 그랩에게 있습니다 자바스크립트 코드 class Queue { constructor(array) { this.queue = [...array]; this.front = 0; this.rear = array.length; this.sum = array.reduce((acc, cur) => acc + cur, 0); } enqueue(value) { this.queue[this.rear++] = value; this.sum += value; } dequeue() { const value = this.queue[this.front]; delete this.queue[this.front]; this.front += 1; this.sum -= val..
[프로그래머스] 성격 유형 검사하기 - JavaScript 풀이 본 게시물은 프로그래머스의 연습 문제 풀이입니다. 저작권은 (주) 그랩에게 있습니다 자바스크립트 코드 // 성격 유형별 점수를 기록하는 객체 const scores = { 'R': 0, 'T': 0, 'C': 0, 'F': 0, 'J': 0, 'M': 0, 'A': 0, 'N': 0, }; ​ function solution(survey, choices) { var answer = ''; // 주어진 survey, choices 순회 survey.forEach((sur, idx) => { // 비동의 성격 유형 const first = sur[0]; // 동의 성격 유형 const second = sur[1]; // 선택한 점수 const choice = choices[idx]; if (choice 4)..
NextJS(8) - Routes, Context Parameter 본 내용은 Nomad Coders - NextJS 시작하기 강의를 토대로 작성하였습니다. 1. Rotues 1.1 Dynamic Routes NextJS에서는 폴더 단위로 Route를 정의할 수 있음 Nested Route Dynamic Routes의 경우, 대괄호 안에 parameter를 적어주기 Catch All Routes 대괄호 안에 세 개의 점을 추가하여 모든 경로를 포착하도록 할 수 있음 ex) [...params].js 배열의 형태로 들어오게 됨 예시 ├── pages │ └── users │ ├── [id].js: Dyanamic Route │ ├── [...params].js: Catch All Routes │ ├── all.js: /users/all로 접근하면 띄워지는 페이지 │ └──..
NextJS(7) - Server Side Rendering 본 내용은 Nomad Coders - NextJS 시작하기 강의를 토대로 작성하였습니다. 1. Server Side Rendering 해당 페이지가 SSR만 할 지 선택 가능 page가 열렸을 때 data fetching까지 완료하고 보여줄 수 있음 유저는 흰 화면 -> 완전히 렌더링된 페이지를 보게 됨 SEO 최적화에 유리 2. getServerSideProps server에서 해당 함수를 실행하고 return하는 객체를 props로 page에 전달할 수 있음 server(web backend)에서 실행하게 됨 고정된 이름을 사용해야함 getServerSideProps 함수를 실행하고 App Components의 pageProps로 해당 컴포넌트에 전달 됨 예시 export default functio..
자료구조와 알고리즘 - 힙 본 내용은 프로그래머스의 코딩테스트 광탈 방지 A to Z : JavaScript 강의를 토대로 작성하였습니다. 1. 힙이란? 이진 트리 형태 우선순위가 높은 요소가 먼저 나가기 위해 요소가 삽입, 삭제 될 때 바로 정렬되는 특징이 있음 우선순위 큐를 구현하기 위한 가장 적합한 방법 힙과 우선순위 큐가 같은 것이 아님 우선순위가 높은 요소를 루트에 배치 최대 힙(Max Heap): 루트가 가장 큰 값이 되는 힙 최소 힙(Min Heap): 루트가 가장 작은 값이 되는 힙 JavaScript에서는 직접 구현해야 함 우선 순위 큐 우선 순위가 높은 요소가 먼저 나가는 큐 자료구조가 아닌 개념 구현하는 방법은 다양하게 존재 2. Heap의 동작 Heap 요소 추가 요소가 추가될 떄는 트리의 가장 마지막 정점에..
NextJS(6) - next config(Redirect, Rewrite) 본 내용은 Nomad Coders - NextJS 시작하기 강의를 토대로 작성하였습니다. 1. next.config.js NextJS 프로젝트의 설정 파일 Node.js 모듈 Redirect, Rewirte 등을 정의할 수 있음 2. Redirect 특정 url에 대한 접근을 지정한 url로 이동처리 할 수 있음 params도 인식할 수 있음 Properties source: 특정 url detination: 지정할 url permanent: cache 설정(boolean) 예시 module.exports = { reactStrictMode: true, async redirects() { return [ { source: "/example", destination: "/home", permanent: f..
[프로그래머스] 프린터 - JavaScript 풀이(개선된 풀이) 본 게시물은 프로그래머스의 연습 문제 풀이입니다. 저작권은 (주) 그랩에게 있습니다 자바스크립트 코드 class Queue { constructor() { this.queue = []; this.front = 0; this.rear = 0; } enqueue(value) { this.queue[this.rear] = value; this.rear += 1; } dequeue() { const value = this.queue[this.front]; delete this.queue[this.front]; this.front += 1; return value; } peek() { return this.queue[this.front]; } } ​ function solution(priorities, locat..