나의 코딩일지

API 요청을 시작하고부터 가장 신경쓰이는 점은 응답이 가는동안 어떤값을 넣어줘야하는건지 혼란이 있었다. 사실 이때문에 동기로 해야하는거 아닌가 하는 의문이 있었다. 물론 tanstack-query 사용하면서 자연스럽게 잊혀졌다. 하지만 이번에 리액트 자바스크립트 axios로 돌아가면서 다시 마주하게 되었다. 이런 나한테 action 관련해서 뭔가 한마디 해주셨던거같은데 그때 바 튕겨냄 ㅋ.ㅋLayout ShiftuseState를 통한 일반적인 데이터 패칭React Router의 loaderTanstack/query의 데이터 패칭 상태 관리- useState를 통해서 데이터 패칭 상태 관리하기- 캐시된 데이터 사용하기React Router의 actionReact Router의 fetcherLayout S..

함수형 컴포넌트와 클래스형 컴포넌트     -  컴포넌트의 생명주기 에러 바운더리 개요 에러 바운더리 사용해보기    -  동시다발적 에러 잡기    -  동시다발적 에러 각각 잡기 에러 바운더리   -  에러 바운더리가 잡는 에러   -  에러 바운더리가 잡지 못하는 에러를 잡아보자   -  ※ 주의할 점 ※ 비동기를 에러 바운더리로 처리하는 것은 비선언적이다Context API로 에러 처리 중앙화하기더 알아보기   -  useQuery의 onError가 deprecated되었으니 에러 바운더리를 사용하세요   -  바운더리 개념을 서버로 옮겨보자 함수형 컴포넌트와 클래스형 컴포넌트오히려 이제는 함수형 컴포넌트를 주로 사용하게 되어, 클래스형 컴포넌트는 구시대적인 산물이 되었다. 클래스형 컴포넌트를 사..

원문: How React server components work: an in-depth guide (plasmic.app) How React server components work: an in-depth guideA deep dive exploration of React server components under the hood.www.plasmic.app리액트 서버 컴포넌트(React Server Component, RSC)는 앞으로 페이지 로딩 성능, 번들 사이즈, 우리가 React 애플리케이션을 작성하는 방식에 거대한 영향을 미칠 매우 흥미로운 새로운 기능입니다. 우리 Plasmic은 React용 visual builder를 만들고 React의 성능에 많은 관심을 가지고 있습니다. 많은 고객들이..

백준이나 프로그래머스를 풀면서 가장 고민이 된 것은,, 너무 우당탕탕 푸는거 아닌가 하는 고민이었다. 자료구조에 대해서 생각해볼 겨를없이 그냥 직감적으로 풀다보니 문제를 풀어나가면서도 이걸 더 푼다고 의미가 있나 하는 생각이 많이 들었다. 특히 가벼운 완독에서 공부 의욕을 느끼는 사람이라 풀다가 맨날 그만뒀다..그러다가 만난 코드 트리,,코스별로 책이 있고 목차가 체계적으로 잡혀있었다.백준에서 편식하다가 그냥 순서대로 풀면 되서 만족스러웠다.근데 한문제 풀때마다 커밋이 두개정도씩 생기는거같아서 불편하다.커밋 강박은 없앴지만 그라데이션때문에 15개 이상 커밋 안남기는데, 코드트리때문에 커밋낭비가 심하다..난 별로 한 게 없는데 커밋 굉장히 많이 올라간거 좀 불-편-그래도 자동으로 레포에 남겨주는거 뿌듯해서..

확실히 프레임워크는 좋긴 좋다. 하지만 맥락을 알고 사용해야한다. Next.js는 pages router를 사용하다가 리액트 13부터 app router가 등장하였다.라우팅 방식의 변화Pages Router의 경우 /pages/fridge.tsx와 같이 pages 디렉토리 안에 파일을 넣어두면 해당 파일명을 기반으로 라우팅이 된다.  App Router의 경우 /app/my-page/page.tsx와 같이 pages 디렉토리 안에 pathname을 가진 디렉토리를 만들고, page.tsx를 만들면 폴더 구조를 기반으로 라우팅이 된다.왜 변화하였나?디렉토리 안에 page.tsx를 담아야했기 때문에, 오히려 pages가 직관적으로 라우팅을 명시한다고 생각했다. 하지만, 폴더 구조로 변경하면서 같은 폴더 안에..

네트워크 탭을 읽는거에 익숙해질 때쯤, 청크 파일은 왜 내 코드는 이상한 파일로 변경되었고, 이 파일들은 누가 보내주는거냐고 물어봤다가 거절당한 기억이 있다. 이제는 그 친구들이 빌드된 파일들이고 Nginx가 서빙한다는 걸 알게 되었지만 그때는 그냥 호기심이 들었다가 다른 게 급해서 금방 잊혀졌었다.사실 회사가 굳이 위험부담을 안고 갈까 하는 의문이 아직도 남아있는데, 사이드 범위 안에서는 vercel이 다 감당해주니까 오히려 사이드에서 Next.js를 많이 사용해보는것도 나쁘지 않을거같다. Next를 처음 사용할때 누가 파일을 제공하는 건가에 의문이 있었다. 웹 서버와 백 서버의 차이를 이해하지 못해서 맨날 백이랑 레포를 합쳐야하는거 아닌가,, 뭐 이런 생각을 했었다. 이 때 가졌던 의문 하나는 라이브..

OWASP(Open Web Application Security Project)웹 애플리케이션의 보안성을 높이기 위해 다양한 프로젝트를 진행하는 비영리 단체OWASP Top Ten( OWASP Top Ten | OWASP Foundation )을 통해 웹 애플리케이션에서 가장 흔하게 발생하는 보안 취약점 10가지를 정리한 목록을 제공 1. Broken Access Control(접근 제어 취약점)사용자가 허용되지 않은 리소스나 기능에 접근할 수 있는 취약점 인증된 사용자만 접근할 수 있는 관리자 페이지에 일반 사용자가 접근할 수 있는 경우=> 고차 컴포넌트를 활용하여 권한이 있는지 확인 후 페이지 렌더링import { useEffect, useState } from 'react';import Paths ..

엔터 \n엔터 \n엔터 \n엔터 \n얍\n\n얍\n\n얍 react-quill을 에디터로 사용하고 있고, 자동으로 태그를 넣어주거나 이 필요해 innerHTML을 사용해야 했다.interface Props { htmlContent: string;}const HtmlRenderer = ({ htmlContent }: Props) => { return ( );};export default HtmlRenderer; 전달받은 내용을 HTML로 반환하기 때문에, 태그를 인식할 수 있다. 하지만 HTML을 인식하기 때문에, 사용자가 의도치 않은 태그를 삽입하여 XSS 공격을 받을 수 있다.클릭해주세요 이런 방식으로 에디터에 입력하면, 실제로 태그로 인식하여 실행이 된다.이를 방지하기 위해서 사용자가..

본격적인 디벨롭 과정에서 더욱 느낀 것은, 소통의 중요성이다. 이전에는 다같이 MVP를 선정하고 확장된 기능들을 가지고 다뤘기 때문에, 의도한 바를 적당히 내 선에서 해결할 수 있었다. 하지만 디벨롭 중, 나는 부족한 기능들을 추가하고 기획단에서는 유저 테스트를 통해서 개선사항들을 마련하다보니 의도가 달라지는 문제가 생겼다. 그냥 시간을 변경하기 위한 컴포넌트로 바라보면서, 시간 버튼을 클릭하면 각각의 시간이 올라가는 방식으로 구현했다. 하지만 회의 과정에서 다뤄보니, 기존의 시간 버튼 선택으로 인한 변경이 불편하다는 의견을 받고 개선하여 +, -로 변경된 시간을 오른쪽에 보여주는 방향으로 UI가 변경된 것이었다. 기존에는 차선을 택하는한이 있더라도 내 선에서 끝나는 방향으로 설정해나갔다. 거의 PO의 ..