Front-End

[React] useEffect와 Side Effect

Rendering in React React에서 함수 컴포넌트의 rendering이란 state, props를 기반으로 UI 요소를 그려내는 행위 렌더링의 결과물은 UI 요소, 즉, 화면에 JSX 문법으로 무엇이 나타날지를 적어둔 컴포넌트들 그러한 렌더링 결과물에 영향을 주는 요소가 state와 props Side Effect Side Effect는 함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위를 말한다. 즉, React 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들이라고 볼 수 있다 코드 예시 let count = 0 function greetWithSideEffect(name) { // Input count = count + 1 // Side ..

[React] map 함수 적용시 key props를 부여하는 이유

Key React에선 기존에 한땀한땀 작성해야했던 배열을 map()이라는 함수를 이용해 element list로 반복 실행할 수 있다 key는 react가 어떤 항목을 변경, 추가 , 삭제할지 식별하며 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트로 지정해야 한다. 왜 필요할까? 위에서 언급했던 map이라는 함수로 요소를 하나하나 뿌려준다고 가정하자 리액트는 내용이 바뀔 때 즉, state값이 바뀔 때 마다 다시 랜더링을 하는데 10개의 리스트 중에 하나의 리스트만 바뀌었다면 리액트가 하나씩 리스트를 읽다가 어디서 달라졌는지 파악하고 전체를 재렌더링 한다. 그걸 방지하기 위해 각각의 요소들이 고유한 정체성을 가지도록 key값을 부여하는 것이다 그러면 리액트는 key값으로 변한 내용인지,..

[React] Hooks

Hooks Hooks은 리액트 v16.8에 새로 도입된 기능으로 함수 형태의 컴포넌트에서 사용되는 몇 가지 기술을 Hook이라 부른다 Hooks은 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState & 렌더링 직후 작업을 설정하는 useEffect등의 기능 등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다. 만일 앱을 react hook을 사용하여 만든다면 class component. render 등을 안 해도 된다는 뜻이다 즉, 모든 것은 하나의 function 함수형 프로그래밍이 가능해진다는 것이다 Why?? 왜 굳이?? 굳이 잘 쓰고 있던 클래스형 컴포넌트를 함수형 컴포넌트로 바꾸는 이유는 클래스는 react를 배우는 데에 있어서 큰 진입장벽이었다..

[SCSS] SCSS는 무엇인가?

SCSS CSS는 HMTL 태그를 꾸미거나 효과를 넣어 주는 등 디자인 요소를 추가할 때 사용하는 전처리 과정이다. 하지만 프로젝트 규모가 커지거나 작업이 고도화될수록CSS는 불가피하게 가독성이 떨어지는 등 유지보수의 어려움을 주는 요소가 된다코드의 재사용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장한 개념이 SASS / SCSS라고 한다 CSS의 태생적 한계를 보완하기 위해 Sass는 유용한 도구들을 제공한다 변수의 사용 조건문과 반복문 Import Nesting Mixin Extend/Inheritance 설치방법 npm i sass --save yarn add sass Sass와 SCSS 차이 Sass (Syntactically Awesome ..

[React] Props & State

State State란 말 그대로 컴포넌트의 상태 값이다 State와 Props는 둘 다 object 이거, 화면에 보여줄 정보 즉, 상태를 가지고 있다는 점에서 서로 비슷한 역할을 한다. props는 컴포넌트를 사용하는 부모쪽에서 전달해야만 사용할 수 있고 (함수의 parameter 처럼) 읽기전용이다. state는 컴포넌트 내에서 정의하고 사용하며 업데이트 할 수 있다 state는 변수 대신 쓸 수 있는 데이터 저장공간이다. useState()를 이용해 사용해야한다 useState[a,b]에서 a는 state 데이터, b는 state 데이터 변경 함수이다 state에 데이터를 저장해놓는 이유 웹이 앱처럼 동작하게 만들고 싶어서 state는 변경되면 HTML이 자동으로 재렌더링 된다 HTML이 새로고침..

[React] React?

Why React? 2013년 Facebook에서 개발한 JavaScript Library “지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하는 것"을 목푤로 개발 Angular, Vue 등의 다른 프레임워크와는 달리 리액트는 오로지 View만 담당하는 라이브러리 그만큼 내장되어 있는 기능이 부족해 third-party 라이브러리 (ex. react-router-dom, redux)를 함께 사용한다 자기만의 문법을 가진 Angular, Vue와 달리 자바스크립트 문법을 그대로 사용 오픈소스 프로젝트이면서 페이스북의 지속적인 관리가 이루어지고 있음 많은 사용자수를 기반으로 생태계가 활성화 되어있음 컴포넌트를 비교적 더 단순하고 간단하게 정의할 수 있음 React Navtive 등의 웹이 아닌 플랫폼에..

[JavaScript] Map Object (맵)

자바스크립트에서 map은 두 가지이다 1. Array.prototype.map() : 특정 배열 내 모든 요소에 대해 각각 함수를 적용하고, 새로운 배열로 만들어서 반환한다. 이때 원본 배열에는 영향을 주지 않는다 2. Map : Java의 HashMap와 같은 key:value로 이루어진 자료구조 자바스크립트를 공부하다가 Map이 Java와는 다른 걸 느꼈다. Java에서 Map 객체는 키-값을 쌍으로 저장하며 각 쌍의 삽입 순서도 기억하는 콜렉션이다. 아무 값이라도 키와 값으로 사용할 수 있다. 즉, key:value 형식으로 저장되며, key 값을 사용하여 해당 key에 맞는 value값을 가져올 수 있다 let max = new Map(); // set으로 맵 객체에 삽입 max.set("id",..

[CSS] 가시 속성 & 위치 속성 & 배경 속성 (display & position)

가시 속성 가시 속성은 태그가 화면에 보이는 방식을 지정 ex) display display 속성을 이용하면 박스를 인라인 형식, 블록 형식, 인라인-블록 형식으로 설정할 수 있다 키워드 설명 none 화면에 보이지 않음 block 블록 박스 형식으로 지정 inline 인라인 박스 형식으로 지정 inline-block 블록과 인라인의 중간 형태로 지정 none 키워드 display 속성에 none 키워드를 적용하면 태그가 화면에서 보이지 X 중간에 있는 div 태그 전체가 화면에서 사라진다 block 키워드 속성을 block으로 지정하면 태그를 클릭하면 해당 요소가 선택된다 블록 형식과 인라인-블록 형식은 margin 속성과 padding 속성을 상하좌우 네 방향으로 지정할 수 있다 인라인 형식은 왼쪽과..

[Web] SSR (서버사이드 렌더링) vs CSR (클라이언트 사이드 렌더링)

우선 렌더링이 뭘까? 서버로부터 받은 내용을 브라우저 화면에 표시 하는 것 렌더링의 과정 Loader 가 서버로 부터 정보들을 불러옴 파싱을 통해 문서를 DOM 트리로 만든다. DOM 트리가 구축되는 동안 브라우저는 렌더 트리를 구축 CSS 설정/레이아웃 위치 지정 렌더링 트리가 그려짐 이렇게 렌더링 받은 페이지를 어떻게 보여줄까? MPA vs SPA MPA (Multi Page Application)의 약자로 여러 페이지로 구성된 웹 어플리케이션. 사용자의 클릭과 같이 인터렉션이 발생할 때마다 서버로부터 새로은 html을 받아와 해당 링크로 이동하여 페이지 전체를 새로 렌더링하는 전통적인 웹 페이지 구성 방식 SPA (Single Page Application)의 약자로 하나의 페이지로 구성된 웹 어플..

[JavaScript] this란?

this란? this란 ‘이것' 이란 뜻이다 자바스크립트 내에서 this는 ‘누가 나를 불렀느냐'를 뜻한다 자바스크립트 예약어 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가르키는 자기 참조 변수 (self-reference variable)이다 자바스크립트 엔진에 의해 암묵적으로 생성된다 this는 코드 어디서든 참조할 수 있다 하지만 this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 변수이므로 일반적으로 객체의 메서드 내부 또는 생성자 함수 내부에서만 의미가 있다 대부분의 경우, this 바인딩의 값은 함수를 호출하는 방법에 의해 결정된다 JavaScript에서 함수의 this 키워드는 다른 언어들과 비교하여 조금 다르게 동작한다. 또한 strict mode와 non-strict mode ..