CS겸 취준까지

프레임워크 개발자가 소프트웨어를 개발함에 있어 코드를 구현하는 시간을 줄이고 재사용성을 증가시키기위한 일련의 클래스 묶음이나 뼈대, 기반구조라 불리며 제어의 역전 개념이 적용된 대표적 기술이다. 소프트웨어의 특정 문제를 해결하기 위해서 상호 협력하는 클래스와 인터페이스의 집합이다. 특징 개발할 수 있는 범위가 정해져 있고 개발자는 이러한 따라야하는 가이드를 제공 받는다. 프레임워크는 다양한 도구 및 플러그인을 제공한다. 특정 개념들의 추상화를 제공하는 여러 클래스나 컴포넌트로 구성되어 있어 추상적인 개념들이 문제를 해결하기 위해 같이 작업하는 방법을 정의한다. 컴포넌트의 재사용이 가능하며 높은 수준에서 패턴들을 조작화할 수 있다. 예시 Django, Ruby, React Native, Flutter, A..

솔리드 원칙은 소프트웨어 디자인의 다섯 가지 기본 원칙 이 원칙들은 소프트웨어를 더 견고하고 유연하며 유지보수가 쉽도록 만드는 데 도움이 되는 지침을 제공 ▶ 단일 책임 원칙 (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() 내부에서만 참조할 수 있다. 이러한 규칙을 스코프라고 한다. 스코프가 필요한 이유) 의도치 않은 변수 값의 변조를 방지 (변수명의 충돌) 효율적인 메모리 관리 (코드 블럭 안의 참조값들은 코드가 실행될 때만 메모리에 할당 됨) 전역변..

개발을 하다보면 전역상태로 관리할 상태가 많지 않을때 전역상태라이브러리를 쓰는 것보다는 ContextApi를 사용하는 것이 낫지 않을까라는 생각이 들기에 이번에 ContextApi를 파보기로 함 [ Context ] Context는 리액트 컴포넌트 간에 어떠한 값을 공유할수 있게 해주는 기능 주로 전역적(global)으로 필요한 값을 다룰 때 사용하며 꼭 전역적일 필요는 없음 따라서 리액트 컴포넌트에서 Props가 아닌 또 다른 방식으로 컴포넌트간에 값을 전달하는 방법이라고 접근하는 것이 좋음 Props로만 데이터를 전달하게 되면 깊숙히 위치한 컴포넌트에 데이터를 전달해야할 경우 여러 컴포넌트를 거쳐 연달아서 Props를 설정해주어야 해 불편하고 가독성이 떨어지고 비효율적이며 실수할 가능성이 높아짐(Pr..