분류 전체보기10 vue의 컴포넌트 렌더링 순서를 확실히 알아보자! 🤔이슈 정의 자식 컴포넌트 2개의 데이터를 비동기로 호출하는데 이 때 두 컴포넌트 모두 데이터가 존재하지 않다면, emit을 통해 데이터 존재 여부를 상위 컴포넌트로 전달해주고, 상위 컴포넌트의 렌더링을 막으려고 했다. // Parent.vue // FirstChild.vue FirstChild // SecondChild.vue SecondChild FirstChild와 SecondChild의 data 존재 여부와 상관없이 Parent는 렌더링되지 않는다. 렌더링에 조건이 걸리지 않는 것으로 보아 동작 순서에서 문제가 있다는 추측을 할 수 있다. vue의 생명주기 내가 헷갈리는 부분은 beforeUpdate 전까지이므로 거기까지만 알아보겠다. data, computed, methods, watch 등 정.. 2023. 6. 30. react에서 setInterval 사용 시 플래그 설정을 왜 useRef로 적용해야할까? 🤔문제 정의 3, 2, 1, 0 카운트 다운을 진행하는 컴포넌트를 동작시키기 위해 setInterval을 사용해 3에서 1초마다 countDown을 동작하고, count가 0이 되었을 때, clearInterval을 사용해 setInterval을 중지하는 로직을 구현 중이었다. clearInterval 동작 여부를 구분하기 위해 isIntervalStop이라는 식별자를 flag로 사용하였다. 일반 변수로 플래그 선언 const [count, setCount] = useState(3); const [isStartCountDown, setIsStartCountDown] = useState(false); let isIntervalStop = false; const buttonClickHandler = () =.. 2023. 6. 30. 라우터 제한 설정 시 어떤 요소의 유무를 확인해야할까? (with JWT) 인증 vs 인가 인증이란? 유저가 누구인지 확인하는 절차. 회원가입하고 로그인하는 절차를 의미한다. 인가란? 인증 이후, 유저에 대한 권한을 허락하는 절차. 인증된 사용자가 특정 페이지, 특정 api 정보를 호출할 때 보내줘도 되는지 확인하는 과정을 의미한다. 💣접근 제한 접근 제한 은 server에서 하는 인가 와는 다르게 사용자가 누구인지 식별할 수는 없기 때문에 사용자마다 페이지를 구별해서 띄워줄 수는 없다. 하지만 JWT 토큰 인증 방식의 경우, refreshToken의 유무, accessToken의 유무, userId의 유무를 통해 사용자의 로그인 여부 확인할 수 있고 로그인 여부에 따라 페이지 접근 제한을 둘 수 있다. 예를들어 사용자가 로그인을 해야만 들어갈 수 있는 페이지를 요청한다면, 사.. 2023. 6. 30. Oauth Login을 통해 추가정보 입력받아 회원가입하기(feat : React, Spring) 용어 정리 Client 자사 서비스가 실질적으로 운영되는 사이트. 이 프로젝트는 React를 통해 Client를 띄워주고 있다. Authorization Server Google, Kakao, Naver 등 인증에 필요한 아이템을 제공해주는 서버. Client는 ID, PW로 로그인 요청을 해서 Authorization Code를 발급받을 수 있다. Resource Server Google, Kakao, Naver 등 사용자의 개인정보를 가지고있는 애플리케이션 서버. Server는 Authorization Code를 넘겨 개인정보를 응답받을 수 있다. Server 자사 서비스의 Backend를 담당하는 서버. Client로부터 받은 Authorization Code를 Resource Server로 전달해.. 2023. 6. 30. CSR vs SSR SSR(Server Side Rendering) server에서 HTML을 정제해서 브라우저로 전송해 페이지를 띄워주는 방식 특징 server에서 HTML을 완성해서 보내주기 때문에 브라우저에서 우클릭 후 페이지 소스 보기 를 하면 완성된 html을 볼 수 있다. 장점 첫 완성된 페이지를 볼 수 있는 속도가 CSR에 비해 빠르다. 완성된 html이므로 검색엔진이 사이트의 내용을 파악할 수 있다. => 검색에 용이하다. 단점 사용자의 요청에 따라 동적으로 페이지를 변경해주는 속도가 CSR에 비해 느리다. CSR(Client Side Rendering) server에서 완성되지 않은 html을 브라우저로 전송하고, 사용자의 요청에 의해 브라우저 단에서 js로 나머지 컴포넌트를 렌더링하는 방식 특징 완성되지 .. 2023. 6. 30. 옵저버패턴(Observer Pattern) 옵저버패턴이란? 객체의 상태 변화를 관찰하는 관찰자들, 즉 옵저버들의 목록을 객체에 등록하여 상태 변화가 있을 때마다 메서드 등을 통해 객체가 직접 목록의 각 옵저버에게 통지하도록 하는 디자인 패턴이다. 어떤 객체의 상태가 변할 때 그와 연관된 객체들에게 알림을 보내는 디자인 패턴 옵저버 패턴에는 주체 객체와 상태의 변경을 알아야 하는 관찰 객체(Observer Object)가 존재하며 이들의 관계는 1:1이 될 수도 있고 1:N이 될 수도 있다. 옵저버 패턴의 장단점 장점 실시간으로 한 객체의 변경사항을 다른 객체에 전파할 수 있다. 느슨한 결합으로 시스템이 유연하고 객체 간의 의존성을 제거할 수 있다. 단점 너무 많이 사용하게 되면, 상태 관리가 힘들 수 있다. 데이터 배분에 문제가 생기면 자칫 큰 .. 2023. 6. 16. 이전 1 2 다음
