본문 바로가기

분류 전체보기346

Git(24) Private Repository 다른 사람과 공유하기 깃헙에서는 저장소를 만들 때, private 혹은 public 로 공개여부를 설정할 수 있다. public 은 모두가 볼 수 있지만, private 은 나와 내가 공유한 사람만 볼 수 있다. 깃헙을 사용하다보면 내 Private Repository 를 다른 사람과 공유해야 하는 일이 있다. 자, 공유방법을 알아보자. Git(24) Private Repository 다른사람과 공유하기 준비물 공유할 유저의 깃헙 아이디 공유 방법 1. private repository 페이지에서 settings 로 들어간다. 2. Manage access - Invite a collaborator 를 클릭 3. 검색창이 나타나면 유저네임을 입력해준다. 4. 검색 하면 유저가 나온다. 초록버튼을 클릭해주자 5. Manage .. 2021. 8. 15.
React(35) 리액트 훅 - map 으로 json 객체 데이터 가져오기 자, 리액트로 데이터를 이리저리 굴려보자. 원래는 백엔드에서 api 형태로 통신을 거쳐 json 객체 데이터를 받아온다. 하지만 지금은 DB 에서 받아올 수 없으므로 데이터가 담긴 json 객체 파일을 프로젝트 내에 하나 만들고, map() 함수를 이용하여 그 데이터 뭉텅이들 중에 필요한 데이터만 꺼내서 컴포넌트 곳곳에 사용해볼 것이다. 스포일러 토익 단어장을 만들고 있다. 날짜별 외워야할 영단어를 출력해주고 싶다. 1차로 json 객체 데이터를 콘솔창에 출력하였다. 여기서 필요한 데이터들만 추려서 2차로 화면에 출력할 것이다. (여기서 days 는 날짜를 의미하고 words 는 날짜별로 암기할 영단어 목록이다.) React(35) 리액트 훅 - map 으로 json 객체 데이터 가져오기 파일구조 먼저 .. 2021. 8. 14.
React(34) 리액트 훅 - 부모가 자식에게 props 전달하기 사람이 커뮤니케이션을 할 때, 정보를 말이나 문자로 주고 받는다. 그 정보를 바탕으로 행동을 하여 결과를 만든다. 컴퓨터로 커뮤니케이션을 할 때도 마찬가지이다. 정보를 컴퓨터 언어로 데이터 형태로 넘기고 받는다. 그리고 결과를 다양한 방식으로 출력한다. 그래서 내가 느낀 소프트웨어 프로그래밍의 핵심은 데이터를 어떻게 가공해서 전달하느냐 인 것 같다. 프로그램을 만들다 보면 느끼겠지만 데이터를 넘기고 받는 과정이 항상 필요하다. 그래서 정보처리기사 자격증 자체도 '정보처리' 라는 단어를 쓰는 것이 아닐까 싶다. React(33) 리액트 훅 - 부모가 자식에게 props 데이터 전달하기 리액트에서도 마찬가지이다. 데이터를 부모컴포넌트에게서 물려받는 방법을 알아보자. 준비물은 props 라는 속성이다. 부모컴.. 2021. 8. 13.
React(33) 리액트 훅 - useState 기본구조 리액트 훅에서 useState 의 기본 구조를 살펴보자. 나에게는 이번 포스팅까지 포함하면 리액트 세번째 복습이다. 똑같은 내용 공부해서 별다를 것 없을 수도 있지만, 나한테는 반복적인 공부를 통해 변수와 같은 단편적인 개념에서 전체적인 패턴이나 구조와 같은 포괄적인 개념까지 시야가 넓어지는 것을 경험하고 있다. 혹시 useState 에 대한 개념을 이해하게 된 지난 포스팅이 궁금하시다면 ↓아래를 클릭해주세요. React(24) 리액트 훅 useState란 Updated 2021/05/06 React Hook은 함수형 컴포넌트에 기능을 추가할 때 사용하는 함수다. 함수형 컴포넌트에서 상탯값을 사용할 수 있고 자식요소에 접근 할 수도있다. 내가 이해한 상태값? (더보기클릭) devbirdfeet.tisto.. 2021. 8. 12.
React (32) 리액트 훅 - 함수형 컴포넌트 기본구조 Updated 09/14/21 처음에 리액트를 클래스형 컴포넌트 위주로만 배웠기 때문에 프로젝트를 하면서 나중에 리액트 훅을 쓰면서 함수형 컴포넌트를 알게 되었다. mini size 함수만 사용해봤던 나에게 컴포넌트화된 거대 함수(?)의 존재는 쉽게 와닿지 않았다. (마치 개미더러 지구를 보라면 너무 커서 보이지 않듯...) 하지만 여러 프로젝트를 경험해보며 이해의 폭이 생긴 것 같아 다시 정리해본다. React (32) 리액트 훅 - 함수형 컴포넌트 기본구조 함수형 컴포넌트 export default function Hello () { 함수 안에 컴포넌트 내용이 몽땅 들어가 있어 어디서든 이 함수덩어리만 호출하면 달려가 사용할 수 있다. 훨씬 짧고 직관적인 코드를 짤 수 있다. React Hook 을 .. 2021. 8. 10.
Git(23) 원격 저장소 끊고 다른 원격 저장소에 연결하기 Updated 05/19/24 예전에 깃헙에 올려놨던 프로젝트 형식이 셋업에 필요해 내려받아 사용했다.열심히 코딩 한 후, 새로 프로젝트를 깃헙에 올리려고 하니 이미 원격저장소가 있다고 에러가 떠버렸다.예전 깃프로젝트를 다운받아 쓰니 원격저장소도 연결되어 있나보다.error: remote origin already exists.  Git(23) 원격 저장소 끊고 다른 원격 저장소에 연결하기원격 저장소를 저장/삭제/추가 등의 핸들링을 하는 명령어는 git remote 로 시작하는 명령어이다. 대체로 아래와 같은 명령어들이 사용된다원격 저장소 추가:git remote add 원격 저장소 이름 변경:git remote rename 원격 저장소 제거:git remote remove  원격 저장소와 연결 끊기.. 2021. 8. 1.
Vue(11) axios 을 통해 API 동적으로 화면에 뿌려주기 api에는 menu 라는 데이터가 있다. 리스트를 받아와서 화면에 동적으로 뿌려주자. 스포일러 api에서 받아온 menu안의 id와 title의 내용(데이터)가 동적으로 몽땅 표시된다. 그럼 추울발! Vue(11) axios 을 통해 API 동적으로 화면에 뿌려주기 axios 설치 먼저 통신을 해야되니까 npm install axios src/api/index.js src 폴더 안에 api 폴더를 만들고, index.js 파일을 만들어준다. (통신전용 공간이랄까. 여튼 이걸 api 구조화 라고 한다.) 통신 전용 메소드를 만들어주고 export 꼭 해주기 ! 그래야 밖에서도 쓸 수 있다. import axios from 'axios'; // axios 임포트해주기 function showMenuApi().. 2021. 7. 31.
Vue(10) eslint 에러 화면 제거하기 (오버레이) Vue 에서 eslint 를 적용했을 때, Critical 한 에러가 아닌데도 overlay가 되어 화면을 가린다. 이걸 없애 볼거다. 1. App.vue 파일에서 빨간 줄이 떠버렸고, 2. 로컬서버를 실행해보니 eslint가 overlay가 되어 화면을 가린다. 이걸 없애 볼거다. 3. src 폴더 안에 vue.config.js 라는 파일을 만든다. (뷰 설정파일이다.) 아래와 같이 내용을 넣고 저장한다. // vue.config.js module.exports = { devServer: { overlay: false, }, }; 결과화면 화면 오버레이 없이 잘 나온다 ! 2021. 7. 30.
Vue(9) Router 설치하기 (여러 페이지로 분리) Vue 에서 하나의 웹 페이지 안에 여러 페이지를 클릭해서 내용을 보려고 한다. Router 를 사용해서 원하는 페이지로 가보자 스포일러 로그인을 누르면 log in 이 나오고, 회원가입을 누르면 sign up 이 나온다. 덩달아 url 도 변경된다. 그럼 시작해보자 출발 1. 터미널에 다음 명령어를 사용하여 라우터를 설치해준다. npm install vue-router 2. 라우터가 들어갈 장소를 만들어 줘야한다. - routes 폴더를 만들고 그 안에 index.js 파일을 만들어준다. 3. 페이지(컴포넌트)들을 만들어 주자. - view 폴더를 만들고 그안에 LoginPage.vue 와 SignupPage.vue 를 만들어준다. 4. routes/index.js 라우터에 컴포넌트들을 넣어주자. - .. 2021. 7. 29.
반응형

티스토리툴바