Front-end/React (4) 썸네일형 리스트형 [React 달력] 일요일이 아닌 월요일부터 시작하는 달력으로 수정하기 드디어...내 블로그에도 질문이..!!! (감 격) 👇🏻 질문 달린 포스트 https://sennieworld.tistory.com/61 [🐾 일지] 리액트 달력 만들기 프로젝트에서 그림 일기를 달력으로 보여주는 기능이 필요해서 달력을 제작하게 되었다. 라이브러리를 사용해도 되지만 달력의 셀 안에 이미지를 넣어야 하기 때문에 직접 그리기로 했다. 그럼 sennieworld.tistory.com 저번 달력 -> 이번 달력으로 바꾸려면 다음의 부분을 수정해주면 된다. 끝! [리액트 클린코드 #1] 컴포넌트 관리 Extension 리액트 클린코드에 관한 고민은 항상 가지고 있었다. 중구난방으로 코드를 짜다보면 코드가 So dirty... 해지기 때문에 기분이 안 좋아진다. 그러던 와중 너무 늦게 알아서 쫌 쫘증나는 extension...모두들 미리 알아서 언렁 써먹길... 아직 서버 연결을 하지 않은 컴포넌트라 코드가 더 더러운게 사실이지만 어쨌든! 내가 소개하고 싶은건 glean extension이다 누가 개발했는지는 몰라도 천재가 확실함 이것을 어떻게 쓰는지 살펴보자. 아래의 코드는 웬만한 프로젝트에서 가지고 있는 Header의 navBar 코드이다. import React, { useState } from 'react'; export const Header = () => { const [count, setCount] = us.. [리액트 공식문서 파헤치기] JSX JSX : JavaScript Xml JSX는 HTML과 유사하지만 HTML은 아닌 언어(자바스크립트에 더 가깝다)로 XML 형식의 코드를 이용해 코드를 작성할 수 있게 하는 자바스크립트 확장 언어이다. JSX의 문법을 알아보겠다. 1. JSX의 컴포넌트 내부는 하나의 DOM트리 구조로 이루어져야 한다. 즉, 컴포넌트에 여러 요소가 있을 때, 이를 감싸주는 부모 요소가 있어야 한다. function App(){ return( 1번째 요소 2번째 요소 ) } 만약 이렇게 작성했다면, 다음과 같은 오류가 발생한다. SyntaxError: /Users/sennie/wpet-client/src/App.js: Adjacent JSX elements must be wrapped in an enclosing tag... [리액트 공식문서 파헤치기] 리액트 시작하기 새로운 프로젝트를 시작하게 되었다. 리액트 공식문서도 자세히 다시 볼 겸 포스트를 작성해 본다. 더보기 https://ko.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org 리액트 앱을 만드는 방법은 super simple이다. 맥북을 열고 F4를 누른 후 Terminal을 열어보자. 터미널 프로젝트를 만들고 싶은 파일 경로에 아래와 같이 입력해주면 된다. npx create-react-app project-name cd project-name npm start 만약, node가 설치되어 있지 않다면 설치를 한 후 실행해야 한다. 나는 no.. 이전 1 다음
