리액트에서 불변성을 지키는 이유 불변성이란 사전적 의미로 값이나 상태를 변경할 수 없는 것을 의미한다. React가 불변성을 지키는 이유는 부모 컴포넌트가 re-rendering 되거나 State, Props 에 변화가 일어난 경우 렌더링이 일어나게 된다. 참조 타입(array 등)에서 객체나 배열의 값이 변할 때 원본 데이터가 변경 되어서 이 원본 데이터를 참조하고 있는 다른 객체에서 오류가 발생 할 가능성이 있기 때문에 프로그래밍의 복잡도가 올라간다. 리액트에서 화면을 업데이트할 때 이전 값과 비교해서 변경된 사항을 확인한 후 업데이트 하기때문에 불변성을 지켜줘야 합니다. 불변성을 지키는 방법 참조타입을 변경하는 것이 아닌, 새로운 배열을 반환하는 메소드를 사용 스프레드 문법, map, filter,..

[React] Props 와 State Props란? Props는 Properties의 줄임말이다. 상속하는 부모 컴포넌트로부터 자녀 컴포넌트에 데이터등을 전달하는 방법 Props는 읽기 전용(immutable)으로 자녀 컴포넌트 입장에서는 변하지 않는다. (변경하고 싶으면 부모 컴포넌트에서 state를 변경 시켜야한다.) Props의 사용 //App.js const App = () => { return //Text.js const Text = ({text}) => { return {text} } 위의 코드는 부모 컴포넌트(App)에서 자식 컴포넌트(Text)에 Props를 사용해서 “Hello world!” 라는 문자열 데이터를 전달했다. 여러개의 Props 와 defaultProps 부모 컴포넌트에서..

Hooks는 무엇? Hooks는 React 16.8버전에 새로 추가된 기능이다 기존에 리액트에서 쓰던 클래스형 컴포넌트(Class component)의 단점들을 개선했다. React Hooks에서는 함수형 컴포넌트(Functional Component)를 사용한다. 기존에 사용하던 Class를 이용한 코드 작성 대신, Function에서 state와 여러 React 기능을 사용할 수 있도록 만든 라이브러리 기존 Class Component의 단점 계층이 너무 많아진다. Component가 너무 복잡해진다. Class를 Component로 쓰면, bind, this를 사용하는데, 이는 컴퓨터의 많은 자원을 사용하며, 사람에게는 혼란을 야기한다. Hooks의 등장 Class 선언해서 사용하던 Componen..

SPA란? Single Page Application의 약어로, 한 개의 페이지로 이루어진 애플리케이션 이라는 의미이다. 전통적인 웹페이지는 여러 페이지로 구성이 되어 있다. 전통적인 웹페이지와 현재 웹 페이지 전통적인 웹 페이지(Multi Page Application) 다른 페이지로 이동하면, 새 html을 받아서 페이지 로딩 마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 출력 a 페이지를 만들고싶으면 a.html, b페이지를 만들면 b.html로 각 페이지마다 html을 만들었다. 불필요한 로딩으로 인해서 비 효율적이다 현재의 웹 페이지(Single Page Application) 리액트 같은 라이브러리 혹은 프레임워크를 사용해서, 뷰 렌더링을 사용자의 브라우저가 담당하게 한다. 웹 사이트의 전..

1. 확장기능에서 Jira and Bitbucket 설치 및 로그인 VSCode에서 보기 - 확장 - jira and bitbucket 검색후 설치 Extension Setting 선택 BITBUCKET 선택후 BITBUCKET CLOUD 로그인 Success 메세지 출력시 연동 성공! 2. 빗버킷에서 연동할 리포지토리 생성 빗버킷 홈페이지에서 Create - Repository 선택 Repository 이름과 Project 선택후(프로젝트 없을시 생성함) 다른 사람들이 접근하지 못하게 비공개 저장소를 위해 Private repository를 선택 3. 생성한 리포지토리와 VSCode를 연동 Clone → Clone in VS Code → Visual Studio Code 열기 연동할 폴더 생성후 해당 ..

DOM 이란? Document Object Model (문서객체모델)의 약자이다. 문서 객체는 Web Browser에서 HTML 문서에 JavaScript가 접근할 수 있도록 를 객체로 만든 것 이다. 프로그래밍 언어가 DOM 에게 접근하여 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는 역할을 한다. 기존의 렌더링 방식 DOM tree 생성 → Render엔진이 HTML문서를 파싱하고 어떤 내용을 페이지에 렌더링 할지 결정한다 CSSOM tree 생성 → Render엔진이 CSS 파일을 파싱해서 어떤 내용을 페이지에 렌더링 할지 결정한다. DOM 트리 + CSSOM 트리 를 결합해서 Render tree생성 Layout 생성 → 렌더트리로 각 노드의 위치와 크기를 계산한 Layout을 생성 Pai..

CI / CD 란? CI(Continuous Integration) CI는 개발자를 위한 자동화 프로세스인 지속적인 통합(Continuous Integration)을 의미한다. CI를 성공적으로 구현하는 경우, 애플리케이션에 대한 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트되어 공유 리포지토리에 통합되므로, 여러 명의 개발자가 동시에 애플리케이션 개발과 관련된 코드 작업을 할 경우 서로 충돌할 수 있는 문제를 해결할 수 있다. CD(Continous Delivery / Continous Deployment) CD는 지속적인 서비스 제공(Continuous Delivery) 또는 지속적인 배포(Continuous Deployment)를 의미하며, 이 두 용어는 상호 교환적으로 사용된다. 두 가지 의..

아이피(IP) IP란 인터넷에 연결되어 있는 모든 장치들을 식별할 수 있도록 각각의 장비에 부여되는 고유 주소이다. 아이피는 일반적으로 192.168.123.123과 같은 마침표로 구분된 4개의 숫자가 있는, 점으로 분리된 10진수 형식으로 표시된다. 2진수로 표현하면 각 자리마다 2^8의 숫자가 들어갈 수 있으며, 이를 1 옥텟이라고 한다. 즉, 아이피는 총 4옥텟(32bit)로 이루어진 주소이고, 약 43억개의 주소를 가진다. IP 주소 구성 요소 아이피는 네트워크 ID + 호스트 ID 로 구성된다. 네트워크 ID : 모든 호스트를 관리하기 힘들기 때문에 한 네트워크의 범위를 지정한 ID 호스트 ID : 각각의 호스트를 관리하기 위해 사용 192.168.123.456 과 같은 IP주소가 있을때 네트워..

인터셉터란? 인터셉터는 URI호출시에 해당 요청의 컨트롤러가 처리 되기 전 또는 후에 작업을 하기 위해서 사용된다. 컨트롤러의 URI에 접근하는 과정에서 무언가를 제어할 필요가 있을 때 사용 인터셉터는 필터가 할 수 있는 역할과 비슷한데, 이둘의 차이는 무엇일까? 인터셉터와 필터의 차이 필터는 DispatcherServlet 앞에서 동작, 인터셉터는 DispatcherServlet에서 HandlerController로 가기전에 동작한다 필터는 서블릿의 기능 중 일부이고, 인터셉터는 스프링 프레임워크에서 제공되는 기능이다. → 인터셉터에서는 스프링 빈을 사용할 수 있다. 메서드 및 구현 방법 메서드 preHandler - 컨트롤러 실행 전 수행한다. 반환 값이 true 일 경우 컨트롤러로 진입하고 fals..

SOLID : 좋은 객체 지향설계의 5가지 원칙 SRP 단일 책임 원칙 Single responsibility principle 한 클래스는 하나의 책임만 가져야 한다 하나의 책임이라는 것은 모호하다. 클 수 있고, 작을 수 있다. 문맥과 상활에 따라 다르다. 중요한 기준은 변경이다. 변경이 있을 때 파급효과가 적으면 단일 책임 원칙을 잘 따른 것. ex) UI변경, 객체의 생성과 사용을 분리 OCP 개방-패쇄 원칙 open/closed principle 소프트웨어 요소는 확장에는 열려 있으나 변경에는 닫혀 있어야 한다. ex) DB의 확장에는 열려 있고, JDBC 인터페이스의 변화는 닫혀있다. 인터페이스를 중간에 두어서 자바 애플리케이션과 DB와의 직접적인 연동을 피하게 설계하였다. LSP 리스코프 치..