let's get IT with DAVINA 💻

✏️ 사전 Knowledge ++ FE 상태 관리 redux, mobx, recoil 등 다양한 라이브러리 존재 상태란? 주어진 시간에 대해 시스템을 나타내는 것으로 언제든지 변경될 수 있음. 즉, 문자열, 배열, 객체 등의 형태로 응용 프로그램에 저장된 데이터 → 개발자 입장에서는 관리해야하는 데이터들 상태관리? 시간의 흐름에 따라 변화하는 상태를 관리하는 것 React에선 단방향 바인딩이므로 props drilling 이슈도 존재 (redux, mobx와 같은 라이브러리를 사용해서 해결하기도 함) store은 전역상태가 저장되고 관리되는 공간인데 redux, redux-saga방식으로 비동기 요청을 구현하게 되면 redux 구현하는 모듈에 API통신 관련 코드가 대부분이게 됨 비슷한 구조의 API 통..

1. 먼저, 해당 글을 누르면 ⊕버튼 눌렀을 때 뜨는 창이 나오게 해야겠지?! TodoItem.js 특정 글을 누르니까 여기서({text}있는 부분=글을 눌렀을때) onClick함수 추가해줘! import React from "react"; import { MdCheckBox, MdCheckBoxOutlineBlank } from "react-icons/md"; import "./TodoItem.css"; const TodoItem = ({ todo, onCheckToggle, onInsertToggle, onChangeSelectedTodo, }) => { const { id, text, checked } = todo; return ( {checked ? ( { onCheckToggle(id); }} ..

CSS 작업 후, CRUD의 첫번 째 기능인 Create 기능 구현에 들어갔다. ⊕ 버튼을 눌러 사용자가 입력한 항목을 추가하는 기능! TodoInsert.js 배경을 담당해주는 background div와 form을 하나 넣어주기 (사용자가 입력하는 input + 제출하는 button 요소) 이걸 사용자가 ⊕버튼을 누를때만 모달을 띄우고 싶잖아요? App.js import React, { useState } from "react"; import { MdAddCircle } from "react-icons/md"; import "./App.css"; import Template from "./components/Template"; import TodoInsert from "./components/Tod..

부트캠프가 끝나고 많은 사람들이 더 심화되고, 새로운 언어 기반으로, 더 어려운 수준의 추가 프로젝트를 진행하고 있는 듯 하여 대단해보인다.. 물론 코딩이란걸 처음 시작했을 때 "나"보다는 현재의 "내"가 더 발전해있는 모습이고, 불안해하지 말자고 매일 다짐하지만 난 내가 기본기가 여전히 많이 부족하구나를 계속 깨달으며 많이 좌절하는 요즘인것같다.. 그 어떤 프로그래밍 언어를 쓰건 하나의 홈페이지를 만들 때, CRUD를 정말 완벽하게 손쉽게 구현할 수 있는가를 스스로에게 물어본다면 너무나도 당연히 NO였다.. 그래서 난 더 어렵기보단 기본기를 다시 한 번 닦고자 프로젝트 전 부트캠프에서 과제로 줬던 (난 실패했던) Todo App을 다시 한번 만들어보고자 시작했다. 1. React Component 만들..

About JSX React에서 UI를 구성할 때 사용하는 문법으로, JavaScript를 확장한 문법 (JavaScript XML) ⇒ 이 문법을 이용해서 React 엘리먼트를 만들 수 있습니다. 그동안 HTML요소를 만들고, JS를 설정한 뒤, 다시 HTML에 해당 설정 내용을 반영했다고 한다면, React JSX는 JS로 요소를 만들고 마지막에 HTML에 업데이트/반영해줍니다. 브라우저가 바로 실행할 수 있는 JS코드는 아닙니다. “Bable”을 통해 JSX를 브라우저가 이해할 수 있는 JS로 컴파일 후, JS를 브라우저가 읽고 화면에 렌더링 합니다. DOM 그리고 React JSX CSS&JSX 문법만을 가지고 웹 애플리케이션을 개발할 수 있습니다. 즉, 컴포넌트 하나를 구현하기 위해 필요한 파일..

React로 두번의 프로젝트를 다 진행했는데 왜 React를 썼는가와 어떤 장점이 있는지 스스로 질문에 제대로 답도 못하는 내 자신이 한심해서 마음 다잡고 정리를 끄적여봅니다빈..😥 항상 이건 "왜" 생겼고, "왜" 많은 사람들이 쓰는지 정도는 알고 쓰자 다빈아ㅏㅏㅏ plz What is React? React는 프론트앤드 개발을 위한, 프론트앤드 개발을 더 쉽게 만들어주는 JavaScript 오픈소스 라이브러리 기술적 분류에 따라 코드를 분류하지 않고, 기능별로 코드를 분리하길 권장 리액트 SPA를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인 npx create-react-app@latest 폴더이름 React의 3가지 특징 선언형 (Declarative) 리액트는 한 페이지를 보여주기 위해 HTM..

모달창을 띄우면, 다른 부분이 아닌 닫기 버튼 ❎ 을 눌렀을 때만 창을 닫거나 하기 이미지처럼 하트 버튼을 누르면 하트의 상태만 변하게 (이미지 전체가 눌리지 않게) 하고 싶을 때가 있다. 모달 컴포넌트에서 최상위 부모 element에 onClick 이벤트로 stopPropagation()함수를 넣어주고, 버튼 element에 onClick 이벤트로 닫힐 수 있게 설정해주면 끝! return ( {e.stopPropagation()}}> X . . . ); const handleLike = async (id, e) => { e.stopPropagation(); // 로그인 안될 시, 먼저 잡고 로그인 if (!isLogin) { dispatch(modalOpen()); return; } return ( ..

왜 가? 프로젝트에 적었던 스크롤링 방지에 대해 여러 검색과 지인에게 물어본 결과.. 좀 더 효율적이고 지저분하지 않은 코드를 알아냈다. 모달창을 띄웠을 때, 스크롤 방지를 하고 -> 모달창을 닫으면 다시 스크롤 활성화를 시키려면 overflow:hidden 속성을 이용하면 된다! modal창의 상태를 useState로 상태값을 지켜보고 모달창이 뜨면, scroll 상태를 hidden으로 비활성화시키고 모달창을 닫으면, hidden을 다시 풀어주는 unset속성을 줘서 스크롤을 다시 활성화시킨다. const [modal, setModal] = useState(false); const handleModal = () => { if (modal === false) { setModal(true); documen..