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

이것은 회사 후임분이 자주 쓰시던 팁인데, 좋아보여서 나도 사용해보기로 했다.일단 기존에 작성하던 방법은 아래와 같은 예시이다.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..

원티드 프리온보딩 챌린지 "Next.js 확실히 알고 레벨업 하기" 4일차 내용 정리코드출처는 아래 링크입니다.https://github.com/himprover/wanted-2025-2-challenge RCC only'use client';interface Props { num: number;}export function RCC({ num }: Props) { const [json, setJson] = useState(null); const fetchHandler = async () => { const data = await fetchJson(num); setJson(data); }; useEffect(() => { fetchHandler(); // eslint-disable-next-line..

오랜만에 다시 하는 코딜리티...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..

원티드 프리온보딩 챌린지 "Next.js 확실히 알고 레벨업 하기" 3일차 내용 정리 Streaming HTML데이터(HTML)를 한번에 로드하지 않고 일정한 단위로 점진적으로 처리하는 기술이다.(HTTP 기술임)맨 처음에 사이트에 접속했을 때 GET 요청으로 index.html을 이미 줬는데 어떻게 html을 다시 주는 걸까?HTTP Header에 Transfer-Encoding: chunked 라면 Streaming HTML로서 동작한다.Content-Length를 지정하면, 지정된 값까지만 받는다는 것을 서버가 클라이언트에게 알려준다.하지만 Content-Length를 지정하지 않으면, 계속 통신을 열어놓으면서 지속적으로 html을 준다.\r\n 으로 나누면서 하나씩 날아온다. (한번에 다 줄수 없..

원티드 프리온보딩 챌린지 "Next.js 확실히 알고 레벨업 하기" 3일차 내용 정리 Shared Component상황에 따라 RSC(React Server Component)나 RCC(React Client Component)로 동작하는 컴포넌트.RSC에서 import하면 RSC로 동작하고, RCC에서 import하면 RCC로 동작한다. 아래에 코드 예시가 있다.RSC, RCC의 코드 예시는 이전 게시물 참고. (https://doringri.tistory.com/231)interface Props { text: string;}export function Shared({text}: Props): Element { return {text};} RSC에서 Shared Component를 impo..

오늘은 그냥 간단한 글입니다. 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..

나는 왜 그렇게 커스텀 훅이 헷갈렸는지 모르겠는데, 최근 원티드 강의도 듣고 코드리뷰도 하고 챗지피티랑 놀다보니 슬슬 감이 잡히는 것 같다. 꼭 재사용되는 로직이 아니라도, 컴포넌트의 UI와 직접적으로 관련 있는 로직이 아닐 경우 뽑아내면 각자의 역할에 충실한 코드가 된다. VAC(View Asset Component) 패턴을 구현하기 위해서는 중요한 부분이다. 사실 내가 이걸 왜 쓰는지 감을 못 잡았어서 그렇지 구현은 정말 별것 없다.아래는 버튼을 누를 때마다 엘리먼트(box)를 1px씩 밑으로 내리는 로직을 useAction으로 뺀 것이다.export default function useAction(콜백) { const box = useRef(null); const count = useRe..

오늘 회사에서 코드리뷰를 하는데 한분이 useEffect와 state를 제거할 수 있을 것 같다는 말씀을 해주셨다. 리액트 개발자들이라면 잘 알고 있듯이 useEffect와 state는 불필요한 렌더링을 발생시킬 수 있으므로 성능을 위해 꼭 필요한 경우에만 사용하도록 하는 것이 좋을 것이다. 아무튼 내가 짰던 코드를 대충 설명하면, props로 가져오는 객체 데이터가 있는데, useEffect 안에서 props가 변경될 때마다 그 데이터를 정제해서 두 개의 state로 나누고 그 state들을 뷰에 사용하는 형태였다.const [state1, setState1] = useState(null);const [state2, setState2] = useState(null);useEffect(() => { ..

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을 사용하면 위의 문제들이 해결되지만, 제한이 있다.리버스 매핑이 안 ..

원티드 프리온보딩 챌린지 "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 : 주소를 치면 브라우저(클라이언트)..

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

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

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