본문 바로가기

분류 전체보기346

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.
React(37) 리액트 훅 - 토글버튼 + 체크박스 구현하기 리액트 훅으로 영단어 프로그램을 구현하는 중이다. 오늘 실습해볼 내용들은 토글 버튼과 체크박스를 구현하는 것이다. 토글 기능으로 '뜻보기' 라는 버튼을 누르면 단어의 뜻이 나오고, '뜻숨기기' 라는 버튼을 누르면 단어가 감춰진다. 또한 체크박스 기능으로 다 외운 영단어를 체크박스에 표시하면 그 단어가 비활성화 된다. 스포일러 1. 토글버튼 구현 '뜻 보기' 버튼을 누르면 pencil 의 뜻인 '연필' 이 나오고 '뜻 숨기기' 버튼을 누르면 뜻이 감춰진다. 2. 체크박스 구현 외운 단어에 체크하면 단어가 비활성화 된다. **토글이란 하나의 설정 값으로부터 다른 값으로 전환하는 것이다. 토글이라는 용어는 오직 두 가지 상태 밖에 없는 상황에서, 스위치를 한번 누르면 한 값이 되고, 다시 한번 누르면 다른 값.. 2021. 8. 19.
Docker(1) Docker(도커) 란 Docker 기반으로 개발환경 세팅 중이다. 백엔드에서 많이 사용하는 기술이라고 막연히 생각만하다 막상 접해보니, 프론트에서 도커의 도움을 받아야 더 효율적인 개발이 가능하다는 것을 깨달았다. Docker 란 무엇인지 자세히 알아보자. Docker (도커) 란 도커란, 컨테이너 기반의 오픈소스 가상화 플랫폼이다. 한마디로 배에 컨테이너를 실어 쉽게 옮기듯이, 어플리케이션을 컨테이너에 담아 여러 서버에 쉽게 배포한다. (시스템 도구, 코드, 런타임 등 실행에 필요한 모든 게 포함되있다.) 1. 이미지 이미지는 컨테이너 실행에 필요한 파일과 설정 값 등 모든 정보를 가지고 있다. 새로운 서버가 추가되면 미리 만들어 놓은 이미지를 다운받아 컨테이너만 생성하면 된다. ‘도커파일’ 안에 가상화 할 프로그램들을 넣.. 2021. 8. 18.
React(36) 리액트 훅 - 동적라우팅으로 페이지 이동 리액트를 사용하여 다이나믹 라우팅(Dynamic Routing) 을 구현하여 페이지를 동적으로 이동해보자. 스포일러 Day1 이라는 버튼을 클릭하면 상세페이지로 이동한다. 이때 url 을 살펴보면 day/1로 변한다. (Day2 를 누르면 day/2 로 변할 것이다.) React(36) 리액트 훅 - 동적라우팅으로 페이지 이동 라우터 설치하기 터미널에 아래 명령어로 리액트 라우터를 설치하기 npm install react-router-dom 컴포넌트 구조 - component 안에는 Days.js / DayList.js / Header.js 컴포넌트들이 들어있다. - db 안에는 data.json 이라는 객체 데이터가 들어있다. ( api역할 ) - App.js 는 최상위 컴포넌트이다. App.js 여기.. 2021. 8. 17.
Vue(12) Vuex 란 (Vuex 설치하기) Vue.js 를 통해 수많은 변수를 만들고 로직들을 관리하며 프로젝트를 구성해나가다 보면 변수들을 어떻게 관리하느냐가 프로젝트의 효율성을 높이는 중점이 된다. 변수에는, 컴포넌트 내에서만 쓰이는 변수(지역변수)와 전체적으로 공용되는 변수(전역변수)가 있다. 전역 변수의 경우, 컴포넌트마다 일일이 선언해서 사용한다면 중복이 많아지고 자원의 낭비도 심할 것이다. 그래서 Vuex 와 같은 전역변수를 한곳에 모아 한방에 관리해주는 라이브러리를 사용한다. Vuex 란 Vuex는 Vue에서 사용하는 ‘상태 관리 패턴’ 라이브러리 이다. 앱의 모든 구성 요소에서 액세스할 수 있는 중앙 집중식 데이터 저장소를 만들 수 있다. Vue.js만 사용할 경우 데이터를 주고 받기 위해 상위 컴포넌트와 하위 컴포넌트가 지속적으로.. 2021. 8. 16.
반응형

티스토리툴바