Land of Joe

전역 상태 관리 Global State Package에 대해 배웠다. 전역 상태 관리의 종류에는 Redux, Recoil, Justand, jotai 등 여러가지가 있다. 하나하나에 대해 알기 이전에 전역 상태 관리가 무엇인지, 그 필요성이 대두된 배경이 무엇인지 알아보자. 전역 상태 관리 Global State Package는 State를 전역변수로 관리하는 패키지 그렇다면 기존 useState의 특징에 대해 알아보자. [ useState의 특징 ] 1. 해당 State를 필요로 하는 부모 컴포넌트에 State를 선언해줘야 한다 - 이벤트의 시작지점과 도착지점이 되는 컴포넌트 두 개를 하나의 부모 컴포넌트로 묶어서 그 부모 컴포넌트에 state를 선언해준다 - 그렇게 부모 컴포넌트에 선언한 state를..

1. Node.js 1-0. 할 것 Node.js를 통해 리액트 프로젝트 만들기 구체적으로, node.js 기반 프로젝트를 만들어서 거기에 리액트를 설치하는 것이다. (지난주까지 내가 한 것: 단순 바닐라 웹에 리액트를 올려서 사용하였음) 1-1. Node.js의 의의 - 자바스크립트 런타임 기술 (런타임이란 '언어가 구동되는 환경'. js의 경우 브라우저 혹은 node.js가 있겠고, 그것들이 js의 해석기 역할을 하고 있다고 보면 된다.) - 개발의 중심이 브라우저가 아닌, Node.js가 될 것 (지금까지 브라우저한테 js의 해석을 맡겼던 것을, node.js가 해석하는 것으로 변경할 것) - Node.js의 여러 기능을 이용할 수 있게 되었다. >> sudo apt install nodejs (설..

드디어 마르고 닳도록 들어본 (듣기만 한) 개념들에 대해 배웠다. 아직 리액트 어플(CRA..뭔지 잘 모름)에 한 건 아니고, 그냥 html에 바벨 라이브러리 설치해서 script 안에 개발하고 있다. CRA를 사용하지 않은 바벨의 특성 상(?) html 파일 하나에 전부 때려박아야 해서 파일을 컴포넌트 단위로 나누어보지도 않아 아직 내가 리액트를 하고 있다는 게 별로 실감이 나지 않았는데 그동안 유튜브 등에서 귀동냥으로 들어왔던 리액트 대표 개념들을 배우니 뭔가 설레었따. 히히 여튼 시좍좍 1. Virtual DOM 버츄얼 돔 1-1. Virtual DOM의 존재 이유 요즘같이 한 페이지에 많은 데이터를 출력하는 웹에 있어 브라우저의 동작 구조는 매우 비효율적이다. [ 브라우저 동작 구조 ] (1) D..

align-items와 justify-content는 이제 완벽히 이해한 듯하다. 그러나 그 개념만으로는 해소되지 않는 것을 만들 일이 있었다. 한 달짜리 달력을 만드는데 div 한 칸에 '날짜'와 '스케줄 개수'를 넣어주어야 했다. 두 요소를 감싸는 div에 align-items와 justify-content 속성을 지정해주는 것만으로는 두 위치를 모두 충족할 수 없었다. 이를 위해 서칭을 하다가 display: grid, justify-items, align-content 라는 처음 보는 속성들이 있다는 것을 알게되었다. 그중에서도 먼저 align-content에 대해 알아보고자 한다. align-content 우선 align-content는 flex-wrap: wrap과 함께 아이템들을 묶은 컨테이..

지난 주엔 바닐라 자바스크립트를 가지고 리액트의 구조를 따라해보는 시간을 가졌다면, 이번 주엔 드디어 리액트 문법을 배우는 시간을 가졌다. 리액트 앱(CRA) 내부에서 그 문법을 사용한 것은 아니고, 그냥 JS에서 리액트 문법을 배워보았다. CRA에서 배우지 않고 바닐라 JS에서 진행한 이유는 - CRA를 동작시키는 것들이 문법 외에도 너무 많다 (ex. Node.js 등) - 그러한 것들을 모르는 채로 CRA를 바로 시작해버리면 문법에 대한 이해도가 떨어지게 된다. 여튼 저번주부터 심화수업이 시작되고 나서는 리액트를 제대로 배워나가기 위해 계속 약한 불로 슬슬 가열하는 느낌, 자동차를 운전하기 전에 시동을 부릉부릉 걸어놓는 느낌이 든다. 가보좌 1. 리액트는 왜 배워야하는가? (부제: 기존 바닐라 웹 ..

currentTarget은 이벤트 리스너가 등록된 요소 그 자체. target은 이벤트가 발생한 요소. '버튼'에 mouseover 하면 아래 "음성으로 검색"이라는 '태그'가 보이고, '버튼'에 mouseout 하면 '태그'가 사라지는 이벤트를 만들고 있다. 이때 '버튼'은 currentTarget, '태그'는 target에 해당한다. 나의 경우 '버튼'에 이벤트를 부여하였고, 버튼에 가하는 이벤트에 따라 이벤트가 발생할 요소에 변화를 가하는 코드를 짰기 때문에 target이 아닌, currentTarget을 사용해야 원하는 대로 작동한 것이다.

JSP를 통해 백엔드 통신이 가능한 프론트엔드 코드를 짜다보니 html 태그의 속성들에 대해 조금 더 깊게 알게 되었다. 그중에서 button과 input. 버튼을 만드는 방법은 누구나 알고 있 듯, 버튼 혹은 이 있다. 백엔드 통신을 하기 전에 프론트에서 예외처리나 동적 이벤트를 진행할 일이 있다면 통신, 즉 submit을 지연시켜야한다. 이 지연을 시키기 위한 방법으로 으로 일단 아무 작동을 하지 않는 버튼을 만들어놓고, 프론트의 동적 처리 함수 내부에 모든 코드를 짠 뒤 맨 마지막에 form.submit을 해줄 수 있다. ✔︎ form.submit이란 통신을 하기 위해 받은 모든 정보들을 감싼 태그를 submit 해준다는 뜻이다. 예를 들어 아래의 상황에서 유저가 #id와 #pw input을 작성 ..

그동안은 변수를 만들 때 var만 사용해왔다. 그러나 var의 문제점은 "중복선언이 가능"하고 "호이스팅이 된다"는 점이다. 먼저 중복 선언의 예시 var를 통해 만든 num1은 위에서부터 아래로 읽는 js의 성격에 따라 서로 다른 값을 넣어준 것의 결과가 그대로 출력된다. 그러나 함수의 경우는 또 그렇지 않다는 게 이상한 점. 호이스팅(Hoisting)이란: 변수와 함수의 선언부분을 파일의 상단으로 끌고 올라오는 JS만의 편의기능이다. 위 중복 선언의 예시가 작동하는 순서대로 쓴 것이 아래의 이미지이다. var num1 =10;에서 선언부는 var num1에 해당하고, function printMessage() {console.log("hello")}는 전체가 선언부에 해당한다. JS가 작동하는 순서에..