brobro332.dev

📗 『JAVA 언어로 배우는 디자인 패턴 : 쉽게 배우는 GoF의 23가지 디자인 패턴』를 읽고 정리한 글입니다. Iterator 패턴이란?// 반복문for (int i = 0; i Iterator 패턴은 반복문에서 사용되는 변수 i의 기능을 추상화하여 일반화한 패턴이다.해당 패턴은 무언가가 많이 모여 있을 때 이를 순서대로 가리키며 전체를 검색하고 동일 처리를 반복한다. 예제 프로그램을 살펴보자위 다이어그램은 업무에 해당하는 하위 업무명을 차례대로 표시하는 프로그램을 나타낸다.업무와 하위 업무는 그저 내가 진행하는 토이 프로젝트 주제다. 프로젝트는 업무로 구성되어 있고, 각 업무는 하위 업무로 구성할 예정이다.참고로 실제 책에서는 책과 책장을 도메인으로 하여 설명하였다.  public interfac..

📗 『JAVA 언어로 배우는 디자인 패턴 : 쉽게 배우는 GoF의 23가지 디자인 패턴』를 읽고 정리한 글입니다. 이해를 돕기 위해 책에서 제시하는 힌트디자인 패턴이 클래스 라이브러리 자체는 아니다. 클래스 라이브러리 안에서 디자인 패턴이 사용되는 것이다. 디자인 패턴을 이해하고 있다면 처음 보는 클래스 라이브러리라고 하더라도 역할을 이해하는 데 도움이 된다. 프로그램을 완성품으로 보지 않는다. 디자인 패턴의 목표 중 하나는 프로그램의 재사용이다. 그러므로 프로그램을 완성하는 것이 아니라 끝없이 기능을 확장해 가는 것이다.다음과 같은 물음을 항상 갖고 있어야 한다."어떤 기능이 확장될 가능성이 있는가?""기능을 확장할 때 어느 클래스를 수정해야 하는가?""수정할 필요가 없는 것은 어느 클래스인가?"다이..

📘 『소플의 처음 만난 리액트』를 읽고 정리한 글입니다.  리액트는 상태(State)를 관리해야 한다다음 포스팅에서 다루게 될 리액트의 생애주기를 공부하기 위해서는 먼저 상태에 대해서 알아야 한다.상태는 리액트 컴포넌트의 변경 가능한 데이터이며, 상태가 변경되면 컴포넌트가 재렌더링된다.그렇기 때문에 상태를 정의할 때는 꼭 렌더링이나 데이터 흐름에 사용되는 값만 상태에 포함시켜야 한다.  상태를 무분별하게 정의한다면 애플리케이션의 성능을 저하시킬 수 있기 때문이다.상태는 따로 복잡한 형태가 있는 게 아니라 하나의 자바스크립트 객체이다. class LikeButton extends React.Component {      constructor(props) {       super(props);       ..

📘 『소플의 처음 만난 리액트』를 읽고 정리한 글입니다. 컴포넌트(Component)에 대해 알아보자JSX, 엘리먼트를 공부하면서 컴포넌트라는 용어를 확인할 수 있었을 것이다.실습을 통해 컴포넌트를 개발하기도 했다.컴포넌트는 props를 통해 속성을 입력하여 리액트 엘리먼트를 출력하는 자바스크립트 함수이다.조금 더 쉽게 설명하자면 애플리케이션을 구성하는 재사용 가능한 부품이라고 할 수 있다.또한 하나의 컴포넌트를 여러 개의 컴포넌트로 구성할 수도 있다.컴포넌트 재사용의 이점은 다들 아시다시피 코드의 가독성을 확보할 수 있고, 코드 양을 줄임으로써 개발 및 유지 보수 시간을 절감할 수 있다.props 어디서 많이 본 것 같은데...저번 포스팅에서 엘리먼트를 설명할 때 부모 컴포넌트에서 하위 컴포넌트로 전..

📘 『소플의 처음 만난 리액트』를 읽고 정리한 글입니다. 엘리먼트(Element)란 뭘까?우리가 크롬 개발자도구를 통해 확인할 수 있는 Elements는 DOM 엘리먼트를 의미한다.DOM 엘리먼트란 브라우저에서 실제로 렌더링 된 HTML 요소이다. 반면 리액트 엘리먼트는 화면에 나타나는 내용을 기술한 자바스크립트 객체를 일컫는다.DOM에 직접 표시되지 않는다. 다시 말해 렌더링 되지 않았다는 것이다. 리액트 엘리먼트 정의가 너무 추상적이라서 이해가 안 되는데?/* JSON 형태{  type: 'button',  props: {    className: 'bg-green',    children: {      type: 'b',      props: {        children: '테스트용 텍스트 입..

하루하루를 기계의 부품처럼 무감각하게 살아가던 주인공은 일련의 사건에 휘말려 사형수가 되어 버린다. 좋게 말해서는 담백하고 나쁘게 말하면 정서가 메마른 그는 어머니가 돌아가실 때도 눈물 한 방울 흘리지 않았다. 오히려 다소 방탕한 생활을 보내는데, 그가 우발적으로 살인을 저질렀을 때 사회의 시선에서는 그는 그저 부모의 죽음에도 슬퍼하지 않고 악독하게 살인을 저지른 이방인일 뿐이었고, 법 아래 부조리함에 사형 선고를 받게 된다. 그리고 그제야 그는 삶에 대한 깨달음을 얻는다.이방인처럼 사회의 관습에서 벗어나 무감각하게 사는 것도 위험한 방식이고, 법과 집행자 또한 누군가의 인생을 판단하고 규정짓기엔 부조리하다고 느꼈다.하지만 법의 부재는 사회 질서 관점에서 위험하기 때문에 사회의 울타리 안에서 살아가는 개..

📘  『소플의 처음 만난 리액트』를 읽고 정리한 글입니다. JSX를 알아볼까?const element = Hello, world! {name};JSX는 Javascript and XML를 의미한다.자바스크립트를 확장한 문법으로, 상기 코드와 같이 자바스크립트와 XML, HTML을 합친 것이라고 보면 된다.여기서 한 가지 기억해야 할 부분은 JSX 문법을 사용하면 컴포넌트 내부에서 createElement() 메소드로 대체된다는 점이다. // JSconst element1 = React.createElement('h1', {className: 'greeting'}, 'Hello, world! ${name}'});// JSXconst element2 = Hello, world! {name};/*elemen..

📘 『소플의 처음 만난 리액트』를 읽고 정리한 글입니다.리액트 프로그래밍을 위해 준비해야할 것들리액트 프로젝트를 생성하고 실행하려면 우선 Node.js와 Visual Studio Code를 설치해야 한다.이 포스팅에서는 두 프로그램의 설치는 다루지 않는다. 개발자는 항상 물음표를 찍으며 사고해야 한다던데 우린 이것들을 왜 설치해야 할까? 그래서 Node.js를 왜 설치해야 해? Node.js가 필요한 첫 번째 이유는 브라우저 말고도 다른 환경에서 자바스크립트 코드를 실행할 수 있게 해주는 자바스크립트 실행환경이기 때문이다.모두 아시다시피 자바스크립트 엔진은 이미 브라우저에 내장되어 있기 때문에 이미 우리들은 브라우저 위에서 자바스크립트 코드를 실행할 수 있다. 그런데 개발을 위해선 브라우저를 켜지 않고..

📘 『소플의 처음 만난 리액트』를 읽고 정리한 글입니다. 리액트를 공부하게 된 이유나는 여태껏 JSP와 제이쿼리를 통해 프론트단을 구현해 왔다. 이번에 토이 프로젝트로 REST API 서버를 개발하며 프론트단이 리액트일 경우 어떻게 요청을 하는지, 어떤 데이터가 어떻게 정렬되어 조회되어야 가공해서 렌더링 하기에 용이한지 공부하고 싶었다.사실은 토이 프로젝트를 진행할 때마다 프론트엔드 개발자님을 구하고 싶은 마음은 굴뚝같지만 당장 본인 일정 조정에도 어려움을 겪어 결국 자급자족하기로 결정했다.그리고 뷰보다는 리액트가 참고할 수 있는 정보가 많을 것 같아서 리액트를 도입하기로 결정했다.책의 전반적인 부분을 나름대로 필터링해서 정리해 볼 생각이다. 🔥 리액트가 뭔데?대표적인 자바스크립트 UI 라이브러리다...

왜 알아야 해?최근 자바 디자인 패턴과 리팩토링 관련 책을 읽었다. 두 책 모두 UML을 통해서 개념을 설명해 주었다.물론 친절하게도 책의 첫 장에서 UML 기초적인 부분을 다뤄서 책을 읽는 데는 문제가 없었지만, 나중에 프로젝트 진행할 때도 요긴하게 써먹을 수 있을 것 같아서 정리해 놓으려고 한다. 그래서 그게 뭔데?Unified Modeling Language의 약어로, 시스템을 시각화하고 문서화하기 위한 표현 방법이다. 클래스 다이어그램interface Executable {    abstract void execute();}abstract class ParentClass {    something _field1;    static int FIELD2;        abstract void meth..