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

원티드 프리온보딩 챌린지 "Next.js 확실히 알고 레벨업 하기" 2일차 내용 정리 리액트 18 이전 버전 SSR의 문제데이터 페칭(모두 완료되어야 html을 만들 수 있음) -> html로 렌더링 -> js 파일 로드 -> hydration 과정이 필요하다.Hydration(수화) : 척박한 html에 물을 뿌려주어야 사용자와 상호작용을 할 수 있다.여러가지 컴포넌트가 한 페이지에 표시될 때, 한 컴포넌트가 무거워서 js 로드에 오랜 시간이 걸린다면 다른 컴포넌트들도 완료되기 전까지 Hydration을 할 수가 없다. 즉 모든 js가 로드되기 전에는 페이지에서 아무런 상호작용을 할 수 없음.// 모든 fetch가 끝나야 Hydration을 시작한다.function getServerSideProps (..

프로젝트 중 다른 탭 간의 데이터를 공유하는 기능이 필요했다. window.postMessage 혹은 BroadcastChannel.postMessage를 통해 데이터를 공유할 수 있다.window.postMessage는 다른 도메인 간에도 전송이 가능하고(보안을 위해 origin을 설정하는 것이 좋다), 특정 탭에만 전송이 가능하다. 아래와 같은 코드이다.const subWindow = window.open("/test", "_blank");subWindow.postMessage("hello", "*"); BroadcastChannel.postMessage는 channel을 구독하고 있으면 다수의 탭에도 메시지 전송이 가능하고, 같은 도메인에서만 전송이 가능하다. 아래는 BroadcastChannel...

원티드 프리온보딩 챌린지 "Next.js 확실히 알고 레벨업 하기" 1일차 내용 정리 Next.js란? : 리액트 기반의 프레임워크. 서버사이드 렌더링과 정적 사이트 생성(SSG)을 쉽게 구현할 수 있도록 설계됨. Next 서버가 있어서 풀스택 개발도 가능. 리액트와의 차이점 : 리액트는 라이브러리이고 CSR, Next.js는 프레임워크이고 SSR. 라이브러리 vs 프레임워크 : 내 규칙 위에 올라가는 것이 라이브러리, 정해진 틀에 맞춰주어야 하는 것이 프레임워크. 협업하는 관점에서는 프레임워크가 좋을 수도 있다. eslint 규칙을 커스텀하기 힘들다면 구글이나 airbnb의 규칙을 가져와서 쓰는 것처럼... Next.js의 장점과 단점 : 서버가 있다는 것. CSR : 주소를 치면 브라우저(클라이언트)..

제가 웬만하면 귀찮아서 블로그에 후기글은 잘 안씁니다만 연휴때 여기 가서 대만족하고와서 후기를 씁니다.바로 팔공산알파카 입니다.     서론(TMI)작년에 회사에서 워크숍으로 제주도를 갔는데, 도치돌 알파카목장이라는 곳이 있길래 알파카를 만져보고 싶었던 저는 적극 건의했으나 결국 대표님의 반대로 인해 무산되었습니다. 몇 군데 더 찾아보긴 했는데 도치돌 목장을 비롯한 유명한 알파카목장은 다 멀리 있어서 가기가 어렵더군요. (윗지방) 하지만 알파카를 포기할 수 없었던 저는 대구 근교의 알파카목장을 찾아보았고 결국 이 팔공산알파카 농장을 찾을 수 있었습니다.전화를 드려서 오늘 가도 되냐고 여쭤보니 당연히 된다고 하셨습니다.먹이주기 체험을 하려면 정해진 시간에 도착해야 한다고 업체 설명에 적혀 있길래 그래야 되..

굉장히 길었던 연휴가 끝났군요.직장생활 시작한 이래로 제일 길게 쉬었던 것 같습니다. 오랜만에 진짜 제대로 쉰 느낌입니다. 일단 공부도 잠깐 놨었고... 운동도 쉬고... 블로그도 안하고...(ㅋㅋㅋ)그동안 못했던 게임(역전재판456)도 하고... 넷플끊어서 중증외상센터 정주행 끝내고... 무엇보다 제 버킷리스트 중 하나인 RPG 쯔꾸르 게임 완성을 달성하기 위해 노력했습니다. 끝이 보이긴 하는 것 같아 기쁘군요. 사실 그 전까진 이직 준비를 좀 했었는데 역시나 쉽게 되진 않더군용.유독 실패를 많이 겪은 최근이지만 인생이 뭐 다 그렇겠지요.제가 또 장원영을 좋아하는디 원영적 사고가 또 고진감래를 나타내지 않겠습니까.you didn't go through all that for nothing이란 문구도 제..

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

원티드 프리온보딩 챌린지 "레거시 유지보수와 데이터 모으기" 3일차 강의 개요최적화란 성능 향상, 사용자 경험 개선, 비용 절감을 도모하는 것이다.레거시가 있는 상태에서 최적화를 하지 않는 것이 좋다. 최적화는 협업을 동반한, 시간이 오래 걸리는 작업이기 때문. 레거시 처리부터 한다. 최적화의 종류두 가지로 구분할 수 있다. 1) 비용이 드는 최적화: 초기비용이 들지만 장기적인 유지보수 개선을 위해 하는 작업SSR로 변경: SEO와 초기 로딩속도에 이점이 있지만 서버 의존적임. 즉 서버 인프라 비용이 생긴다. (그래서 Vercel 같은게 좋다)React-Query(=TanStack Query): 이탈했다가 다시 돌아왔을 때 데이터를 다시 불러올지 결정하는 옵션이 있는데, 기본값은 true이다. 그래서 서..

원티드 프리온보딩 챌린지 "레거시 유지보수와 데이터 모으기" 강의 스트랭글러 패턴을 이용한다. 레거시, 새로운 코드 2개를 두고 새로운 코드를 점차 늘려가는 방식. 모든 테스트가 완료되면 그 때 비로소 레거시를 삭제한다. 새로운 코드를 우선 적용해놓고 에러가 발생하면 catch 등을 이용하여 레거시로 fallback하여 처리하도록 하는 식.위의 스트랭글러 패턴을 이용할 때는 Datadog, Centreon 등의 로그 모니터링 도구를 이용하여 1~2주 정도는 모니터링을 하여 새로운 코드가 오류를 뱉는지 확인한다.기능 단위(feature-based)로 작업 스콥을 자르는 게 좋다. 방법론에는 FSD 패턴이 있다. 하지만 프로젝트가 작다면 굳이 패턴을 적용하지 않는 것이 좋다.과거에는 사용자와의 상호작용이 많..

보호되어 있는 글입니다.

프로그래머스 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점 받았습니다..

Lesson 3 (Time Complexity) - TapeEquilibrium(Easy) Test results - CodilityA non-empty array A consisting of N integers is given. Array A represents numbers on a tape. Any integer P, such that 0 app.codility.com점수: 84/100 배열을 두 부분으로 나눠서 각 부분의 합계를 구한 뒤 차이를 구하고, 그 차이의 최솟값을 구하는 문제입니다. 예를 들어서 [3, 1, 2, 4, 3] 이라는 배열이 있다면 3+1+2 / 4+3 으로 나눴을 때의 차이가 1로 가장 작기 때문에 답은 1입니다. 초기 코드function solution(A) { le..