Til
-
React - CRA로 프로젝트 시작하기React/CRA 세팅 2020. 5. 25. 10:00
create-react-app 이란? - 페이스북에서 만든 react 웹 개발용 boilerplate이다. - 리엑트에서 편리하게 개발하기 위한 세팅이 잘 되어있다. ex) 자동 리프레쉬 - 줄여서 CRA라고 부른다. boilerplate란? 표준 문안이라는 뜻의 단어이며, 프로그래밍에서의 boilerplate code는 최소한의 변경으로 재사용할 수 있는 것과 적은 수정만으로 여러 곳에 활용 가능한 코드, 문구를 말하며, 각종 문서에서 반복적으로 인용되는 문서의 한 부분을 의미한다. create-react-app 설치 하는 법 우선 설치 전에 다음과 같이 npm과 node가 설치되어 있는지 확인해야 한다. 설치가 된 것을 확인했으면, 프로젝트 폴더를 생성하고자 하는 폴더로 가서 다음과 같은 명령어를 입..
-
React - map() 활용React/기본 2020. 5. 24. 23:01
아래 나열된 순서대로 진행해 주세요. 1. API 주소를 호출하여 데이터 로딩을 처리해주세요! - componentDidMount() - fetch - setState (monsters에 저장) 2. SearchBox 컴포넌트에 정의한 handleChange 메서드를 넘겨주고, 호출 시 인자로 들어오는 이벤트객체(e)를 활용해 userInput으로 setState. App.js 1. App.js에서 API 호출 호출할 API 주소 : https://jsonplaceholder.typicode.com/users 위 주소를 호출하여 데이터 로딩을 처리하기 리액트에서 데이터 로딩을 할때, 필요한 메서드가 존재한다. 그것은 바로 fetch()라는 메서드이다. 그렇다면 fetch()의 적절한 위치는 어디인가? 바..
-
React - request/response 이해하기React/기본 2020. 5. 24. 10:00
소스로 이해하기 1. fetch()의 첫 번째 인자는 백앤드에서 만든 API와 연결하는 것을 의미한다. 2. 두번째 인자로는 요청하는 값을 의미한다. - method는 보내는 방식을 의미한다. ex) POST / GET - header는 해당 request에 대한 추가 정보(addtional information)를 담고 있는 부분이며, 설명 같은 내용이 들어있는 메타 데이터라고 보면 된다. HTTP Header에 쓰이는 Content-Type이란 무엇일까? request에 실어 보내는 데이터(body)의 type의 정보를 표현한다. ex) text/css, text/javascript, text/html, text/plain Content Type은 Request에 실어 보내는 data의 type에 따..
-
git branch 정리Trainings/세션 정리 2020. 5. 23. 10:00
Branch 란? - 독립적으로 어떤 작업을 진행하기 위한 개념이다. - 필요에 의해 만들어지는 각각의 브랜치는 다른 브랜치의 영향을 받지 않기 때문에, 여러 작업을 동시에 진행할 수 있다. Branch를 쓰는 이유 - 소프트웨어를 개발할 때에 개발자들은 동일한 소스코드를 함께 공유하고 다루게 된다. - 어떤 개발자는 버그를 수정하기도 하고, 또 어떤 개발자는 새로운 기능을 만들어 내기도 한다. - 이럴 때 여러 개발자들이 동시에 다양한 작업을 할 수 있게 만들어 주기 때문에 사용한다. Branch 사용법 git branch : 옵션 없이 명령어를 실행하면, branch 리스트 및 현재 브랜치를 확인할 수 있다. git branch 브랜치 명 : 브랜치명으로 브랜치를 생성한다. git checkout 브..
-
HTTP 정리Trainings/세션 정리 2020. 5. 22. 10:00
HTTP란? HyperText Transfer Protocol의 약자이며, 하이퍼텍스트(HTML) 문서를 교환하기 위해 만들어진 protocol(통신 규약)이다. 어떨 때 사용하는가? 웹상에서 네트워크로 서버끼리 통신할 때 사용! 프론트앤드 서버와 클라이언트 간의 통신에 사용! 백앤드와 프론트앤드 서버 간의 통신에도 사용! HTTP 핵심 요소 HTTP 통신 방식 HTTP는 기본적으로 요청(request)/응답(response) 구조로 되어있고, 클라이언트가 HTTP request(요청)을 서버에 보내면 서버는 HTTP response(응답)을 보내는 구조이다. 클라이언트와 서버의 모든 통신이 요청과 응답으로 이루어진다. HTTP는 Stateless 이다. stateless란 말 그대로 state(상태)를..
-
Data Structure(자료구조) - Dictionary(Object)Trainings/세션 정리 2020. 5. 22. 10:00
Dictionary란? : key - value 형태의 값을 저장할 수 있는 자료구조를 말한다. JavaScript에서는 이를 Object(객체)라 부른다. ex) 이름 : '박보검' 이름은 박보검 등 실제 데이터 값과 데이터를 설명하는 key의 대응 관계를 표현할 때 유용하다. Dictionary의 특징 - Set과 마찬가지로 특정 순서대로 데이터를 리턴하지 않는다. - 수정(mutable)이 가능하다. - Key의 값은 중복될 수 없다. 만약, 중복된 key값이 있다면 먼저 있던 key와 value를 대체한다. Dictionary의 내부 구조 - Set와 비슷하게 Dictionary(Object) 활용 방법 1. 데이터가 주어지거나 딕셔너리의 내용이 고정되어 있는 경우 사용되는 방법 // dictio..
-
Data Structure(자료구조) - 자료구조 - SetTrainings/세션 정리 2020. 5. 21. 12:00
Set은 원래 ES6가 등장하기 이전에는 자바스크립트 자체는 set을 구현하고 있지 않았다. ES6가 등장하고 Set이라는 것이 나오고 set은 데이터 타입 중의 하나인데, 중복되는 값을 가지지 않는 값들의 리스트를 말한다. 대신 객체 형식으로 반환된다. 배열과 set의 차이점 배열보다 set이 더 빠르다. Set이란? Set은 array나 list처럼 순열 자료구조이며, 순서라는 개념 또한 존재하지 않는 순열 자료구조를 의미한다. Set의 특징 - 데이터를 비순차적으로 저장할 수 있는 순열 자료구조이다. - 삽입 순서대로 저장되지 않기 때문에 특정한 순서를 기대할 수 없다. - 동일한 값을 여러 번 삽입이 불가능하고, 만약 동일한 값이 중복 저장될 경우 하나의 값만 저장된다. set을 만들 때new S..
-
React - 메인 페이지 기능 구현React/기본 2020. 5. 20. 10:00
Assignment 메인 페이지 - 사용자가 댓글 입력 후 Enter를 누르거나 왼쪽의 버튼 클릭 시 댓글이 추가되도록 구현해주세요. 피드 컴포넌트는 인스타그램에서 피드에 해당하는 부분이다. 바로 이 부분이다. Feed.js 댓글 구현할 부분은 이 부분이다. Comment.js 먼저 사용자가 먼저 댓글을 입력했을 때를 생각해보자. 일단 state안에 commentList: [], commentText: "", userId: "ljtaek2"ljtaek2"라는 값을 미리 초기화를 시켰다. input 태그에 무언가를 입력하는 순간 onChange 이벤트 핸들러가 실행되고, commentState라는 함수가 실행된다. commentState 함수 안에서 event를 이용해서 해당 input값을 setState..