[CNU SW Academy] 01.11 보강

프론트엔드 미니 데브코스

useMemo

1. 함수 컴포넌트는 자신의 상태가 변경될 때 리렌더링된다.

2. 부모 컴포넌트로부터 받는 prop에 변경될 때 리렌더링된다.

3. 부모 컴포넌트의 상태가 변경되면 리렌더링된다.

 

3번은 불합리하다. 이를 해결하기위해 React.memo 이용

컴포넌트를 React.memo로 감싸면 리렌더링을 막을 수 있다.

 

useCallback

함수가 다시 정의되는 것을 막기 위해 사용

함수를 useCallback으로 감싸주고, 두번째 인자로는 []를 넣어준다.

Custom Hook(사용자 정의 hook)

기존 hook을 조합해서 사용 가능

자주 사용될 수 있는 상태 로직을 별도의 사용자 정의 hook으로 만들 수 있다.

=> 여러 중복 로직을 제거하고, 코드도 더 깔끔하게 작성할 수 있다.

 

storybook

UI 컴포넌트를 모아서 문서화하고, 보여주는 오픈소스 툴

쉽게 컴포넌트를 확인하고, 정리할 수 있다.

스토리북에 먼저 컴포넌트를 정의해두고 사용하면 쉽게 공유 가능하다.

https://storybook.js.org/

Storybook: Frontend workshop for UI development

 

로그인, 회원가입 Form

hook을 이용해서 로직을 재활용하자.

---

팀 프로젝트 회의

프론트엔드 역할 나누기 및 깃헙 사용법 정리

---

장진수교수님 - 리눅스

shellshock attack

shell : command line interpreter

Bash shell : 취약점이 존재

 

1. 명시적으로 함수를 넘기는 방식

export -f foo => 함수를 담는 환경변수 안에 foo의 내용이 들어있음

2. 환경변수를 이용하는 방식(버그)

변수가 아닌 함수로 변형되는

 

자식 bash shell을 실행하는 부모 프로세스이면 환경변수를 이용하여 함수 정의를 넘겨줄 수 있다.

부모는 꼭 bash shell일 필요는 없다.

 

shellshock 취약점

환경변수를 함수 정의로 변경시킬 때 일어나는 버그이다.

자식 프로세스가 서버 프로세스거나 특권을 가지고 있는 경우 보안 문제가 발생

 

Shellshock Attack 예시

1. Set-UID Programs 공격

2. CGI Programs

 

실습

1. Steal Passwords

2. Create Reverse Shell