👨🏻‍💻 모각코

Redux 설치 redux와 react-redux 패키지를 install한다. react-redux는 react에서 redux를 편하게 사용하기 위한 context와 hook을 제공한다. npm install redux npm install react-redux redux or store 폴더 생성 reducer, types, actions, index(reducer, actions의 export를 하나로 합치는 파일)파일을 생성한다. rootReducer관련한 root위치에 index파일을 생성한다. actions 정의 addTask, removeTask, updateTask과 같은 actions들을 정의한다. export const addTask = (content: string) => {}; exp..

git init git 저장소를 생성(초기화)한다. .git 폴더(숨김폴더)가 생성된다. git init git clone 원격저장소에 있는 local replository와 소스파일들을 복제하여 로컬저장소로 내려받는다. git clone git remote 로컬저장소에 원격저장소 주소를 전달한다. git remote add git remote -v // upstream, origin의 주소 확인이 가능하다. git CRLF 방지 운영체제마다 다른 line eding으로 인해 자동으로 commit되는 현상이 발생하므로 방지해야한다. git config --global core.autocrlf true git branch branch를 확인, 생성, 삭제가 가능하다. git branch // 확인 git ..

SQL Injection 서버에서 실행되는 SQL을 악의적으로 이용하는 공격 XSS(Stored XSS) Cross-Site Scripting 악성 스크립트를 삽입한는 공격 Relected XSS 검색어 등을 보여주는 곳에 스크립트를 심는 공격 URL을 사용자에게 누르게 만들면 공격 성공 DOM Based XSS DOM에 악의적인 스크립트를 심는 공격 CSRF Attack Cross-Site Request Forgery 공격자가 사용자를 이용하여 웹 사이트에 요청을 보내는 공격 가짜 피싱 사이트의 폼을 입력하여 요청하면 공격 성공 방어 Referrer Check 허용한 도메인만 요청 허락하도록 설정 CSRF Token 모든 요청에 토큰을 발급하여 서버에서 검증 CAPTCHA 사람이 요청한 것이 맞는지 검..

타입스크립트 소개 타입스크립트 장점 타입이 존재한다. 안정성: 컴파일(TSC) 단계에서 오류를 감지할 수 있다. 가독성: 타입을 보고 무엇을 하는지 미리 알 수 있다. 타입스크립트 단점 초기 설정을 해야한다. 스크립트 언어의 유연성이 낮아진다. 컴파일 시간이 길어질 수 있다. 타입 주석과 타입 추론 타입 주석: 변수, 상수, 반환 값이 무슨 타입인지 나타내는 것을 의미한다. 타입 추론: 해당 변수가 어떤 타입인지 추론하는 것을 의미한다. let a:number = 3 let b:number[] = [1, 2, 3] let c:string = 'Hello World' let f:boolean = false let h = {a: 1} let g:any = 3 function add(a:number, b:nu..

useState 값이 변경되면 컴포넌트가 렌더링 된다. useEffect 컴포넌트가 Mount, Update, UnMount될 때 실행되는 함수를 의미한다. // Mount useEffect(() => {}, []) // 컴포넌트가 처음 렌더링 될 때 함수가 실행된다. // Update useEffect(() => { const elem = ref.current if (elem) { // depth update elem.addEventListener('mouseover', handleMouseOver) elem.addEventListener('mouseout', handleMouseOut) return () => { // Unmount elem.removeEventListener('mouseover') ..

Context란 React에서의 Props와 State는 데이터를 다루기 위해 사용되고 Props전달의 흐름은 하향식이다. 한쪽에서 흐르는 데이터를 다른 컴포넌트에서 사용하고 싶을 경우 context를 고려할 수 있다. 즉 전역적인 데이터를 다룰 때 사용한다. porps를 두 레벨 정도의 컴포넌트를 전달할때(프롭드릴링) 굳이 context를 쓸 필요는 없다. Context API란 React에서 전역적인 데이터를 다루기 위해 Flux라는 개념을 도입하고 그에 걸맞는 ContextAPI를 제공하고 있다. Redux와는 다르게 Context API는 상태관리를 해주는 것이 아니고 상태를 전역적으로 공유해주는 기능만 수행한다. 실직적인 상태 관리는 useReducer과 useState로 동작하는 것이다. Co..