전체 글 썸네일형 리스트형 [Git & Github] 제일 먼저 로컬에서의 형상관리에 대해 알아보자. 로컬 프로젝트 폴더의 위치에서 "git init"을 실행해준다. 이를 통해 그 프로젝트에서 git을 실행한 것이다. 이 폴더의 변경사항들을 저장하기 위해선 "git add ."을 실행해준다. 이 변경사항들의 모든 상태를 저장하기 위해선 "git commit -m "ex)버전이름""을 실행해준다. 여기까지가 로컬에서의 형상관리이다. 이를 github라는 서버에 저장하기 위해서 push를 해줘야 한다. 명령어는 "git push origin main" 이다. 이렇게 되면 commit된 상태가 서버에 그대로 저장이 된다. 이제 서버에 올려진 버전을 다른 사람 혹은 내 다른 기기에서 받고 싶다면 clone을 해주면 된다. 명령어는 "git clone 주소"이다. .. 더보기 [MERN stack] 여행 사이트 몽고 DB와 Express 그리고 Node.js를 활용해보기 위해서 여행 사이트를 제작해보았다. 내가 제작한 사이트의 완성본은 다음과 같다. 메인 페이지와 업로드 페이지만을 제작하였다. 그럼 먼저 업로드 페이지 제작 과정을 살펴보자. 제일 먼저 Route를 사용해준다. Route를 통해 페이지 간의 이동을 손 쉽게 제어해준다. function App() { return ( ); } login과 register는 boiler-plate에서 제공하는 로그인과 가입 기능이다. 내가 추가한 부분은 product/upload부분으로 UploadProductPage.js에 접근이 가능하게 해준다. 이제 본격적으로 업로드 페이지 구조에 대해 알아보자. return ( 여행 상품 업로드 {/* DropZone */} .. 더보기 [Netflix clone coding] 넷플릭스 첫 화면을 리엑트와 The movie db api를 사용하여 만들었다. 제일 먼저 내 프로젝트 폴더에서 create-react-app을 해준다. 그 후 The movie DB API의 key를 생성한다. The movie DB 사이트에서 로그인 후 복사해준다. (https://www.themoviedb.org/?language=ko) 이 API를 인스턴스화하기 위하여 api라는 폴더를 프로젝트 내에 생성해주고 그 안에 axios.js, requests,js파일을 만든다. import axios from "axios"; const instance = axios.create({ baseURL: "https://api.themoviedb.org/3", params:{ api_key: process.e.. 더보기 [React] React Router Dom React Router Dom이란? React Router Dom을 사용하면 웹 앱에서 동적 라우팅을 구현할 수 있다 라우팅이 실행중인 앱 외부의 구성에서 처리되는 기존 라우팅 아키텍쳐와 달리 React Router Dom은 앱 및 플랫폼의 요구 사항에 따라 컴포넌트 기반 라우팅을 용이하게 한다. Single Page Application (SPA) 리액트는 SPA이기 떄문에 하나의 index.html 파일을 가지고 있다. 이 하나의 템플릿에 자바스크립트를 이용해서 다른 컴포넌트들이 index.htrml 템플릿에 넣으므로 페이지를 변경하게 된다. 이때 이 React Router Dom 라이브러리가 새 컴포넌트로 라우팅/탐색을 하고 렌더링하는데 도움을 준다. React Router 설정하기 src 폴더에서.. 더보기 [React] UseEffect UseEffect는 React Hooks 중에서 가장 중요한 hook이다. UseEffect는 컴포넌트가 Mount, Update, Unmount 될 때 특정 작업을 실행하고 싶을 때 사용된다. UseEffect는 2가지 형태가 있다. 첫번째는 콜백함수만 존재하고 두번째는 배열을 두번째 인자로 받는다. 이 배열은 Deffendency Array라고 불린다. 배열이 없는 첫번째 형태는 그 컴포넌트가 렌더링 될때마다 실행된다. 두번째 형태는 컴포넌트가 화면에 첫 렌더링 될때 실행되고 value 배열이 바뀔 때만 실행된다. 첫번째 형태는 말 그대로 그 컴포넌트가 렌더링 될때마다 실행된다고 생각하면 된다. 두번째 형태의 경우는 한가지가 더 설명할 부분이 있는데 바로 배열이 비어있을 때이다. 배열이 비워져있을 경.. 더보기 [React] ToDo-List React를 이용한 ToDo List를 만들었다. 전체 코드 (App.js) import React, {Component} from "react"; import "./App.css"; export default class App extends Component{ state = { todoData:[ ], value:"" } btnStyle={ color:"#fff", border: "none", padding:"5px 9px", borderRadius: "50%", cursor: "pointer", float:"right" } getStyle = (completed)=>{ return{ padding:"10px", borderBottom:"1px #ccc dotted", textDecoration: co.. 더보기 [REACT]creat-react-app npx create-react-app 최근에는 'npx create-react-app '이라는 명령어로 쉽게 설치가 가능하다. 그 이전에는 이와 달리 하나하나 설치를 해줬어야 했는데 예전의 설치 과정을 보면서 creact-react-app이 무엇을 설치하고 무엇을 의미하는지 알아보자. 현재의 creact-react-app에는 webpack과 babel이라는 모듈이 포함되어 있다. 먼저 WebPack은 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리이다. 웹팩을 쓰는 이유는 다음과 같다. 1. 여러 파일의 자바스크립트 코드를 압축하여 최적화 할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄인다. 2. 모듈 단위로 개발이 가능.. 더보기 [프로그래머스] 신고 결과 받기 https://school.programmers.co.kr/learn/courses/30/lessons/92334?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 프로그래머스의 신고 결과 받기 문제이다. 문제 설명 신입사원 무지는 게시판 불량 이용자를 신고하고 처리 결과를 메일로 발송하는 시스템을 개발하려 합니다. 무지가 개발하려는 시스템은 다음과 같습니다. 각 유저는 한 번에 한 명의 유저를 신고할 수 있습니다. 신고 횟수에 제한은 없습니다. 서로 다른 유저를 계속해서 신고할 수 있습니다. 한 유저를 여러 번 신고할 수.. 더보기 이전 1 2 다음
