본문 바로가기

전체 글350

React(39) 리액트 훅 - json-server 사용하여 통신하기 리액트 훅 영단어장을 만드는 실습 중이다. json-server 로 통신하여 영단어 데이터를 호출하여 사용해보자. Hoxy .... json-server 실행하는 방법을 모르신다면 ? 지난 포스팅을 참고해주세요. React(38) 리액트 훅 - json-server 로 RESTful API 만들기 리액트 실습 중이다. json-server 는 아주 짧은 시간에 REST API 를 구축해주는 라이브러리이다. REST API 서버의 기본적인 기능을 대부분 갖추고 있지만 프로덕션 전용은 아니다. 프로토타입을 만들거 devbirdfeet.tistory.com React(39) 리액트 훅 - json-server 사용하여 통신하기 화면에서 날짜별 버튼이 나오고, 그 버튼을 누르면 해당 날짜에 암기해야할 영단어가 .. 2021. 8. 25.
Vue(13) 동적라우팅으로 상세페이지 vuex 로 구현하기 메뉴들을 클릭할 때, 라우터를 통해 각각의 컴포넌트 상세페이지로 넘어가는 것이 아니라 컴포넌트 없이 동적라우팅을 통해 상세 페이지로 넘어가는 기능을 구현해보자. Vue(14) 동적라우팅으로 상세페이지 vuex 로 구현하기 src/api/index.js 일단 Api를 불러와 상세페이지를 보여줄 통신 메소드를 정의해보자. import axios from "axios"; function showMenuDetailApi(menuid) { // 매개변수로 menuId를 받는다. const BASE_URL = `http://________/menu/${menuid}`; return axios.get(BASE_URL); } export { showMenuDetailApi }; src/router/index.js 통신.. 2021. 8. 24.
SSH 란 실무에서 개발환경을 세팅할 때마다 SSH 접속을 위한 세팅을 해주는 과정을 거친다. 그래서 튜토리얼을 따라 세팅하면서도 내가 하는 세팅이 뭔지를 잘 몰라 답답하기도 하고 궁금하기도 하였다. 항상 답답함의 연속이지만 한걸음 한걸음 걸음마하다보면 쌓이지 않을까 기대해본다. ㅠㅠ 자 그럼 SSH 가 무엇인지 자세히 살펴보자. SSH(Secure Shell) 란 SSH는 원격 호스트에 접속하기 위해 사용되는 보안 프로토콜이다. 원래는 쉘에 원격으로 접속 하려면 ‘텔넷(Telnet)' 을 사용했는데, 암호화를 되지않아 보안상 취약했다. 실제로 패킷 분석 프로그램으로 원격 접속 과정에서 옮겨지는 비밀번호나 파일 내용 등의 데이터를 쉽게 탈취할 수 있다. 그래서 여기에 암호화 기능을 추가하여 1995년에 나온 프로토.. 2021. 8. 23.
Docker(2) Docker-compose 란 (기본 명령어 & docker-compose.yml) 실무에서는 도커를 사용하여 애플리케이션을 개발한다. 처음 접해보는 스택이지만 한 걸음 한 걸음 배워나가보자. 도커를 사용하는 이유는 개발할 때 누구나 동일한 환경 구성을 할 수 있다는 점이다. 사용자마다 서버마다 환경이 다르기 때문에 도커로 같은 실행 환경으로 만들 수 있다. docker-compose 란 보통은 여러 애플리케이션이 서로 의존성 있게 구성되어 시스템이 이뤄져 있다. 그래서 하나의 컨테이너가 하나의 애플리케이션을 담당하기 때문에 여러 개의 컨테이너가 필요하다. 도커 컴포즈(Docker Compose)는 yaml 포맷으로 작성되고, 여러 컨테이너들을 한 번에 관리를 할 수있게 도와주는 역할을 한다. docker-compose.yml docker-compose.yml은 장황한 도커 실행 옵션을.. 2021. 8. 22.
React - json-server 실행오류 net::ERR_CONNECTION_REFUSED 리액트 실습 중, 백엔드에서 api 를 받을 수 없기 때문에 json-server 를 설치하였다. 하지만 연결이 되지 않아 한시간을 해매였다. 에러메시지의 내용은 다음과 같다. ㅠㅠ net::ERR_CONNECTION_REFUSED React - json-server 실행오류 net::ERR_CONNECTION_REFUSED 문제상황 '토익 영단어' 라는 타이틀 바로 아래에는 api 로 받아온 버튼들이 들어가야 한다. 하지만 아무 내용이 없다. 개발자 도구 - 네트워크 탭을 확인하여보니 error 가 떠있었다. 즉, json-server 자체를 아예 받지 못한다. 그래서 이번에는 json 서버 url 로 직접 접속해보았다. 하지만 사이트에 연결 할 수 없다는 메시지만 뜬다. (서버자체의 연결이 안 되어있.. 2021. 8. 21.
React(38) 리액트 훅 - json-server 로 RESTful API 만들기 리액트 실습 중이다. json-server 는 아주 짧은 시간에 REST API 를 구축해주는 라이브러리이다. REST API 서버의 기본적인 기능을 대부분 갖추고 있지만 프로덕션 전용은 아니다. 프로토타입을 만들거나, 지금처럼 공부를 위하여 서버가 필요할때에 사용하면 아주 적당한 도구이다. RESTful API는 무엇일가? 개념이 궁금하다면 ↓↓↓ 클릭 https://devbirdfeet.tistory.com/350 json-server 사용하기 준비물은 json 파일이다. 프로젝트 내의 디렉토리에 만들어줬다. 그럼 시작해보자. 1. 터미널에서 아래 명령어로 설치하기 npm install -g json-server 2. 설치했으니 실행시켜주자. json 파일 경로와 포트# 도 넣자. json-serve.. 2021. 8. 20.
반응형

티스토리툴바