Front-End - Main Menu/React (Next.js) 15

[React.js] 기초 실습 예제

안녕하세요 ITRecipe 입니다!React로 miniProject를 진행해보려고 유튜브를 활용해강의를 들으며 학습을 하고 있습니다.학습한 내용을 꾸준히 학습도 하고,이해도를 높이고자 기록해두려 합니다.현직에 개발자로 계시는 지인분이 그러더라구요"너의 기억은 날아가지만 기록은 남으니 학습한 내용은 무조건 기록으로 남겨라!그것이 훗날 너의 자산이 될 것이다! "라고 해주셨습니다.개발자를 꿈꾸고 있는 취준생으로서 선배 개발자분의 명언을 새겨 듣도록 하겠습니다.그럼 오늘부터 다시 화이팅!!import './App.css';//모든 컴포넌트(함수)는 대문자로 시작한다.function App() { const name="Tom"; //이름을 받아올 변수 name 생성//네이버라는 객체를 생성 해준다. cons..

[React.js] 컴포넌트 생성방법 (3가지)

import World from "./World"//컴포넌트 생성방법-1/*const Hello = function() { Hello;}*///컴포넌트 생성방법-2/*const Hello = () => { //화살표 함수로 작성하는 방법 Hello}*///컴포넌트 생성방법-3export default function Hello() { let name = "Mike"; function changeName() { name = name === "Mike" ? "Jane" : "Mike"; } return ( Hello {/*여기서 p태그는 return을 해줘야 한다. */} ); //..

[React.ts] 리액트와 타입스크립트 사용하기

안녕하세요 ITRecipe 입니다.오늘은 리액트와 타입스크립를 사용하는 방법에 대해 간략하게 기술 해보고자 합니다.그럼 시작합니다!상위 슈퍼셋이므로 설치를 해야 합니다.npx로 아래 명령어를 입력하여 타입스크립트를 사용할 폴더와 템플릿을 받아줍니다.아래 ract_typescrpt_study는 폴더명 입니다! 그래서 사용하고자 하는 폴더명을적어주면 되는 부분이라 저와 똑같이 하지 않으셔도 무방합니다.

[React.js] CSS 모듈 추가 & Tailwind Framework 사용 해보기

안녕하세요 ITRecipe 입니다.오늘은 React CSS 모듈 추가하는 방법,그리고 요즘 인기있다고 하는테일윈드 CSS 프레임워크를 React에서 사용하는 방법을 적어보고자 합니다.저의 게시물은 제가 학습한 내용을 기록해 두었다가 필요할때다시 찾아보려고 작성하는 목적을 두고 있으며,다른 분들에게도 도움이 된다면 좋겠습니다!그럼 시작합니다! 필자 본인이 실습하고 있는 환경은 node-sass 9.0이호환 가능한것으로 확인되어 선택하여 설치 하였습니다.설치되는건 금방 되기 때문에 잠깐만 기다리면 완료 됩니다.만약, 안되면 오타 수정 또는 오류코드를 확인하여 해결 해야 합니다. 테일윈드 파트는 위 명령어를 보고 따라 했으나,필자도 적용이 되질 않아 공식문서를 참고하였습니다.테일윈드 부분은 해당 가이드를 보고..

[React.js] 사용을 위한 Node.js 환경설정 및 사용법

안녕하세요 ITRecipe 입니다.오늘은 React를 사용해보고 학습하기 위한설정 및 사용법을 간략하게 적어보려 합니다.이번글은 윈도우10 환경에서 작성된 글 입니다.mac은 다른 포스팅을 찾아보셔야 합니다!그럼 시작 합니다!우선 학습 및 프로젝트를 위하여 필요한 환경을 구성 하도록 하겠습니다.React를 사용하기 위해 Node.js를 설치 해줍니다.그리고 IDE 툴은 VSCode를 사용하고 있습니다.다운로드 링크 : https://nodejs.org/en Node.jsNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org해당 페이지에 접속하여 LTS version으로 설치해줍니다.LTS version과 Curr..