IT V-log

useState의 대체 함수로 useState처럼 state를 관리를 도와주는 리액트 훅 입니다. 그래서 useState와 약간 비슷합니다. 하지만 useState보다 더 많은 기능이 있고 더 복잡한 state에 유용합니다. 예를 들면 여러 state들이 함께 속해 있는 경우가 있습니다. 같은 것을 관리하는데 관리하는 측면이 다를 뿐인거죠 혹은 여러 state가 같이 바뀌거나 서로 관련된 경우가 있습니다. 그런 경우에는 useState나 거기에서 얻은 state는 종종 사용 및 관리가 어려워지거나 오류가 발생하기 쉽습니다. 이런 경우 useReducer를 useState 대신 쓸 수 있습니다. 하지만 그렇다고 해서 항상 useReducer를 사용해야 한다는 건 아닙니다. 더 강력하다고 해서 항상 더 좋다..

이번 리액트 강의를 들으면서 그리고 강의에서 배운 내용을 토대로 나만의 프로젝트를 조금씩 구현하는 단계에서 여러가지 다양한 어려움을 느꼈고 결국 기본이 부족하여 그런게 아닐까 라는 의구심을 갖고 4월 28일 도서관으로 향하였습니다. 도서관에 도착하여 한참을 어떤 자바스크립트 책을 보면 좋을까 고민하고 알아보다 자바스크립트 코드 레시피 278이라는 책을 보게 되었고 5월 4일 완독을 하여 간단한 후기를 남겨보려 합니다. 간단하게 책에 대한 소개를 하자면 이 책은 기초적인 조건문, 반복문부터 배열, 함수, 객체 그리고 날짜와 시간, 브라우저 및 이벤트 처리 HTML, DOM 요소 등 광범위한 기능들을 소개하고 있으며, 데이터 연동을 통해 다양한 동적 웹 페이지를 만드는 방법, 실무에서 자주 쓰는 코드 등을 ..

render 메서드에서 생성된 Dom 노드나 리액트 Element 요소에 접근하여 그것들을 직접작업 할 수 있게 해주는 것입니다. 예를들면 Dom API를 이용하는 document.getElementsById("button"); 로 해당하는 Dom에 직접적으로 접근하는 방법을 이야기 합니다. ref는 언제 사용해야 하나? 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때. 애니메이션을 직접적으로 실행시킬 때. 서드 파티 DOM 라이브러리를 React와 같이 사용할 때. 리액트 공식문서에서는 아래와 같은 사례를 구체적인 예시로 들고 있습니다. 하지만 이번에 ref를 사용할 예제는 위와는 다른 예제 입니다. 사용자에게 입력값을 받을때 input 태그를 이용하게 되는데 이때 useState를 사용하여..

부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 방법 입니다. 위의 내용만 봐서는 문득 Portal을 사용하는 이유에 대해 감히 잡히지 않으실거 같습니다. 그래서 제가 예시를 가져왔습니다! 위 사진에서 중점적으로 봐야 할 것은 바로 Modal 입니다! 사진에 보이듯 오버레이가 다른 HTML 코드 안에 중첩되어 있다면 기술적으로 좋은 코드나 구조가 아닙니다. (*Overlay: 어떠한 HTML 요소 위에 또 다른 HTML 요소가 겹치게 보이는 효과 / 모달창, 사이드 드로어, 다이얼로그 등) 또한, 추후에 스크린 리더가 렌더링 되는 HTML 해석할 때 일반적인 오버레이라고 인식하지 못 할 수도 있습니다. 이러한 문제를 해결하기 위해서는 아래의 사진처럼 오버레이가 다른 태그가 ..

리액트에서는 하나의 컴포넌트가 여러 개의 엘리먼트들을 반환 합니다. 리액트를 사용하기 위한 문법인 JSX를 사용할 때 return 문안에는 반드시 하나의 최상위 태그가 있어야 합니다. 이는 ReactDom.createRoot(document.getElementById('root'))에서 하나의 루트 요소만 가지고 있기 때문입니다. index.js 파일 만일 이러한 내용을 어기고 두개 이상의 최상위 태그가 생기면 아래와 같은 에러가 발생하게 됩니다. 그런데 이러한 문제를 해결하기 위해 단순히 감싸는 용도로 div 태그를 사용하게 되면 추후에 앱이 느려지는 이유 중 하나가 될 수 있습니다. 처음에는 그 양이 적어 괜찮겠지만 앱이 점점 커지면서 문제가 되기 때문에 처음부터 이런 감점 요소를 잡고 가는 게 좋다..

이번 미니 프로젝트는 CSS에 관한 내용으로 리액트에서는 CSS를 컴포넌트 형태로 분리해서 적용한다고 하더라도 전역으로 설정되기 때문에 모든 컴포넌트에서 해당 CSS에 접근이 가능합니다. 그래서 CSS를 각 컴포넌트 단위로 지정하여 설정할 수 있는 방법에 대해 배우는 프로젝트를 진행 합니다. CSS를 컴포넌트에 맞춰 지정하는 방법으로 가장 유명한 두 가지 방법을 설명하기 앞서 사용자에게 입력 값을 받을때 사용자가 입력조건에 맞춰 올바르게 입력 하였는지 유효성 검사를 하는 방법과 CSS를 동적으로 설정하는 방법에 대해서 이야기를 하고 넘어가도록 하겠습니다. 유효성 검사를 해야하는 이유는 오류를 방지하기 위함이며, 확인을 하지 않으면 추후에 문제를 야기할 수 있습니다. const CourseInput = p..

리액트 강의를 무엇을 들으면 좋을까 알아보던 중 유데미에 Maximilian Schwarzmüller분께서 제작하신 리액트 완벽가이드 강의를 보았고 탄탄한 내용과 강의에 대한 평도 굉장히 좋아서 강의를 듣게 되었습니다. 강의를 들으면서 자바스크립트의 문법 중 화살표 함수, 스프레드 및 나머지(rest) 연산자, 구조분해 할당 등을 배웠으며, 리액트의 하향식 데이터 전달 방법인 props를 배워 부모 컴포넌트에서 자식 컴포넌트에 데이터를 전달하는 방법을 통해 페이지와 컴포넌트를 따로 분리하여 최종적으로 가독성과 재사용성을 높여 줄 수 있다는걸 알게 되었습니다. 또한, 리액트의 훅 중 하나인 useState를 통하여 기존의 리액트가 이미 한번 렌더링 된 후 데이터나 화면이 변경되어도 인지하지 못 하기 때문에..

함수 표현식 (Function Expression) & (익명 함수) 함수를 변수에 할당하는 방식으로 정의하며, 함수를 정의하는 동시에 변수에 할당하기 때문에 변수 이름으로 함수를 호출 합니다. // 예제 1 const result = function(a, b) { return a + b; } console.log(result(3,5)); // 8 // 예제 2 const computer = function(game) { console.log(`지뢰찾기, ${game}`) } computer("오목") // 지뢰찾기, 오목 함수 선언문 (Function Declaration) 함수를 만들고 함수 이름으로 호출하는 방식으로 함수 이름이 함수 스코프 내부에 호이스팅되기 때문에 함수 선언문을 코드 어디서든 사..

앞서 Closure를 말하기 전에 Scope와 Scope chain에 대해 먼저 살펴 보겠습니다. 스코프는 변수, 함수 및 객체의 범위(접근성)와 생존 기간을 정의하는 개념으로 변수나 함수가 선언되는 위치에 의해 결정이 됩니다. 변수를 사용한 예제 let num = 1; // 전역 스코프 { let num = 2; // 지역 (블록)스코프 } ------------------------------------- { let num = 1; // 지역 (블록)스코프 } { let num = 2; // 지역 (블록)스코프 } -------------------------------------- 에러 let num = 1; let num = 2; 함수를 사용한 예제 let num = 1; // 전역 스코프 fun..

이 오류는 bcrypt 모듈로 나는 오류로 해결 방법으로는 두가지가 있습니다! 첫 번째 방법은 bcrypt-nodejs 사용하는 방법 입니다. bcrypt-nodejs 사용하기 1. 터미널에 npm install bcryptjs --save를 한다. 2. const bcrypt = require('bcrypt')를 const bcrypt = require('bcryptjs')로 변경한다. 3. package.json에 있는 bcrypt를 지운다. 두 번째 방법은 를 bcrypt 삭제 시킨 뒤 다시 설치하는 것 입니다. bcrypt 삭제하기 1. pacage.json에서 bcrypt를 삭제 시킨다. 2. npm i로 다른 패키지 설치하기 3. npm install bcrypt다시 설치하기 출처: (John..