본문 바로가기

개발55

spring boot - 비동기 작업 처리 서버를 만들다 보면 비동기로 처리해야 하는 일들이 있습니다. 이 경우 Async를 이용해서 비동기로 작업을 처리할 수 있습니다.동기와 비동기동기와 비동기의 차이점을 간단히 짚고 넘어가겠습니다. 보통 프로그램은 위에서부터 아래로 순서대로 명령을 처리합니다. 이것을 동기(syncronous)적으로 처리한다고 합니다. 이 경우 작업이 오래 걸리는 일이 있으면 그 일을 처리할 때 까지 다음 일을 진행할 수 없습니다.서버에서 메일을 보낸다고 가정해 봅시다. 보통 메일을 보내면 메일을 수신하는 데 5초 정도의 시간이 걸립니다. 이것을 동기로 처리하면 서버가 작업을 완료하고 응답을 보내는 데 5초 정도의 시간이 걸린다는 것입니다. 그럼 유저들은 5초 동안 서버가 멈춘 것 같은 느낌이 들 것입니다. 하지만 메일은 보통.. 2024. 11. 8.
react - path parameter 게시글이나 특정 페이지를 보여줄 때 https://codestudycafe.tistory.com/149 처럼 url의 숫자를 이용하는 경우가 있습니다. 이것을 동적 라우팅이라고 합니다. 리액트에서 이런 기능을 사용해 봅시다.동적 라우팅routes에서 :id를 이용해서 변수를 받을 수 있습니다. 그리고 useParam을 이용해서 값을 받을 수 있습니다. 몇번째 게시물, 몇번째 상품 등을 보여줄 때 해당 기능으로 보여주면 됩니다. 주의사항위 예시도 그렇고 대부분의 경우 id는 숫자입니다. 그럼 유저는 url의 id를 조작해서 권한이 없는 게시글(ex. 비밀글)에 들어갈 수 있습니다. 백엔드에서 이러한 경우 데이터를 내려주지 않도록 잘 막아주어야 합니다. 2024. 10. 22.
spring boot - DTO 스프링으로 정보를 전달하다 보면 유저들에게 보여줘도 되는 정보가 있고 안되는 정보가 있습니다.예를 들어 현재 로그인을 한 상태인지, 로그인을 했다면 그 유저가 누구인지 알고 싶습니다. api를 호출해서 유저의 정보를 받아옵니다. 백엔드에서는 로그인을 했다면 해당 유저의 정보를 넘겨줍니다.그럼 다음과 같이 값이 내려옵니다. 유저의 정보를 알고 싶은 것인데 work나 streak같은 다른 정보들은 사실 필요가 없습니다. 그리고 비록 해시를 했다고는 해도 비밀번호가 내려오는 것은 문제가 있어 보입니다.이럴 때 필요한 정보만 DTO에 넣어서 내려주면 됩니다.DTODTO(Data Transfer Object) 클래스에 넘겨줄 정보를 넣어둡니다. converter 클래스를 만들어 줍니다. 이 클래스에서 entity.. 2024. 10. 15.
react - useContext react로 웹을 만들다 보면 전역변수를 가져와야 할 때가 있습니다. 이때 Context를 이용해서 해결할 수 있습니다.로그인 상태를 저장하는 전역변수를 만든다고 해봅시다.createContext를 이용해서 context를 만듭니다. 를 이용하면 이 안에서는 해당 context 값을 읽고 쓸 수 있습니다.useContext를 이용해서 값을 읽을 수 있습니다. 같은 파일에 useAuth 함수를 만들어서 값을 export 합니다. 이 함수를 호출해서 값을 읽을 것입니다. 값을 읽고싶은 파일에서 useAuth를 호출해 isLogin과 setIsLogin을 받습니다. 그럼 isLogin과 setIsLogin을 사용할 수 있습니다. 2024. 10. 12.
react - useEffect react를 하다 보면 화면이 처음 보여질 때나 특정 값이 바뀔 때 실행했으면 하는 경우가 있습니다. 이런 경우 useEffect로 해결할 수 있습니다.관리자 페이지가 있다고 해봅시다. 이 페이지가 처음 보여질 때 관리자가 맞는지 체크할 것입니다. useEffect() 안에 함수를 넣어서 어떤 것을 실행할 지 정할 수 있습니다. 마지막에 []를 넣으면 처음 화면에 보여질 때만 실행합니다. 이 코드는 todo list의 일부입니다. api를 호출해서 해야할 일의 목록을 가져오고 있습니다. 그러면 이런 에러가 여러분을 반겨줍니다. 이것은 useEffect에서 async를 사용했을 때 나타나는 현상입니다. 이 경우 아래와 같은 꼼수를 쓸 수 있습니다. 만약 일의 목록이 갱신될 때 마다 일의 개수를 출력해주려면.. 2024. 10. 9.
react - useState react로 개발을 하다 보면 값이 바로 반영이 안 된다는 것을 느낄 때가 있습니다. 이 코드 같은 경우 버튼을 누르면 x값이 올라가도록 하는 프로그램입니다. 하지만 버튼을 누르면 x가 바뀌긴 하지만 화면에는 반영되지 않습니다.react의 경우 렌더링을 통해서 화면의 정보를 갱신해 줍니다. 하지만 변수가 바뀔 때마다 랜더링을 하면 불필요한 갱신이 발생할 수 있습니다.이런 경우 useState를 이용해서 해결할 수 있습니다. 이렇게 하면 setX를 호출할 때 마다 화면을 새로 랜더링해 줄 수 있습니다.뭔가 이상합니다. setX를 통해 x를 증가해 줬는데 console.log에는 증가하기 전의 값이 보이고 있습니다.이것은 비동기 때문에 그렇습니다. useState의 상태는 비동기적으로 업데이트됩니다. plu.. 2024. 10. 8.

티스토리툴바