Web

개요남에게 폐 끼치는 게 정말 싫다. 하지만 살다 보면 그럴 일이 참 많은데, 내가 지금부터 작성할 실수(?) 또한 그런 일이었다.바로바로 서버에 초당 10,000건의 API 요청을 보내서 서버를 터뜨려버리기!많은 실수들이 중첩되어서 생긴 문제였지만, 이번 포스팅에서는 useEffect 실수 부분만을 살펴보며 React의 useEffect란 무엇이며 어떨 때 호출되는지에 대해 알아보자.* 참고로 해당 글은 독자가 useEffect를 아주 간단하게는 알고 있다는 전제 하에 작성되었다.상황Socket.IO를 이용해 실시간으로 둘 중 하나의 옵션을 골라 베팅할 수 있는 실시간 베팅 서비스를 구현하며 생긴 일이다. 컴포넌트가 쉴새없이 리렌더링 된다. 하지만 해당 페이지에서 useEffect를 사용해 Socket..

리액트 라우터를 이용해 레이아웃 적용하기개요보통 웹 사이트에는 헤더 또는 푸터 등 페이지를 이동해도 변하지 않는 레이아웃이 존재한다.예를 들어, 다방 사이트의 경우에는 상단에 헤더가 존재하고 다른 메뉴로 이동해도 헤더가 사라지지 않는다.내가 이번에 진행하는 프로젝트에서도 상단에 헤더가 고정 되어 있어 아래의 사진처럼 모든 페이지에서 헤더가 보여야 한다.이것을 리액트 라우터를 이용해 구현해보고자 한다. 리액트 라우터 v6 버전에서는 중첩 라우팅을 이용해 부모 레이아웃은 그대로 두고 자식 레이아웃만 바꿔 낄 수 있다.라우팅 파일 만들기(routing.jsx)헤더가 포함된 Layout을 최상위에 두고, 자식으로 각 페이지들을 넣어줬다. 이것을 중첩 라우팅이라고 한다.CreateBrowserRouter를 통해 ..

프로젝트를 하면서 이렇게 왼쪽에 메뉴를 만들어야 했다. 하고자 하는 건 다음과 같다. 1. 찜 목록을 누르면 찜 목록이, 리뷰 관리를 누르면 리뷰 관리가 보이도록 해야한다. 2. 페이지에 들어가면 기본적으로 찜 목록이 먼저 떠야 한다. Link와 useNavigate 중 useNavigate를 사용했다. div 태그 전체를 버튼으로 만들어서, 한 줄을 누르면 페이지가 이동되도록 하고 싶었기 때문이다. 사용 방법 1. useNavigate를 import 해온다. import { useNavigate } from "react-router-dom"; 2. useNavigate 훅으로 navigate 함수를 취득한다. const navigate = useNavigate(); navigate 함수의 첫번째 인자..

바닐라 자바스크립트로 To do list 구현하기개요이 글에서는 순수 자바스크립트, HTML, CSS만을 이용해서 투두리스트를 만들어 볼 것이다.결과물결과물은 위의 사진과 같다.요구 사항결과물을 만들기 위해서 요구 사항은 다음과 같다.맨 위에 제목이 들어가야 함.할 일 입력받는 칸, 버튼이 들어가야 함.버튼을 누르면 input 칸에 입력되어 있는 내용 + 체크박스 + 삭제 버튼을 할 일 목록에 추가해야 함.할 일 목록 ( 체크박스, 글, 삭제 버튼으로 구성 )체크박스 : 체크하면 할 일 목록 글에 줄이 쳐져야 함. ‘할 일’ 이런 식으로X 버튼 : 삭제 버튼 누르면 해당 라인 전체를 삭제해야 함.localStorage를 이용해 새로고침 해도 데이터가 그대로 유지되게 하기기능이 그리 많지는 않다. 이 기능..

개구리와 함께 CSS flex 완전 정복하기 flex를 연습할 수 있는 사이트가 있다. 바로 flexbox Froggy라는 사이튼데, 개구리를 이리저리 옮겨가면서 flex를 조금이나마 즐겁게 익힐 수 있다. 오늘 포스팅에서는 이 사이트의 문제를 풀어보면서 flex를 완전! 정복!! 해볼 예정이다. flex에 대하여 flexbox는 요소를 반응형으로 만든다. 반응형이라 함은 요소를 표시하는 장치의 종류에 따라 요소의 동작이 변경되는 것을 말한다. 사람들이 그렇듯 flex에도 부모와 자식이 있다. box1 box2 box3 부모 요소를 Flex Container라고 부르고, 자식 요소들을 Flex item이라고 부른다. container에 display: flex;를 적용하지 않은 상태는 다음과 같다. 하지..

콘솔창에 아래처럼 입력 npx create-react-app my-app cd my-app npm start 'my-app' 부분엔 원하는 프로젝트명을 입력하면 된다. +) npx는 npm 5.2+ 버전의 패키지 실행 도구임 node.js가 깔려있어야 하고, https://nodejs.org/ko/download 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 여기서 다운 받을 수 있다. cmd에서 node-v와 npm-v를 입력했을 때 버전이 나오면 정상적으로 설치 완료된 것!!

리액트 프로젝트를 처음 만들면 자동으로 생겨있는 App.js를 살펴보자. App.js import React from 'react'; import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; 맨 상단의 이 코드는 뭘까? import React from 'react'; react 모듈을 불러와서 사용하겠다는 말이다. 모듈을 불러와서 사용하는 것은 원래 브라우저에는 없는 기능이다. 근데 왜 사용할 수 있는가? 바로 번들러(bundler) 덕분이다. 번들러를 사용하면 import로 모듈을 불러왔을 때 ..

리액트는 어떻게 동작할까?(첫 포스팅 - 2023. 1. 2) 리액트로 프로젝트를 진행하면서, 구글링을 통해 어찌저찌 원하는 대로 구현이 되기는 하지만, 제대로 이해한다기보다는 그냥 코드를 활용하는 수준에 그치는 것 같아 포스팅으로 정리해보게 되었습니다. 개인적으로 공부한 내용들이라 혹시 틀린 게 있다면 알려주세욥!!리액트의 렌더링 방법렌더링이란?렌더링을 간략하게 말하자면, 사용자 화면에 뷰를 보여주는 것이다.render() { . . . } 는 컴포넌트가 어떻게 생겼는지 정의하고, 뷰에 대한 정보가 담긴 객체를 반환하는 역할을 한다.최상위 컴포넌트의 렌더링 작업이 끝나면 갖고 있는 정보들을 사용해 HTML markup을 만들고,이것을 실제 페이지의 DOM 요소 안에 주입한다.그냥 쉽게 말해 웹페이지 정..