//모듈 const express = require("express"); const app = express(); const PORT = 3000; // 라우팅 const home = require("./routes/home"); // 앱 세팅 app.set("views" , "./views"); app.set("view engine", "ejs"); app.use("/", home); //use 는 미들웨어를 등록해주는 메서도 app.listen(PORT , () => { console.log("서버 가동") }) 로그인 구현 기능에 앞서, 기본적인 틀을 만들어 볼겁니다 ! 참고로 저도 백엔드를 처음 해보는거라 이것저것 찾아보며 공부하는 중 이라는 점 참고 부탁드립니다 ㅎㅎ 먼저, 앞서 작성한 게시글과..

대학과 그 학과를 데이터로 전달해주는 api 를 만들어볼거다. app.get("/university/:department", function (req, res) { const {department} = req.params console.log(department) res.json(department); }); 우선 이렇게 department 를 id 값으로 줬다. const {department} = req.params 이 부분은 원래는 const p = req.params 라고 썼겠지만, 데이터가 넘어올때 { department : "값" } 이렇게 넘어오기때문에 저렇게 작성해준거다. 콘솔창을 확인해보면 이렇게 잘 입력되는걸 확인이 가능하다. 이제 여기서 if문을 활용해서 const express = ..

글을 시작하기에 앞서, 저는 프론트앤드만 접해본 사람입니다 ! 리액트 , 코틀린 등등 웹 앱 다 해보았는데 코틀린은 거의 맛보기 정도로만 해보았고, 리액트 위주로 공부하다가 리액트가 생각보다 나랑 잘 안맞는 것 같기도 하고... 백엔드를 접해보지도 않고 프론트로 길을 정한건 아닌가 싶었습니다. 또, 프론트를 하려면 백엔드에 대해 알고있어야 더욱 작업이 수월해질 것 같아 백엔드 쪽으로 방향을 틀던, 프론트를 하기 위한 백엔드 공부가 되던 우선 한번 경험해보려고 합니다 ! 공부 시작 ! node.js 란 ? 우선, 자바스크립트는 파이썬같은것과 달리 별다른 다운로드 없이 사용이 가능하다. 그 이유는 자바스크립트는 바로 브라우저에서 실행하기에 가능했던 것 이다. 즉, 컴퓨터에서 실행된게 아니라 브라우저에 인터프..

이번에 백, 프론트 함께 하는 프로젝트를 처음 해보면서 남이 해주던 "초기 설정" 을 처음으로 제가 해보게 되었습니다. 감사하게도 같은팀에 실력 좋으신 분이 저한테 한번 해보라며 도움을 주셔서 금방 해냈습니다..(울컥) 사실 이 초기설정이라는건 그때그때 다르겠지만, 그래도 저같은 왕초보를 위한..? 글.. 우선, cra / react-router-dom / axios / tailwindcss 이렇게 네가지를 다운받았습니다. 1. 프로젝트 생성 및 라우터 설치 -> 먼저 , create-react-app 으로 프로젝트를 생성한 뒤 cd 명령어로 해당 프로젝트로 이동해줬습니다. 그리고 이렇게 라우터 버전6 까지 설치해주면 cra , router 는 해결 ! 2. tailwind 적용 공식문서 라고 하면 뭔가..

하위 컴포넌트 변경하기 import {useState} from 'react'; export default function A() { const [value] = useState('아직 안바뀜'); return ( E 의 값을 바꾸기 ) } function B({ value }) { return ( 여긴 B ); } function C({ value }) { return ( 여긴 C ); } function D({ value }) { return ( 여긴 D ); } function E({ value }) { return ( 여긴 E {value} ); } A 에서 E 까지 쭉쭉 넘기고 넘기는 구조이다. 이렇게 {value} 값이 ‘아직 안바뀜’ 으로 잘 전달된걸 볼 수 있다. 이제 E의 값을 바꿀것이다..

const dummyDate = [ { id: 1, emotion: 1, content: "오늘의 일기 1번", date: 1687513053255, }, { id: 2, emotion: 2, content: "오늘의 일기 2번", date: 1687513053256, }, { id: 3, emotion: 3, content: "오늘의 일기 3번", date: 1687513053257, }, ]; 처음에 난 이런 배열을 diaryList로 다른 컴포넌트에 넘겨주어 작업을 하려고 하던 중이였다. const [data, dispatch] = useReducer(reducer, [dummyDate]); 이렇게 usdReducer 를 활용했다. useEffect(()=> { if (diaryList.length..