Today Hailie Learned

문제사항 서버로부터 get한 더미데이터와 추가된 데이터를 App.js 파일에서 받고, 이것을 Data.js 파일에서 props로 내려 받아서 map 메서드를 사용해서 뿌려주었다. 그리고 Data.js 에는 Modal.js 파일이 조건에 따라 열리게 구현을 했고, 이 Modal.js 파일에서 수정 버튼을 누르면 해당하는 데이터가 나오고, 수정하기 버튼을 누르면 서버로 데이터를 받아서 이를 App.js에서 받고 이를 Data.js 파일에서 props로 내려 받는 구조입니다. 여기서 문제는 Modal.js 에서 수정하기 버튼을 누르면, 서버에서는 patch로 받아서 데이터를 잘 받지만, 이상하게도 화면상에는 맨 아래 데이터로 붙으면서 수정 기능을 제대로 하지 못했다. 오류해결 며칠 밤낮을 고통스러워 하다가, ..

상태를 관리하는 리액트의 클래스를 동적으로 추가해보자! 동적으로 클래스를 추가하기 위해서는 {} 중괄호와 백틱을 써야한다. .form-control.invalid input { border-color: red; background: rgb(246, 197, 197); } .form-control.invalid label { color: red; } 결과 입력없이 버튼을 클릭하면 글씨와 인풋창이 css 효과대로 스타일이 변경됩니다. 유저가 바로 인풋에 입력을 하면 원래대로 돌아옵니다. 😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓

day 1 ~ 7에 맞게 Monday ~ Friday로 나오는 if문은 아래와 같다. const day =3; if(day === 1) { console.log('Monday') } else if(day == 2) { console.log('Tuesday') }else if(day == 3) { console.log('Wednesday') } else if(day == 4) { console.log('Thursday') } else if(day == 5) { console.log('Friday') } // 결과값 'Wednesday' 👇 위의 예시를 switch로 바꾸어보자! const day = 3; switch(day) { case 1: console.log('Monday'); case 2: cons..

리액트로 CRUD를 구현하던 중에, 유저가 빈칸을 입력하면 입력이 되지 않도록 하는 코드 입니다. 부모 파일인 App.js에서는 Create에 대한 handler를 자식 파일에게 props로 전달해줍니다. const addGoalHandler = (enteredText) => { setCourseGoals((prevGoals) => { const updatedGoals = [...prevGoals]; updatedGoals.unshift({ text: enteredText, id: Math.random().toString() }); return updatedGoals; }); }; 그리고 자식에서는 그 props를 받아서 submit을 하기 전에, 현재 값의 길이가 0이면 그냥 return 을 해줍니다...

깃헙에 새로운 레파지토리를 만들고 푸시를 하려고 하는데 아래와 같이 오류창이 떴습니다. remote origin already exists 해결 방법 원격 저장소와의 연결이 되어 있다고 하니 기존의 연결을 끊고 새로 올리고 싶은 곳에 소스코드를 올리면 됩니다. 1. git remote remove origin 명령어를 입력해서 기존에 연결되어 있는 원격 저장소와의 연결을 끊어줍니다. git remote remove origin 2. git remote add origin [새롭게 연결할 깃 레파지토리 주소] 명령어를 입력합니다. git remote add origin git@github.com:HelloHailie/storybook-practice.git 3. git remote -v 명령어를 입력해서 ..

토큰의 개념(Refresh Token과 Access Token의 차이) 쿠키 / 세션 방식과 토큰 방식의 차이 JWT의 작동원리 header, payload, signature의 역할 JWT가 어떻게 토큰의 변조를 판별하는 지 토큰 방식의 한계 Authentication과 Authorization의 차이 Authorization Code와 Access Token의 차이 Authorization 서버와 Resource 서버의 차이에 대해 이해할 수 있다. 토큰 기반 서버나 db에 유저 정보를 담는 세션 기반 인증 방식을 보완한 방식 토큰은 클라이언트에서 인증 정보를 보관한다. 여기서 토큰은 유저 정보를 암호화한 상태로 담을 수 있고, 암호화했기 때문에 클라이언트에 담을 수 있다. 대표적인 토큰 기반 인증 ..

OWASP (The Open Web Application Security Project) 전세계의 보완 전문가들이 웹의 보완에 대한 표준을 정의하고 이에 대해 기업과 개발자들에게 효율적인 정보를 제공하는 오픈소스 커뮤니티 OWASP TOP 10 : 3년 정도의 주기로 발표하는 웹 10대 취약점 1. SQL injection 공격 : 데이터 베이스에서 임의의 SQL문을 실행할 수 있도록 명령어를 삽입하는 공격 유형 👉 응용 프로그램의 보안상의 허점을 이용해 데이터베이스를 비정상적으로 조작하여, 기록이 삭제되거나 데이터가 유출될 수 있다. 공격 시나리오 1. 공격자가 악의적인 SQL문을 넣어 서버에 전송한다. 2. 서버가 해당 SQL문을 기존 SQL에 삽입해서 데이터베이터스 쿼리를 보냄 👇 정상 SELECT..

인증에 필요한 기본 지식 Cookie Cookie 배경 쇼핑몰에서 살 아이텀을 장바구니에 넣고 여기저기 돌아다녀도 장바구니 안의 아이템은 유지가 된다. HTTP는 stateless (무상태성)인데 어떻게 정보가 유지 될까? 바로 쿠키 Cookie 덕분이다! 🍪 Cookie 란? 어떤 웹 사이트에 들어갔을 때, 서버가 일방적으로 클라이언트에 전달하는 작은 데이터 서버에서 클라이언트에 영속성있는 데이터를 저장하는 방법이다. 그러므로 서버가 원한다면 서버는 클라이언트의 쿠키를 이용하여 데이터를 가져올 수 있다. 해당 도메인에 대해 쿠키가 존재하면, 웹 브라우저는 도메인에게 http 요청 시 쿠키를 함께 전달한다. 그러므로 쿠키를 이용하는 것은 단순히 서버에서 클라이언트에 쿠키를 전송하는 것만 의미하지 않고 클..

암호화는 일련의 정보를 임의의 방식을 사용하여 다른 형태로 변환하여 해당 방식에 대한 정보를 소유한 사람을 제외하고 이해할 수 없도록 '알고리즘'을 이용해 정보를 관리하는 과정이다. Encryption 예 const shiftBy = function(content, offset) { return content.split('').map(function(letter) { return String.fromCharCode(letter.charCodeAt() + offset); }).join(''); } shiftBy('apple',2) // 출력 'crrng' shiftBy('crrng',-2) // 출력 'apple' Hashing 이란? 어떠한 문자열에 '임의의 연산'을 적용하여 다른 문자열로 변환하는 것 ..