천천히 알아가는 세상

안녕하세요. 이번에는 React에서 삼항 연산자를 이용하는 방법에 대하여 알아보겠습니다. 1. 삼항 연산자 삼항 연산자를 이용하여 React 코드 작성하기 App.js import './App.css'; import Condition from './components/Condition'; function App() { return ( ); } export default App; components/Condition.js import { useState } from 'react'; export default function Condition() { const [condition, setCondition] = useState(true); return ( setCondition(!condition)}>컨디션 ..

안녕하세요. 이번에는 React의 useState 기능에 대하여 알아보겠습니다. 1. React - State 특수한 기능을 하는 변수라고 생각하면 된다. 컴포넌트에 대한 상태를 의미한다. State가 변경되면 해당 컴포넌트를 다시 렌더링 하기 때문에, 컴포넌트의 유동성 관리가 쉽다. 2. 일반 JS로 사용하였을 때 App.js import './App.css'; function App() { const teacher = '새싹'; function inEnglish() { const spanEl = document.querySelector('.App > span'); spanEl.innerHTML = 'sesac'; } return ( inEnglish()}>영어로! {teacher} ); } expor..

안녕하세요. 이번에는 React의 Component에 대하여 알아보겠습니다. 그전에 VSCode에서 작업할 때 있으면 편리한 확장 프로그램을 설치하도록 하겠습니다. 1. VSCode 확장 프로그램 ES7 + React/Redux/React-Native snippets v4.4.3 React 관련 snippets 제공 2. Component Virtual DOM의 핵심이다. 기존의 웹 서비스들은 웹페이지에서 정말 작은 부분이 업데이트 되어도 페이지의 전체를 리로딩 해야한다. React는 컴포넌트 단위로 페이지 새로 고침이 가능하여 리소스 절약이 가능하고, 사용자에게 부드럽고 빠른 경험을 제공한다. 독립적으로 구성하여 재사용이 편리 합니다. 데이터는 속성(props) 으로 받고, 상태(state)에 따라 V..

안녕하세요. 이번에는 React에 대하여 알아보겠습니다. 1. React JS 반응형 자바스크립트 SPA을 전제로 하고 있으며, Dirty checking과 Virtual DOM을 활용하여 업데이트해야 하는 DOM 요소를 찾아서 해당 부분만 업데이트하기 때문에, 리렌더링이 잦은 동적인 모던 웹에서 엄청나게 빠른 퍼포먼스를 내는 게 가능하다. 기본적으로 모듈형 개발이기 때문에 생산성 또한 상당히 높은 라이브러리인지라 순식간에 대세로 떠올랐다. 거기에 기본적으로 프레임워크가 아니라 라이브러리인지라 다른 프레임워크에 간편하게 붙여서 사용하는 것도 가능하며, React Hooks라는 강력한 메서드들을 지원하면서 사실상 웹 프런트엔드 개발의 표준으로 자리 잡았다. 2. Virtual DOM 서버와의 데이터 통신과..

안녕하세요. 이미 프로젝트가 끝난 지는 한참 지났지만, 정리를 해두면 나쁘지 않을 것 같아서 여기에도 올리게 되었습니다. 프로젝트 메인 화면 프로젝트 소개 다른 음악 차트 사이트를 한 곳에서 전부 확인할 수 있으며, 사이트의 사용자끼리 방명록 방식처럼 서로 소통할 수 있는 사이트를 만드는 것이 이번 프로젝트의 주제입니다. 기간 : 2022.12.13 ~ 2022.12.29 팀 구성 : 4명 (페이지별 업무 분배) 사용 기술 : JavaScript, Node.js, MySQL, Naver Cloud Server, Bootstrap v5 프로젝트 주요 기능 회원가입, 로그인 음원 페이지 - 음원 순위 확인, 페이징 처리, 당일 시간대 변경 기능 좋아요 기능 - 각 음원에 대한 개인 좋아요 리스트 게시판 - ..