들어가며 일전의 @ResponseBody 어노테이션에 대해서 정리한 포스팅이 있다. https://data-study-clip.tistory.com/189?category=1034056 Spring - @ResponseBody 사용원리 클라이언트에서 localhost:8080/hi-spring url로 요청이 들어왔다고 치자 그럼 톰켓서버에서 해당 url 요청이 들어왔다고 Spring Container에다가 던져준다. 스프링컨테이너에 있는 Controller에서 매핑되는게 data-study-clip.tistory.com @ResponseBody라는 어노테이션이 없으면 ViewResolver에게 던져서 템플릿엔진으로 처리하게 되고 @ResponseBody 어노테이션이 붙어있으면 데이터 그대로 내려주게된다..
개인정보 '개인정보란 살아 있는 개인에 관한 정보를 말한다.' 위 문장은 개인정보 보호법 제 2조 1항에 정의된 문장이다. 좀 더 구체적으로 기술하면 살아있는 개인에 관한 정보로서 성명, 주민등록번호, 이미지, 영상 등을 통하여 개인을 식별할 수 있는 정보라면 모두 개인정보에 포함된다. 이렇게 때문에 얼핏보면 되게 간단할 것 같지만서도 개인정보의 범위는 상당히 넓다. 유튜버들이 자신의 채널에 목소리가 나오고, 얼굴이 나오는 것도 모두 개인정보에 해당되고 그냥 우리가 집밖으로 나와서 활동을 하는 것도 행동적, 신체적 특징이라는 정보가 노출되고 있는 상태이기 때문에 길거리에 만연한 CCTV도 개인정보보호법의 영향을 받고 있는 것이다. CCTV는 원칙적으로 공개된 장소에서 설치, 운영되지 못하도록 규정되어있다..
State 개념 리액트에서 State는 Component의 데이터 상태를 말한다. 한마디로 State란 개발자가 정의한 변경 가능한 데이터를 말하며 이는 자바스크립트 객체로서 존재한다. KeyPoint는 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다는 점이다. 왜냐하면 State가 변경될 경우 Component가 다시 렌더링 되기 때문에 그 외의 데이터가 State로 작성되면 불필요하게 다시 렌더링되어 성능저하를 초래하기 때문이다. 따라서 렌더링이나 데이터 흐름에 사용되지 않는 값들은 Component안에 instance field로 정의해서 사용한다. useState useState는 React의 내장 Hook 중 하나로, 함수형 컴포넌트에서 상태를 관리할 수 있게 해준다. 이는 ..
Component 합성 리액트에서는 Component안에 또 다른 Component를 사용할 수 있다. 따라서 복잡한 화면을 여러개의 Component로 구성할 수 있다. 예시) function Welcome(props) { return Hello, {prop.name} ; } function App(props){ reutrn( ) } ReactDom.render( , document.getElemnetById("root") ); 위 코드를 보면 Welcom 컴포넌트를 prop 를 다르게하여 여러번사용하는 것을 볼 수 있다. App이라는 Compoent는 Welcome이라는 컴포넌트를 포함하고 있는데 이러한 것을 컴포넌트 합성이라고 한다. Component 추출 컴포넌트 합성과 반대로 복잡한 컴포넌트를 ..
Component란? 리액트의 컴포넌트는 아래의 그림과 크게 클래스 컴포넌트와 함수 컴포넌트로 나누어 볼 수 있다. 리액트 초기버전에는 클래스 컴포넌트를 주로 사용하였으나 사용의 불편함이 대두되어 이후에는 함수 컴포넌트를 개선하여 사용하게 되었다. 함수 컴포넌트를 개선하면서 만들어진 것이 훅(Hook)이다. 훅이란 class를 이용한 코드를 작성할 필요 없이 state와 여러 React 기능을 사용할 수 있도록 만든 라이브러리이다. 이 훅을 통해서 함수 컴포넌트도 클래스 컴포넌트처럼 사용할 수 있다. Function Component(함수형 컴포넌트) 모든 리액트 컴포넌트는 pure function과 같은 역할을 해야한다고 했다. 이는 곧 리액트 컴포넌트를 일종의 함수라고 생각한다는 것이다. 다음의 예시..
props propertys의 약자로 React에서 Component의 속성을 의미한다. 이전 포스팅에서 이야기 했던 붕어빵이야기를 다시하자면 Component는 붕어빵 틀이고 Element는 만들어진 붕어빵과 같다고 했다. 그럼 여기서 props는 붕어빵의 속재료와 같다. 같은 붕어빵 틀에서 만들어졌더라 하더라도 안에 슈크림을 넣을지 팥을 넣을지에 따라 붕어빵이 달라지는 것처럼 Compoent를 통해서 만들어진 Element도 props에 따라서 틀은 같지만 내용은 다른 것들이 만들어지는 것이다. 이렇듯 props는 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체를 의미한다. props 특징 1. read-only : 값을 변경할 수 없다. 붕어빵이 다구워졌는데 속재료를 바꿀 수 없는 것과..