React

앞 전에 suspense를 정리하였다. suspense가 기반되어야 쓸 수 있는 코드에 대해서 정리해보고자 한다. code-splitting 영어 단어 그대로 코드를 나눈다는 것이다. 왜 이것이 필요할까? 앱이 커짐에 따라 번들도 커지게 된다. 특히 큰 third-party라이브러리를 포함하는 경우에 번들에 포함된 코드를 주의깊게 확인해야 한다. 실수로 커진 앱으로 인해 로드시간이 오래 걸리는 문제를 방지한다. 큰 번들로 묶이지 않으려면 번들을 code splitting 하는것이 좋다. code splitting 기능은 런타임시 동적으로 로드할 수 있는 여러 번들을 만들 수 있는 Webpack 및 Browserify와 같은 번들러에서 지원되는 기능이다. code splitting을 하면 사용자가 현재 필..

react가 16에서 알파버전이었다가, 18버전에서는 베타버전이 되었다. 그만큼 안정화가 되었다는 것을 말해준다. 이는 우연히 블로그에서 정보를 찾으려다가 발견한 정보이다. 아직 공부가 많이 필요하다는 것을 많이 느낀다. 그래서 우연히 알게된 이정보에 대해서 공부할려고 찾아보다가 더 많은 부분까지 알게되어 개념은 어느 정도 알겠지만 정리가 안되어, 이 개념을 정리하고자 글을 써본다. 이전에 정리해놓은 글인데 이제야 올립니다. 들어가며, 위에서 말한 것처럼 react의 suspense는 이미 출시되어 있었다. 16버전에서 알파버전이어서 그만큼 불안정했다가, 18버전에는 안정화가 되었다. 여기에서 나오는 개념은 클라이언트 react server개념이 나온다. RSC(React Server Component)..

항상 react를 쓰는데 인터넷강의로 너무 간략하게 배우다보니 이에 대한 개념이 적립되지 못해 이제야 이 개념을 적립하고자 정리한다. 개념 useEffect() 함수는 React component가 렌더링 될 때마다 특정 작업(Sied effect)을 실행할 수 있도록 하는 리액트 Hook이다. 여기서 Side effect는 component가 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 말한다. 이러한 기능으로 인해 함수형 컴포넌트에서도 클래스형 컴포넌트에서 사용했던 생명주기 메서드를 사용할 수 있게 되었다. 클래스형 컴포넌트에서는 생명주기 메소드를 사용할 수 있었는데, 이를 함수형 컴포넌트에서도 사용할 수 있게 되었다. 즉, 라이프사이클 훅을 대체할 수 있게 되었다. component..

useHistory() import { useHistory } from "react-router-dom"; const test = useHistory(); 처음에 이 방법을 이용하여 사용하고자 했는데, 계속적으로 오류가 나서 찾아보았다. stackflow를 들어가서 해결점을 찾게 되었다. 내가 참고한 글이 오래된 글이었으며, 지금은 useHistory대신에 useNavigate를 사용한다는 것이었다. react-router-dom 6버전에서부터 교체 된 것 같았다. useNavigate() 내가 구현하고자 하는 기능은 버튼 클릭시 페이지가 이동된다. 그리고 이동시에 값도 같이 넘겨주도록 기능을 설계하고자 하였다. import { useNavigate } from 'react-router-dom'; con..

비밀번호가지고 로그인 password : 로그인 인증할 때의 사용자가 입력한 비밀번호 userSalt : DB에 저장되어있는 사용자의 salt userPassword : DB에 저장되어있는 사용자의 암호화된 비밀번호(해시 값) 단방향 암호화이므로 복호화를 할 수 없다. 따라서 비밀번호 암호화했을 때의 비밀번호와 salt를 가지고 동일한 방법으로 암호화를 진행하여 나온 값과 비교한다. 이때 salt는 비밀번호를 생성했을 때의 값과 똑같은 값을 사용해야 한다. 그렇지 않으면 일치하지 않는다. 만약 일치한다면 true, 일치하지 않는다면 false를 반환하도록 한다. 최신 코드 export const verifyPassword = async (password, userSalt, userPassword) => ..

단방향 암호화와 양방향 암호화 crypto는 단방향 암호화 방식이고, bcrypt는 양방향 암호화 방식이다. 단방향은 암호화할 수는 있어도 복호화해서 원래의 비밀번호를 알 수 없고, 양방향은 복호화해서 원래의 비밀번호를 알 수 있다. 그러나, Bcrypt는 Blowfish 알고리즘을 사용하기 때문에 해싱이 느리고 해싱에 엄청난 비용이 든다. 만약 해커가 브루트 포스같은 공격을 해대면 서버에 엄청난 부하가 가해진다. 암호화 복호화 단방향 가능 불가능 양방향 가능 가능 해시(hash) 해시(hash) : 해시 함수에 의해 얻어지는 값 해시 함수(hash function) : 해시 알고리즘(hash algorithm)이라고도 하며, 임의의 길이의 데이터를 고정된 길이의 데이터로 매핑하는 함수 키(key) : ..