프로그래밍 삽질 중

* 모던 자바스크립트 핵심 가이드(저자 알베르토 몬탈레시, 옮김 임지순/권영재) 복습 * 핵심 부분과 필요할 경우 문제도 수정해서 기재할 것 * 문제될 경우 삭제할 것 ○ 디스트럭처링 특징 1 - 배열의 값 또는 객체의 속성을 풀어서 별개의 변수로 쓸 수 있게 해주는 자바스크립트 표현식 - Sanrio가 가진 속성에 접근함과 동시에 속성의 이름, 년도에 변수 선언이 가능해짐 //기존 객체에서 변수 생성 시 const Sanrio = { name: "hello kitty", year: 1974, } const name = Sanrio.name; const year = Sanrio.year; console.log(name, year); //"hello kitty" 1974 //디스트럭처링으로 객체에서 변수 ..

* 모던 자바스크립트 핵심 가이드(저자 알베르토 몬탈레시, 옮김 임지순/권영재) 복습 * 핵심 부분과 필요할 경우 문제도 수정해서 기재할 것 * 문제될 경우 삭제할 것 ○ indexOf() - 문자열에서 지정된 값이 처음 나타나는 위치 반환 ○ slice() - 문자열의 지정된 부분을 새 문자열로 반환 ○ toUpperCase / toLowerCase() - 문자열의 모든 문자를 대문자/소문자로 바꿈 //indexOf const sentence = "The United States has 50 states and 1 special ward." console.log(sentence.indexOf('states')); //25 //slice const HarryPotter = ["Harry", "Hermio..

* 현재 진행상황 - 프로젝트에 CRUD만 만든 상황 - fetch로 로그인 했으나 auth로 로그인 및 react로 로그인 화면을 만드는 것이 중요하다고 판단 - node.js 화면단을 ejs로 만들었으나 react에서 js로 만들 예정 - 참고 강의 : 따라하면서 배우는 노드, 리액트(로그인 부분) [로그아웃 만들기 - client 부분] 1. LandingPage에서 '로그아웃'버튼 만들기 2. 구글 크롬에서 확인하기 3. 로그인 -> 처음 페이지('localhost:3000/') -> 로그아웃 버튼 누르고 로그인 페이지로 이동하기 1. LandingPage에서 '로그아웃'버튼 만들기 import React, { useEffect } from "react"; import axios from "axi..

* 현재 진행상황 - 프로젝트에 CRUD만 만든 상황 - fetch로 로그인 했으나 auth로 로그인 및 react로 로그인 화면을 만드는 것이 중요하다고 판단 - node.js 화면단을 ejs로 만들었으나 react에서 js로 만들 예정 - 참고 강의 : 따라하면서 배우는 노드, 리액트(로그인 부분) [회원가입 만들기 - client 부분] * 로그인과 비슷한 부분이 많음 1. RegisterPage.js에서 코드 작성하기 2. _actions, _reducer에 각각 자료 생성하기 3. 구글 크롬에서 확인하기 4. 회원가입 완료되면 로그인 페이지 -> 처음 페이지('localhost:3000/')로 이동하기 1. RegisterPage.js에서 코드 작성하기 import React, { useStat..

* 현재 진행상황 - 프로젝트에 CRUD만 만든 상황 - fetch로 로그인 했으나 auth로 로그인 및 react로 로그인 화면을 만드는 것이 중요하다고 판단 - node.js 화면단을 ejs로 만들었으나 react에서 js로 만들 예정 - 참고 강의 : 따라하면서 배우는 노드, 리액트(로그인 부분) REDUX , REACT 설명 더보기 redux - 상태관리 라이브러리 - 리덕스 스토어(메소드 이용)에 저장 시 정보소통(state)이 원활해짐 - props 1. property의 줄임말 2. 컴포넌트간에 뭔가를 주고 받을 때 사용 3. 위에서 아래로(부모 -> 자식) 전달 4. 전달 시 값이 변하지 않음 - state 1. 컴포넌트 안에서 데이터 교환, 전달 2. 값이 변할 때 리랜더링 됨 redux..

* 인프런의 "따라하며 배우는 노드, 리액트 시리즈 - 기본 강의" 내용 중 정리 * 오류를 따로 정리하는 페이지(컴퓨터 설정&오류)가 있으나 강의와 직접적인 오류라 생각해 이 곳에 정리 * 문제 원인 : dep_webpack_dev_server_on_after_setup_middleware] deprecationwarning: 'onaftersetupmiddleware' option is deprecated. please use the 'setupmiddlewares' option. - 상황 : server 포트를 5000, client 포트를 3000으로 진행할 경우 이를 연결할 "Proxy"를 설치해야하는데 인프런 강의대로 코드 작성 시 위와 같은 오류 발생 * 오류 내용 : middleware를 ..

* 모던 자바스크립트 핵심 가이드(저자 알베르토 몬탈레시, 옮김 임지순/권영재) 복습 * 핵심 부분과 필요할 경우 문제도 수정해서 기재할 것 * 문제될 경우 삭제할 것 ○ 문자열 삽입 -> + 로 따로 분리해서 삽입하던 것을 ``(백틱)을 이용해 쉽게 작성 //이전 방식 var name = "anna"; var greeting = "안녕하세요 제 이름은 " + name + "입니다."; console.log(greeting) //"안녕하세요 제 이름은 anna입니다." //백틱 방식 var name2 = "john"; var greeting2 = `안녕하세요 제 이름은 ${name2}입니다.` console.log(greeting2) //"안녕하세요 제 이름은 john입니다." ○ 표현식 삽입 //이전 ..

* 현재 진행상황 - 프로젝트에 CRUD만 만든 상황 - fetch로 로그인 했으나 auth로 로그인 및 react로 로그인 화면을 만드는 것이 중요하다고 판단 - node.js 화면단을 ejs로 만들었으나 react에서 js로 만들 예정 - 참고 강의 : 따라하면서 배우는 노드, 리액트(로그인 부분) [인증 기능 만들기 - server 부분] 1. index.js에 router 만들기 2. auth.ctrl.js에서 기능만들기 - 로그아웃 기능 3. postman에서 확인하기 ○ 1. index.js에 router 만들기 const express = require("express"); const router = express.Router(); const authCtrl = require("./auth...