본문 바로가기

분류 전체보기361

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.
Vue(8) import 시 @/ 로 시작하는 절대경로 설정하기 vue 에서 파일경로를 작성할 때, 상대경로보다는 절대경로가 훨씬 편하다. @를 활용한 절대경로 작성법을 알아보자. import Demo from '../../demo/basic/Demo' // 상대경로 import Demo from '@/demo/basic/Demo' // 절대경로 1. 프로젝트 최상단 루트에 jsconfig.json 이라는 파일을 만들어준다. 2. 그 안에 아래 내용을 붙여준다. 그럼 최상단 루트 내에서 @/붙여 절대경로를 자유로이 사용할 수 있다. { "compilerOptions": { "baseUrl": ".", "paths": { "~/*": [ "./*" ], "@/*": [ "./src/*" ], } }, "exclude": [ "node_modules", "dist" ] } 2021. 7. 28.
Vue 실행오류 - 'node' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. NVM 설치 후 node.js 를 설치했는데 아래와 같은 에러 메시지가 나왔다. 'node' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하 십시오. 하나하나 확인해보면서 문제 범위를 좁혀보기로 했다. node 는 설치가 되었는데 왜 version이 안나올까? 1차 시도) 환경변수 경로 설정문제인가? 1. 윈도우 - 고급시스템설정 검색 2. 고급 - 환경변수 클릭 3. 환경변수 안에 해당 경로가 있는지 확인... 했는데 둘다 있음 (문제없는 걸로 판단) C:\Program Files\nodejs C:\Users\유저이름\AppData\Roaming\npm 2차 시도).. 2021. 7. 24.
Vue - (Windows) 윈도우용 NVM 설치하기 작업환경 세팅 중, 지난번에 작성한 ↓ 포스팅을 참고하여 고대로 윈도우에서 NVM 설치를 했다. (깃에서 명령어로 설치) 하지만 .... !! Vue - (맥os) NVM설치하기 Updated 2021/05/17 개발을 하다보면 프로젝트 별로 node.js 버전이 각각 다른 경우가 있다. 예를 들면 실습강의에선 node 버전이 v10.22.6 인데, 회사 프로젝트에서는 v10.16.3인 경우이다. 이럴 때 손쉽게 명 devbirdfeet.tistory.com 아니나 다를까 문제가 생겼다. node 설치 후 오류가 나는 것이다. NVM 은 Linux, Mac 기반에서 설계되었기 때문에 Window 에서는 Window 용 NVM 을 따로 다운받아 설치해줘야 한다. 😭 NVM 삭제하기 지난번에 쓴 포스팅으로 .. 2021. 7. 23.
반응형

티스토리툴바