티스토리

차근차근차범근

검색하기

블로그 홈

차근차근차범근

qkrsh.tistory.com/m

차근차근차범근

구독자: 0

방명록 방문하기

주요 글 목록

[Git & Github] 제일 먼저 로컬에서의 형상관리에 대해 알아보자. 로컬 프로젝트 폴더의 위치에서 "git init"을 실행해준다. 이를 통해 그 프로젝트에서 git을 실행한 것이다. 이 폴더의 변경사항들을 저장하기 위해선 "git add ."을 실행해준다. 이 변경사항들의 모든 상태를 저장하기 위해선 "git commit -m "ex)버전이름""을 실행해준다. 여기까지가 로컬에서의 형상관리이다. 이를 github라는 서버에 저장하기 위해서 push를 해줘야 한다. 명령어는 "git push origin main" 이다. 이렇게 되면 commit된 상태가 서버에 그대로 저장이 된다. 이제 서버에 올려진 버전을 다른 사람 혹은 내 다른 기기에서 받고 싶다면 clone을 해주면 된다. 명령어는 "git clone 주소"이다. .. 공감수 0 댓글수 0 2022. 8. 23.
[MERN stack] 여행 사이트 몽고 DB와 Express 그리고 Node.js를 활용해보기 위해서 여행 사이트를 제작해보았다. 내가 제작한 사이트의 완성본은 다음과 같다. 메인 페이지와 업로드 페이지만을 제작하였다. 그럼 먼저 업로드 페이지 제작 과정을 살펴보자. 제일 먼저 Route를 사용해준다. Route를 통해 페이지 간의 이동을 손 쉽게 제어해준다. function App() { return ( ); } login과 register는 boiler-plate에서 제공하는 로그인과 가입 기능이다. 내가 추가한 부분은 product/upload부분으로 UploadProductPage.js에 접근이 가능하게 해준다. 이제 본격적으로 업로드 페이지 구조에 대해 알아보자. return ( 여행 상품 업로드 {/* DropZone */} .. 공감수 0 댓글수 0 2022. 8. 22.
[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.. 공감수 0 댓글수 0 2022. 8. 4.
[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 폴더에서.. 공감수 0 댓글수 0 2022. 7. 21.
[React] UseEffect UseEffect는 React Hooks 중에서 가장 중요한 hook이다. UseEffect는 컴포넌트가 Mount, Update, Unmount 될 때 특정 작업을 실행하고 싶을 때 사용된다. UseEffect는 2가지 형태가 있다. 첫번째는 콜백함수만 존재하고 두번째는 배열을 두번째 인자로 받는다. 이 배열은 Deffendency Array라고 불린다. 배열이 없는 첫번째 형태는 그 컴포넌트가 렌더링 될때마다 실행된다. 두번째 형태는 컴포넌트가 화면에 첫 렌더링 될때 실행되고 value 배열이 바뀔 때만 실행된다. 첫번째 형태는 말 그대로 그 컴포넌트가 렌더링 될때마다 실행된다고 생각하면 된다. 두번째 형태의 경우는 한가지가 더 설명할 부분이 있는데 바로 배열이 비어있을 때이다. 배열이 비워져있을 경.. 공감수 0 댓글수 0 2022. 7. 19.
[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.. 공감수 0 댓글수 0 2022. 7. 13.
[REACT]creat-react-app npx create-react-app 최근에는 'npx create-react-app '이라는 명령어로 쉽게 설치가 가능하다. 그 이전에는 이와 달리 하나하나 설치를 해줬어야 했는데 예전의 설치 과정을 보면서 creact-react-app이 무엇을 설치하고 무엇을 의미하는지 알아보자. 현재의 creact-react-app에는 webpack과 babel이라는 모듈이 포함되어 있다. 먼저 WebPack은 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리이다. 웹팩을 쓰는 이유는 다음과 같다. 1. 여러 파일의 자바스크립트 코드를 압축하여 최적화 할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄인다. 2. 모듈 단위로 개발이 가능.. 공감수 0 댓글수 0 2022. 7. 13.
[프로그래머스] 신고 결과 받기 https://school.programmers.co.kr/learn/courses/30/lessons/92334?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 프로그래머스의 신고 결과 받기 문제이다. 문제 설명 신입사원 무지는 게시판 불량 이용자를 신고하고 처리 결과를 메일로 발송하는 시스템을 개발하려 합니다. 무지가 개발하려는 시스템은 다음과 같습니다. 각 유저는 한 번에 한 명의 유저를 신고할 수 있습니다. 신고 횟수에 제한은 없습니다. 서로 다른 유저를 계속해서 신고할 수 있습니다. 한 유저를 여러 번 신고할 수.. 공감수 0 댓글수 0 2022. 7. 12.
[REDUX]Redux Redux는 상태 관리 라이브러리이다. 영문 그대로 말하면 'Redux is a predictable state container for javascript apps.' 그래서 여기서 말하는 상태(state)가 뭘까? 리엑트의 개념을 알고 있다면 Props와 State에 대해 잘 알고 있을 것이다. 먼저 Props는 property의 줄임말이다. 이 props는 컴포넌트간의 데이터를 교환할 때 사용된다. 또 부모 컴포너트에서 자식 컨포넘트로만 보낼수 있다는 특징이 있다. 그리고 부모 컴포넌트로 받은 데이터는 자식 컴포넌트에서 수정이 불가능하다. State는 부모 컴포넌트에서 자식 컴포넌트를 주는게 아니라 컴포넌트 자체에서 데이터 변화를 반영할 때 쓰인다. 예를 들면 웹 페이지에서 점수를 주는 컴포넌트가 .. 공감수 0 댓글수 0 2022. 7. 8.
[Node.JS]NPM & NPX 이번엔 npm과 npx에 대해 알아보자. 리엑트를 써본 사람이라면 모두 npm create-react-app 명령어를 사용했을 것이다. 이 명령어는 웹팩과 바벨의 환경을 설치해주는 것이다. 그러면 여기서 npx와 npm은 무엇일까. 먼저 npm은 node package manager의 줄임말이다. npm의 첫번 째 역할은 레지스트리라는 저장소이다. 이런식으로 다운 받은 라이브러리를 담고 있는 곳이 레지스트리라는 곳이다. npm install ***를 하면 모두 local인 레지스트리에 저장이 된다. npm install *** -g는 컴퓨터 안의 bin이나 다른 폴더 등 글로벌적으로 다운받아 지는 것이다. 그리고 어플리케이션을 켜거나 배포를 할 때 파일을 빌드하는 역할을 한다. 그러면 npx는 무엇일까?.. 공감수 0 댓글수 0 2022. 7. 7.
[REACT]프로젝트 환경 구축 프로젝트를 시작하기 전에 Node 환경, Mongo DB, 로그인 기능 등의 환경을 구축해두었다. 이제 본격적으로 React를 학습할 차례이다. 먼저 리액트란 모두 알다시피 JS 라이브러리이다. 가장 큰 특징은 재사용성이다. 그 이유는 컴포넌트로 이루어져 있기 때문이다. 다음 특징으로는 Virtual DOM이다. 먼저 Real DOM은 만약 여러개의 리스트가 있을 때 하나의 리스트만 업데이트가 되어도 새로 Reload해야된다. 반면에 Virtual DOM은 그 바뀐 한가지 리스트만 DOM에서 바꿔준다. 그렇게 될 수 있는건 구조 때문이다. 먼저 리액트는 JSX를 렌더링 한다. 이 과정에서 Virtual DOM이 update가 된다. Virtual DOM은 이전 버전을 찍어둔 snap shot을 가지고 있.. 공감수 0 댓글수 0 2022. 7. 7.
[REACT]React state 컴포넌트의 입력은 props이고 이 props를 컴포넌트의 함수 처리 하여 return값이 새로운 UI가 된다. 이때 함수를 다시 실행하여 새로운 return을 만들어주는 데이터는 바로 state이다. state를 사용하는 경우는 어떠한 변화나 이벤트가 생기면 함수를 다시 실행하여 새로운 값을 출력해주는 것이다. 먼저 state를 사용하기 위해선 import {userState, useState} from 'react'; 를 추가해준다. 그럼 바로 예시를 살펴보자. 우리가 하고 싶은 것은 아래처럼 Header 컴포넌트인 WEB을 클릭하면 Article에서 'WELCOME'을 나타내거나 nav를 선택했을 시에 그에 맞는 문장이 Article에 나오게 하고 싶은 것이다. 그러기 위해선 상태를 나타내는 변수를.. 공감수 0 댓글수 0 2022. 6. 24.
[REACT]React 컴포넌트와 속성 컴포넌트 컴포넌트는 React의 핵심으로 초기 글에서 말했듯이 사용자 지정 태그이다. Header, Nav, Article이 App에서 사용된 컴포넌트라고 할 수 있다. 이렇게 함수형식으로 만들어져 태그형식으로 사용된다. 이 컴포넌트를 직접 만들어 사용하거나 다른 사람들이 만든 컴포넌트를 사용할 수 있다. Props Prop은 컴포넌트의 속성을 말한다. 각 컴포넌트의 속성을 주기 위해선 먼저 위처럼 title, topics, body처럼 값을 정해준다. 그 후 각 컴포넌트 함수에서 그 값들을 어떻게 사용할 건지 지정해준다. 각 함수들의 props가 다양하게 사용되는 것을 확인할 수 있다. (괄호를 하면 문자 그대로 인식하지 않아서 props를 사용할 때 {}를 사용한다.) 공감수 0 댓글수 0 2022. 6. 24.
[REACT]React의 구조와 수정 & 배포 React의 구조를 살펴보자. 제일 먼저 src폴더의 index.js를 보면 이라는 태그가 있다. 이 ./App은 App.js라는 파일에서 import 했음을 위에서 확인할 수 있다. 그렇다면 이 ./App은 무슨 역할을 하는 것인지 App.js 파일을 확인해보자. App.js를 보면 알 수 있듯이 이 App이라는 Function는 html 구조를 가진 것을 알 수 있다. 그 함수안에서의 return 값이 index.js를 통해 사용자에게 보여지고 있는 것이다. 정리해보면 index.js는 웹의 입구이자 여러가지 전역적인 설정이 포함된다. 그리고 App.js의 수정을 통해 내용,UI를 편집할 수 있다. 그렇다면 화면 관리자모드에서 보이는 id가 root인 div는 무엇일까? Index.js에서 확인할 수.. 공감수 0 댓글수 0 2022. 6. 23.
[REACT]React의 본질과 개발 환경 구축 React의 본질은 무엇일까? 본질이라는 말이 거창하지만 간단히 말하면 코드의 Grouping이라고 생각한다. 복잡한 코드 내용을 사용자 정의 태그를 통해서 간단히 사용, 재사용하는 것이다. React를 사용하는 방법은 Class와 Function이 있는데 최근에는 Function이 주를 이뤄서 나도 Function으로 사용할 예정. 이제 React 환경을 구축해보자. React 환경을 구축하기 위해서 node.js가 필요하다. 그 후에 VSC에서 React를 활용할 폴더를 열어준다. Terminal에서 ‘npx create-react-app 현재폴더’를 해주면 그 폴더에 React 환경이 설치된다. npm에서 사용가능한 언어가 나온다. 그 후 'npm start'를 명령해주면 React 개발 환경이 구.. 공감수 0 댓글수 0 2022. 6. 23.
개발자가 되기 위해 차근차근 길고 길었던 3-1 학기가 끝나고 드디어 종강을 했다. 팀플도 많고 과제도 많아서 생각보다 많이 버거웠다. 이제는 방학이니까 내가 정말 하고 싶었던 공부와 운동에 최선을 다해야지.(계절학기 듣는건 비밀_) 내가 계획한 공부 방법은 다음과 같다. 먼저 코테 준비는 꾸준히 하루에 2시간정도 소요될 예정이고 7월 한달간은 강의를 들을 예정이다. 아직 나 혼자 서비스를 구현하지 못한다는게 창피하지만 어쩔수 있나 그게 내 과거인데~~ 이번 방학에 크게 발전해야지!! React와 Redux를 공부하고 React 기반의 클론코딩, 웹 사이트 구현을 할 예정이다. 가능하다면 Firebase를 이용한 채팅도 구현해 볼 것이다. 그 후 React와 Node.js를 통한 NodeBird SNS를 구현할 것이다. 한달동안 무.. 공감수 0 댓글수 0 2022. 6. 22.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.