앞서 component를 이용하여 많은 div를 함수로 합치는 방법을 알아보았다. 이번엔 JS의 MAP 함수를 이용하여 반복문으로 줄여주자. A. map() 사용 모든 Array 자료 뒤에 .map() 을 붙여준다. () 내에 콜백함수를 넣어준다. 기능 array 자료 갯수만큼 함수 안의 코드를 실행해준다. 함수의 파라미터는 array 안에 있던 자료 return 에 적으면 array로 담아줌 map 함수를 잘 익히면 React에서 쉽게 반복문 사용가능 !!! 구현 마찬가지로 {} 안에서 for문 불가 map() 함수 바로 사용해주기 return 내에 html 작성 코드가 길어진다면 소괄호로 묶어주기 함수 두 번째 인자의 경우 +1 씩 되는 파라미터 인덱스로 접근시 [i] 로 사용해줄 수 있다. { po..

3가지 step을 거쳐 동적인 UI를 만드는 방법을 알아보자. 동적인 UI -> 모달, 탭, 툴팁, 햄버거 메뉴, 경고문 등등... 1. html, css로 미리 디자인 완성 앞선 포스팅에서 미리 만들어둔 Modal 사용 2. UI의 현재 상태를 state로 저장 Modal의 현재 상태를 state로 저장해주자. state 내부에 현재 상태 보여주기 0과 1, true와 false 등 형식은 상관 없음 변경함수는 set으로 시작하는게 관습 let [postModal, setPostModal] = useState('close'); 3. state에 따라 UI가 어떻게 보일지 작성 현재 상태에 따라 어떻게 보여줄지 작성 중괄호를 작성 후 조건문 사용 -> 내부에 if 문을 사용하면 안 먹힌다 why? js가..

웹 페이지가 길어지면 위와 같이 div의 수가 너무 많아진다. React에서는 여러 div를 하나로 합쳐주는 Component가 존재 A. Component 만드는 법 1. function 만들기 주의 ! 다른 function 바깥에 만들어 주어야 한다. 작명시 영어 대문자 return () 작성 function APP() 외부에 작성 밑 영어 대문자로 시작 2. return 안에 html 담기 3. 쓰기 App 함수 내부에 내가 사용할 공간에 작성 으로 작성해도 상관 xx 병렬 div를 사용하고 싶다면 1. div 2개를 큰 div로 묶는다 2. react에서는 div를 삭제하고 fragment 문법을 사용 가능 의미없는 div를 사용하는 경우 B. 언제 쓰면 좋을까? 만들었을 때 좋은 상황 1. 반복..

1. return() 안에는 병렬로 태그 2개 이상 기입 금지 아래와 같이 병렬로 태그가 생긴다면 오류 발생 2. 자료를 잠깐 저장할 때 -> 중요한 데이터는 변수가 아닌 state에 담기 우선 {useState} 를 import 해준다. 이후 useState(보관할 자료) 나중에 사용하기 위해서 let [작명, 작명] 앞의 작명 = 보관하는 자료 뒤의 작명 = state 변경 도와주는 함수 이 때, 뒤에 state 변경 도와주는 함수의 경우 사용하지 않으려면 작성해주지 않아도된다. 작명시 -> 직관적으로 Array 형식으로도 저장 가능 각 내용은 인덱스로 접근 let [postName, b] = useState(['Seoul','Busan','Daegu']) Destructuring 문법 위와 같이 l..

A. JSX? JSX(JavaScript XML)는 JavaScript에 XML을 추가한 확장 문법이다. XML이란 웹 사이트, DB 및 타사 APP과 같은 컴퓨터 시스템 간의 정보 교환을 지원하는 파일 JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 JS 문법은 아니다. 브라우저에서 실행하기 전에 바벨을 사용하여 일반 JS 형태의 코드로 변환된다. JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하다. Babel은 JSX를 React.createElement() 호출로 컴파일 하기 때문에 아래 두 예제는 동일 B. 작성하기 블로그를 만들며 기본 문법 익혀보자. App.js 내부에서 작성해주면 된다. div 태그 하나만 놔두고 지워주기 nav bar 만들기 div 태그로 큰..

1. 배우는 이유 사용 이유 Single Page Application을 만들기 위해서! html 파일을 1개만 쓰고 다른 페이지를 보여주고 싶을 때 html 부분만 갈아치워 보여준다. Vibe, Instargram 등 페이지 전환 없이 부드럽게 동작하는 것 html을 함수, array, object 이런 곳에 보관하고 재사용할 수 있어서 html 관리가 편해진다. React Native를 쓰면 같은 리액트 문법으로 모바일 앱개발도 가능 라이브러리 JavaScript로 SPA를 구축할 수 있지만 코드가 길어진다 따라서, JS의 라이브러리인 React를 사용하자 또한, 많은 회사에서 React 역량을 요구~ 열심히 배우자!! 사전 학습 web 개발이므로 HTML, CSS 를 알고 보면 좋다! js 라이브러..

1. Article Read 응답 받은 데이터 구조 확인 'data Array'에 각 게시글 객체 각 게시글 객체는 다음으로 구성 id title content store/index.js 수정 기존 articles 데이터 삭제 Mutations 정의 응답 받아온 데이터를 state에 저장 2. Article Create views/CreateView.vue 코드 확인 게시글 생성을 위한 form을 제공 v-model.trim을 활용해 사용자 입력 데이터에서 공백 제거 .prevent를 활용해 form의 기본 이벤트 동작 막기 views/CreateView.vue 코드 확인 title, content가 비었다면 alert를 통해 경고창을 띄우고 AJAX 요청을 보내지 않도록 return 시켜 함수를 종료 ..

목차 Cross-Origin Resource Sharing How to set CORS 1. Cross-Origin Resource Sharing What Happened? 브라우저가 요청을 보내고 서버의 응답이 브라우저에 도착 Server의 log는 200(정상) 반환 즉 Server는 정상적으로 응답했지만 브라우저가 막은 것 보안상의 이유로 브라우저는 동일 출처 정책(SOP)에 의해 다른 출처의 리소스와 상호작용 하는 것을 제한 함 SOP(Same - Origin Policy) "동일 출처 정책" 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용 하는 것을 제한하는 보안 방식 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄임 https://developer.m..

1. Again DRF lab.ssafy의 Skeleton code 확인 Model 구조 확인 요청 경로 확인 미리 준비해둔 Dummy data 확인 및 데이터 삽입 서버 실행 후, 전체 게시글 조회 Browser에서 serve에 전체 게시글 조회 요청 => 데이터 반환 확인 Postman에서 올바른 방법으로 요청 => 데이터 반환 확인 2. Back to Vue Skeleton code 확인 front-server 폴더 구조 확인 및 서버 구동 준비 컴포넌트 구조 확인 메인 페이지 구성 views/ArticleView.vue component 확인 및 route 등록 src/App.vue router-link 주석 해제 및 결과 확인 components/ArticleList.vue 확인 전체 게시물을 ..