전체 글51 Web3란 무엇일까? 0. 이 글을 작성하게 된 이유최근 커뮤니티와 투자 시장에서 Web3라는 키워드를 접했다.단어를 처음 들었던 것은 아니지만 정확히 어떤 개념을 의미하고, 기존 웹과 어떻게 다른지가 궁금했다. Web3의 등장 배경, 개념, 실제 사례, 장단점등을 다루어 보려고 한다. 1.0. Web3의 등장 배경Web3는 단순한 기술의 발전이 아니라 기존 인터넷 구조(Web2)의 한계에 대한 문제의식에서 비롯되었다. Web2 시대에는 거대 플랫폼(구글, 메타, 아마존 등)이 사용자의 데이터와 콘텐츠를 독점하고,사용자들은 사실상 플랫폼의 통제 하에 존재했다. 사용자들은 콘텐츠를 만들지만 소유하지 못하고,서비스 중단이나 계정 삭제에 의해 접근 권한조차 잃을 수 있는 구조였다. 여기에 2008년 금융위기 이후 탄생한 비트코인과.. 2025. 6. 13. [React] 디자인 패턴(Container-Presenter, Custom Hook) 0. 이 글을 작성하게 된 이유리액트로 프로젝트를 만들다 보면 컴포넌트 구조가 점점 복잡해지고, 비슷한 로직이 반복되며, 유지보수가 어려워지는 순간이 찾아온다. 이럴 때 개발자는 '코드를 더 잘 구조화할 방법'을 고민하게 된다.단순히 패턴을 소개하는 데 그치지 않고, 왜 써야 하는지, 어떤 효과가 있는지도 함께 다루어 보겠습니다.1.0. 디자인 패턴이란 무엇인가?디자인 패턴이란 반복되는 문제에 대한 검증된 해결 방법입니다. 소프트웨어 개발에서 디자인 패턴은 흔히 발생하는 문제 상황에서 코드를 어떻게 구조화하면 좋은지를 알려주는 일종의 '설계 레시피'입니다.리액트에서는 이러한 패턴들이 컴포넌트 설계, 상태 관리, UI 구조화 등 다양한 부분에서 사용됩니다. 2.0. 디자인 패턴을 왜 사용해야 하는가?리액트.. 2025. 4. 1. [Next] Next Route Handlers 0. 글을 작성하게 된 계기PG 결제 연동을 작업하던 도중 별도의 백엔드 서버가 없었고 Next14를 사용하고 있었기 때문에 Route Handlers를 사용해야 하는 상황에 직면했습니다.이로 인해 Next.js의 API Route를 활용하여 결제 관련 기능을 구현하기로 결정했습니다.개념에 대한 설명과 간단하게 제가 구현한 과정에 대한 설명을 하도록 하겠습니다.1.0. Route HandlersRoute Handlers는 app/api 디렉토리 아래에 정의되며, 기존의 pages/api를 대체하는 새로운 API 처리 방식입니다.Route Handlers는 app 디렉토리 내에서만 사용 가능합니다.page 디렉토리 내의 API Routes와 동일한 기능을 하므로, API Routes와 Route Handl.. 2025. 3. 11. 외국인 개발자들과 일할 때 Git Convention 0. 글을 작성하게 된 계기외국인 개발자들을 매니징 하고 개발에도 직접 참여하다 보니 서로 각자 다른 컨벤션들을 사용했고,통일되지 않은 컨벤션 때문에 문제가 발생했을 때 이력을 추적하기 어렵고 시간을 쓰게 되는 것이 아까워서 작성하게 됐다.디테일하지는 않더라도 기본적인 것들을 작성해서 통일된 컨벤션을 지키려고 제안했던 문서를 공유합니다 :) 1.0. 팀 협업을 위한 Git 컨벤션해당 문서는 개발팀이 일관성 있고 가독성이 높은 버전 관리 프로세스를 유지하기 위한 Git 컨벤션을 정의합니다.1.1. 브랜치 네이밍 전략명확하고 정리된 저장소를 유지하기 위해 구조적인 브랜치 네이밍 규칙을 따릅니다.브랜치 이름은 설명적이어야 하며 다음 패턴을 따라야 합니다[카테고리]/[이슈-ID]-[간단한-설명]1.2.. 2025. 2. 4. GraphQL 0. 해당 글을 작성하게 된 계기해당 글을 작성하게 된 계기는 진행하고 있는 프로젝트가 REST API가 아닌 GraphQL을 사용하기 때문입니다.GraphQL를 들어봤지만 접하는 건 처음이라, 이에 대한 이해가 필요했습니다. 개발자들은 API를 사용해서 클라이언트와 서버의 통신을 구현한다. 가장 많이 사용되는 방식은 REST와 GraphQL이 있다.1.0. GraphQL이란? GraphQL은 API를 위한 쿼리 언어이며, Facebook에서 만들었다. 1.1. 쿼리 언어(Query Language)쿼리 언어는 정보를 얻기 위해 보내는 질의문(Query)을 만들기 위해 사용되는 컴퓨터 언어다.예시로는 DB 시스템에 저장된 데이터를 가져오기 위해 사용하는 SQL이 있다.SELECT user_id,usern.. 2025. 1. 18. dangerouslySetInnerHTML 0. 해당 글을 작성하게 된 계기해당 글을 작성하게 된 계기는 에디터 편집 과정에 있습니다. 에디터는 사용자가 작성한 HTML 콘텐츠를 저장하고 이를 다시 렌더링 하는 기능이 필수적입니다. 이 과정에서 dangerouslySetInnerHTML를 사용하는 코드가 발견되었고, 이에 대한 이해가 필요했습니다.1.0. dangerouslySetInnerHTML란 무엇인가?1. dangerouslySetInnerHTML 은 React에서 원시 HTML을 컴포넌트에 삽입할 수 있도록 해주는 특수한 속성이다.2. 일반적으로 React는 JSX를 통해 DOM을 관리하지만, 이 속성은 React의 가상 DOM을 우회하여 HTML 문자열을 DOM에 직접 삽입한다.3. 이 기능은 잠재적인 보안 취약점, 특히 XSS(교차 .. 2024. 12. 26. 이전 1 2 3 4 ··· 9 다음