CS겸 취준까지

개요 1. SOLID 원칙이란? 2. 단일 책임 원칙 (SRP) 3. 개방 폐쇄 원칙 (OCP) 4. 리스코프 치환 원칙 (LSP) 5. 인터페이스 분리 원칙 (ISP) 6. 의존관계 역전 원칙 (DIP) ✅ SOLID 원칙이란? 소프트웨어 개발의 다섯가지 설계 원칙을 나타내는 약어로 각 원칙을 통해 소프트웨어의 재사용성, 유연성, 확장성을 높일 수 있으며 이는 쉬운 유지 보수를 가능하게 한다. 단일 책임 원칙 (SRP, Single Responsibility Principle) 개방 폐쇄 원칙 (OCP, Open Close Principle) 리스코프 치환 원칙 (LSP, Liskov Substitution Principle) 인터페이스 분리 원칙 (ISP, Interface Segregation Pr..

1. 디자인 패턴이란? 프로그램을 설계할 때 발생했던 문제점들을 객체 간의 상호 관계 등을 이용하여, 해결 할 수 있도록 하나의 '규약' 형태로 만들어 놓은 것을 의미한다. 2. 싱글톤 패턴(singleton pattern)이란? 싱글톤 패턴(singleton pattern)은 하나의 클래스에 오직 하나의 인스턴스만 가지는 패턴이다. 하나의 클래스를 기반으로 여러 개의 개별적인 인스턴스를 만들 수 있지만, 하나의 클래스를 기반으로 단 하나의 인스턴스를 만들어 이를 기반으로 로직을 만드는데 쓰이며, 보통 데이터베이스 연결 모듈에 많이 사용된다. class Singleton { static instance; constructor() { if (Singleton.instance) { return Singlet..

정의 소프트웨어를 개발하는 과정의 반복되는 일반적인 문제들에 대해 기준이 되는 해결책을 제공하는 중요한 개념으로 소프트웨어의 특정 구현을 직접 제공하지는 않지만, 반복되는 문제 상황들을 최적화된 방법으로 해결하도록 돕는 컨셉들이다. ⚠️ 주의사항 모든 문제에 대해서 적용할 수 있는 묘책이 아니다. 억지로 적용하려고 하면 안된다. 과도하게 고민하지마라. 올바른 방식으로 사용하고 있는지에 대해서 고민해라. Hooks 패턴 전통적인 디자인 패턴들이 Hooks로 다수 교체될 수 있게 됨에 따라서 생명주기와 관련된 메서드를 사용하지 않게 되었다. Hooks가 디자인 패턴이 아닐 순 있지만 React에서 중요한 역할을 한다. state, effect, 기타 커스텀 훅을 통해서 class에서 사용한던 것보다 편리하..

솔리드 원칙은 소프트웨어 디자인의 다섯 가지 기본 원칙 이 원칙들은 소프트웨어를 더 견고하고 유연하며 유지보수가 쉽도록 만드는 데 도움이 되는 지침을 제공 ▶ 단일 책임 원칙 (Single Responsibility Principle - SRP) 클래스는 단 하나의 책임만 가져야 함 이유와 장점 유지보수성 향상 각 클래스나 모듈이 하나의 책임만을 갖도록 설계하면 코드의 유지보수가 쉬워짐 특정 기능을 변경해야 할 때 해당 기능에 대한 코드만 이해하고 수정할 수 있음 코드의 가독성 증가 각 클래스 또는 모듈이 특정 책임에 집중하면 코드가 명확하고 가독성이 향상 다른 개발자들도 해당 코드를 이해하기 쉽게 되어 협업이 용이 재사용성 증가 단일 책임을 갖는 모듈은 다른 부분에서 쉽게 재사용 특정 기능이 변경되어도..

고차 컴포넌트 하나의 개발 패턴으로 컴포넌트를 인자로 받아서 새로운 컴포넌트로 변환해 반환하는 방식으로 인자로 넘긴 컴포넌트에게 추가되길 원하는 로직을 HOC에서 가지고 있다가 로직이 적용된 엘리멘트를 반환하게 된어 횡단 관심사 문제를 해결하는 역할을 한다. 횡단 관심사란? 대표적인 예시로 인증 & 인가 서비스, 로깅, 트랙젝션 처리, 에러처리 등등이 있으며 계층 분리를 통해서 기능을 분리한다고 하여도 중복된 코드가 생길 수 밖에 없는 경우가 있다 이러한 계층에 상관없이 공통적으로 필요한 관심사가 있는데 이것이 횡단 관심사이다. 즉 어플리케이션 전반에 공통적으로 필요한 문제를 횐단 관심사라고 부를 수 있다. // 이렇게 관심사 분리를 통해서 분리를 해도 공통적으로 필요한 로직이 있는 경우가 있다 언제 사..

[ CSS ] CSS는 지금까지 사용하면서 명확한 단점이 존재했음 모듈화가 어려움 클래스 이름의 최소화 문제(방법론을 사용하면 어느 정도 해소는 되겠으나 완전한 해결은 아닌 듯함) CSS의 우선순위를 파악하기 어려움 요즘 CSS 같은 경우 매우 많은 업데이트를 해왔기 때문에 변수 사용, 중첩(nesting) 사용 등 많이 편리해졌지만 아직 불편한 점이 많이 있음 [ CSS-in-CSS ] Pre-/Post-processors (CSS 전처리기) CSS Frameworks CSS Modules ▶ Pre-/Post-processors 흔히들 알고 있는 CSS 전처리기를 의미 자신만의 특별한 구문(Syntax)을 가지고 CSS를 생성하는 프로그램 CSS가 변수와 중첩을 제공하기 이전부터, 전처리기를 통해 변..

[ CSS in JS ] CSS스타일을 추상화한 JS객체 대신, CSS스타일 문법을 그대로 사용하여 스타일 컴포넌트로 사용할 수 있는 것 현재 사용 중인 스타일만 DOM에 포함 JS와 CSS 사이의 상수 및 함수를 교환할 수 있음 Global namespace로 클래스명을 다르게 짓기 위한 고충을 피할 수 있음 미사용 코드를 검출 가능 CSS 로드 우선 순위 이슈를 해결할 수 있음 [ styled-components ] 손쉬운 유지보수(컴포넌트에 영향을 미치는 스타일을 찾기 위해 여러 파일을 검색할 필요 x) 고유한 CSS 클래스 생성 - 스타일 컴포넌트를 추척해서 css 로 작성된 `` 스타일을 고유한 css 클래스 이름으로 변경 스타일 컴포넌트에 의해 자동 생성된 고유 CSS 클래스 이름은 sc-접두..

개요 함수의 정의방식 일반 함수와의 차이점 함수의 정의 방식 함수의 정의 방식은 일반적으로 function keyword를 활용한 정의와 화살표 함수를 활용한 정의 2가지로 나뉘어진다 Function keyword를 활용한 정의 함수 선언식 함수를 선언하는 가장 기본적인 방법 호이스팅(선언을 최상단으로 끌어올리는 행위)이 가능하다 익명함수를 만들 수 없다 (함수의 이름이 필수) main() // 호이스팅으로 가능함 function main() { console.log('hello') } main() 함수 표현식 호이스팅이 되지 않는다 익명함수를 만들 수 있다 const main = function main() { console.log('hello') } // 네임드 함수 const main = funct..

▶ hook이란? 리액트 v16.8에 새로 도입된 기능으로 함수 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 React state와 생명주기기능을 연동할 수 있게 해주는 함수 - 종류: useState, useEffect,useReducer,useMemo,useCallback,useRef, 커스텀 1)useState: 함수형 컴포넌트에서 상태관리를 해주는 훅 import React,{useState} from 'react'; const Counter=()=>{ const [value,setValue]= useState(0); return ( 현재 카운터 값은 {value}입니다. setValue(value+1)}>+1 set..

개요 스코프 스코프 체인 스코프 식별자의 유효범위로 변수에 접근할 수 있는 범위를 말하며 참조 대상 식별자를 찾아내기 위한 규칙이다. var x = "global"; function foo() { var x = "function scope"; console.log(x); } foo(); // function scope console.log(x); // global 위와 같은 코드에서 전역변수인 x는 어디서든 참조할 수 있지만 foo() 내부에 선언된 지역변수 x는 foo() 내부에서만 참조할 수 있다. 이러한 규칙을 스코프라고 한다. 스코프가 필요한 이유) 의도치 않은 변수 값의 변조를 방지 (변수명의 충돌) 효율적인 메모리 관리 (코드 블럭 안의 참조값들은 코드가 실행될 때만 메모리에 할당 됨) 전역변..