Moon Work

끝나지 않는 Cors 에러 서버에 대한 개념도 모를 때 부터 Cors는 나를 괴롭게 하였지만 이렇게 가끔씩 나타나는 이 에러는 등장만으로도 속에서 불이 나곤한다. jwt 토큰을 통한 XSS와 CSRF 공격 방어를 공부하는데 이 녀석을 또 만났는데 cors()를 적용해도 에러가 발생하는 이유를 정리해본다. 에러 코드 Client axios.defaults.withCredentials = true axios.post('http://localhost:8080/login', data) .then(response => ...) .catch(error => ...) Server ... const app = express(); const server = http.createServer(app); const PORT ..

시작하며React를 통해 개발하면서 컴포넌트마다 똑같은 코드가 반복되곤 하는데 그런 코드가 심지어 길이도 작지 않다면 컴포넌트가 길어져서 곤란하다. 이런 문제를 custom hook을 통해 해결할 수 있는 부분이 있을 것이라 생각이 들어 새로 공부하게 되었다. Custom hook의 장점클래스 컴포넌트보다 적은 코드로 동일한 기능을 구현할 수 있다. 코드 길이를 줄이면서 가독성은 높일 수 있다.Custom hook 규칙최상위에서 hook을 호출한다 (반복문이나 조건문에서 hook을 호출하지 않는다.)React 함수 내에서만 hook을 호출한다.hook의 이름을 'use'로 시작한다.Hook 만들 때 고려해야 하는 점custom hook을 만들 때는 다른 hook의 state에 영향을 끼치게 해서는 안된..

Lazy loading웹에서 이미지는 필수적으로 사용되어야 하지만 동시에 이미지를 로드하는 비용이 많이 들어간다. lazy loading을 통해 뷰포트에 보이는 이미지만 load 해서 성능을 향상시키고 통신 비용을 줄일 수 있다. Lazy loading시 주의할 점1. 이미지가 로드되기 전에 보여질 placeholder를 적절하게 사용해야 한다.방법1: 저화질의 이미지로 placeholder를 사용한다.방법2: 주요 색상을 placeholder로 사용한다.2. 이미지를 로드 하기 위해 미리 이미지를 로드하기 위한 시간을 준다.사용자가 스크롤을 빠르게 내릴 경우 이미지가 로드되는데 시간이 걸릴 것을 대비해서 사용자가 해당 이미지보다 더 높은 스크롤 위치에 있을 때부터 미리 로드를 진행하게 한다.3. 이미..

1. 단일 책임원칙 SRP (Single Responsibility Principle) 클래스와 함수는 단 하나의 책임만을 가져야 한다. 2. 개방-패쇄 원칙 COP(Close-Open Principle) 확장에서는 열려있어야 하고 수정에 있어서는 닫혀있어야 한다. interface와 상속으로 구현 가능하다. 3. 리스코프 치환 법칙 LSP (Liskov Substitution Principle) 상속받은 부모 대신 자식이 대신 치환될 수 있는 일관성을 가진 상태로 상속 되어야 한다. 4. 인터페이스 분리 법칙 ISP(Interface Segregation Principle) 하나의 일반적인 인터페이스 대신 구체적인 인터페이스를 사용해야 한다. 5. 의존 역전 원칙 의존을 할 경우 변하기 쉬운 class..

글로 이해가 어려운 내용을 이미지로 기록하며 이해하고 있습니다.틀린 부분이나 수정이 필요한 부분이 있다면 답글 부탁드립니다. 👨‍💻

URL에서 확인할 수 있는 query와 param URL에서 볼 수 없는 body param, query vs body

Git 시작하기 git init Staging area에 파일 추가하기 git add [파일 또는 폴더] // 현재 디렉토리의 모든 내용을 staging area에 추가할 때 git add . // 작업 디렉토리 내의 모든 변경 내용을 staging area에 추가할 때 git add -a Commit하기 //staging area에 있는 모든 내용을 묶어서 하나의 commit을 생성한다. git commit -m "message" git 상태 확인하기 git status branch 만들기 //branch 만들기 git branch [branchName] //branch 만들고 branch로 이동하기 git checkout -b [branchName] branch로 이동하기 git checkout [b..

소수찾기_완전 탐색 (level2) 문제 설명 한자리 숫자가 적힌 종이 조각이 흩어져있습니다. 흩어진 종이 조각을 붙여 소수를 몇 개 만들 수 있는지 알아내려 합니다. 각 종이 조각에 적힌 숫자가 적힌 문자열 numbers가 주어졌을 때, 종이 조각으로 만들 수 있는 소수가 몇 개인지 return 하도록 solution 함수를 완성해주세요. 제한사항 numbers는 길이 1 이상 7 이하인 문자열입니다. numbers는 0~9까지 숫자만으로 이루어져 있습니다. "013"은 0, 1, 3 숫자가 적힌 종이 조각이 흩어져있다는 의미입니다. 풀이 완전 탐색에 순서에 따라 결과가 달라지기 때문에 Combination을 재귀함수를 통해 구현하도록 하였다. 숫자를 하나 뽑아서 기존에 더한 문자열에 더한다. 만들 수..