41. ES6의 특징
2022. 8. 26. 10:37
오늘의 공부 정리
JavaScript ES6는 코드를 보다 현대적이고 읽기 쉽게 만들기 위해 새로운 구문과 새로운 놀라운 기능을 제공한다. 코드를 적게 쓰고 더 많은 작업을 할 수 있다. 따라서 Write less, do more! 을 하나의 슬로건처럼 사용하는 듯 하다. ES6에서는 화살표 함수기능, template literal, module 등과 같은 여러 가지 훌륭한 기능을 갖고 있다. 한번 살펴보자! const , let , var const and var const는 변수를 선언하기 위한 ES6의 새로운 키워드이다. const는 기존의 var보다 더 강력 하다. 따라서 변수를 한 번 사용하면 다시 할당할 수 없다. 즉, 개체와 함께 사용될 때를 제외하고는 불변의 변수이다. 이것은 선택기를 대상으로 하는 데 정말..
29. Redis
2022. 8. 23. 22:22
오늘의 공부 정리
지난번에 검색기능을 구현하기 위해서 ElasticSearch에 대해서 포스팅한 적이 있다. ElasticSearch로 데이터를 찾아서 검색하는 기능은 충분히 좋은 기능이지만 속도 면에서 대용량의 데이터를 다룰때에는 메리트가 떨어지게 된다. 이럴때 좀더 효율적이고 빠르게 데이터를 검색하기 위해서 Redis라는 기능을 익혀보고 내 프로젝트에도 적용해보았다! Redis? Redis란 Memcached와 비슷한 캐시 시스템으로 데이터를 메모리에 저장하고 조회한다. 즉, 앞서 말한 것 처럼 DB에서 조회하는 Elascticsearch 방식보다 훨씬 더 빠른 메모리 기반 데이터베이스이다. 하지만 사실 빠르다는 특징은 Redis 의 장점 중 하나 일뿐이고 실제로는 더 다양한 특징과 기능, 장점들이 있었다. 우선 레디..
28. Pagination
2022. 8. 23. 21:17
오늘의 공부 정리
구글이나 네이버 다음처럼 검색을 하면 한번에 모든 검색결과를 보여주지 못할 때 아래 페이지가 생성되고 각각의 페이지에서 추가적인 검색결과를 확인 할 수 있다. 이같이 보여줄 데이터가 한번에 보여주는 양을 넘어선 경우 (스크롤하는 경우도 포함) 계속해서 데이터를 보여주는 방식을 Pagination 이라고 한다. 이에 대해서 공부한 내용을 적어보려한다. Pagination? 페이지네이션이란 한정된 네트워크 자원을 효율적으로 활용하기 위해 쿼리의 결과값으로 리턴된 리소스를 분할하여 전달 하는 것을 의미한다. 즉, 풀어서 설명하면 페이지네이션, 페이징, 페이지 내비게이션 등 다양한 이름으로 불리는 이것은 웹 페이지에서 흔히 볼 수 있는 페이지 번호를 클릭하면 특정 페이지로 이동하는 부분이나 기법을 통칭하는 용어..
27. CORS
2022. 8. 23. 14:22
오늘의 공부 정리
이전에 미니프로젝트를 하던 도중에 cors error어쩌고 하는 문구를 본적이 있다. 그때는 일단 프로젝트를 빨리 끝내야 해서 간단하게 해결법만 찾아서 코드몇줄 추가해서 해결하고 말았던 기억이 있는데 앞으로도 자주 마주할 에러일 것 같아서 미리 공부해두고 원인이 무엇인지 근본적인 해결책은 무엇인지 등 자세히 살펴보려한다. CORS? 도메인이나 서브도메인, 프로토콜, 포트가 다른 곳에 요청을 보내는 것을 Cross-Origin Request 라고 하고 이러한 Cross-Origin 요청을 보내려면 리모트 오리진에서 전송받은 븍별한 헤더가 필요한데 이런 정책을 Cross-Origin Resource Sharing, 줄여서 CORS라고 한다. 한마디로 브라우저 보안 정책이라고 할 수 있겠다. 따라서 브라우저를..
26. Social Login
2022. 8. 22. 12:16
오늘의 공부 정리
로그인 관련 포스팅의 마지막, 소셜로그인이다. 요즘 대부분의 잘나가는 사이트에는 기본적으로 카카오나 네이버, 구글등의 아이디로 자사 서비스를 이용할 수 있는 기능을 탑재하고 있는 경우가 많다. 이런 경우 사용자로 하여금 편리함을 제공할 뿐아니라 개인적으로는 잘 만들어진 사이트일거라는 뭔지모를 느낌마저 받을 때가 있다.(나만그럴지도?) 아무튼, 오늘은 내 프로젝트에도 해당 기능을 탑재하기 위해서 사전 공부를 진행해보았다. 그럼 시작! 소셜 로그인이란? 위의 예시와 같이 일반적으로 사이트를 가입할 때 보면 해당 사이트에 직접 가입하는 경우와 카카오나 네이버 같이 대중적으로 많이 이용하는 사이트의 정보로 가입하는 경우, 2가지가 존재한다. 나만해도 실제로 카카오나 네이버를 통한 가입을 자주 하곤 하는데 가장 ..
25. JWT
2022. 8. 21. 15:31
오늘의 공부 정리
지지난 포스팅부터 이어진 로그인과정에서 사용되는 access token 과 refresh token이 어디에 어떻게 사용되고 저장되는지는 이제 파악했고 그럼 이 토큰이 어떤 형태를 갖고 있는지를 공부해 볼 차례이다. 토큰이란게 그냥 무슨 맛집 웨이팅 대기표처럼 1,2,3 이렇게 주어지는게 아니라 그 토큰안에도 어떠한 정보를 담겨있고 암호화되어있는데 이번엔 그 토큰이 암호화된 과정과 암호화된 토큰의 구조, 의미까지 찾아서 정리해보려한다. JWT토큰이란? 우리가 로그인한 회원에게 넘겨주는 accesstoken 과 refreshtoken은 "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0Ij..
24. Cookie, Local Storage, Session Storage
2022. 8. 21. 14:34
오늘의 공부 정리
지난 로그인 프로세스 포스팅을 할때 Refresh token을 html의 쿠키에 담아서 저장한다고 말을 했는데 그 쿠키가 무엇인지에 대해서는 제대로 설명을 달지 않았다. (오늘 설명하기위한 빌드업) 오늘은 쿠키에 무엇이길래 거기에 토큰을 담는다는건지, 추가로 Local storage와 session storage의 개념까지 배워보자 쿠키(Cookie) Refresh Token을 담는곳이라고 했으니 저장소의 개념을 갖는것은 어렴풋이 알겠는데 솔직히 그 기능보다 왜 이름이 쿠키인지가 젤 궁금한건 나만그런거 아니겠지..? 그래서 찾아봤따. http://dominopower.com/article/where-cookie-comes-from/ Where cookie comes from :: DominoPower M..
23. Login process
2022. 8. 20. 19:16
오늘의 공부 정리
거의 모든 사이트에 항상 존재하는 기능이 로그인기능이다. 서비스를 운영하기 위해서는 이를 이용하는 회원들이 있어야 하고 그 회원들이 진짜 '회원'임을 인증하기 위해서 로그인이라는 기능을 이용한다. 일반적으로 로그인 한 회원들만 사용할 수 있는 기능들이 존재하는 경우가 많으며 내가 로그인을 했는지 안했는지를 어떻게 검증하는 걸까 생각했던적이 있었는데 이번 로그인 process를 따라가며 공부하다보니 그 해답을 알 수 있었다. 오늘은 내가 공부한 Login process에 대해서 정리해 보려한다. Login-Process 우리가 어떤 사이트에서 로그인을 한다고 생각해보자. 우선 회원가입이 되어있다는 가정하에 가입한 회원 아이디 혹은 이메일을 입력하고 비밀번호를 입력하면 아이디에 맞는 비밀번호가 맞다면 로그인..