전체 글

홈페이지에서 사용자가 로그인을 하고, 로그인 정보를 fetch 했을 때 브라우저에서 비밀번호를 fetch할 수 없어야 한다. 즉, 비밀번호를 알아내는 것이 불가능해야 한다.  DB에 있는 비밀번호를 알 수 있게 된다면, 해커가 DB를 해킹했을 때 민감한 정보에 접근이 가능하게 된다. 또한 다른 사이트에서도 동일한 아이디와 비밀번호를 사용하는 경우 문제가 더 심각해진다.  따라서 비밀번호나 계좌번호같은 민감한 정보를 백엔드에 저장할 때 그대로 저장하지 않는다. 양방향 암호화 양방향 암호화는 JWT같은 복호화가 되는 암호화를 말한다. 즉, 암호화와 복호화 모두 할 수 있는 암호화 방법이다. DB에 양방향 암호화 방식을 사용한다면 만약 데이터베이스가 털리게 된다면 홈페이지를 통해서 비밀번호를 추측할 수 있게 ..

첫 번째 로그인브라우저에서 email과 password를 가지고 로그인 요청을 백엔드로 보낸다면 백엔드는 해당 유저가 존재하는지 DB를 확인하고 있다면 session에 저장을 한다. session에 저장할 때 특정 id를 부여하는데, 브라우저에 response로 넘겨준다.  이렇게 보내진 id는 해당 유저가 누구인지 식별할 때 사용된다. 하지만 유저의 정보를 백엔드 서버에서 받기 때문에 한번에 여러명의 정보를 받으면 session의 한계가 존재하기 때문에 문제가 발생한다.  이것을 해결하기 위해서 백엔드 서버의 성능상 한계가 있기 때문에 scale-up을 통해 컴퓨터 성능을 올려주었다. scale-up→ 컴퓨터 성능(cpu, memory 등)을 올려주는 작업두 번째 로그인 백엔드 컴퓨터의 성능을 오려주었..

홈페이지를 만들 때 스크롤에 따른 이벤트는 아주 많이 사용된다.지금까진 제대로 컨트롤하는 방법을 몰라서 라이브러리 등을 사용해서 만들었는데, 요즘 트렌드에는 스크롤 이벤트가 워낙 많이 들어가서 직접 사용하는 방법에 대해서 알아보려고 한다.  특정 라이브러리가 아닌 순수 자바스크립트의 기능을 사용해서 구현해보려고 한다.  속성이벤트를 구현하기 전에 사용할 수 있는 속성이 어떤 것들이 있는지 알아보자. (function () { const outputEle = document.querySelector(".output"); window.addEventListener("scroll", function (e) { outputEle.innerHTML = window.innerHeight; });})();..

배열이나 객체를 사용할 때 특정 배열을 복사하거나 새롭게 만들기 위해서 복사를 하는 경우가 있다. 이때 경우에 따라 예상치 못한 작업이 발생하는데, 이것이 얕은 복사로 인한 문제들이다.  얕은 복사주소값까지만 복사를 해주는 것이 얕은 복사이다. const object = { name: "잉여", age: "28",};const newObject = { ...object };console.log(newObject);객체를 복사할 때 많이 사용하는 방식이 spread 연산자를 활용하는 방식이다. 이렇게 하면 object의 주소값만 복사하는 것이 아닌 내부값을 새롭게 복사하기 때문에 newObject의 name이 변경되더라도 object의 name은 변화가 없다.  이렇게보면 이 행위 자체가 얕은 복사가 ..

자바스크립트에서 숫자, 문자, 참/거짓 등 기본 데이터 타입을 제외한 모든 타입은 Object, 객체 타입이다.  const person1 = { name: "잉여인간", age: 28, introduce: function () { console.log("안녕! 나는 잉여인간이야. 나이는 28이고!"); },};이런 형식으로 중괄호를 사용해서 만들 수 있다. 여기서 두 번째 사람을 만들고 싶다면 아래와 같이 만들 수 있다. const person1 = { name: "잉여인간", age: 28, introduce: function () { console.log("안녕! 나는 잉여인간이야. 나이는 28이고!"); },};const person2 = { name: "열심인간", ..

GitHub Action에 대해서는 앞서 어떤 요소들이 있는지 알아봤다. 최종적으로 나 역시 CI / CD를 구축하는 것을 목표로 GitHub Action을 사용하려고 한다.  CI의 베이스가 되는 브랜치 전략으로 Git Flow를 사용하려고 한다. GitHub Flow 등도 있을 텐데 최초 브랜치 전략을 공부할 때 Git Flow를 알아봤었고 아직까지 많이 사용되는 전략이라서 굳이 다른 방향을 알아보진 않았다.  어떤 방향으로 GitHub Action을 사용할 것인가!  이게 중요할 것 같은데, Git Flow를 이야기하는 이유는 브랜치의 속성에 따라 Action을 설정해줄 생각이다. 내가 사용할 브랜치로Main : 프로젝트 | 서비스의 메인 브랜치로 정식 배포가 된 환경의 브랜치다. Develop :..

GitHub Action에 대해서는 앞서 어떤 요소들이 있는지 알아봤다. 최종적으로 나 역시 CI / CD를 구축하는 것을 목표로 GitHub Action을 사용하려고 한다.  CI의 베이스가 되는 브랜치 전략으로 Git Flow를 사용하려고 한다. GitHub Flow 등도 있을 텐데 최초 브랜치 전략을 공부할 때 Git Flow를 알아봤었고 아직까지 많이 사용되는 전략이라서 굳이 다른 방향을 알아보진 않았다.  어떤 방향으로 GitHub Action을 사용할 것인가!  이게 중요할 것 같은데, Git Flow를 이야기하는 이유는 브랜치의 속성에 따라 Action을 설정해줄 생각이다. 내가 사용할 브랜치로Main : 프로젝트 | 서비스의 메인 브랜치로 정식 배포가 된 환경의 브랜치다. Develop :..

React Native로 권한을 제공해야 하는 커스텀 훅을 만들기 위해서 작업을 하는 도중 타입을 선언하는 과정에서 새로운 경험을 하게 되었다. import { checkMultiple, PERMISSIONS, PermissionStatus, requestMultiple, RESULTS,} from 'react-native-permissions';import usePlatform from './usePlatform';import {useEffect} from 'react';type AndroidPermissions = (typeof PERMISSIONS.ANDROID)[keyof typeof PERMISSIONS.ANDROID];type IOSPermissions = (typeof PERMIS..