우리는 Calisthenics 입니다!

React로 개발할 때 아이콘을 편하게 사용할 수 있는 library가 있어 소개해드리려고 합니다. 그것은 바로! React Icons입니다. https://react-icons.github.io/react-icons/ React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. Installation (for standard modern project) npm install react-icons --save Usa react-..

현재, homedong 웹사이트의 로직은 이렇습니다. 사용자 로그인 -> 로그인 성공 후 메인페이지 이동 -> 회원 정보 불러오는 api 요청 -> 회원 정보 state에 저장 정상적으로 작동이 되면, 메인페이지로 이동됨과 동시에 회원정보까지 redux state에 저장이 되어여 합니다. 하지만, 문제가 발생했습니다😥 회원정보를 불러오는 api 요청시 사용자의 JWT 토큰이 request header에 담겨야 합니다. 하지만, header에 담기지 않고 페이지 새로고침을 해줘야만 api header에 토큰이 담기는 로직이 실행되는 것을 확인할 수 있었습니다. 맞습니다..😯 문제는 axios header에 토큰을 담아주는 로직이 있는 http-common.js 파일이 화면이 전체 렌더링 될때만 실행된다는 ..

Redux-Toolkit에서 createSlice 함수를 제공해줍니다. 기존 Redux에서 action, reducer, state를 하나의 함수에서 관리하도록 해주는 함수입니다. 오늘은, createSlice에서 reducer를 정의하고 reducer에서 인자로 받는 action.payload를 커스터마이징 해주는 법에 대해서 포스팅 해보려 합니다😀 현재 사용자가 로그인 해있는 지를 확인하고 이에 따라 state를 변경해주는 loadUser라는 reducer를 정의해봅시다. getToken(local storage에 JWT가 있는지 확인하는 함수)을 불러와서 토큰 존재 여부를 확인하고 이에 따라 state.isAuthenticated를 변경해줄 예정입니다. const authSlice = createS..

Fetch Type JPA가 하나의 Entity를 조회할 때, 연관관계에 있는 객체들을 어떻게 가져올 것이냐를 나타내는 설정값 Eager : 연관 관계에 있는 Entity들을 모두 가져온다. Lazy : 연관 관계에 있는 Entity를 가져오지 않고, getter로 접근할 때 가져온다. N+1 문제 @ManyToOne, @OneToOne의 FetchType을 LAZY로 했을 때 발생 → DB에 상당한 부하를 일으키게 된다. N+1 문제 해결 방법 join fetch 사용 inner join 불필요한 쿼리문이 추가되는 단점이 있다. @EntityGraph 사용 outer join → Cartesian Product ⇒ 중복이 발생한다. → 해결 방법 1:n 필드의 타입을 Set으로 선언한다. → Linke..

회원정보 수정, 회원가입 과정에서 닉네임 중복 체크를 해줘야 합니다. 이를 위해 react-redux-toolkit의 createSlice와 createAsyncThunk를 활용하여 axios 요청을 처리하고 이후 결과에 따라 state.isNicknameChecked의 state를 바꿔주려고 했습니다. 하지만, state가 바뀌지 않고 에러가 나는 상황이 발생했습니다. [에러] Assignment to property of function parameter 'state'라는 에러가 발생하였습니다. [해결과정] 1. 구글링을 통해서 찾아보려 했지만, 마땅한 결과가 나오지 않아 console.log로 state가 잘 들어오는 지 먼저 체크를 해주었습니다. 일반적인 JS 객체가아닌 Proxy 객체가 출력이 ..

💡 STUN/TURN 서버의 필요성 STUN 서버는 UDP 프로토콜 기반으로 동작하며, 클라이언트는 NAT 환경에서 자신의 Private IP를 별도로 가지고 있기 때문에 P2P 통신이 불가능하다. 그래서 STUN 서버를 통해 자신의 Public IP를 확인해 시그널링을 수행할 수 있도록 한다. 만약 STUN 서버를 이용해 외부 주소를 얻지 못한다면 TURN 서버를 통해 트래픽을 라우팅한다. (예를 들어, 두 클라이언트가 같은 네트워크 상에 존재하고 있을 경우 STUN 서버로는 해결 불가능하다.) TURN 서버는 클라이언트들이 서로 통신할 때 public 망에 존재하는 TURN 서버를 경유하도록해 미디어 스트리밍을 할 수 있게 해준다. TURN은 STUN의 확장 개념이고 클라이언트가 서로 다른 NAT 또..

객체와 관계형 데이터베이스의 차이 상속 객체는 상속관계가 있지만, 관계형 연관관계 객체는 reference를 가지고 있다. 관계형 데이터 데이터 타입 데이터 식별 방법 JPA Java Persistence API Java ORM 표준 ORM Object-Relational Mapping(객체 관계 매핑) 객체와 RDB를 ORM 프레임워크가 중간에서 매핑 객체는 객체대로 설계, RDB는 RDB대로 설계 JPA를 사용해야 하는 이유 객체 중심으로의 개발 생산성 유지보수 패러다임 불일치 해결 성능 지연 로딩과 즉시 로딩 지연 로딩: 객체가 실제 사용될 때 로딩 즉시 로딩: JOIN SQL로 한번에 연관된 객체까지 미리 조회 hibernate.hbm2ddl.auto 속성 운영 장비에는 절대 create, cre..

대부분의 웹사이트에서 사용자는 비밀번호를 수정하거나, 로그인을 한 경우에 메인화면으로 자동으로 이동하게 되어집니다. 항상 좋은 UX를 위해, 특정한 action 이후에 필요한 페이지로 이동시켜줘야합니다. 그렇다면, 이러한 페이지 이동을 React로 어떻게 구현 할까요? 바로, react-router를 이용하면 됩니다. 저도 공식문서를 참고해서 방법을 찾았습니다. React Router: Declarative Routing for React Learn once, Route Anywhere reactrouter.com React 16.8이상 버전부터 사용가능한 useHistory hook을 이용해서 간편하게 페이지 이동을 할 수 있습니다. [예시 코드] import { useHistory } from "re..

웹사이트를 개발하다보면 사용자들이 가장 많이 사용하는 것은 페이지 맨 위에 있는 navbar라고 할 수 있습니다. 오늘은 이 navbar를 만드는 과정에서 position: fixed를 부여했을 때, 그 밑에 있는 div의 내용이 겹쳐 보이는 상황을 해결하는 방법을 알려드리려고 합니다! 문제 해결방법 결과

해당 포스팅은 Spring Securty와 jwt를 이용하여 인증, 인가를 구현하기 위해 인프런 Spring Boot JWT Tutorial 강의를 보고 공부한 내용을 남긴 포스팅입니다. JWT RFC7519 인터넷 표준 토큰 기반의 인증 시스템에서 가장 널리 사용되는 인증 방식 JWT의 구성 Header Signature를 해싱하기 위한 알고리즘 정보 Payload 서버와 클라이언트가 주고받는, 시스템에서 실제로 사용될 정보에 대한 내용들을 담고 있다. Signature 토큰의 유효성 검증을 위한 문자열 → 이 토큰이 유효한 토큰인지 검증 가능 JWT의 장점 중앙의 인증서버, 데이터 스토어에 대한 의존성 없음. ⇒ 시스템 수평 확장 유리 Base64 URL Safe Encoding > URL, Cook..