Learning Log 68

[javascript] .substr / .substring / .slice의 차이

! 공식문서를 참고해서 개념을 다시 한번 확인해주세요 ! 회사에서 함수를 만들며 string인 변수를 잘라서 리턴해야 하는 경우가 있었다.가이드로 제공됐던 함수가 .substr()을 쓰고 있었으나 mdn에 따르면 .slice()나 .substring()을 사용하라고 권장해서 이번 기회에 이 함수들을 정리해보게 되었다.3가지 함수 모두 문자열을 추출해주는 기능이기는 하나 조금씩 다른 부분이 있다. 1. .substr(start, length)substr은 문자열에서 시작 위치와 추출할 길이를 지정한다.특징은 start가 음수인 경우 문자열의 끝에서 부터 시작 위치를 계산한다.length는 선택 사항이며 지정하지 않는 경우 문자열의 끝까지 추출한다. 코드 예시 :let str = "Hello, world!"..

[javascript] JS 메모리 누수(memory leak) 체크하기

Blocker :작업 중인 프로잭트의 화면에서 특정 동작을 실행하면 무한 로딩 후 아래와 같은 화면이 나왔습니다.이런 경우 메모리쪽에서 문제가 발생할 가능성이 높이 메모리를 체크해보기로 했습니다.보통 서버가 느려지는 경우도 메모리 누수가 발생했을 가능성이 높아 메모리를 체크해보는 것이 좋습니다. 메모리 누수(memory leak)란?간단하게 설명하면 사용하지 않는 메모리를 해제하지 않고 있는 것을 말합니다.js의 경우 가비지 컬렉션 메커니즘이 자동 정리라 보통은 메모리 할당과 비우는 과정을 신경쓰지 않아도 되지만 페이지가 느려지거나 아예 에러가 나는 경우 메모리 누수가 원인일 수 있어 안 쓰는 메모리를 정리해줘야 합니다.해결방법 :메모리는 개발자도구의 여러가지 기능을 통해 체크할 수 있습니다. 1. Me..

[mysql] mysql 비번 재설정하기

오랜만에 mysql 접속하려다가 비번 문제 때문에 한 시간을 날린 듯 싶다 root 비번이라길래 mac 비번이랑 똑같은 줄 알았는데 아니었음ㅠㅠ 대소문자 특수기호 숫자 다 포함하는 비번이었다 재설정 방법은 아래 벨로그에서 참고했습니다 https://velog.io/@sorzzzzy/MySQL-Mac-MySQL-root-%EB%B9%84%EB%B0%80%EB%B2%88%ED%98%B8-%EC%B4%88%EA%B8%B0%ED%99%94%ED%95%98%EA%B8%B0 [MySQL] Mac MySQL root 비밀번호 초기화하기 이전에 진행했던 프로젝트에서 MySQL 비밀번호를 여러번 바꾸다보니, 도대체 비밀번호가 뭔지 잊어버려서 꽤나 애를 먹었다🥲여러 방법을 시도해봤지만, 제일 한방에 말끔히 진행된 방법을 ..

Learning Log/mysql 2023.08.28

[redux] 애증의 redux 2일 차

* redux 적용 1. store 생성 - store를 만들어 state를 변경해야 함, store은 하나만 존재 - reducer라는 함수를 store에 주입해야 함 - reducer의 역할 : dispatch에 의해 action이 들어오면 reducer가 action 값과 기존의 있었던 state의 값을 참조해서 새로운 state 값을 만들어줌(state 값 변경) => state와 action을 인자로 받음 + state의 초기값 정의 function reducer(state, action) { if(state === undefined){ // 색깔 바꿔줘야 하는 예시라 컬러로 리턴 & 초기 state 값을 yellow로 return {color:"yellow"} } } var store = Re..

Learning Log/Redux 2023.08.24

[redux] 애증의 redux 1일 차

* redux 설명 지도 이 지도가 어떤 흐름을 나타내는 걸까요? 핵심은 store!! store 안에 state와 reducer가 있음 그리고 중요한 건 render render와 dispatch, subscribe, getState가 어떻게 상호작용하는지 알아야 함 render은 state가 바뀔 때마다 ui 바꿔줌 render를 subscribe에 등록해줌으로써 state변경을 render가 감지할 수 있음 action과 reducer action으로 dispatch 호출 reducer는 state를 입력값으로 받고 action을 참조해서 새로운 state 값을 만들어내서 return => state 가공자 state가 변경됐으니 render가 호출되면서 getState로 가서 state를 가져오고..

Learning Log/Redux 2023.08.23

[next.js] 생활코딩 Next.js 13 2일차

* 범위 : 8~12 * 8. css global.css 파일에 아래와 같이 코드 작성 h1 a { text-decoration: none; } * 9. backend - json server를 사용해 백엔드 구축 npx json-server --port 9999 --watch db.json - db.json에 아래와 같은 형식으로 db 추가할 수 있음 "topics": [ { "id": 1, "title": "html", "body": "html is ..." }, { "id": 2, "title": "css", "body": "css is ..." } ], - 크롬 개발자도구에서 콘솔을 통해 통신하려면, fetch문을 사용해 통신할 수 있음 fetch('http://localhost:9999/topi..

[next.js] 생활코딩 Next.js 13 1일차

* 범위 : 0~7 * 0. Next.js 란 무엇인가? - React 기능을 기반으로 한 풀스택 웹 어플리케이션 프레임워크 - React + Expressjs - SSR 지원 => 검색 엔진 친화적 + 초기 로딩 속도 빠름 - 13 버전 이후 App router 지원 => Server Component라는 새로운 기능 사용 * 3. 빌드와 배포 - npm run dev : 개발 서버 켜기 - npm run build : 배포 서버 만들기 - npm run start : 배포 서버 켜기 => 배포 서버를 따로 만드는 이유는 배포 서버를 이용하면 페이지 로딩 시 통신에 사용되는 resources가 훨씬 줄어들기 때문 * 5. 라우팅 - 다이나믹 라우팅 : 경로가 '.../read/1' 이렇게 숫자가 붙는데..

[cs] JWT(Json Web Token)

1. JWT란 * 의미 : JWT란 클라이언트와 서버 간에 정보를 JSON 객체로 안전하게 전송하기 위한 개방형 표준 * 역할 : 사용자 측에서 사용자의 정보를 관리하는 토큰 기반 인증 메커니즘 2. JWT의 구조 * Header : Signature을 만드는데 사용한 알고리즘(alg)과 Token의 타입 정보(typ)를 가지고 있음 { "alg" : "HS256", "typ" : "JWT" } // 사용한 알고리즘은 HS256이고 Token 타입은 JWT * Payload : 실질적으로 전달해야 하는 정보들을 가지고 있으며, 담겨있는 정보 하나 하나를 Claim이라고 함 { "exp": "1245678900", //Registered Claims "https://velopert.com/jwt_claim..

Learning Log/CS 2023.08.01

[알고리즘] 프로그래머스 추억 점수(js)

Q. 사진들을 보며 추억에 젖어 있던 루는 사진별로 추억 점수를 매길려고 합니다. 사진 속에 나오는 인물의 그리움 점수를 모두 합산한 값이 해당 사진의 추억 점수가 됩니다. 예를 들어 사진 속 인물의 이름이 ["may", "kein", "kain"]이고 각 인물의 그리움 점수가 [5점, 10점, 1점]일 때 해당 사진의 추억 점수는 16(5 + 10 + 1)점이 됩니다. 다른 사진 속 인물의 이름이 ["kali", "mari", "don", "tony"]이고 ["kali", "mari", "don"]의 그리움 점수가 각각 [11점, 1점, 55점]]이고, "tony"는 그리움 점수가 없을 때, 이 사진의 추억 점수는 3명의 그리움 점수를 합한 67(11 + 1 + 55)점입니다. 그리워하는 사람의 이름을..