티스토리

꾸밈없는

검색하기

블로그 홈

꾸밈없는

seizemymoment.tistory.com/m

ohbox 님의 블로그입니다.

구독자: 10

방명록 방문하기

주요 글 목록

Rest API란 무엇인가 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 공감수 0 댓글수 0 2022. 3. 21.
[ReactJS] Module이란 무엇일까? 프론트엔드 개발 올인원 패키지 with React Online. Webpack 강의 내용을 기반으로 정리한 내용입니다. Module이란 Module은 프로그램을 구성하는 내부의 코드가 기능별로 나뉘어져있는 형태를 의미함 1) 한 파일에 쓰여진 코드를 여러 파일로 관리할 수 있으며 2) 다른 모듈로부터 특정 기능을 가져오거나, 다른 모듈이 특정 기능을 참조할 수 있게 함 모듈화를 하면 코드 재사용성이 증가하며, 모듈을 기준으로 코드 내용을 구조적으로 확인가능하기 때문에 코드의 관리가 편해진다. 모듈화를 위해서는 키워드, 모듈 시스템, 모듈의 기준이 필요하다. Module의 표준 1. CommonJS (node.js) 2. ESM Module의 키워드 1. 내보내기 - 내보낼 값을 객체 안에 넣고 객체를 통.. 공감수 1 댓글수 0 2022. 2. 10.
[ReactJS] 네이버, 카카오 지도 api 사용해 개발해보자 (1) - 지도 가져오기 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.. 공감수 0 댓글수 0 2021. 7. 22.
[ReactJS] React state 관리 일반 변수는 변수값이 변해도 새롭게 렌더링 되지 않는다. 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의 변수를 직접 바꾸.. 공감수 0 댓글수 0 2021. 5. 14.
[ReactJS] 리액트의 특징 및 원리 프로그래밍 언어나 프레임워크를 사용할 줄 아는 것보다 그 원리를 아는 것이 더 중요하다는 것을 깨닫는 요즘, 내가 보려고 정리하는 리액트의 특징 및 원리 리액트를 쓰는 이유는 ? java script로 dom을 관리하기 위해서는 id 나 class 값 기준으로 관리하기 때문에 동적인 규칙이 많아지면 복잡해질 것 따라서 유지보수가 힘들어짐 > ember, angularJS - 자바스크립트 특정 값이 바뀌면 dom도 바뀌도록 연결해서 업데이트 방법 간소화 > reactJS - 특정 값만 바꾸는 것이 아니라 새로 페이지를 렌더링함으로 어떻게 업데이트 할 것인지 고민하지 않아도 된다. 하지만 자바 스크립트 객체인 가상 DOM을 사용해 업데이트가 필요한 요소만 변경함 0) SPA(Single Page Applic.. 공감수 0 댓글수 0 2021. 4. 27.
[ReactJS] 서버사이드 렌더링(SSR)과 클라이언트사이드 렌더링(CSR)이란 랜더링이란 (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.. 공감수 0 댓글수 0 2021. 4. 27.
[ReactJS] React 기본 코드 구조 및 component 생성 React를 공부하며 정리한 내용입니다. React 언어는 JSX (Java script 확장판)이다. - 중괄호 내에 모든 java script 코드를 넣을 수 있으며 중괄호를 사용해 attribute를 정의한다. const element = ; -사용자의 입력을 삽입할 수 있다. const title = response.potentiallyMaliciousInput; // 이것은 안전합니다. const element = {title}; -jsx는 태그를 꼭 닫아줘야하는데 태그 내에 아무것도 없다면 self-closing을 이용한다. React의 가장 작은 단위는 컴포넌트를 이루는 앨리먼트(element)이다. - 두 가지 예시는 동일한 React element 객체를 생성한다. 공식 다큐먼트는 아래의.. 공감수 1 댓글수 0 2021. 4. 15.
[ReactJS] React 배포 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.. 공감수 0 댓글수 0 2021. 4. 14.
[ReactJS] npm과 npx의 용어정리 및 차이점 react를 설치하다보니 npm , npx 두 가지 방법으로 패키지를 설치할 수 있다는 것을 알게 되었다. 낯익은 용어지만 제대로 공부한 적이 없는거 같아 차이점을 알기 위해 정리해보았다. 기본용어정리 package.json : 모듈 설치시 자동으로 생성되는 node.js 버전 관리 파일node_modules : 모든 모듈의 저장공간 React : 많은 모듈들로 구성된 라이브러리로 이들 간의 상호작용이 중요하다. 따라서 npm으로 모듈 설치, node.js로 개발 작업환경을 구성한다. npm이란 npm은 node.js의 자동화 된 의존성과 패키지 관리를 위한 패키지 매니저이다. 1) 패키지 설치 프로젝트를 할 때 필요한 모든 의존성 패키지는 package.json 파일 안 에서 지정할 수 있다.npm i.. 공감수 6 댓글수 2 2021. 4. 8.
[ReactJS] ReactJS 설치 및 개발환경 구축 (mac) 1) 원하는 위치에 프로젝트 폴더 생성 2) node.js 설치 nodejs.org/ko/download/다운로드 | Node.jsNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org설치 여부 확인 (노드의 버전확인) node -v 3) ReactJS 설치 설치 전 아래 링크를 꼭 참고할 것 [ReactJS] npm과 npx의 용어정리 및 차이점 - https://seizemymoment.tistory.com/m/106[ReactJS] npm과 npx의 용어정리 및 차이점react를 설치하다보니 npm , npx 두 가지 방법으로 패키지를 설치할 수 있다는 것을 알게 되었다. 낯익은 용어지만 제대로 공부한 적이.. 공감수 1 댓글수 0 2021. 4. 7.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.