코딩하는 라이언

매번 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..

1. VS Code 실행2. Command + Shift + p 눌러서 명령 팔레트(command palette)(=아래와 같은 창) 나오게하기command palette\는 사용자 설정 할 수 있는 곳3. command palette에 shell 입력하기4. enter~~ 누르기end. 설정 완료!

why not javascript 왜 타입스크립트를 쓸까? 첫번째 이유는 안정성, 타입의 안전성 때문에 타입스크립트의 장점을 얻게된다. 런타임 에러, 생산성 향상 등등 타입스크립트가 타입을 제공한다는 점이 가장 큰 장점! 자바스크립트와 타입스크립트의 차이는 자바스크립트는 개발자가 실수를 하더라도 추론해서 맞는 에러가 나지 않는 코드로 출력하려한다. 타입스크립트는 그런 점에서 엄격하게 타입시스템으로 에러를 보내, 코드를 조금 더 분명하게 짤 수 있도록 도와준다. [1,2,3,4] + false; // 1,2,3,4false functino divide(a,b) { return a / b }; divide(2, 3); // o.666666666 /** 인수를 두개 보내야하는데 하나만 보내도 에러나 예외처리없..

React 상위 컴포넌트에서 상태를 선언한 경우 꼭 setState나 useRecoilState 등도 함께 받아와주자. // 상위 컴포넌트 // Todolist.component export default function TodoList({ onDelete, onChangeDone, onUpdateTodoText }) { const todos = useRecoilValue(todoListState); const doneItems = useRecoilValue(doneListState); return ( To Do List {todos.map(todo => { return ( ); })} Done List {doneItems.map(doneItem => { return {doneItem.text}; })}..

🔍 문제 input 태그에 onKeyDown을 사용했을 때 영어는 이벤트가 한번 들어가는데 한글을 입력하면 두번 이벤트가 발생하는 현상이 있었다. 🔍 원인 KeyboardEvent.isComposing라는 객체가 입력된 값이 조합문자인지 아닌지 확인하는데 한글은 자음과 모음의 조합으로 한 음절이 만들어지기 때문에 조합문자로 인지되고 영어는 조합문자가 아닌 것으로 입력된다. 한글이 입력될때는 KeyboardEvent.isComposing가 true, 영어일 때 KeyboardEvent.isComposing가 false로 입력되면서 한글은 onKeydown이벤트가 들어갔을때 조합문자인 상태로 한번, 해지된 상태에서 또 한번으로 이벤트가 두번 들어가게된다. KeyboardEvent.isComposing가 fa..

이벤트리스너 사용방법 적용시킬 HTML 속성을 가져온다. 적용시킬 이벤트함수를 만든다 가져온 HTML 속성을 담은 변수에 어떤 이벤트를 했을 때, 함수를 실행할 지 정한다. 클릭 const button = document.querySelector("button"); function handler (e) { console.log("클릭되었습니다"); } button.addEventListener("click", handler); 주의 처음 HTML요소 중 style프로퍼티의 경우 HTML 요소에 인라인 스타일로 직접 설정된 속성만을 반환합니다. 초기 설정이 ""로 세팅이 되어있다는 점을 기억합시다. 아래 코드 기준으로 생각했을 때 js에서 handler함수를 실행해도 바로 css가 적용되는게 아닙니다. 초..