웹 개발/ReactJS
-
Rest API란 무엇인가웹 개발/ReactJS 2022. 3. 21. 22:12
Rest API 는 클라이언트와 서버가 소통하는 방식이다. Rest API 설계 규칙은 다음과 같다. GET /members/delete/1 - URL로 자원에 대한 표현을 해야한다. (명사) - 자원에 대한 행위는 HTTP Method(GET, POST, DELETE, PUT)로 표현한다. 참고 사이트 https://meetup.toast.com/posts/92 REST API 제대로 알고 사용하기 : NHN Cloud Meetup REST API 제대로 알고 사용하기 meetup.toast.com
-
[ReactJS] Module이란 무엇일까?웹 개발/ReactJS 2022. 2. 10. 10:26
프론트엔드 개발 올인원 패키지 with React Online. Webpack 강의 내용을 기반으로 정리한 내용입니다. Module이란 Module은 프로그램을 구성하는 내부의 코드가 기능별로 나뉘어져있는 형태를 의미함 1) 한 파일에 쓰여진 코드를 여러 파일로 관리할 수 있으며 2) 다른 모듈로부터 특정 기능을 가져오거나, 다른 모듈이 특정 기능을 참조할 수 있게 함 모듈화를 하면 코드 재사용성이 증가하며, 모듈을 기준으로 코드 내용을 구조적으로 확인가능하기 때문에 코드의 관리가 편해진다. 모듈화를 위해서는 키워드, 모듈 시스템, 모듈의 기준이 필요하다. Module의 표준 1. CommonJS (node.js) 2. ESM Module의 키워드 1. 내보내기 - 내보낼 값을 객체 안에 넣고 객체를 통..
-
[ReactJS] 네이버, 카카오 지도 api 사용해 개발해보자 (1) - 지도 가져오기웹 개발/ReactJS 2021. 7. 22. 21:37
API 연습을 위해 네이버 지도를 사용하려 했으나 React에서는 라이브러리를 사용해야한다는 이야기에 카카오로 넘어갔다. 하지만 정리는 둘 다 하는걸로! 네이버 API 지도를 사용해보자 1) Naver cloud 플랫폼 계정을 생성하고 회원가입 & 로그인. 결제정보를 입력해야만 서비스를 사용할 수 있습니다. 유료 서비스가 아니면 요금이 부과되지 않아요! 2) console로 들어가 Products & services 에 들어간다. 3) AI·NAVER API 항목을 클릭하여 어플리케이션을 등록한다. 4)Service 선택에서 원하는 map을 선택하고 등록하면 끝! 코드 상에 적용해보자 react에서 naver map api를 사용하기 쉽게 도와주는 라이브러리를 사용한다. yarn add react-nav..
-
[ReactJS] React state 관리웹 개발/ReactJS 2021. 5. 14. 21:40
일반 변수는 변수값이 변해도 새롭게 렌더링 되지 않는다. let count = 1; 이를 해결하기 위해 state를 관리하여 DOM을 업데이트 하는 react hook들을 정리해보려 한다. useState 데이터 공간 생성 const [데이터, 데이터변경함수] = useState(초기데이터); ex) const [count, setCount] = useState(0); .. {setCount(count+1)}> -> onclick 이벤트를 통해 useState의 변수값이 바뀌면 컴포넌트가 새롭게 렌더링 된다. 이 때 랜더링마다 count 값을 업데이트 되는 것이 아니라 랜더링을 통해 새롭게 생성된 독립적인 상수를 보는 원리이다. ** Immutability react는 useState의 변수를 직접 바꾸..
-
[ReactJS] 리액트의 특징 및 원리웹 개발/ReactJS 2021. 4. 27. 22:42
프로그래밍 언어나 프레임워크를 사용할 줄 아는 것보다 그 원리를 아는 것이 더 중요하다는 것을 깨닫는 요즘, 내가 보려고 정리하는 리액트의 특징 및 원리 리액트를 쓰는 이유는 ? java script로 dom을 관리하기 위해서는 id 나 class 값 기준으로 관리하기 때문에 동적인 규칙이 많아지면 복잡해질 것 따라서 유지보수가 힘들어짐 > ember, angularJS - 자바스크립트 특정 값이 바뀌면 dom도 바뀌도록 연결해서 업데이트 방법 간소화 > reactJS - 특정 값만 바꾸는 것이 아니라 새로 페이지를 렌더링함으로 어떻게 업데이트 할 것인지 고민하지 않아도 된다. 하지만 자바 스크립트 객체인 가상 DOM을 사용해 업데이트가 필요한 요소만 변경함 0) SPA(Single Page Applic..
-
[ReactJS] 서버사이드 렌더링(SSR)과 클라이언트사이드 렌더링(CSR)이란웹 개발/ReactJS 2021. 4. 27. 18:52
랜더링이란 (Rendering) 서버로 부터 받은 내용을 브라우저에 표시함 - Loader 가 서버로 부터 원본 HTML 문서를 읽어들임 - 브라우저는 파싱을 통해 최종적으로 어떤 내용을 페이지에 렌더링할 지 결정한다. 1) DOM 트리 구축 2) CSSSOM 트리 구축 3) JavaScript 실행 - 렌더 트리를 구축 - CSS 설정/레이아웃 위치 지정 후 렌더링 트리가 페인팅된다. DOM(Document Object Model) : HTML 요소들의 구조화된 표현 CSSOM(Cascading Style Sheets Object Model) : 요소들과 연관된 스타일 정보의 구조화된 표현 * DOM이란 무엇인가 seizemymoment.tistory.com/133?category=879018 [Jav..
-
[ReactJS] React 기본 코드 구조 및 component 생성웹 개발/ReactJS 2021. 4. 15. 03:49
React를 공부하며 정리한 내용입니다. React 언어는 JSX (Java script 확장판)이다. - 중괄호 내에 모든 java script 코드를 넣을 수 있으며 중괄호를 사용해 attribute를 정의한다. const element = ; -사용자의 입력을 삽입할 수 있다. const title = response.potentiallyMaliciousInput; // 이것은 안전합니다. const element = {title}; -jsx는 태그를 꼭 닫아줘야하는데 태그 내에 아무것도 없다면 self-closing을 이용한다. React의 가장 작은 단위는 컴포넌트를 이루는 앨리먼트(element)이다. - 두 가지 예시는 동일한 React element 객체를 생성한다. 공식 다큐먼트는 아래의..
-
[ReactJS] React 배포웹 개발/ReactJS 2021. 4. 14. 12:21
React 배포 1) create-react-app을 build하는 명령어 -> public 폴더가 실행됨 -> create-react-app 개발환경은 개발의 용이성을 위해 기능을 많이 추가했기 때문에 파일의 무게가 무거움 npm run start 2) 실제 product 환경에서 사용하는 웹을 build하기 위한 명령어 -> build 파일 생성 후 사용 (create-react-app의 불필요한 용량을 줄였음) -> root에 build 안에 있는 디렉토리를 위치시키면 된다. npm run build 3) 웹 서버 설치 npm install -g serve 4) 웹 서버의 document root를 build 폴더로 설정해 실행 npx serve -s build opentutorials.org/mo..