Daehyunii's Dev-blog

1. 데이터 시각화란? 말 그대로 데이터를 시각화 한다는 것이다. 예를 들면 코로나 지역별 확진자 수를 보여주는 지도나 대시보드 전략지표 시스템 모니터링 등 일반적인 실무에서 사용되는 데이터 시각화를 들 수 있다. 스크롤링 시각화와 스토리텔링도 많이 사용되는 예시 중 하나이다. 그럼 왜 데이터를 시각화 해야할까? 왜냐하면 시각화가 데이터에 형태를 부여하여 데이터를 한 눈에 파악할 수 있게 해주기 때문이다. 데이터의 패턴을 비교하여 포인트 등을 파악할 수 있고, 시각화를 통해 인사트를 얻을 수 있게 하기 때문이다. 그럼 어떻게 만들어야 할까? 일반적으로 자바스크립트를 기반으로 한 데이터 시각화 라이브러리가 많이 있다. 그리고 그 중 우리가 앞으로 내가 공부할 내용은 D3.js 데이터 시각화 라이브러리이고 ..

1. Redux Redux는 Prop Drilling 문제를 해결하기 위해 등장했다. 그렇다면 Context API와 무엇이 다를까? Context API는 React의 내장 API여서 따로 설치없이 사용이 가능한 반면, Redux는 Third Party 라이브러리로 설치가 필요하다. 그리고 개발 편의를 위한 미들웨어 기능과 성능 최적화를 쉽게 해주는 기능을 제공한다. 2. 동작 방식 Redux는 Action이 발생하면 Reducer를 호출하고 Reducer를 통해 store에 상태를 저장한다. store가 변경되면 다시 view를 리렌더링한다. Context API에 useReducer를 사용한 것과 유사하다. 3. 3가지 원칙 진실은 하나의 근원으로부터 애플리케이션의 모든 상태는 하나의 저장소 안에 ..

컴포넌트 심화 1. 아키텍처 아키텍처는 우리가 일을 잘 하기 위한 방법이다. 그러기 위해서는 모듈의 구현과 나누는 방법을 잘 정하는 것이 필요하다. 모듈에서 중요한 것은 응집도와 결합도다. 2. 응집도 모듈 내에 포함된 요소들이 서로 연관되어 있는 정도를 뜻한다. 즉, 모듈 내 기능들이 하나의 책임으로 잘 뭉쳐 있는지를 나타낸다. 응집도가 높을 수록 좋은 설계라고 할 수 있는데, 하나의 책임에 집중하고 독립성을 높이며 우리가 수정하기 위한 요소를 빠르게 찾을 수 있기 때문이다. 공통 폐쇄 원칙 같은 이유로 동일한 시점에 변경되는 기능을 하나의 모듈로 묶어야 한다는 원칙 객체지향의 원칙인 단일 책임 원칙을 컴포넌트 관점으로 바라본 것 과하게 적용하면 재사용성이 줄어들 수 있음 공통 재사용 원칙 모듈 내의 ..

웹 보안 웹 사이트의 취약점을 공격하는 기술적 위협으로, 웹 페이지를 통해 권한이 없는 시스템에 접근하거나 데이터 유출 및 파괴와 같은 행위를 말한다. 웹 보안 공격 기법 1. SQL Injection 서버에서 실행되는 SQL을 악의적으로 이용하는 공격이다. 기존 SQL에 악의적인 SQL을 삽입한다. 그렇기 때문에 데이터 탈취나 삭제 등이 가능하다. 방어 방법 SQL에서 특별한 의미를 가지는 문자를 이스케이프한다. \\n, \\t, |, /, &, # … 준비된 선언을 사용한다. placeholder를 담은 SQL을 먼저 DB에 보낸 후 placeholder에 해당하는 입력 값을 DB에 보내는 방식 라이브러리, 프레임워크에서 거의 100% 막아준다. 심화 공격 Error based SQL ********..

Context API 컴포넌트는 트리 구조로 이루어져 있다. 만약 최상위 컴포넌트에서 가장 하위 컴포넌트로 prop을 넘기고 싶다면 어떻게 해야할까? 하위 컴포넌트를 찾을 때 까지 계속 넘겨주어야 할 것이다. 이런 경우를 Prop Drilling이라고 한다. Context API는 이를 해결해줄 수 있다. 1. 구성 Context API는 데이터를 제공해줄 Context Provider와 데이터를 받을 Context Consumer가 있다. 데이터는 Context Provider가 관리하고, Context Consumer는 데이터를 받아서 처리만 해주면 된다. 오늘을 마무리 하며 오늘은 전역 상태 관리를 할 수 있는 ContextAPI에 대해서 공부를 하였다. 바닐라 자바스크립트를 공부할 때 항상 문제가..

오늘은 리액트 반복문과 리액트 라이프사이클 메서드들에 대해서 공부했다. 데브코스를 통해서 기본적으로 컴포넌트를 만드는 것들을 배우고는 있지만 기본적인 내용을 알고 사용하는게 굉장히 중요하다고 생각하기 때문에 별도로 공부를 하니 생각보다 시간이 부족ㅎ하지만 ㅠㅠㅠ 그래도 절대 빠져서는 안되는 과정이라고 생각한다. 기본적인 개념들에 대해서는 정리를 해보았다. 2022.12.23 - [📚 Language & CS knowledge/React] - 컴포넌트 반복 컴포넌트 반복 map( ) 함수의 활용 map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성해 반환한다. map( ) 함수의 문법은 다음과 같다. pinetree93.tistor..

리액트의 이벤트 시스템 리액트의 이벤트 시스템은 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 꽤 비슷하다. 다만 주의해야 할 사항이 몇 가지 존재 한다. 이벤트 이름은 카멜 표기법으로 작성한다. 예를 들어 HTML의 onclick은 리액트에서는 onClick으로 작성해야 한다. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 객체 값을 전달해야 한다. DOM 요소에만 이벤트를 설정할 수 있다. 직접 만든 컴포넌트에 이벤트를 자체적으로 설정할 수 없기 때문에 onClick 이벤트를 전달하려고 한다면 그것은 그냥 이름이 onClick인 props를 전달해 줄 뿐이다. input 여러 개 다루기 setState를 여러 개 만들어 상태를 관리하는 방법도 있을 수 ..

함수형 컴포넌트와 클래스형 컴포넌트의 차이점 1. 클래스형 컴포넌트의 경우 state 기능, 라이프 사이클 기능의 사용 및 임의 메서드 정의가 가능하다. 2. 함수 컴포넌트의 경우 클래스형 컴포넌트에 비해 메모리 자원을 덜 사용한다.(유의미한 차이는 아니라고 함) 3. 함수 컴포넌트를 사용하는 것이 배포할 때 결과물의 파일 크기가 더 작다.(유의미한 차이는 아니라고 함) 4. 함수 컴포넌트의 경우에는 클래스형 컴포넌트에서의 라이프 사이클 기능 대신 Hooks를 통해 해결 가능하다. props 기본값 설정: defaultProps 부모 컴포넌트로 부터 prop을 전달 받지 않은 경우에 defaultProps를 설정할 수 있다. const MyComponent = (props) => { return 안녕하세..