CS겸 취준까지

[ 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..

바인딩이란 서로 묶어서 연결해 준다는 뜻 이벤트 바인딩이란 발생하는 이벤트와 그 후에 어떤 일이 벌어질지 알려주는 함수(콜백함수)와 묶어서 연결해준다는 뜻 예를 들어 어떤 버튼을 사용자가 클릭하게 되면 클릭 이벤트가 발생하게 되고 그 이벤트가 발생했을때 콜백함수가 실행하게 됨 이때 이 콜백함수를 이벤트 핸들러라고 함 이벤트 바인딩의 대표적 3가지 방식 ▶ HTML 이벤트 핸들러 HTML 요소의 이벤트 Attribute에 이벤트 핸들러를 대응시키는 방법 Click me function clickBtn() { alert('Button clicked!'); } HTML과 JS가 혼용되서 사용되는 방식. 현재 이 방식을 사용하지도 않고 사용해서도 안됨 HTML 이벤트 핸들러 내부의 this HTML 이벤트 핸들..

1.props props 는 properties 의 줄임말로, 컴포넌트의 속성을 사용할 때 사용하는 요소이다. props는 해당 컴포넌트에서 사용할 값을 부모 컴포넌트에서 설정해주어야 한다. 1) props 기본 const MyComponent= props=>{ return 안녕하세요, 제 이름은 {props.name} 입니다. export default MyComponent; import Mycomponent from './Mycomponent'; const App=()=>{ return export default App; 이라 했을 때 결과 값은 '안녕하세요, 제 이름은 리액트입니다.' 가 도출이 된다. * props 값을 기본설정을 하고 싶을 경우 에서 defaultProps를 이용해 설정할 수 있..

[ 라이프 사이클(Life Cycle) ] 리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리 그러다보니 각각의 컴포넌트에는 라이프사이클 즉 컴포넌트의 수명 주기가 존재함 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질때 끝이 남 라이프 사이클을 다루는 것은 컴포넌트가 생성, 업데이트, 제거의 일련의 프로세스를 프로그래머가 통제하는 것을 뜻함 실제로 HTML을 작성한 것이 아니고 JSX를 작성했기 때문에 이런 부분들을 알아야 하는 것 라이프 사이클을 이해하게 되면 왜 그동안 리액트에 render 메서드를 작성만 했는데도 브라우저에게 어떻게 HTML을 만들어 주었는지 알 수 있게 됨 생성자를 통해서 필요한 메모리를 할당하고 객체의 역할이 끝나면 소멸자를 통..

개요 Javascript의 동작 방식 동기, 비동기 방식 Javascript의 비동기처리 Javascript 동작 방식 Javascript는 함수를 호출했을 때 어떤 동작을 실행하는지 알아보자! Javascript엔진은 단 하나의 실행 컨텍스트 스택을 갖는다.(한 번에 하나의 함수만 실행 가능, 싱글 스레드 방식) 자바스크립트 엔진이 함수 코드를 평가하고 함수 실행 컨텍스트를 생성한다. 생성된 실행 컨텍스트는 실행 컨텍스트 스택(Callstack)에 push되고 함수 코드가 실행된다. 실행이 종료되면 함수 실행 컨텍스트가 컨텍스트 스택(Callstack)에서 pop으로 제거된다. 이러한 자바스크립트 엔진이 시간이 걸리는 작업을 마주하게 되면 블로킹(작업 중단)이 발생한다. 테스크 큐와 이벤트 루프 싱글 ..