Daehyunii's Dev-blog

저의 목표 중 하나였던 개인 블로그를 개설했습니다! 🎉 이름은 "woodaelog" 제 이름을 그대로 사용했습니다~ 부족한 점이 많지만 그래도 제 나름대로의 원하는 바를 이뤄서 기분이 좋네요! github login을 통해 댓글도 달 수 있으니 언제든지 놀러오셔서 부족한 점 많이 많이 말씀해주시면 열심히 열심히 수정해 나가보겠습니다~😁 많은 관심 부탁드려요~ URL: https://woodaelog.com/ WooDaeHyun Blog WooDaeHyun Dev-Blog woodaelog.netlify.app

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에 대해서 공부를 하였다. 바닐라 자바스크립트를 공부할 때 항상 문제가..

MVC란? (Model - View - Controller) MVC는 소프트웨어 디자인 패턴입니다. 우선 소프트웨어 디자인 패턴이란 개발 방식을 공식화한 방법론을 말합니다. 과거부터 지금까지 개발하는 과정에서 발생한 공통적인 문제들을 해결하는 방식이라고 쉽게 생각할 수 있습니다. 이러한 디자인 패턴을 잘 활용하면 가독성, 간결성 그리고 확장과 유지 보수가 용이하여 효율적인 소스 코드를 작성할 수 있습니다. 디자인패턴의 종류는 매우 다양합니다. 그렇다면 MVC에서 정한 개발 방식을 공식화한 방법은 무엇일까요? 앱 개발을 세 개의 영역으로 나누고 각 요소에 고유한 역할을 부여하는 방식을 의미합니다. Model : Controller에게 받은 요청에 따라 데이터를 관리합니다. 해당 데이터는 다시 Control..

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