기록

🕰️ 시간 복잡도 먼저 이해하기문제를 해결하는 데 걸리는 시간, 입력된 데이터를 함수로 표현해 데이터를 다루는데 걸리는 시간을 정량화해 나타낸 것을 시간 복잡도라고 한다. 어떤 목적을 달성하거나 결과물을 만들기 위해 거쳐야하는 과정을 알고리즘이라고 하는데, 이때 다양한 알고리즘이 나타날 수 있으며 그 중에서 가장 시간복잡도가 낮은 것을 선택해야한다.☑️ 배열에서의 시간 복잡도배열은 임의 접근이라는 방법으로 배열의 모든 위치에 있는 데이터에 단 한 번에 접근할 수 있다. 따라서 데이터에 접근하기 위한 시간 복잡도는 O(1)이다. 맨 뒤에 데이터를 추가할 경우, arr = [1, 2, 3] -> arr = [1, 2, 3, 4] 형태로 추가한다 했을 때 arr[3]에 다른 데이터 위치에 영향을 주지않고 한..

☑️ React 컴포넌트는 하나의 값만 출력할 수 있다.자바스크립트는 두 개의 값을 반환하지 않기 때문이다. 따라서 JSX는 반드시 단일 루트 요소만 반환되어야 한다. 모든 JSX요소는 하나의 요소안에 내포 요소로 포함되어있다. 아래는 잘못된 예시이다.const App = ()=> { return ( 모던 리액트 프로그래밍 개념 정리하기 좋은 책이다 ) // 단일 요소로 이루어져 있어야 한다.const add = (a, b) => { return ( a+b a-b ); // 자바스크립트는 2개의 반환값을 가질 수 없다.} JSX는 실제로는 React.createElement 호출로 변환되는데  이때 호출이 단일 객체를 반환해야 한다. 동적인 컨텐츠 출력을 위해 자바스크립..

해당 스터디 기록은 https://github.com/learning-with를 방문하시면 확인하실 수 있습니다. 자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는멀티 패러다임 프로그래밍 언어이다.- 모던 자바스크립트 딥다이브 259P프로토타입이란?객체에 접근하기 위한 접근자 프로퍼티이다.모든 객체는 __proto__ 접근자 프로퍼티를 통해 자신의 프로토타입 ([[prototype]]) 내부 슬롯에 간접적으로 접근할 수 있다.👨‍🏫 프로토타입 이해하기자바스크립트는 프로토타입 기반의 객체 지향 프로그래밍 언어이다.클래스 (ES6)는 프로토타입 기반 객체 생성 패턴의 새로운 객체 생성 메커니즘이다.프로토타입을 이해하기 전에 객체지향 프로그래밍 먼저 이해해보자.☑️ 객체지향 프..

🚀 AWS(Amazon Web Service)에서 제공하는 확장 가능한 객체 스토리지이다.Simple Storage Service , S가 세개 들어가서 S3라고 한다.이미지 파일이나 프론트 빌드 파일등을 저장할 수 있는 저장소를 제공해준다. 그 외 사용자가 사용하는 방식에 따라 다양한 데이터 형식을 저장하고 관리할 수 있다. 프론트 빌드 파일을 저장할 경우에는 CI/CD를 통해 캐싱 삭제 명령어로 자동 캐시 삭제, 저장 배포 작업을 설정해둘 수 있어, 정적페이지를 배포할 경우 S3와 CloudFront, Route53으로 클라이언트 배포를 할 때 많이 쓰기도한다. 유저가 전송한 프로필 사진과 같은 이미지파일도 S3에 저장해 S3에 저장된 주소로 가져와 사용할 수 있다. 그 외에도 데이터 백업 용도나 ..

useReducer로 useState 지옥 벗어나기const [state, dispatch] = useReducer(reducer, initialQrg, init);useState 지옥에서 벗어나기기존 코드아래는 달력 이벤트를 업데이트하는 컴포넌트 예시입니다.import { useState } from "react";function EditCalendatEvent() { const [startDate, setStartDate] = useState(); const [endDate, setEndDate] = useState(); const [title, setTitle] = useState(""); const [description, setDescription] = useState(""); cons..

매번 className으로 모달 관리하기 번거로울 때매번 className으로 모달 관리하기 번거로울 때는 Styled-components 태그에 속성을 추가할 수 있다. 단, 단순 string 타입으로 작성할 경우, 대문자로 작성이 안된다던지 string 값 작성이 안되는 에러가 발생함으로 html 태그에서 변수값으로 인식하지 못하게 하는 $문자를 입력해주면 에러없이 잘 속성으로 이용할 수 있다.예시 : 모달interface ModalProps { isOpen : boolean; onClose: ()=> void; onClick: ()=> void;}function Modal ({isOpen, onClose, onClick}:ModalProps) => { return ( ..

페이지가 첫 렌더링 된 후에 새로고침을 하면 위와같은 에러가 발생하는 이슈가 생겼다.🚨 Rendered more hooks than during the previous render.채팅 페이지 정보를 가져오다 발생한 에러.페이지 렌더링 후 새로고침 시 바운더리 에러 발생.로직 순서는useParams를 통해 채팅방 정보를 가져온다.currentUser를 이용해 로그인한 유저의 정보를 가져온다.유저의 정보와 채팅방 정보가 없다면 그대로 return 한다.유저의 역할에 따라 이름, 채팅방 권한 상태를 관리한다.채팅방 페이지를 렌더링한다.에러가 발생한 지점은 if 조건문으로 리턴을 한 후, 아래 useState hook이 발생하여 일어난 에러다.☑️ 문제 코드const ChatRoomPage = ()=> {c..

JWT(JSON Web Token)와 같은 토큰은 자체 포함된 토큰(self-contained token)이다. 토큰 자체에 인증 및 인가 정보를 포함하고 있어서 별도의 서버 저장소를 참조하지 않고도 필요한 정보를 검증할 수 있다.JWT의 구조JWT는 세 부분으로 구성된 토큰이다.Header (헤더)Payload (페이로드)Signature (서명)세 부분은 각각 Base64Url로 인코딩되며, 마침내 점(.)으로 구분되어 하나의 문자열로 결합된다.1. Header (헤더)헤더는 토큰의 타입과 사용된 서명 알고리즘을 지정한다.{ "alg": "HS256", "typ": "JWT"}2. Payload (페이로드)페이로드는 클레임(claims)이라고 불리는 JSON 객체를 포함한다. 클레임은 토큰에 포함..

다이제스트 인증이 기본인증보다 안전하다고 하지만 현대의 보안 표준과 비교해서 얼마나 안전한지다이제스트 인증이 기본 인증보다 더 안전하다고 간주되는 이유는 비밀번호를 직접 전송하지않고, 해시된 값을 이용해 인증을 수행하기 때문이다. 그러나 현대의 보안 표준과 비교할 때 다이제스트 인증의 안전성은 nonce 재사용 문제나 무차별 대입 공격 등으로 한계가 있다. 또한 암호화 해시 알고리즘이 취약하다면 보안에 문제가 발생할 수 있다.기술이 발전함에따라 현대의 보안 표준이 당연 다이제스트 인증보다 훨씬 높은 수준의 보안을 제공한다. 흔히들 알고 있는 TLS/SSL(HTTPS)와 OAuth, JWT와 같은 인증 메커니즘이 더 높은 수준의 보안을 제공한다.TLS/SSL전송 계층 보안 : HTTPS는 TLS/SSL 프..

24년 4월 기준VM 에 curl 설치커멘드 라인 툴 설치sudo apt-get install -y curlapt 패키지로 업데이트 + node 설치아래 명령어 순서대로 입력sudo apt updatesudo apt install nodejsnodejs -v sudo apt install npmcurl 로 nvm 설치node 사이트# installs NVM (Node Version Manager)curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash# download and install Node.jsnvm install 20# verifies the right Node.js version is in the envir..