정커밋의 DEVLOG

Recent Posts

• Javascript [OOP] 캡슐화(Encapsulation)와 은닉 객체 지향 프로그래밍(Object-Oriented Programming : OOP)이란 사실 코드를 작성하는 구체적인 로직이라기보단, 객체를 중심으로 프로그래밍을 하겠다는 패러다임이라고 보는 것이 좀 더 정확하다. OOP는 여러 특징을 가지고 있지만 이번엔 그 중에서도 자바스크립트에서의 캡슐화에 대해 조금 더 정리를 해보려 한다. 참고로 OOP에 대한 기본적인 개념은 다음 링크에 간단하게 작성해 놓았다. (무려 5달 전에 작성해놓은 글이라 내용이 많이 부실하지만...공부해보며 좀 더 글을 보강할 예정이다...✨) [JavaScript] OOP in JavaScript [JavaScript] OOP in JavaScript 목표 객체 지향 프로그래밍의 특징 이해 인스턴스를 생성 방법 중 es5에서의 방법과..
• Database [Database] 데이터베이스 인덱싱이란? 데이터베이스 인덱싱의 개념을 검색해보면 위키에서 "테이블에 대한 동작의 속도를 높여주는 자료 구조" 라는 말로 정의하고 있다. 근데 이것만 봐서는 인덱싱이 정확하게 무엇인지는 파악하기가 솔직히 힘들 것이다. (나부터가 "그래서 그게 뭔데, 어떻게 하는건데." 라는 생각부터 먼저 들었었다.. 😱 ) 그래서 데이터베이스에서 대략적으로 인덱스가 어떤 개념이고 어떻게 사용하는지, 또 왜 사용하는 것인지 간단하게 한 번 정리해보았다. 우리는 데이터베이스를 이용해서 다양한 데이터를 저장한다. 만약 소규모 프로젝트라면 계속되서 축적되는 데이터들의 양이 크게 문제가 되지 않지만, 조금만 규모가 커지더라도 테이블의 수와 데이터의 수는 기하급수적으로 증가하게 된다. 데이터의 수가 수백, 수천만 개 수준만 되더라도, 데이터..
• Javascript [ES6+] 객체를 구조 분해 할당할 때, 원본 객체 값도 변경이 되나요? 구조 분해 할당(비구조화 할당)은 ES6에서 새롭게 추가된 개념으로, 객체에서 일일히 값을 꺼내 변수마다 값을 할당해 줄 필요없이 짧고 간단하게 값을 사용할 수 있기 때문에 나 역시 코드 작성을 할 때 자연스럽게 사용하고 있었다. 그런데 이번에 스터디에서 "만약 let {a, b} = object 에서 a랑 b에 접근해서 수정할 경우, object의 실제값에 영향을 주나요?" 라는 질문을 받게 되었다. 평소에 구조 분해 할당을 사용하면서도 저 질문에 대해 바로 정확한 답변을 떠올리기가 힘들었다. (새삼스럽지만 간단한 개념들도 생각없이 사용해 왔다고 많이 느꼈다🥺 ..) 그래서 오늘은 구조 분해 할당을 할 때 원본 객체에 영향이 가는지에 대해 간단하게 작성해보려고 한다. 결론부터 말하자면, 원본의 값은 바..
• Network [Network] Well-known Port & Port Forwarding Port 하나의 컴퓨터에 하나의 서버만 존재하지는 않기 때문에 우리는 어떤 서버와 상호작용 할지를 정해야한다. 이 때 서버를 식별하기 위해서 포트가 필요하다. 포트는 1~65535 까지의 숫자로 표현이 가능하고, 각 포트가 특정 서비스로 할당될 수 있으며 우리는 포트를 통해 원하는 서버에 접근이 가능하다. 클라이언트에서 요청을 했을 때 서버의 OS에서 어떤 포트로 요청이 왔는지 확인한 뒤 해당 포트로 접속을 기다리는 프로세스에 요청 내역을 전달하게 된다. Port 분류 이름 포트 범위 특징 잘 알려진 포트 (well-known port) 1~1023 이미 잘 알려진 포트들을 말하며, 서버 측에 각 용도 별로 예약되어 동작된다. 루트 권한으로만 포트를 열 수 있다. 등록된 포트 (registered por..
• Javascript Redux는 무엇이고, 어떤 장점이 있는가? 첫 프로젝트 때는 클라이언트 사이드 구성에서 데이터 흐름에 대해 하위 컴포넌트들이 깊게 들어가지 않으니 상태 끌어올리기로도 충분히 작성이 가능할 것이라 생각하고 진행했었다. 하지만 막상 코드를 작성하다보니, 자식 컴포넌트에서 변경된 상태를 최상위 부모 컴포넌트로 다시 끌어올리거나 다시 데이터를 내려보내주는 과정을 2번 이상만 거쳐도 다루기가 굉장히 번거롭다는 것을 깨달았다. 그래서 파이널 프로젝트에서는 코스 과정에서 배웠던 Redux를 상태 관리 라이브러리로 선택하게 되었다. (Redux는 React에만 사용 가능한 것이 아니라 Angular 등 JS APP이라면 전부 사용할 수 있다.) 하지만 우리가 상태관리에 있어서 반드시 Redux를 사용해야 하는 것은 아니다. 우리가 Redux를 사용함에 따라서 ..
• GIT [Git] Git에서 conflict가 발생했을 때 해결하는 방법 협업 프로젝트에서 여러 사람이 같은 파일을 수정하고 git을 사용해 업데이트나 공유를 하다보면, 서로 다른 유저들이 코드의 같은 부분을 수정하면서 conflict가 발생하게 된다. 이런 conflict를 해결하기 위해서는 우선 vscode와 같은 편집 프로그램을 이용하는 방법이 있다. 다음은 같은 파일에서 서로 다른 유저 A, B가 함수를 동시에 수정했을 때를 가정한 케이스다. 기존의 substract라고 작성되었던 메소드를 A가 multiply라는 메소드로, B 역시 devide라는 메소드로 수정한 뒤 커밋해 주었다. B라는 유저가 먼저 origin에 push를 한 이후 A에서 pull 명령을 통해 origin의 파일을 가져왔다. 코드의 동일한 부분에서 각각 변경이 존재했기 때문에, 자동으로 merge..
• Database [Database] 트랜잭션의 개념 및 단계 트랜잭션이란? 트랜잭션은 더 이상 쪼갤 수 없는 업무처리의 단위 또는 논리적 작업 단위를 이야기한다. 웹 개발에서 트랜잭션이라 하면 일반적으로 데이터베이스 트랜잭션에 해당하며, 이는 단일 사용자가 데이터베이스의 내용에 액세스하기위한 작업을 수행하는 것이다. 트랜잭션의 개념과 단계에 대한 이해를 위해 어떤 은행에서 직원이 고객 X의 계좌에서 Y의 계좌로 800만원을 이체해야하는 상황이 있다고 한 번 가정해보자. 우리가 보기에는 단순히 입금과 출금이라는 간단한 작업같지만, 아래와 같이 생각보다 많은 하위 작업들이 포함되어있다. 이러한 일련의 작업 단위를 그룹으로 묶어 놓은 것을 트랜잭션이라 한다. X의 계좌 Open_Account (X) Old_Balance = X. 잔액 New_Balance = Old_B..
• Network [Network] Stateful vs Stateless HTTP에 대해 배웠기 때문에 Stateless라는 개념에 대해 어느정도 알고는 있었지만, 막상 다른 사람들에게 Stateless와 Stateful에 대해 설명해달라는 질문을 받았을 때는 어떤 개념인지에 대해 정확하게 설명하기가 힘들었다. 그래서 이번에는 Stateless한 프로토콜을 Stateful한 프로토콜과 비교하며 각각 어떤 특징들을 가지는지 다시 한 번 복습하며 조사해보았다. 우선 Stateless프로토콜과 Stateful한 프로토콜은 모두 웹 서버와 브라우저의 통신을 위한 네트워크 프로토콜에 해당한다. 하지만 이 프로토콜들은 서버 사이드에서 세션 및 세부 정보에 대해 추적 및 저장을 하는 지에서 차이가 발생한다. 상호 작용 상태가 얼마나 오래 기록이 되는지, 또 해당 정보가 어떻게 저장되는지가..
• Node.js MVC 패턴이란 무엇인가? MVC는 Model View Controller를 줄인말로, 사용자 인터페이스와 데이터 및 논리 제어를 구현할 때 사용되는 소프트웨어 디자인 패턴 중 하나이다. 간단하게 말하자면 개발을 할 때 3가지의 형태로 역할을 나누어서 개발을 하는 방식으로, 사용자 인터페이스로부터 비즈니스 로직을 분리하는 것에 가장 큰 중점을 두고 있다. 우리가 어떤 서비스가 돌아가게 하기 위해서는 여러 과정들과 처리가 필요한데, 그런 처리들에 대해 하나의 코드 베이스가 아닌 기능별로 모델, 뷰, 컨트롤러로 나누어주는 것이 MVC 패턴이라고 보면 된다. 이러한 분리를 통해 우리는 인터페이스와 비즈니스 로직 간에 서로 영향 없이 업데이트 및 유지보수가 가능한 애플리케이션을 만들 수 있다. MVC 컨셉을 사용하는 웹 프레임 워크는 E..