- 전체보기(32)
- React(12)
- frontend(12)
- Backend(11)
- django(8)
- python(6)
- JavaScript(4)
- JWT(3)
- PostgreSQL(3)
- Django 웹 개발(2)
- 동적 웹(2)
- axios(2)
- error(2)
- Nginx(2)
- Django REST framework(2)
- Web Server(2)
- pgadmin(2)
- drf(1)
- WAS(1)
- Load balancing(1)
- eventhandler(1)
- 데이터베이스(1)
- Database Migration(1)
- useContext(1)
- permission(1)
- Anonymous Function(1)
- Admin Page(1)
- styled components(1)
- Context API(1)
- User Class(1)
- MVT(1)
- ES6(1)
- Database(1)
- Prop(1)
- django-cors-headers(1)
- DB CRUD(1)
- context provider(1)
- cors(1)
- global state(1)
- ORM(1)
- Fullstack(1)
- createContext(1)
- node.js(1)
- reverse proxy(1)
- 컨텍스트 객체(1)
- prop의 수정 불가능성(1)
- re-migration(1)
- OAuth2.0(1)
[JavaScript] 브라우저와 Node.js의 이벤트 루프
자바스크립트는 분명 싱글 스레드 언어입니다. 자바스크립트의 두 런타임 브라우저와 노드JS가 어떻게 여러 작업들을 동시에 처리할 수 있는지, 내부 구조를 뜯어보며 알아봅니다.
URLSearchParams가 제대로 동작하지 않는다면 - fragment identifier (URL hash)
SPA 라이브러리에서 fragment identifier는 왜 생기는 것이고, 이를 어떻게 핸들링 할 것인지 알아봅니다.
400: redirect_uri_mismatch 에러 해결기
OAuth 구현시 마주할 수 있는 redirect_uri_mismatch에러를 해결하기까지의 과정을 기록합니다.
Broken pipe from ('127.0.0.1', <port no.>) 에러 해결기
텍스트만 업로드 가능하던 기존 게시판에, 이미지도 업로드가 가능하도록 기능을 추가하다 마주친 에러입니다. form 에 제목과 내용을 입력하고, 원하는 이미지를 선택한 뒤 업로드하기
[React] DOMException: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded 에러 해결기
회원가입 창에서 새로운 유저를 생성하려는데,회원가입하기 버튼을 누르니 다음과 같은 에러가 발생했습니다. 에러 문구를 천천히 살펴보니, 해독 되어야 할 문자열이 올바르게 인코딩 되지 않았다고 합니다.에러가 발생한 지점의 코드를 클릭해보았더니,제가 작성하지도 않은 파일인
[React] DELETE 요청 이후 state를 변경해주지 않으면 UI에는 삭제된 데이터가 여전히 남는다 (feat. 자식 컴포넌트에서 부모 컴포넌트의 state를 어떻게 수정할 것인가?)
게시판 삭제 기능을 구현하고 있습니다. axios로 서버에 DELETE 요청을 보내면백엔드의 DRF view가 DB에서 해당 게시글을 찾아 삭제하는 구조입니다. 삭제 버튼을 누르면, DB에서는 데이터가 잘 삭제되는데,화면에는 여전히 해당 게시글이 남아있는 문제를 마주하
[DRF - React] JWT인증 방식의 서비스에서 로그인 된 유저 이름 화면에 띄우기
로그인을 하면, 사용자의 이름을 포함한 상쾌한 인사 메세지를 건네주면 좋을 것 같습니다. 아래와 같은 느낌으로 말이죠.디자이너들이 보면 기겁할 디자인이지만,저희는 디자이너가 아니니 로직에만 집중해 보겠습니다. 저의 경우, 프론트엔드는 React, 백엔드는 DRF(Dja
[React] react-router-dom useParams 도입기 - 전체 항목 페이지에서 세부 항목 페이지로 전환하기
아래와 같이 게시물의 id를 url에 동적으로 전달하여전체 게시글이 로드되는 화면에서 각 게시물을 클릭하면 해당 게시물만이 보이는 페이지로 이동하도록 구현하고자 합니다. 아래는 사용자들이 게시판에 업로드한 모든 게시물을 렌더링하는 컴포넌트의 코드입니다.프로젝트의 전체적
[DRF - React] user registration, authorization using JWT and connect with React Frontend
백엔드를 DRF로 구현하는 경우에도, simplejwt를 이용해 JWT인증방식을 서비스에 적용할 수 있습니다. 먼저 터미널에 아래와 같이 입력하여 simplejwt를 다운받을 수 있습니다.이후, settings.py파일에서 몇 가지 설정을 해주어야 합니다.먼저 INST
AssertionError: Expected a Response, HttpResponse or StreamingHttpResponse to be returned from the view, but received a <class 'NoneType'> 에러 해결기
로그아웃 기능을 구현하고 있었습니다. axios로 프론트엔드에서 로그아웃 요청을 보내면, 장고 백엔드의 view에서 유저의 토큰을 초기화하고, 블랙리스트에 올리도록 구현하는 과정에서 해당 에러를 마주하였습니다. 코드는 다음과 같습니다. 로그아웃 버튼을 누르는 순간, 다
[Django]InconsistentMigrationHistory 에러 해결기
사용자들이 자신의 여행기를 업로드 할 수 있는 게시판을 개발하고 있습니다.게시물을 저장할 객체 테이블의 마이그레이션 작업은 예전에 완성해두었고,그 당시 게시물 테이블은 User 테이블과 외래키로 연결되어 있었습니다. 게시물 DB와 사용자 DB를 분리하여 운영하고, 게시
[Django] 기본 User 모델에서 커스텀 User 모델로 변경하기
장고에서 기본으로 제공하는 User 클래스를 받아와 별도의 개발 없이 사용자를 관리할 수 있습니다. 하지만, 아래의 두 가지 이유로 사용자 클래스를 직접 설계해야 하는 상황이 발생합니다. Django 기본 User 클래스의 사용자 인증 방식 - username으로 인증
[DRF] custom permission 클래스로 서비스의 특정 기능에 사용자 접근 제한하기
여기, 서비스 유저가 업로드한 게시글을 조회할 수 있는 두 개의 API뷰가 있습니다. 각각의 API VIEW에 접근할 수 있는 엔드포인트는 다음과 같습니다. 두 개의 게시물 조회 API뷰 PostList 와 PostDetail 은 각각 다른 역할을 수행합니다. List
[Django] 백엔드와 프론트엔드의 원활한 통신을 위한 브라우저 CORS정책 무력화하기
프론트엔드와 백엔드의 원활한 통신을 위해선,브라우저의 기본 동작인 CORS정책을 무력화시켜야 합니다. 간단히 말해서, 특정 데이터가 존재하는 url외의 주소에서 해당 데이터를 요청하면 데이터를 보내주지 않도록 브라우저가 막는 보안 기능입니다. 예를 들어, 데이터가 저장
[React] Objects are not valid as a React child 에러 해결기
현재 간단한 게시글 커뮤니티 기능을 만들고 있습니다. 프론트엔드는 JavaScript, React.js, 백엔드는 Python, Django REST로 구현중입니다. 장고 백엔드의 데이터를 프론트엔드에서 fetch로 받아오는 상황에서 아래와 같은 에러를 마주하였습니다.
[NGINX] nginx.conf에 http context 작성하기
안녕하세요, 오늘부턴 본격적으로 웹 서버이자 reverse 프록시 서버로 배치할 nginx을 설치하고 사용법을 익혀보겠습니다. 저는 맥북 유저이며, homebrew를 사용하기에 터미널에 아래와 같이 입력하여 nginx를 설치하겠습니다. homebrew를 사용하지 않으시
캐싱, 암호화, 로드밸런싱이 지원되는 매혹적인 프록시 서버 구축하기
안녕하세요, 취미로 여행 관련 웹 서비스를 개발한지 어느덧 3개월차, 문득 이런 생각이 들더군요. > 개발 지식을 갖춘 악의적인 사용자가 나의 서버에 접근하는 것을 어떻게 방어할 것인가? 실제 서비스들은 프로덕션 단계에서 어떻게 서버를 외부의 접근으로부터 보호하는가
[React] All About React Hook Rules (feat. lexical scope, impure function, spread assignment)
Meta 공식 가이드에서 제공하는 React Hook 사용규칙을 정리해볼게요.먼저, 리액트 훅이라면 useState든 useEffect든 종류에 상관없이 지켜야 할 약속을 알아볼게요.리액트 hook은, 일반 자바스크립트 함수에서는 사용할 수 없습니다. 오직 리액트 컴포
[React] controlled components 로 UI 개선하기
안녕하세요, 오늘은 React의 controlled components를 활용하여 UI를 개선한 사례를 하나 소개해볼까 합니다. input tag에 유저가 입력한 값들이 컴포넌트의 state에 실시간으로 반영되는 컴포넌트를 controlled components라고 부
[React] 자식 컴포넌트에서 prop값을 state로 저장해 자유롭게 수정하기
리액트에서는 prop으로 컴포넌트 바깥으로 데이터를 공유할 수 있습니다. prop에는 react state뿐 아니라, JS변수, JS함수도 담아 보낼 수 있는데요, 리액트의 설계원칙 중 "prop 불변성" 이란 것이 있습니다. 이번 포스팅에서 가장 중요한 개념인데요