본문 바로가기

분류 전체보기49

React Basic React 쉽게 돔에 접근하고 쉽게 조작하기 위해서 만들어진 라이브러리로 오로지 view(보여지는 것들)만 담당한다. Vue와 앵귤러(MVC)는 보여지는 것 외에도 데이터 까지 관리를 한다. 생태계가 활성화 되어있다. 복잡한 규모의 애플리케이션을 조금 더 효율적으로 관리할 수 있는 JS라이브러리. CRA : Create React App //CRA 명령어 cd 내가 원하는 디렉토리로 이동해서 npx creat-react-app projectName //CRA설치 CRA를 설치하기 이전에 뭐가 설치해 있어야하지? node랑 npm(node pacage manager)이 왜 필요해? :: JSX는 브라우저에서 읽을 수 없기에 node기반 패키지를 통해 브라우저가 읽을 수 있는 JS파일로 변환. react-f.. 2020. 6. 1.
react#5 API를 array.map을 사용한 table Bootstrap react-boostrap은 프론트엔드 스타일 시트 라이브러리이다. react.js에서 부트스트랩을 사용시 react-bootstrap을 사용한다. react-bootstrap이 react.js프로젝트에서 모든 부트 스트랩 기능을 제공한다. bootstrap install in terminal cd myProjectFile npm istall react-bootstrap index.js에 import bootstrap import "bootstrap/dist/css/bootstrap.css"; Tables Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugi.. 2020. 5. 29.
리액트#4 input.value받아서 로그인 버튼 이벤트 위의 이미지는 제가 만든 페이지입니다. 무슨일이 발생했죠? id, pw input box안에 value값을 넣어주니 버튼 색상이 변했죠. 우리는 이 기술을 만들어보도록 합시다! (이 포스팅에는 html과 css부터 다루지 않고 기존의 제 코드를 가지고 react로 동작하는 모습을 알려드립니다.) class Login extends Component { //Login Component를 만들어준다. constructor() { //constructor을 사용하면 super(); //항상 super()를 부를 것 super()가 불리지 않으면 this가 초기화 되지 않는다. this.state = { object인 state를 id, pw, 버튼 색상을 변경해주기 위해서 세팅해준다. id: "", //처음에.. 2020. 5. 27.
리액트#3 복습 #1과 경로 router react MVC(Model(무엇) View(보여줘) Controller(어떻게 -로직처리))에서 vue만 다룬다. CRA(node npm가 설치가 되어있어야 한다. node가 브라우저 환경에서만 쓸 수 있는 기타 환경에서 돌아가는 것, refresh를 안해도 된다. 기본세팅을 이루는 것이 Node기반이다. 노드패키지 매니저 CRA는 노드 모듈에 있다.) Component JSX : HTML문법을 JS파일에 작성할 수 있도록 하는 것. SASS state Event props react router class 내부에서 return()시 최상위 요소 하나를 만들어줘야할 때 대신에 를 사용해줘도 된다. 하지만 는 Component이름과 동일하게 className을 주는 것이 가장 좋은 방법이다. 컴포넌트 이.. 2020. 5. 25.
HTTP HTTP(Hyper Transfer Protocol) 하이퍼 텍스트(HTML같은 파일)를 통신(문서 교환)을 하기 위한 규약으로 내가 한국말을 한다고 다른 나라언어를 사용하는 사람들이 알아듣지 않는다. 한국어를 전달하는 것은 목소리인데 목소리와 같은 매개체를 네트워크라고 합니다. HTTP규약에 맞춰진 텍스트를 주고 받는다. 다른 프로토콜도 존재한다. 그 외에는 FTP(파일을 전송하는 프로토콜) HTTP는 사람이 만든 것이니 원하면 만들 수 있습니다. 두 서버간끼리(프로토콜끼리) 통신을 하기 위해 필요한 것은? 송신자 수신자가 필요하고, 무엇을 보내고 싶은지(내용), 왜 보내는지 의도가 필요합니다. = 응답을 받을 때는 Packet(패킷)이라는 것에 실어서 보내게 된다. 패킷은 헤더와 바디로 이뤄져있는데,.. 2020. 5. 20.
리액트#2 HTML로 만들었던 인스타그램을 리액트로! 위의 이미지는 HTML, CSS, JS를 사용해서 만들었던 인스타그램 클론, 리액트와 첫 인사를 해서 리액트로 코드를 옮기는 작업을 했다. 결코 순탄치 않은 작업이었지만 내가 뭐가 부족한지 어떤 부분을 더 알고싶은지 알게됐던 것 같다. 리액트로 만들어본 인스타 클론, 리액트에 두려움이 엄청 컸는데 간단하게 해보니 그래도 재밌게 한 것 같은 기분? 처음에 들어가기 전에 혼자 트리구조로 component를 어떻게 만들어야할지 고민을 하고 구체화 되고나서 들어갔다. 지금은 반복되는 걸 위주로 component를 만들기 보다는 내가 작성했던 HTML을 큰 단위로 나누는데 중점을 두었다. html 태그를 react에서 이미지 불러와서 사용하는 방법 import Img from "./img/route"; html코.. 2020. 5. 19.
POST Man 로컬호스트 주소 같이 중요한 것들 모자이크 해주기 어플리케이션을 열고 Collections 카테고리에서 + New Collection을 만들어준다. 파일을 만들고 파일에서 오른쪽 클릭을 하면 Add Request를 클릭해준 뒤 폴더 안의 Request를 생성해준다. 내가 접속해야하는 서버주소를 입력 (서버주소/api) 값을 받아와야하니까 Get method를 사용해서 불러준다. 만약 로그인을 하기위해서 값을 넣고 POST를 하고자 한다면 상단 카테고리 Body에서 raw를 체크하고 Text를 JSON으로 변경해준다. 내가 원하는 데이터가 있는 페이지로 이동하기 (3세대 프론트와 백엔드가 다른 포지션에서 데이터를 다루고 있으니까 2세대는 터미널에서 함께 다룬다. 다른 페이지로 이동하기 위해서 쿼리스트링을 .. 2020. 5. 18.
리액트#1 안녕 리액트 what is JSX JS에서 사용하는 것이지만, HTML처럼 생겼다. JS파일안에 있지만 JS는 아니다. 만드는 내용들은 전부 다 브라우저에서 보이는 내용이다. render() return을 하는 것으로 무엇을 return할까? JSX(화면에 보여지는 것)를 리턴한다. LifeCycle render의 생명주기다. 무엇이 먼저 불리고 뭐가 먼저 불리는지 순서라는 것이 있다. 조금 복잡한 순서로 불리면서 화면의 변화가 생기는 것이다. constructor / render / componentdidmount - render : 마운트나 나오기 전의 시점으로 JSX를 부르는 상황 말 그대로 결국에 마지막으로 매무새를 단장하고 화면에 보여주기 위한 준비를 하는 것이고 return을 하는게 화면에 보여지는 것들 .. 2020. 5. 15.

티스토리툴바