개발기록

리액트로 개발을 하며, 컴포넌트를 나누는 방식에 대해 고민이 많았다. 컴포넌트를 어떻게 나누는게 가장 이상적인지 고민하다 발견한 아토믹 디자인 패턴에 대해 글을 쓰고자 한다. 아토믹 디자인 패턴이란? 원자 단위들을 서로 결합하여 분자 형성 후 더 복잡한 유기체로 결합하여 물질을 창조해 내듯이, 작은 단위 컴포넌트를 재사용성이 강하고, 단단하게 설계 후 점진적으로 개발하기 용이하게 하는 방식이다. 아토믹 디자인의 본질은 컴포넌트를 기능의 단위로 나누는 점에 있다 논리적인 단위의 버튼은 클릭하면 특정 액션을 실행한다 라는 하나의 기능을 제공하며 그것이 가지고 있는 style은 상관 없이 하나의 기능을 수행하는 하나의 단위이다 논리적인 단위로 검색바는 클릭하면 특정 액션을 실행하는 검색 버튼과 타이핑시 글자가..

필요한 이유 이해하기 쉽고, 수정하기 쉬운 코드를 작성하기 위해 그렇기 때문에 자주 마주하는 문제에 적합한 디자인패턴을 사용하는 게 중요하다 SOLID Principles Single Responsibility 컴퓨터 프로그램 의 모든 모듈 , 클래스 또는 기능 이 해당 프로그램에서 하나의 책임/목적을 가져야 한다는 것 모든 클래스는 변경해야 하는 단 하나의 이유만 있어야 한다 각 클래스에 하나의 메서드가 있어야 하는것. 이는 주로 단순성을 위한 것이다. 원하는 만큼 메소드를 가질 수 있지만 클래스의 책임과 연결되어야 한다. 재사용 가능, 관심사를 분리했기 때문에 쉽게 유지 관리하고 확장할 수 있다. Open-Closed 소프트웨어 엔터티는 확장을 위해 열려야 하지만 수정을 위해 폐쇄되어야 한다는 것 클..

CORS는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제 왜 CORS가 필요한가? cors는 악의적인 해커로부터 브라우저를 지키기 위해 만들어졌다 이전에 사용자가 홈페이지에 로그인을 하여 쿠키에 토큰 정보가 남을 경우 악의적인 해커가 사용자에게 해당 홈페이지를 흉내낸 가짜 홈페이지를 보내 그 사용자가 가짜 홈페이지를 들어가게 되면 쿠키에 있는 토큰 정보를 탈취하게 되고, 악성해커가 진짜 홈페이지에 사용자의 토큰으로 로그인을 하여 정보를 빼올 수 있었다. 그 해당 쿠키를 빼오는 방법은 아래와 같다. 이전엔 다른 출처에 리소스를 요청할 때, fetch('http://another.com', { c..

OSI 7 계층(OSI 7 Layer)는 네트워크 프로토콜이 통신하는 구조를 7개의 계층으로 분리하여 각 계층간 상호 작동하는 방식을 정해 놓은 것 이다. 이는 ISO(국제표준화기구)에서 개발한 모델이다. 즉, 네트워크에서 통신이 일어나는 과정을 7단계로 나눈 것 1계층인 물리계층(Physical Layer), 2계층인 데이터링크 계층(DataLink Layer), 3계층인 네트워크 계층(Network Layer), 4계층인 전송 계층(Transport Layer), 5계층인 세션 계층(Session Layer), 6계층인 표현 계층(Presentation Layer), 7계층인 응용 계층(Application Layer)으로 구성되어 있다. 특징 응용계층 응용 계층(Application Layer, 7..