괘종소리 세기 ✒️ 방명록 github

패스트캠퍼스 INNER CIRCLE 풀스택 개발 5주차~13주차의 내용을 정리합니다.팀 프로젝트를 하면서 고민했던 부분을 멘토링 받은 부분이 포함되었습니다.끝난지는 한달이 다 되어가는데 그동안 배운 내용에 대해서 정리를 덜 했길래 정리합니다. (4주차까지만 정리해놓음) 서버 액션 내부에서 SSR 캐시 무효화를 통해 자동 리패칭 가능서버 액션인 만큼 Next.js 자체 서버를 쓸 때 가능함- revalidatePath를 통해 리패칭- revalidateTag를 통해 my-tag의 캐시만 무효화'use server'import { revalidatePath } from 'next/cache';export async function deletePost(id: string) { await db.delete(i..

https://youtu.be/EWfujNzSUmw?si=Ik297-UzEH90eSmO위의 강의 정리한 내용 실행 컨텍스트는 각 스코프별로 코드가 실행되는 환경 정보를 담고 있는 객체이다. 코드 실행을 위해 존재한다. 0. 실행 컨텍스트는 언제 생성하고 언제 없어지는가- 코드 실행시키면 콜 스택에 실행 컨텍스트를 담는다.- 글로벌 실행 컨텍스트 위에 함수A의 실행 컨텍스트가 올라가고... 이런식. 가장 위에 있는 실행 컨텍스트만 활성화됨.- 일단 실행되면 사라진다.- 마지막 라인까지 코드가 모두 실행되면 글로벌 실행 컨텍스트도 사라진다. 1. Record로 호이스팅 이해console.log(name);var name = "doringri";- var로 정의한 변수 선언문 이전에 해당 변수의 값을 찍었을 ..

바이브 코딩을 위한 AI 기반 IDE (팀원분들 추천)나는 현재 코파일럿과 VS코드 사용중...windsurf(조금더 쌈), cursor 단위를 rem or px? -> rem으로 통일하는게 낫다. - EM은 상대적인 단위 곧, 부모요소의 폰트 사이즈에 의해 자식요소의 폰트 사이즈가 결정되는 방식 - REM은 Root + em = rem도 상대적인 단위 단, 부모요소의 폰트 사이즈에 의해 자식요소의 폰트 사이즈가 결정되는 방식이 아니라 **Root의 폰트 사이즈**에 의해 결정되는 방식 문서의 전체적인 통일성을 위해서는 REM을 쓰는 게 낫다. 프론트엔드 개발 방향 조언성능보단 유저 경험을 중요하게 생각하는게 좋다.(진짜 성능이 필요한 웹페이지가 아닌 이상) 예를 들어, 데이터가 없을 때 컴포넌트를..

인접한 노드를 탐색하는 자료구조로, DFS를 이용하여 탐색한다. BFS로도 구현할 수 있지만 내가 DFS가 익숙하기에...function dfs(graph, visited, node) { if (visited[node]) return; visited[node] = true; console.log("Visiting:", node); for (let neighbor of graph[node]) { dfs(graph, visited, neighbor); }}// 예시const graph = { 0: [1, 2], 1: [0, 3], 2: [0, 4], 3: [1], 4: [2]};const visited = Array(Object.keys(graph).length).fill(false)..

25/04/07번들링, tsconfig에 대해서도 보기 25/04/08왜 useEffect 밖에서 실행한 함수는 ref(엘리먼트)값이 없을까?useEffect는 렌더링 직후 실행되기 때문.반면 일반 함수는 렌더링 중에 실행되기 때문에 엘리먼트가 렌더링되지 않은 시점이기 때문에 없다. 25/04/09에러 핸들링 시에 에러 바운더리를 이용해보고 싶다.(그냥)리렌더링시 state와 ref와 일반변수의 차이: 일반변수는 값이 안남아있음. state와 ref는 남아있음.state와 ref의 가장 큰 차이는 "값 변경" 시임. state는 값이 변경되면 리렌더링을 유발함.또 다른 차이는 ref는 항상 최신 값이라는 점. state는 렌더링이 끝나야 최신 값을 얻을 수 있음.고민되는것: 프리티어 쓰기멘토링: 요새는 ..

이것은 회사 후임분이 자주 쓰시던 팁인데, 좋아보여서 나도 사용해보기로 했다.일단 기존에 작성하던 방법은 아래와 같은 예시이다.export enum CharacterType { LANCER, ROUXLS, RALSEI}export const getCharacterOrderByName = (name: string) => { switch (name) { case "lancer": return CharacterType.LANCER; case "rouxls": return CharacterType.ROUXLS; case "ralsei": return CharacterType.RALSEI; }} enu..

오랜만에 다시 하는 코딜리티...A와 B 사이에 K로 나눴을 때 몫이 0이 되는 수가 몇 개인지 세는 문제입니다. https://app.codility.com/demo/results/trainingGDW5F8-WJ7/ Test results - CodilityWrite a function: function solution(A, B, K); that, given three integers A, B and K, returns the number of integers within the range [A..B] that are divisible by K, i.e.: { i : A ≤ i ≤ B, i mod K = 0 } For example, for A = 6, B = 11 and K = 2, your fapp..

오늘은 그냥 간단한 글입니다. type PrintUser = (name: string, age: number) => void;const printUser: PrintUser = (name, age) => { console.log(name, age);};printUser("aa", 10);뷰에서 커스텀 훅이 리턴하는 함수를 호출할 일이 있었는데 위와 같은 방법(함수형 개별인자 타입)으로 호출하였다.왜냐면 뷰에서 객체를 만들기가 싫었기 때문이다. (코드가 지저분해져서)하지만 이러한 방식은 순서가 바뀌었을 때도 타입스크립트에서 잡아줄 수 없는 상황이 될 수 있기 때문에, 위험성이 있다. type User = {name: string; age: number};const printUser = (user: Use..

enum, const enum 비교나는 상수를 선언할 때 습관적으로 enum을 사용했었는데, 타입스크립트에서 enum보다는 const enum을 사용하는 게 더 좋다는 글을 보았다. enum ColorType { RED, BLUE, GREEN}console.log(ColorType.RED); // 0const enum ColorType { RED, BLUE, GREEN}console.log(ColorType.RED); // 0 enum의 문제는런타임에 객체를 만들기 때문에 오버헤드가 발생한다.사용되지 않는 코드들도 번들에 포함되어 번들 용량이 증가한다. (즉, Tree Shaking이 안 된다.)  const enum을 사용하면 위의 문제들이 해결되지만, 제한이 있다.리버스 매핑이 안 ..

원티드 프리온보딩 챌린지 "레거시 유지보수와 데이터 모으기" 4일차 강의 이번 강의는 사용자의 데이터를 수집하고 분석하는 방법에 대한 강의이다. 아무래도 현 직장이 상용 서비스를 운영하기보단 솔루션을 주로 만드는 회사다보니 잘 감이 오지 않았던 강의긴 한데, 새롭고 신기했다. 언젠간 쓸 일이 있을지도 모르니, 정리해둔다. 개요Data Driven: 데이터를 기반으로 의사결정을 내리는 것을 말한다.데이터를 수집하고 분석하여 그 다음엔 어떤 기능을 만들지, 뭘 더하고 뭘 뺄지 결정하는 전략을 수립한다.보통 마케팅팀이 기획하며, 여기서 프론트엔드 개발자가 할 일은 '데이터 수집' 이다.  데이터 수집 단계수집할 데이터 정의: 어떤 페이지에서 일어날 수 있는 행동 중 수집할 것들에 대해 정의한다. 예를 들면 어..

프로그래머스 Lv 1 - 체육복 Solved-Algorithm/JavaScript/프로그래머스/1/42862. 체육복 at main · ParkBible/Solved-AlgorithmThis is an auto push repository for Baekjoon Online Judge created with [BaekjoonHub](https://github.com/BaekjoonHub/BaekjoonHub). - ParkBible/Solved-Algorithmgithub.com 좀 많이 헤맸습니다. 이게 1레벨이라니...근데 작성된 코드를 보면 별거 없음... (그리디 특징인가?)function solution(n, lost, reserve) { const losts = lost.filter(l ..

프로그래머스 Lv 2 - 게임 맵 최단거리 Solved-Algorithm/JavaScript/프로그래머스/2/1844. 게임 맵 최단거리 at main · ParkBible/Solved-AlgorithmThis is an auto push repository for Baekjoon Online Judge created with [BaekjoonHub](https://github.com/BaekjoonHub/BaekjoonHub). - ParkBible/Solved-Algorithmgithub.com 상하좌우로 움직일 수 있는 전형적인 BFS 문제입니다.function solution(maps) { const n = maps.length; const m = maps[0].length; co..

Lesson 4 (Counting Elements) - PermCheck(Easy) Test results - CodilityA non-empty array A consisting of N integers is given. A permutation is a sequence containing each element from 1 to N once, and only once. For example, array A such that: A[0] = 4 A[1] = 1 A[2] = 3 A[3] = 2 is a permutation, but array A such that: A[0] =app.codility.com배열의 값들이 연속적인 값이면 1을, 그렇지 않다면 0을 출력하는 문제입니다. 시도1 (실패)funct..

Lesson 5 (Prefix Sums) - PassingCars(Easy) Test results - CodilityA non-empty array A consisting of N integers is given. The consecutive elements of array A represent consecutive cars on a road. Array A contains only 0s and/or 1s: 0 represents a car traveling east, 1 represents a car traveling west. The goal is to countapp.codility.com점수: 40/100 도로와 차들이 있다. 차는 값이 0일때 동쪽, 1일때 서쪽으로 움직인다.위의 그림처럼 A[..

Lesson 4 (Counting Elements) - FrogRiverOne(Easy) Test results - CodilityA small frog wants to get to the other side of a river. The frog is initially located on one bank of the river (position 0) and wants to get to the opposite bank (position X+1). Leaves fall from a tree onto the surface of the river. You are given an arrayapp.codility.com 부끄러운 이야기지만 제 블로그니까 해봅니다.처음에 영어로 된 문제 이해 못해서 18점 받았습니다..