분류 전체보기
-
1차 프로젝트 회고록Trainings/clone project 2020. 6. 6. 17:45
1. 프로젝트 소개 https://www.rimowa.com/kr/ko/unique 리모와 유니크 러기지 고객 맞춤 제작을 소개합니다 | 리모와 리모와 유니크를 소개합니다 - 당신의 여행만큼 특별한 맞춤 러기지를 만드는 새로운 방법. 리모와 공식 웹사이트에서 확인하세요. www.rimowa.com 프로젝트를 하기 일주일 전에 각각 1명씩 사이트를 추천하는 시간이 있었다. 그때 리모와라는 사이트를 이번 처음 알게 되었고, 사이트를 처음 봤을 때부터 엄청 이쁘다고 생각을 했지만 설마 되겠어라는 마음으로 투표만 해놓았다. 그러고 나서, 클론 프로젝트 사이트와 팀원이 공개되었을 때, 리 모아라는 곳에 내 이름이 있었고 프론트 3명, 백엔드 2명 총 5명이서 프로젝트를 진행하게 되었다. 싫지는 않았지만, 이걸 어..
-
데이터베이스Trainings/세션 정리 2020. 5. 27. 10:00
Database 란? - 데이터를 저장 및 보존하는 시스템 - Application에서는 데이터가 메모리 상에서 존재하지만, 해당 애플리케이션이 종료되면 메모리에 있던 데이터들은 다시 읽어 들일 수 없기 때문. - 데이터를 장기 기간 동안 저장 및 보존하기 위해 데이터 베이스를 사용하는 것. 관계형 데이터베이스(RDBMS, Relational DataBase Management System) - 이름 그대로, 관계형 데이터 모델에 기호를 둔 데이터베이스 시스템을 말한다. - 관계형 데이터란 데이터를 서로 상호 관련성을 가진 형태로 표현한 데이터를 말한다. 특징 - 모든 데이터들은 2차원 테이블(table)들로 표현된다. - 각각의 테이블은 칼럼(column)과 row(로우)로 구성된다. 컬럼(column..
-
React - Font Awesome과 Toastify 사용하기React/라이브러리 2020. 5. 26. 10:00
Font Awesome 이란? - 웹에서 아이콘이 필요할 때 가장 많이 사용되는 라이브러리 중 하나이다. Font Awesome fontawesome.com Font Awesome 패키지 설치 방법 1. FontAwesome의 SVG 기반 아이콘을 활성화 시키기 위해 기본 패키지를 설치한다. 2. FontAwesome 아이콘 대한 패키지를 설치해야 한다. 여기서 무료로 제공하는 Solid, Regular, Brands 3개의 카테고리에 대한 패키지만 설치한다. 3. 마지막으로 FontAwesome을 React 컴포넌트 형태로 사용할 수 있도록 하는 패키지를 설치한다. 그러고 나서, 적용 시켜보자. 인스타그램 클론 했던 소스에서 Header 컴포넌트에 적용해보았다. 저렇게 돋보기 아이콘이 생긴 것을 확인할..
-
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(상태)를..