분류 전체보기

[CHAM] 기획

처음으로 리액트와 서버를 따로 관리하며 프로젝트를 기획했다. 기능들 위주로 홈페이지를 구성하려고 한다. 참 편한 쇼핑몰[CHAM] 간단한 쇼핑몰을 기획하려고 한다. 물건올리기, 구매 등 많은 기능이 들어가진 않을것 같다. 목표 리액트를 활용하는 만큼 재사용성을 항상 생각하며 코드를 짜려고 한다. 작은 부분이더라도 습관화들이면 리액트의 장점을 극한으로 활용할수 있을거 같았다. 기능 로그인, 회원가입 어드민 페이지(유저관리, 상품관리) 판매자 페이지(물건올리기, 판매금 정산) 상품 구매시 포인트 지급 쇼핑카트, 구매 상품 후기 등록 DB 데이터베이스도 기획을 하고 시작하려고 했지만 개발을 진행하면서 어짜피 컬럼값들을 추가하거나 삭제하는 경우가 생길거 같아 대략적으로 큰틀을 짜놓고 그때그때 필요한 부분을 만들..

[코딩테스트] 프로그래머스 문제 모음

1. 양꼬치 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(n, k) { k = k - Math.floor(n/10) return 12000*n + 2000*k } 2. 369게임 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(order) { return order.toString().split("").filter((el)=>el==3||el..

[React] express 서버와 연결하기

1. /front 폴더에 react 설치 2. /backend 폴더에 서버를 설치 const express = require("express"); const app = express(); const server = app.listen(8000, () => { console.log("server start"); }); 3. 데이터 주고 받기 (1) cors 보안정책 cors 보안정책 때문에 하나의 브라우저에서 다른 도메인/포트의 서버로 요청하면 에러가 나타난다. 프론트와 백 두개의 서버를 동시에 실행하려면 cors로 접근을 허용해 줘야 한다. 이와 같이 하는 이유는 해킹과 보안문제 때문이다. 누구나 접근할수 있다면 데이터 전송을 가로채 보안에 문제가 생김 const cors = require("cors")..

[React] middleware 쓰기(thunk)

1. 미들웨어를 사용해야 하는 이유 리덕스의 플로우차트 : UI -> Dispatch -> Action -> Store(Reducer)(state) -> UI 리덕스는 동기적으로 처리가 되는데 변경값이 있으면 바로 동작해서 API 같은 데이터를 불러올때 비동기 작업이 힘들다. API 데이터를 받은 이후에 작업을 해야하기 때문에 미들웨어를 사용해야 한다. 2. 미들웨어란 미들웨어는 양 쪽을 연결해주고 데이터를 주고 받을수 있도록 중간에서 매개 역할을 담당하는 소프트웨어다. 컴퓨터에 있는 프로세스들에게 어떤 서비스를 사용할수 있도록 연결해주는 소프트웨어를 말한다. 리덕스 미들웨어에는 saga, thunk 등이 있다. 그 중 thunk가 적용하기도 쉽고 많이 사용한다. 3. thunk thunk 참고 사이트 ..

[JS] var, let, const 차이

1. var var a; var b = 1 var a = 3 b = 3 var는 위와 같이 변수를 선언하거나 선언하면서 값을 할당할때 사용한다. var로 변수를 선언하고 또 var로 변수를 선언해도 오류가 나오지 않는다. 이는 코드가 길어질수록 오류가 어디서 나오는지 모르게되는 경우가 있을수 있다. 따라서 var를 지양하고 let과 const를 지향하자. 2. let let a; let a = 2 위와 같이 let으로 선언한 변수를 다시한번 let으로 선언하면 오류가 나온다. 이 부분 빼고는 var와 비슷하게 사용할수 있다고 생각하면 된다. 한번 선언하고 값을 계속 할당할수 있다. 3. const const a = 3 a = 2 위와 같이 const로 선언한 변수의 값을 재할당 하면 오류가 나온다. 이것..

[React] 게시판만들기(Redux)

GitHub - TeTedo/react_project Contribute to TeTedo/react_project development by creating an account on GitHub. github.com 기존 게시판에서 useState를 전부 Redux로 바꿨다. 기능도 추가했다. 수정하기, 삭제하기 기능 추가