Giter VIP home page Giter VIP logo

junzero-blog's People

Contributors

junzero741 avatar

Watchers

avatar

junzero-blog's Issues

[FAIL] : 로컬에서 개발한 api 에 배포된 페이지에서는 접근할 수 없는 문제

사건의 개요

  • Next.js 와 MongoDB 를 연결하여 Todo 앱을 만들어보고자 함.
  • localhost:3000 에서는 작성한 api에 연결이 잘 되었으나, preview 도메인과 master 도메인에서는 해당 api에 접근할 수 없었음.

사건을 인지하고 해결에 이르기까지의 타임라인

  • 오후 12시 50분에 발견, 오후 4시 50분에 해결

사건의 근본 원인

  • 로컬에서 개발할 때는 DB 에의 access 권한을 현재 사용중인 인터넷의 IP 로만 추가해두어도 괜찮지만, 배포할 때는 배포한 서버의 IP 를 추가해주든가, 모든 IP 에 대한 access 권한을 풀어주어야 한다. 당연히 배포한 서버는 로컬과 IP 가 다르기 때문..

영향과 피해 평가

  • 깨닫고 보니 당연한 문제인데 4시간동안 이걸 해결하느라 블로그의 넥스트 스텝을 개발하지 못했다.

문제를 즉시 해결하기 위한 조치 항목

  • 당장은 DB 의 access 권한을 모든 IP 로 해둬서 해결했지만, 보안상 좋지 않은 것 같은데, 반대로 생각해보면 데이터 목록을 어느 IP 에서는 못보고, 어디서는 보고 하는식으로 차등을 주는게 오히려 이상한 것 같기도 하다..

재발 방지를 위한 조치 항목

  • 백엔드, 그중에서도 DB access 에 대한 공부를 더 해봐야 함.

해당 경험에서 얻은 교훈

  • 백엔드 공부 더하자.

[FAIL] : polymorphic 컴포넌트에 displayName 을 추가할 수 없는 문제

사건의 개요

  • �as prop 에 HTML 태그명을 넣어서 다양한 태그 형태로 재사용할 수 있는 polymorphic 컴포넌트를 만들고 있었다.
  • 해당 컴포넌트를 forwardRef 컴포넌트로까지 사용할 수 있게 하는데에는 성공했으나, 컴포넌트에 displayName 이 없다는 lint 에러를 만났다.

image

사건을 인지하고 해결에 이르기까지의 타임라인

  • 문제발견 : 18:20
  • 해결시도 : 18:20 ~ 20:10
  • 문제해결 : 20:10

사건의 근본 원인

  • �forwardRef 와 TS Generic 에 대한 문법 이해 부족

영향과 피해 평가

  • polymorphic 컴포넌트를 Text 컴포넌트외의 다른 컴포넌트(ex : Box) 로도 만들어보려 했으나 시간을 많이 뺏겨서 다음으로 미뤄야 할 듯.

문제를 즉시 해결하기 위한 조치 항목

  • 스택오버플로우 검색
  • 구글링
  • 검색 결과대로 다양한 시도

재발 방지를 위한 조치 항목

  • 포스트모템 작성
  • polymorphic 컴포넌트 Text 에 주석 작성
  • displayName 프로퍼티를 보유하지 않은 컴포넌트의 변수명 prefix 에 _ 추가

해당 경험에서 얻은 교훈

  • displayName 프로퍼티는 브라우저의 리액트 개발자 도구에서 컴포넌트의 이름을 표시해주므로 디버깅에 아주 중요하다.
  • forwardRef 로 작성한 컴포넌트는 기본적으로 displayName 프로퍼티가 없다.
  • 이를 해결하기 위해선 해당 컴포넌트에 displayName 프로퍼티를 추가해줄 방법을 찾아야 한다.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.