CS겸 취준까지

개발을 하다보면 전역상태로 관리할 상태가 많지 않을때 전역상태라이브러리를 쓰는 것보다는 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으로 제거된다. 이러한 자바스크립트 엔진이 시간이 걸리는 작업을 마주하게 되면 블로킹(작업 중단)이 발생한다. 테스크 큐와 이벤트 루프 싱글 ..

개요 자바스크립트와 타입스크립트란? 타입스크립트를 선택한 이유 착각하기 쉬운 타입스크립트 기본개념 Javascript) 동적 웹페이지를 만들기 위한 프로그래밍 언어로써 웹페이지를 조작하고, 서버와 클라이언트 간 상호작용에 관한 일을 한다. 등장배경 : 정적인 초기웹사이트에서 동적으로 변함에 따라 등장하게 되었다 인터프리터 언어이지만 컴파일러가 내장되어 있어 실행 속도가 매우 빠르다. 객체기반의 스크립트 언어이지만 함수형과 객체 지향형 프로그밍을 모두 구현할 수 있다, Typescript) Javascript를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어 컴파일 언어, 정적 타입 언어 : 동적인 Javascript는 런타임에서 오류를 발견할 수 있는 것에 반해 Typescript는 코드의 작성 단계에..

[ 버블링 ] 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고 이어서 부모 요소의 핸들러가 동작하며 가장 최상단의 조상 요소를 만날때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작함 즉 이벤트 버블링은 HTML에서 이벤트가 발생했을 때, 해당 요소에서 이벤트가 처리된 후 상위 요소로 이벤트가 전파되는 현상을 의미 ▶ 예시 FORM DIV P 가장 안쪽의 p태크를 클릭하게 되면 에 할당된 onclick 핸들러가 동작 바깥의 에 할당된 핸들러가 동작 그 바깥의 에 할당된 핸들러가 동작 document 객체를 만날 때까지, 각 요소에 할당된 onclick 핸들러가 동작 p태그를 누르게 되면 p → div → form 순서로 3개의 얼럿 창이 뜨게 됨 ▶ 버블링의 이벤트 위임 이벤트..

클로저는 함수와 함수가 선언된 어휘적 환경(Lexical Environment)의 조합 즉 함수 안에 함수를 선언한 환경에서의 관계를 의미함 해당 함수안에 함수를 선언한 환경은 내부 함수에서 외부 함수로 지역변수를 접근할 수 있지만 외부 함수의 실행이 끝나고 외부 함수가 소멸된 이후에도 내부 함수가 외부 함수의 변수에 접근할 수 있는 것을 의미함 자바스크립트는 함수를 리턴하고 리턴되는 함수가 클로저를 형성하기 때문에 접근이 가능함 클로저는 반환된 내부함수가 자신이 선언되었을때의 환경(Lexical Environment)에서의 스코프를 기억하기 때문에 접근이 가능함 function outerFn() { let x = 10; return function innerFn(y) { // innerFn 함수는 클로..

개요 this의 정의 함수호출방식과 this 바인딩 this의 정의 Javascript의 예약어로써 함수의 호출 방식에 따라 this에 바인딩되는 객체가 달라진다. 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다 Javascript엔진에 의해 암묵적으로 생성 ( + 호출시 내부에 인자와 this가 전달된다) 일반적으로 객체의 메서드 내부 또는 생성자 함수 내부에서만 의미가 있다. (참조 변수이기때문에) 지역변수처럼 사용 가능 느낌상 객체 내부에서 사용하는 것을 많이 떠올리게 된다. value라는 값을 가지고 있는 객체에 foo라는 함수를 할당하려할 때 그 함수에서 value를 사용하려 할 때 th..

Float CSS의 정렬을 위해 사용되는 속성으로 float을 이용해 띄워지면(정렬되면) 텍스트 및 인라인 요소가 그 주위를 감싸며 흐르듯 배치되기 때문에 이름이 붙여진 것을 보임 절대위치 요소는 float 속성을 무시한다 자주 사용되는 Value left : 블록의 좌측으로 이동 후 부동 right : 블록의 우측으로 이동 후 부동 none : 기본값으로 기본속성 그대로 유지 inline-start : 시작쪽에 위치하고 주변에 인라인 및 텍스트 요소가 감싸짐 inline-end : 끝쪽에 위치하고 주변에 인라인 및 텍스트 요소가 감싸짐 Flex-box CSS3에서 처음 소개된 한방향 레이아웃 모델로써 HTML 요소 정렬에 사용되며 float 더 적은 코드와 읽기 쉬운방법으로 float을 대체하고 사용 ..