리액트 (9) 썸네일형 리스트형 [🐾 일지] 리액트 스크롤 달력 만들기 프로젝트 TODO LIST 기능을 위해 만든 캘린더이다. 기능은 다음과 같다. 1. 오늘이 포함되어 있는 년도(2022)만의 1월부터 12월까지의 달력을 스크롤로 보여줌 2. 맨 위의 오늘 날짜를 클릭할 경우, 해당 월의 달력으로 이동함 3. 맨 처음 보여줄 때에는 오늘 날짜의 달력이 가운데에 보여짐(1월부터 X) 시작! 이전 포스트와 비슷한 부분이 많으니 먼저 보고 오는 것이 좋을 것 같다. 2022.06.01 - [프로젝트 일지] - [🐾 일지] 리액트 달력 만들기 [🐾 일지] 리액트 달력 만들기 프로젝트에서 그림 일기를 달력으로 보여주는 기능이 필요해서 달력을 제작하게 되었다. 라이브러리를 사용해도 되지만 달력의 셀 안에 이미지를 넣어야 하기 때문에 직접 그리기로 했다. 그럼 sennieworld... [🐾 일지] 리액트 달력 만들기 프로젝트에서 그림 일기를 달력으로 보여주는 기능이 필요해서 달력을 제작하게 되었다. 라이브러리를 사용해도 되지만 달력의 셀 안에 이미지를 넣어야 하기 때문에 직접 그리기로 했다. 그럼 시작! ↓ 스크롤 달력은 아래에 2022.06.27 - [프로젝트 일지] - [🐾 일지] 리액트 스크롤 달력 만들기 [🐾 일지] 리액트 스크롤 달력 만들기 하이... 블로그 오랜만... 한 4일 동안 인생 첫 면접(심지어 취업도 아니고 교육 면접...)에 멘탈도 털리고 누가 봐도 불합격을 치르고 와서 정신줄 놓고 지내고 있었다..ㅎ 면까몰이지만...아니 제 sennieworld.tistory.com 0️⃣ 뼈대 만들기 1️⃣ header 만들기 (오늘 날짜, 달력 이동 아이콘) header를 div 안에 직접 작성하지 않고.. [리액트 클린코드 #1] 컴포넌트 관리 Extension 리액트 클린코드에 관한 고민은 항상 가지고 있었다. 중구난방으로 코드를 짜다보면 코드가 So dirty... 해지기 때문에 기분이 안 좋아진다. 그러던 와중 너무 늦게 알아서 쫌 쫘증나는 extension...모두들 미리 알아서 언렁 써먹길... 아직 서버 연결을 하지 않은 컴포넌트라 코드가 더 더러운게 사실이지만 어쨌든! 내가 소개하고 싶은건 glean extension이다 누가 개발했는지는 몰라도 천재가 확실함 이것을 어떻게 쓰는지 살펴보자. 아래의 코드는 웬만한 프로젝트에서 가지고 있는 Header의 navBar 코드이다. import React, { useState } from 'react'; export const Header = () => { const [count, setCount] = us.. [🐾일지] Axios Network Error (Failed to load resource: net::ERR_CONNECTION_REFUSED) 프로젝트 서버 연결할 때 무조건 한 번은 눈에 보이는 에러다. 에러 주저리가 너무 길어서 읽을 염두도 안 나는... 그런 에러다. 👇🏻 에러 풀 소개 Access to XMLHttpRequest at 'http://localhost:3000/api/user/login' from origin 'http://localhost:5000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the reque.. [🐾 일지] 리액트 프로젝트 회원가입 서버 연결 (Axios 400번 에러) 원래 fetch()를 썼었으나 axios를 많이 쓴다고 해서 처음으로 사용하게 되었다. axios 공식문서를 보고 처음에 호기롭게 시도했으나 콘솔에 가득한 빨간줄...프로젝트 생명이 위험함 제일 많이 났던 400번 에러에 대해 작성해보려고 한다. 일단, 내가 하는 프로젝트는 회원가입 로직이 조금 복잡하다. 사실 복잡하지 않은데 처음해봐서 복잡하게 느껴졌다. [로직] step 1 회원가입시 보내는 정보 url method data (body) http://localhost:3000/api/user/create post nickName, email, pw, profilePicture, location 회원가입 서버 연결 시 반환된 상태와 메세지에 따른 다음 수행작업 status message next ste.. [🐾 일지] 리액트에서 <img> 경로가 안 불러와질 때... 가끔씩 개발을 하다보면 가장 기본적인 단계에서 태그가 안 보이거나 적용이 안 되거나 하는 경우가 있다. 고구마 이만 이천개정도를 물 없이 먹는 답답함에 비례하는... ⚈ ̫ ⚈ 아니 오늘은 갑자기 태그에 src 경로 설정에 파일이 분명 있는데! 안 불러와지는 것이었다..ㅎ 드디어 세상에서 가장 멍청한 사람이 된 것인가 싶었지만 다양한 방법을 시도해봤다. 1. 태그 src 상대경로, 절대경로 다 해보기 2. image 폴더를 바로 하위로 옮겨보기 3. 로 해서 background-image로 넣기 아니 근데 다 안되네... 싶을 때 뜻하지 않게 되버렸다. import Image from 'layouts/About/logo-design.png'; const logo = ; const Header = () =.. [🐾 일지] create-react-app에서 전체 화면 css 주는 법 이제 개발을 슬슬 시작하려고 해서 css로 영역 확인 좀 하려고 했더니;; 내 프로젝트는 전체 페이지를 써야 되는데... 이게... 안 된다? 인터넷을 급하게 찾아보니 1. width:100vw; height:100vh; 2. width:100%; height:100%; 이거 두 개 중에 하나라 vw, vh를 먼저 사용해봤더니 되긴 하는데 이 놈의 스크롤... 부랴부랴 %로 바꿨는데 안 된다..ʕ•̠͡•ʔ ? create-react-app으로 프로젝트를 하게 되면, 생성이 되어 있던 index.html 의 html, body를 먼저 width, height: 100%로 설정을 해 주고 나서 해당되는 컴포넌트의 css를 100%로 하면 될 줄 알았다. 근데 왠 걸... 내 App.js 파일은 아래와 같았다.. [🐾 일지] react-router-dom v6 내가 작년 12월에 팀플 할 때까지만 해도 이게 잘 먹혔다. 역시나 react-router-dom을 설치한 뒤에 저렇게 쓰니깐.. 안되네..? (◕‿◕) 로 embed를 안 해주어서 그런가 하고 공식 문서를 찾아보니 역시나 프로그래밍 세상은 너무나 빨리 변한다. 조금만 관심갖지 않으면 바로 나가리 ʕ •ᴥ•ʔ react-router-dom@v6 에서는 저 방법이 먹히지 않고 다음과 같이 해 주어야 한다. 내가 깨달은 것들 ✅ 꼭 있어야 함 ✅ component -> element 이거 말고 공식문서를 돌아다녀 보니 눈에 띄게 바뀐 것들만 아래에 정리해보도록 하겠다. 공식문서 증후군 있는 당신들을 대신 내가 후훗 ✓ 태그 안에 태그 사용 X -> 를 를 랜더링해서 사용해야 한다. # v5 # v6 }/> .. [리액트 공식문서 파헤치기] 리액트 시작하기 새로운 프로젝트를 시작하게 되었다. 리액트 공식문서도 자세히 다시 볼 겸 포스트를 작성해 본다. 더보기 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 다음
