자바자바

출처: https://youtu.be/tosLBcAX1vk 쿠키 - 그냥 옮기는 시스템, 매개체 토큰 - 서버가 기억하는 암호화 된 문자열, ID카드처럼 서버에게 보여줘야 하는 것 JWT - 정보를 갖고 있는 토큰. DB 없이 유저를 검증할 수 있다 jwt는 서버가 이중 삼중 여러대 일때 세션보다 장점을 갖는다. 보통 큰서비스들은 서버가 한대가 아닌 수십 수백대인데 세션의 경우 로드밸런싱으로 유저가 처음 방문했을때는 1번서버로 방문하여 세션이 남아 있지만 두번째 방문했을때 1번이 아닌 2번으로 붙게되면 세션정보가 없어 인증이 되지 않음. 이때 redis 세션통합으로 개발하거나 서버에 상관없는 jwt로 인증을 구현하면 됨

Javascript 자바스크립트 특정 문자열 포함 String.includes() .includes() -> 문자열이 특정 문자열을 포함하는지 확인하는 메소드. [문법] str.includes(searchString[, position]) searchString: 이 문자열에서 찾을 다른 문자열을 의미. position: 선택사항, searchString을 찾기 시작할 위치를 의미. 기본값은 0이다. [예시] 'Blue Whale'.includes('blue'); // returns false

[관계형데이터베이스 - RDBMS] JOIN - 여러 개의 표로 분산된 정보를 결합해서 하나의 단일한 표로 만드는 기술. 관계형데이터베이스의 핵심 (각각의 테이블들을 ★붙인다★ = 조인) 특정 테이블에서 정보의 중복이 발생할 때, 그리고 특정 테이블의 정보들이 다른 테이블에서 사용될 때 - 테이블을 따로 나눌 타이밍 trade-off) 정보를 하나의 테이블로 표현할 때 - 읽기가 편하지만 쓰기(변경)가 나쁘다 정보를 다수의 테이블로 표현할 때 - 읽기가 불편하지만 쓰기(변경)가 좋다 sql joins visualize - 조인 시각화 사이트 LEFT (OUTER) JOIN 쿼리 ---------------------------- SELECT * FROM TableA A LEFT JOIN TableB B ..

0923(목) GIT add: 수정한 파일을 한 묶음의 세이브 파일로 만드는 과정 commit: 한 묶음의 세이브 파일을 만듦 (스냅샷) push: 깃헙 원격저장소에 세이브파일을 저장함 master: 고객에게 최종적으로 전달되는 소스코드 branch: 브랜치. 마스터로부터 소스를 분기해서 처리할 수 있음. 제 역할을 다 하면 브랜치는 삭제해도 무방. 어차피 히스토리 내역은 다 남는다. #충돌 해결방법 - 커밋되돌리기: 위험해서 안 쓰는 게 좋음 - 브랜치 따기: 돌아가려는 시점에서 브랜치를 새로 생성하여 거기서 코드를 수정하여 커밋, 푸쉬. 그리고 마스터로 체크아웃 한 뒤 브랜치 병합. - 체크아웃(switch to): 다른 브랜치로 이동 - head: 현재 내가 작업하고 있는 브랜치를 의미함 git 그..

출처: https://ko.javascript.info/object-methods #객체 객체와 원시타입의 근본적인 차이: 객체는 '참조에 의해' 저장되고 복사된다. 원시값(문자열, 숫자, 불린 값)은 '값 그대로' 저장, 할당되고 복사됨. 즉, 변수엔 객체가 그대로 저장되는 것이 아니라, 객체가 저장되어있는 '메모리 주소’인 객체에 대한 '참조 값’이 저장된다. 얕은 복사 - Object.assign. 그러나 객체 안에 또 다른 객체가 있으면 완전하게 복사할 수 없음 깊은 복사 - lodash 라이브러리의 cloneDeep 함수. 객체 안에 또 다른 객체가 들어있어도 완전하게 복사할 수 있다. #this 매서드 내부에서 this 키워드를 사용하면 객체에 접근할 수 있다. this는 다른 프로그래밍 언어..

useState는 서로가 다 독립적. 그래서 무엇이든 내가 넣을 수 있고 담을 수 있다. const [count, setCount] = useState(initialCount); useState라는 훅을 통해 상태값을 관리하는 변수(state), 그리고 상태값을 변경할 수 있는 setState라는 함수를 반환받을 수 있다. useState 매개변수는 상태의 초기값을 지정하는데 사용됨. useEffect는 어떤 상태값이 변경될 때마다 side effect(부가효과)를 줄 수 있는 리액트에서 제공하는 훅. return을 통해 값을 반환하는 경우 이전 side effect에 대한 클리어(제거)가 가능함. 2번째 인자는 배열로 줄 수 있는데 배열에 원하는 상태값을 넣어주면 해당 상태값과 side effect의 ..

0916(목) react. 바닐라자바스크립트 - 해당 태그가 속해있는 전체 영역을 다시 그림 React - 해당 태그가 속해있는 부분만 다시 그림 리액트의 리랜더링이 마냥 좋은 것만은 아니다. React의 경우 어떤 컴포넌트에서 상태가 바뀌었다는 것을 인지하려면 상태값을 초기에 모두 저장해두어야 하기 때문에 처음 웹페이지를 불러오는데 있어서 많은 양의 데이터를 처리할 필요가 있음 데이터 변경에 따른 리렌더링 장점 - html 요소 전체를 다시 그리는 게 아닌 데이터가 바인딩 되어 있는 특정 태그만 리랜더링 해주기 때문에 웹사이트를 새로고침할 때 나타나는 깜박임이 없고, 전체가 아닌 일부만 리렌더링 해주니 프론트화면 레이아웃을 깨뜨릴 일이 없다.

참고한 블로그: https://pewww.tistory.com/5 Vue.js로 간단한 페이징 구현 안녕하세요! 오늘은 Vue.js로 간단한 페이징을 구현해보려합니다~ 되게 간단하게 할 수 있지만, 저는 vue-cli를 이용하여 구현하겠습니다. 설정이 기억나지 않으시는 분들은 이 글을 참고해주세 pewww.tistory.com vue-cli를 통해 구현하였습니다. API 데이터는 https://jsonplaceholder.typicode.com/todos 해당 사이트에서 가져왔습니다. 코드 실행 결과) PAGING ASSIGNMENT App.vue 컴포넌트입니다. 특별한 건 없고 PaginatedList를 하위 컴포넌트로 연결했습니다. ID 이름 할 일 완료여부 {{ p.id }} {{ p.userId ..

JS async, await promise의 경우 .then이 계속 연결되어 있어 값을 공유한다거나 에러 지점을 찾아낸다거나 그런 부분에 있어 어려움이 있음. 그래서 JS에서 async, await라는 문법을 지원함 async , await: 비동기처리 패턴 화살표함수의 경우 매개변수 괄호 바로 앞에다 async 키워드를 붙여주면 되고, 일반 메서드의 경우 함수명 앞에 async를 붙인다. 그리고 동기 방식으로 처리하려는 동작에 await를 붙이면 해당 동작이 다 수행될 때까지 기다리고 다음 동작을 수행하게 된다.

콜백: 다시 호출한다. 어떤 작업이 끝나고 다시 함수를 호출하는 개념 동기적 처리: 한 동작이 끝나고 나서야 비로소 다음 동작을 수행 비동기적 처리: 한 동작이 끝나지 않더라도 다른 작업을 함께 수행 promise: 비동기 처리에 사용되는 객체를 의미. 성공의 경우 resolve, 실패의 경우 reject를 사용하여 결과값을 전달할 수 있는데, 반환된 promise 객체에 .then을 붙여 결과값을 처리할 수 있다.