2주간의 1차 프로젝트 후기...

선릉맥주 2주간의 팀프로젝트가 끝나고 READMD 를 작성하니 이제 진짜 프로젝트가 끝났다는 실감이 났습니다. 저는 프론트엔드를 맡아서 진행하였고 진행했던 프로젝트는 제주맥주를 클론 코딩한 선릉맥주였습니다. 선릉맥주 프론트 주소 github 입니다. 유튜브 데모

6일 전
·
0개의 댓글
post-thumbnail

페이징 (Pagination & Query Parameter)

Pagination Pagination(Paging 이라고도 불리는) 기능으로 서버에서 가지고 있는 데이터는 많고 그 데이터를 한 화면에 전부 보여줄 수 없는 경우에 사용됩니다. 모든 데이터를 한번에 보여줄 수 없다면 일정 길이로 끊어서 전달합니다. 게시판의 "

2021년 6월 15일
·
0개의 댓글
post-thumbnail

동적 라우팅(Dynamic Routing)

보통의 웹 사이트는 전체 아이템이 보여지는 리스트 페이지와 거기서 어떤 아이템을 선택했을 때 해당 아이템의 디테일 한 정보가 보여지는 상세 페이지로 구성됩니다.이때 특정 리소스에 아이템 값을 넣어 해당하는 아이템의 데이터가 보여지도록 하는데 이와 같이 라우트 경로에 특

2021년 6월 15일
·
0개의 댓글
post-thumbnail

Lifecycle & 조건부 렌더링

constructorrendercomponentDidMount(fetch 완료)(setState)rendercomponentDidUpdate (setState 되었기 때문에 컴포넌트 업데이트 발생)componentWillUnmount부모 API에서 받은 데이터를 자식에

2021년 6월 8일
·
0개의 댓글
post-thumbnail

리스트와 Key

Comment 컴포넌트가 위와 같을 때 map()함수를 통해 컴포넌트를 반환하여 list에 추가하여 DOM에 렌더링 합니다.Comment 컴포넌트에서 key 부분을 누락할 경우 경고가 표시되며 “key”는 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열 어트리

2021년 5월 31일
·
0개의 댓글
post-thumbnail

클래스 컴포넌트 setState

setState 메소드는 클래스 컴포넌트에서 state 값을 변경하기 위해 사용됩니다. setState 로 값이 변경될 경우 reder 함수를 호출합니다.addCounte의 메소드를 확인해 보면 총 2번의 setState 가 존재합니다.이때 위 버튼을 클릭할 경우 0의

2021년 5월 31일
·
0개의 댓글
post-thumbnail

컴포넌트의 생명주기(Lifecycle)

컴포넌트가 브라우저에서 나타날때 사라질때 업데이트 될 때 진행되는 흐름입니다.컴포넌트 생성자 함수입니다. 컴포넌트가 새로 만들어질 때마다 이 함수가 호출됩니다.컴포넌트가 화면에 나타나게 됐을 때 호출됩니다.해당 컴포넌트에서 필요로하는 데이터를 요청하기 위해 axios,

2021년 5월 31일
·
0개의 댓글
post-thumbnail

Props

props : properties(속성)컴포넌트의 속성값props는 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체props를 통해 부모 컴포넌트로부터 자식 컴포넌트에게 state의 상태값 event handler를 넘겨줄 수 있습니다.부모 컴포넌트에서 imp

2021년 5월 30일
·
0개의 댓글
post-thumbnail

State

컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값입니다.state는 화면에 보여줄 컴포넌트의 UI 정보(상태)를 지니고 있는 객체입니다.state는 컴포넌트 내에서 정의하고 사용하며 얼마든지 데이터(객체)가 변경될 수 있습니다.클래스형 컴포넌트에서는 state를 설정할

2021년 5월 30일
·
0개의 댓글
post-thumbnail

Sass(SCSS)를 통한 스타일 수정

Sass 파일의 확장자는 .scss 입니다. 설치 시 node-modules 폴더에 node-sass 폴더가 생성됩니다. (package source code)\--save : package.json에 설치된 패키지의 이름과 버전 정보를 업데이트기존 css 가 위 와

2021년 5월 25일
·
0개의 댓글
post-thumbnail

React Router

SPA (Single Page Application) - 페이지가 한 개인 애플리케이션리액트 프로젝트에서 .html 파일의 개수는 1개이며 SPA(Single Page Application) 이라고 한다.참고) SPA 란? | velopert라우팅(Routing)이란

2021년 5월 25일
·
0개의 댓글
post-thumbnail

Component & JSX

component : 재활용 가능한 UI 구성 단위재활용하여 사용할 수 있다.코드 유지보수에 좋다.해당 페이지가 어떻게 구성되어 있는지 한 눈에 파악하기 좋다.컴포넌트는 또 다른 컴포넌트를 포함할 수 있다. (부모 컴포넌트 - 자식 컴포넌트)컴포넌트를 선언하는 방식에는

2021년 5월 24일
·
0개의 댓글
post-thumbnail

React 시작하기

MVC(Model-View-Controller) Architecture (ex. Angular, Vue)와는 다르게 리액트는 오로지 View만 담당한다. 그만큼 내장되어 있는 기능이 부족해 third-party 라이브러리(ex. React-router, Redux)를

2021년 5월 24일
·
0개의 댓글
post-thumbnail

Request & Response

HTTP 요청은 프론트엔드(클라이언트) 에서 백엔드(서버)에 일(데이터 처리)을 시작하게 하기 위해 보내는 메세지다. 이 메세지의 구조는 크게 세 부분으로 구성되어있다. Start Line: 요청의 첫번째 줄에 해당한다. 이 시작 줄도 세 부분으로 구성되어있다. HTT

2021년 5월 21일
·
0개의 댓글
post-thumbnail

GitHub 기본

GitHub은 Git repository를 위한 호스팅 플랫폼입니다.Git은 버전 관리 시스템으로, 시간이 지남에 따라 파일의 변경 사항을 추적하는 도구입니다.GitHub은 Git을 사용하는 프로젝트를 위한 호스팅 서비스입니다.GitHub을 사용하여 로컬 프로젝트 re

2021년 5월 21일
·
0개의 댓글
post-thumbnail

Git 기본

Git의 공식 명칭은 분산 버전 관리 시스템 (VCS) 입니다.다시말해 프로젝트 파일의 변경 사항을 추적하는 시스템입니다. 이를 통해 개발자들은 프로젝트의 변경 사항을 기록하고, 특정 시점의 버전으로 언제든 돌아갈 수 있습니다. 이런 버전 관리 시스템은 많은 사람들이

2021년 5월 20일
·
0개의 댓글
post-thumbnail

Event

브라우저는 이벤트를 감지할 수 있으며 이벤트 발생 시 알려 줄 수 있으며 이를 통해 사용자와 웹페이지가 상호 작용(interaction)이 가능하다.이벤트 핸들러를 통하여 이벤트가 발생시 원하는 함수에 연결하여 실행 시킬 수 있다.interaction은 HTML이나

2021년 5월 18일
·
0개의 댓글
post-thumbnail

DOM 이란?

DOM DOM (Document Object Model) DOM(돔)이란 웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object) 모델입니다. JavaScript는 이 model로 웹 페이지에 접근하고 페이지를 수정할 수 있습니다. DOM은 HTML인

2021년 5월 18일
·
0개의 댓글
post-thumbnail

defer, async 스크립트

자바스크립트를 실행하는 방법은 문서안에 <script> 태그를 이용해 작성하거나 외부의 스크립트 파일을 링크하는 방식 2가지가 존재한다.type="text/javascript" 부분은 HTML5에서는 생략할 수 있다.문서의 어느 곳이든 스크립트 배치에 제한을 두지

2021년 5월 18일
·
0개의 댓글
post-thumbnail

DevTools | Chrome

개발자 도구는 브라우저에 제공하는 하나의 도구(tool)입니다.(Chrome 개발자 도구, IE 개발자 도구, Safari 개발자 도구. etc)웹 사이트를 즉각적으로 수정하고 문제 발생시 원인을 파악하여 빠른 속도로 더 나은 사이트를 만들수 있도록 도와줍니다.크롬 개

2021년 5월 14일
·
0개의 댓글