전체 글117 [React] 로그인 페이지 개발 알림 본 포스팅은 공부 목적으로 작성된 글이며 상업적 목적으로 절대 사용되지 않았음을 밝힙니다. App.js 화면에 보여지는 곳입니다. path="/ ~ "는 뒤에 붙은 텍스트를 치면, 지정해준 component로 이동하는 것입니다. 예를 들어, localhost:3000을 접속하면 가장 먼저 뜨는 시작 페이지(LandingPage)는 App.js에서도 보시는 바와 같이, path에 아무것도 값이 입력되어 있지 않기 때문에 localhost:3000으로 접속하면 가장 먼저 보이는 화면인 것을 알 수 있습니다. 밑에는 path='/login'을 입력해줬기 때문에, localhost:3000/login을 입력하면 LoginPage로 가도록 component를 지정해준 것을 확인하실 수 있습니다. 이처럼요. 2021. 7. 31. [React] React 복습 2 알림 본 포스팅은 공부 목적으로 작성된 글이며 상업적 목적으로 절대 사용되지 않았음을 밝힙니다. And Design https://ant.design/ Ant Design - The world's second most popular React UI framework ant.design 설치 방법은 아래와 같습니다. 1. 리액트 클라이언트에서 npm install antd --save를 통해 설치 2. clinet > index.js에서 import 추가 Redux: predictable state container for JavaScript apps의 약자로 상태 관리 라이브러리를 의미한다. 리액트에선 Props와 State 두 개가 있다. 설치 받아야 할 것들 1. redux 2. react-redux.. 2021. 7. 30. [React] React 복습 알림 본 포스팅은 공부 목적으로 작성된 글이며 상업적 목적으로 절대 사용되지 않았음을 밝힙니다. NPM과 NPX 차이 NPM(Node Package Manager) 1. 레지스트리 저장소 역할 레지스트리란? 라이브러리를 담고 있는 곳이다. 2. npm run start, npm run build 등 npm 관련된 건 package.json에 정의되어 있다. react에서 root 자리? root가 오는 자리를 보면, 보시다시피 index.html의 root와 index.js의 getElementById('root') 위치가 같아야 합니다. 폴더 의미 및 기능: src 폴더 1. actions, reducers 2. components 2-1. LandingPage: 첫 페이지 2-2. LoginPage:.. 2021. 7. 29. [Node.js] Node.js 복습 2 알림 본 포스팅은 공부 목적으로 작성된 글이며 상업적 목적으로 절대 사용되지 않았음을 밝힙니다. 회원가입 하기 app.post('/api/users/register', (req, res) => { // 회원 가입 할 때 필요한 정보들을 client에서 가져오면 그것들을 데이터 베이스에 넣어줌 const user = new User(req.body); user.save((err, userInfo) => { if (err) return res.json({success : false, err}) return res.status(200).json({ success : true }) }) }) 이메일은 test@naver.com, 비밀번호는 1234567로 회원가입을 진행했습니다. 비밀번호 암호화 npm inst.. 2021. 7. 29. [Node.js] Node.js 설치 및 환경 세팅 + 복습 알림 본 포스팅은 공부 목적으로 작성된 글이며 상업적 목적으로 절대 사용되지 않았음을 밝힙니다. Node js 설치 만약 본인이 이전에 설치를 했으면 또 설치를 할 필요가 없겠죠? 기억이 가물가물하면 터미널 창에 node -v를 입력해 주시면 됩니다 node -v # 버전 확인 저 같은 경우에는 설치한 적이 있어서 저렇게 버전이 뜨는 것을 확인할 수 있었습니다. 모델은 스키마를 감싸고 있고, 스키마는 문자열, 길이 등 정해주는 역할을 합니다. const userSchema = mongoose.Schema({ name: { type: String, maxlength: 50 }, email: { type: String, trim: true, // 스페이스바를 없애주는 역할 unique: 1 // 같은 이메일.. 2021. 7. 27. [JavaScript] 워크아웃 리스트 개발(투 두 리스트 응용) 프로젝트 개요 오늘은 제가 많이 부족하다 느끼는 것들 중에 하나가 바로 투두리스트라고 생각합니다. 제가 유료로 듣는 자바스크립트 강의 중에 마침 드림코딩의 엘리 선생님의 리스트 작성 내용이 있길래 바로 수강하였고, 직접 해 보는 시간을 가지며 블로그와 깃허브에 올리게 됐습니다. 프로젝트 URL 깃허브 URL https://github.com/BaikSeungJeon/study-todolist2 GitHub - BaikSeungJeon/study-todolist2: [공부] Todo List 개발(부제: 워크아웃 기록)(재업) [공부] Todo List 개발(부제: 워크아웃 기록)(재업). Contribute to BaikSeungJeon/study-todolist2 development by creati.. 2021. 7. 25. 이전 1 ··· 14 15 16 17 18 19 20 다음
