JSX Key 속성이란? 리액트에서 요소의 리스트를 나열할 때는 key를 넣어줘야한다. 키는 React가 변경, 추가 또는 제거된 항목을 식별하는 데 도움이 된다. 요소에 안정적인 ID를 부여하려면 배열 재부의 요소에 키를 제공해야한다. ex) 예를 들어 li태크에 키를 안 넣어준 경우에는 에러가 발생했었음. 리액트는 가상 돔을 이용해서 바뀐 부분만 실제 돔에 적용한다!! 가상 돔을 이용해서 원래 있던 가상 돔과 새로 바뀐 가상돔을 비교하여 바뀐 부분만 실제 돔에 적용해준다. 리액트에서는 리스트를 나열할 때 바뀐 부분만 찾을 때 어떻게 할까? 가상 돔에서 바뀐 부분을 찾을 때 사용하는 것이 key이다. key에는 유니크한 값을 넣어준다. (index는 비추천!) index도 0부터 시작해서 유니크한 값을..

함수 타입 - 호출 시그니처(Call Signature) ** this. -> 호출 될 때 정해지므로 doocong.getName('Hello!!')에서 this가 doocong이라는 객체 데이터로 정해진다. GetName이라는 인터페이스를 통해서 소괄호를 작성하여 내용을 쓰는 것을 호출 시그니처라고 한다. 호출 시그니처인 소괄호를 통해서 함수의 타입을 지정할 수 있는 것이다. 인터페이스를 사용해야 하는 이유? 인터페이스는 위와 같이 getName이나 User같이 이름을 지정할 수가 있다. 그래서 이 이름 가지고 재사용을 할 수가 있다는 것이고 인터페이스로 만든 함수와 동일한 구조의 함수를 만들고 싶을 때 그 타입을 똑같이 지정을 해 줄 수가 있는 것이다. 인덱스 가능 타입 - 인덱스 시그니처(Index..

// 타입 종류 // 문자 let str: string; let red: string = "Red"; let green: string = "Green"; let myColot: string = `My color is ${red}`; let yourColor: string = "Your color is" + green; // 숫자 let num: number; let integer: number = 6; let float: number = 3.14; let infinity: number = Infinity; let nan: number = NaN; // 불린 let isBoolean: boolean; let isDone: boolean = false; // Null / Undefined let nul: n..

TypeScript 범위 안에 JavaScript가 들어 있으며 TS는 JS에는 없는 인터페이스나 기타 타입을 지정하는 개념, 타입 단원, 제네릭 문법, 유틸리티 타입 등이 있다. TS -> JS 변환과정 확인 src폴더에 main.ts를 만든 후 코드를 작성하고 npm run dev로 서버를 열어준 후 생성된 dist폴더에서 index.~~~.js를 확인해보면 main.ts에서 작성한 코드가 js형식으로 변환되어 있음을 확인할 수 있다. 그래서 TypeScript가 실제로 브라우저에서 동작하기 위해서는 이런 반식을 통해서 코드를 만들긴 하지만 전부 다 JavaScript로 그 내용을 컴파일해서 동작을 시키는 것이다.

코드에 중요한 정보(apikey)가 그대로 남겨져 있는 것은 좋지 않다. 따라서 업로드하기전에 api키를 한번 더 숨겨서 이중으로 보호를 하려한다. 이때 쓰이는 개념이 환경변수이다. 💡 환경변수란? 환경변수는 이 프로젝트가 동작하는 환경 자체에다가 어떤 변수를 만들어서 데이터를 담아 놓고 그 환경에서만 데이터를 활용할 수 있는 방법이다. 설치 방법은 터미널에 "npm i -D dotenv" 입력. .env 파일을 추가한다. .env파일에 APIKEY = 어쩌고 추가 .gitignore 파일에 .env 추가

fetch함수를 통해서 서버로 내용을 전송할 때 body 부분에는 문자데이터를 담아줘야 한다. 객체데이터를 담아버리면 제대로 전송을 할 수 없으니 JSON.stringify method를 통해서 객체데이터 내용을 json문자로 만들어서 body에 담아 /api/movie라는 내부주소로 post method와 함께 전송할 수 있게 된다. 그럼 movie.js의 서버코드가 request라는 이름의 변수로 받아서 그 request에 우리가 담았던 body라는 속성을 json의 parse method로 분석하여 다시 객체 데이터로 결과를 내어줄 수 있다. 이때 title과 page만 담고 id는 따로 담아주지않았기에 삼항연산자에서 : 뒤의 코드를 실행하게 된다. 그래서 url이 fetch함수를 통해 전송이 되고..

git remote add origin "링크" 이 명령어는 Git에서 사용되며, 로컬 저장소에 원격 저장소를 추가하는 데 사용된다. 여기서 origin은 원격 저장소의 단축 이름이며 보통 원격저장소의 이름을 origin으로 설정한다. 이 단축 이름을 사용하여 추후 명령어에서 원격 저장소를 참조할 수 있다. "링크"는 원격 저장소의 URL이다. 이 명령어를 실행함으로써, 로컬 저장소와 지정된 GitHub 저장소 사이의 연결이 설정되고, 이 연결을 통해 로컬 저장소에서 변경 사항을 원격 저장소로 푸시하거나 원격 저장소에서 변경 사항을 로컬로 pull 할 수 있다. git push origin main 명령어는 작업한 내용을 원격 저장소로 전송하는 데 사용된다. 여기서 origin은 이전에 git remot..

💡 솔트추가에 대해 해시 함수에서 비슷한 한글을 입력하니 비슷한 해시 값을 생성하게 되는 문제가 발생하였습니다. 따라서 비슷한 이름을 입력 받아도 다른 해시 값을 생성하도록 하는 방법을 찾아야 하던 중 "솔트"라는 것을 알게 되었습니다. 1. 해시 함수의 "솔트" 추가 해시 계산에 "솔트"(salt)라는 임의의 값을 추가하여, 비슷한 이름이라도 다른 해시 값을 생성하도록 할 수 있습니다. 솔트는 해시 함수의 입력에 추가되는 고정된 문자열이며, 이로 인해 같은 입력 값에 대해서도 다른 출력이 생성됩니다. const hashName = (name) => { let hash = 0; const salt = "your_salt_here"; // 솔트 추가 const combined = name + salt; /..