개발/React (페이지 제작과정)
-
axios란 뭘까?개발/React (페이지 제작과정) 2023. 8. 26. 00:03
난 지금까지 axios를 사용하면서 살실 axios를 왜 쓰는지 몰랐다! 그냥 클론코딩으로 시작하다 보니 그냥 써보니 돼서 그냥 대충 이런 구조로 작성하면 실행되는구나를 깨달았고 그냥 이유는 모르지만 쓰고 있다. 근데 열받는 건 잘 된다는 거다. 그래서 공부를 하지 말까?라는 고민도 했지만 그 시점쯤에 문제가 생겼다. axios를 왜 알아야 할까? 단순하게 한마디로 정리하자면 서버와 통신하기 위해서이다. 우리가 웹사이트를 만들때 정적인 데이터만 보여주고 싶지는 않을 것이다. 그럼 지속적으로 서버와 통신을 하고 요청을 하고 데이터를 받아와야 하는데 그 기능을 하는 게 axios라고 보면 된다. 정확하게 axios가 뭘하는 애인가? Node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 HT..
-
이미지 업로드 페이지를 만들어보자.개발/React (페이지 제작과정) 2023. 8. 23. 05:53
일단 이미지 업로드만 할 수 있는 게시판을 만들고 싶었다. 그래서 서버와 관련된 코드를 빼고 어떻게 JS와 Css를 작성했는지 한번 기록 겸 남겨두려고 한다. 필요한 건 간단하다. 맨 위 제목을 작성하고 이미지들을 업로드 드래그 앤 드롭으로 끌어 넣으면 계속 추가되는 형식의 사이트이다. export default function ImageUploadForm() { const [selectedFiles, setSelectedFiles] = useState([]); const fileInputRef = useRef(null); const handleFileChange = (event) => { const files = Array.from(event.target.files); setSelectedFiles((..
-
React State란 무엇일까?개발/React (페이지 제작과정) 2023. 8. 16. 01:03
State를 왜 알아야 할까? https://hueeng.tistory.com/40 const residents = [ { name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }, { name: 'Charlie', age: 28 }, ]; const residentComponents = residents.map((resident, index) => ( Name: {resident.name} Age: {resident.age} )); 내가 전에 map을 설명하면서 residents라는 객체를 생성했었다. 하지만 우리는 데이터를 이렇게 정적으로 활용하는 경우는 거의 없다. 우리가 데이터를 활용할 때는 residents의 객체가 계속 추가되거나 수정되거나 삭제가 되는 코드를..
-
[JSX] Key 속성이란 무엇일까?개발/React (페이지 제작과정) 2023. 8. 15. 07:26
전글에서 map에 대해서 설명을 했었다. 만약 보지 않았다면 전 글을 보고 이 글을 읽는 것을 추천한다. https://hueeng.tistory.com/40 Key 속성 정의? JavaScript에서 객체를 사용할 때, 객체의 각 속성에 대한 식별자 역할을 하는 것을 "키(Key)"라고 한다. 객체는 중괄호 {} 안에 이름-값 쌍 형태로 구성되며, 각 이름(속성명)을 통해 해당 속성의 값을 가져오거나 설정할 수 있다. 이때 이름을 가리키는 것이 바로 "키"라고 한다. 여기서 아래 예제코드를 보자 예제를 곁들인 설명 const residents = [ { name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }, { name: 'Charlie', age: 28 }, ];..
-
Map() 메서드란 무엇일까?개발/React (페이지 제작과정) 2023. 8. 14. 06:29
map() 메서드의 정의 map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환하는 걸 말한다. React에서 map에 대한건 당연히 많이 쓰일수 밖에 없는데 대부분 반복적인 활동을 하게 될 때 사용하게 된다. const residents = [ { name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }, { name: 'Charlie', age: 28 }, ]; const residentComponents = residents.map((resident, index) => ( Name: {resident.name} Age: {resident.age} )); // 이후 residentComponents를 컴포넌트의 J..
-
JSX 란 무엇인가?개발/React (페이지 제작과정) 2023. 8. 8. 07:04
JSX 란 무엇일까? 간단하게 설명하자면 JSX는 자바스크립트의 확장 문법이다. 리엑트에서는 JSX를 이용해서 UI가 보이는 부분을 나타낸다.풀 명칭은 JavaScript XML 이라고 불리면서 Javascript에 XML을 추가한 문법이라고 보면 된다. JSX는 리엑트를 사용할때만 사용되므로 공식적인 JS 문법은 아니다. 그리고 브라우저에서 실행하기 전 바벨에서 일반 자바스크립트의 형태로 변환한다. 바벨이 뭔지 궁금하다면? ↓ React- Create-App 시작하기 웹팩이 무엇인가? webpack 웹팩은 모듈 번들러입니다. 주요 목적은 브라우저에서 사용할 수 있도록 JavaScript 파일을 번들로 묶는 것이지만, 리소스나 애셋을 변환하고 번들링 또는 패키징할 수도 hueeng.tistory.com ..
-
React- Create-App 시작하기개발/React (페이지 제작과정) 2023. 8. 2. 13:50
웹팩이 무엇인가? webpack 웹팩은 모듈 번들러입니다. 주요 목적은 브라우저에서 사용할 수 있도록 JavaScript 파일을 번들로 묶는 것이지만, 리소스나 애셋을 변환하고 번들링 또는 패키징할 수도 있습니다. webpack.kr 위 링크에 나와있는데 오픈소스 자바스크립트 모듈 번들이며 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화 하는 라이브러리 라고 한다. 보면 왼쪽에서 엄청 많은 파일들이 오른쪽으로 나타나게 되니 편해진다. 장점 1. 여러 파일의 자바스크립트 코드를 압축해 최적하 할 수 있어 로딩에 대한 네트워크 비용을 줄일 수 있고 2. 모듈 단위로 개발이 가능하여, 가독성과 유지보수가 쉽다 바벨이란? 최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서최신 ..
-
리엑트 설치를 위해 필요한 것개발/React (페이지 제작과정) 2023. 8. 1. 14:53
Node.js란? 크롬 VS 자바스크립트 엔지으로 빌드한 자바스크립트 런타임으로 웹브라우저 환경이 아닌곳에서도 자바스크립트를 사용하여 연산할 수 있는 툴 Node.js와 npm을 먼저 설치해야 React를 설치할 수 있는 데 Node.js를 다운받으면 Npm도 같이 설치된다. React 설치시 Node.js가 필요한 이유 React와 Node.js는 직접적인 연관은 없지만. 프로젝트를 개발하는데 주요 도구들이 Node.js를 사용하기 때문에 필요하다. Node.js 설치 방법 1. 아래 링크 클릭 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. 안정적, 신뢰도 높음 버전 설치 Node..