나의 코딩일지

초기에 시작할 때 margin collapse가 발생한다고 배웠었다가, 어느샌가부터 예상하지 못한 margin이 일어나지 않아 잠시 잊고 있었다. 그러다 관련한 질문에 대한 답변을 생각해보다가, 정리가 필요함을 느꼈다. 문제는 아래와 같다.margin의 경우 margin collapse가 발생할 수 있다.최근에는 margin에 대해 신경쓴 적이 없다.margin이 수평 배열인 경우에는 margin collapse가 발생하지 않고, 수직 배열인 경우에 발생한다.수직 배열을 할때 margin에 대해 신경쓴적이 없다.???답은 flex에 있었다. Flex item 에 margin을 주면일반적으로 flex item을 주면 요소마다 각각 적용이 된다. 2번 아이템의 margin-left를 70px로 주고 나머지를..

룰루랄라 내 홈페이지를 만들던 중에, 블로그의 최신글을 불러와서 보여주고 싶었다. 티스토리의 Open API가 있기를 바랬지만,, 없었고,, api를 확인해봤지만 SSR 쓰는 것으로 보여서 결국은 크롤링을 해야했다. 보통 크롤링은 보안때문에 브라우저에서 요청을 잘 안하지만, 하나를 위해서 백엔드 서버를 배포하는게 싫었다. 서버 사이드에서 요청을 하면 cors를 안띄우는걸 알았지만, 개인적으로 Next.js를 아직 그렇게 선호하지 않아서 마이그레이션하기는 불-편했다. 그러다가 그냥 새로 파서 api 하나만 만들어놓기로 했다. 사실 진짜 가능할지 몰랐다.. 이걸 다이나믹 라우팅으로 배포해놔도 될거같은데 그럼 티스토리가 싫어하려나? 이게 문제가 되는지, 어디까지 가능한건지 모르겠다! 일단 이왕인거 블로그를 S..

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

함수형 컴포넌트와 클래스형 컴포넌트     -  컴포넌트의 생명주기 에러 바운더리 개요 에러 바운더리 사용해보기    -  동시다발적 에러 잡기    -  동시다발적 에러 각각 잡기 에러 바운더리   -  에러 바운더리가 잡는 에러   -  에러 바운더리가 잡지 못하는 에러를 잡아보자 에러바운더리 적용해보기더 알아보기   -  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 공격을 받을 수 있다.클릭해주세요 이런 방식으로 에디터에 입력하면, 실제로 태그로 인식하여 실행이 된다.이를 방지하기 위해서 사용자가..