profile
천천히, 완벽히 배워나가고자 하는 웹 서비스 엔지니어
post-thumbnail

[Front] React 소스 구현(6) - NavBar

본 게시글은 src/component/route/경로의 NavBar에 대한 소스 리뷰로써 개인적으로 진행하는 toy project의 일부입니다.각 페이지 상단부에 상시 노출되는 네이게이션바 역할해당 소스는 아래 빨간 영역을 구성하는 부분이다.해당 페이지 뿐만 아니라 모

2021년 10월 16일
·
0개의 댓글
·
post-thumbnail

[Front] React 소스 구현(5) - RouterComponent

본 게시글은 src/component/route/경로의 RouterComponent에 대한 소스 리뷰로써 개인적으로 진행하는 toy project의 일부입니다. 전체 소스 roll 해당 소스는 사용자가 접근하는 path에 따라 어떤 component로 이동할지 분기

2021년 10월 16일
·
0개의 댓글
·
post-thumbnail

[Front] React 소스 구현(4) - ApiService

본 게시글은 ApiService에 대한 소스 리뷰로써 개인적으로 진행하는 toy project의 일부입니다. 전체 소스 roll Front와 Back 사이 API 호출을 처리하기 위한 컴포넌트 소스 분석 소스 분석에 앞서 axios의 개념에 대해 이해가 선행되어

2021년 10월 16일
·
0개의 댓글
·
post-thumbnail

[Front] React 소스 구현(3) - AddListComponent

이번 게시글은 src/component/user/경로의 AddUserComponent에 대한 소스 리뷰로써 개인적으로 진행하는 toy project의 일부입니다. 전체 소스 roll 해당 소스는 사용자 목록 중, 추가로 사용자를 등록하려 할 때, 호출되는 컴포넌트

2021년 10월 16일
·
0개의 댓글
·
post-thumbnail

[Front] React 소스 구현(2) - EditUserComponent

이번 게시글은 src/component/user/경로의 EditUserComponent에 대한 소스 리뷰로써 개인적으로 진행하는 toy project의 일부입니다. 전체 소스 소스 역할 해당 소스는 사용자 목록 중, 특정 사용자의 데이터를 수정하고자 할 때, 호출되

2021년 10월 16일
·
0개의 댓글
·
post-thumbnail

[Front] React 소스 구현(1) - UserListComponent

이번 게시글은 기본적인 개발환경을 구축한 상태라는 가정하에 React를 통한 front 개발과정을 노트하려 한다. 본 작성글은 프로젝트 전체 소스가 아닌 일부 컴포넌트(UserListComponent)에 대한 소스 리뷰이며 계속해서 남은 컴포넌트들에 대해 작성해보도록

2021년 10월 16일
·
0개의 댓글
·
post-thumbnail

[개발환경] SpringBoot + React 통합 환경 구성하기

오늘은 이전에 만든 SpringBoot 프로젝트 내부에 React 프로젝트를 넣는 작업을 진행해보도록 하겠다.SpringBoot 프로젝트 만들기: https://velog.io/@cho876/Spring-Boot-프로젝트-만들기-Spring-Initializr

2021년 10월 13일
·
0개의 댓글
·
post-thumbnail

fetch 함수

-Fetch함수 다루기

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

조건문 작성패턴 3가지

오늘은 리액트에서 자주 사용하는 조건문의 형태에 대해 알아보도록 하겠다.if문을 사용하는 방식은 다른 언어를 배워본 사람이라면 익숙한 부분일 것이다.위와 같은 형태로 조건에 따라 로직을 분기 처리하며 비교적 쉬운 방법이지만 리액트의 JSX 영역 내부에선 if문 사용이

2021년 10월 1일
·
0개의 댓글
·
post-thumbnail

Chapter 19. if문 사용하기

오늘은 if문을 사용하는 방법에 대해 배워보도록 하겠다.이전 챕터에서 JSX에선 if문을 사용할 수 없다고 말했었다.그러므로 JSX 바깥에서 if문을 사용하는 방법에 대해 알아보도록 하자if문은 대부분의 프로그래밍 언어에서 사용하는 조건문이다.React에서도 if문은

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

Chapter 18. 삼항연산자

오늘은 삼항연산자에 대해 알아보도록 하겠다.일반 조건문과 어떻게 다른지, 어떻게 사용하는지 함께 정리해보도록 하자우리는 보통 조건문을 사용할 때, if문을 통해 해결한다.if문은 조건문으로 많이 사용되지만 JavaScript에선 사용할 수 없다.JavaScript에서

2021년 9월 17일
·
0개의 댓글
·
post-thumbnail

Chapter 17. defaultProps

오늘은 defaultProps에 대해 알아보도록 하겠다.이름에서 조금은 유추되듯이 이것도 props와 연관된 것인데 어떻게 사용되는지 알아보도록 하자우리는 A컴포넌트에서 B컴포넌트로 데이터를 전달하고 싶을 때, props를 통해 처리한다고 배웠다.그럼 만약, A컴포넌트

2021년 9월 17일
·
0개의 댓글
·
post-thumbnail

Chapter 16. prop-types

오늘은 prop-types에 대해 배워보도록 하겠다.prop-types가 어떤 이유로 사용되고 어떻게 사용되는지 살펴보도록 하자.우리는 과거 props를 통해 데이터를 전달하는 방법에 대해 배워보았다.이를 바탕으로 다시 한번 코드를 구현해보도록 하자.전반적인 소스 설계

2021년 9월 17일
·
0개의 댓글
·
post-thumbnail

Chapter 15. 구조 분해 할당

이번엔 이전 Chapter에서 axios로 데이터를 가져온 값을 다른 방식으로 저장하는 방법에 대해 알아보도록 하겠다. 1. 기존 데이터 저장 방식 기존에 우리가 axios를 통해 데이터를 가져오고 이를 저장할 땐, 아래와 같은 코드를 사용했다. 우리는 최초에 외

2021년 9월 12일
·
0개의 댓글
·
post-thumbnail

Chapter 14. axios 데이터 출력

오늘은 이전 Chapter들에서 배웠던 내용을 토대로 axios를 통해 받아온 데이터를 state, map을 통해 출력하는 것을 진행해보도록 하겠다.우선, axios를 통해 외부로부터 데이터를 가져오는 함수부터 만들어보도록 하겠다.getMyData라는 함수명으로 새로운

2021년 9월 11일
·
0개의 댓글
·
post-thumbnail

Chapter 13. ComponentDidUpdate()

컴포넌트에도 생명주기가 존재한다고 이전에 언급했었다.오늘은 그 중에서도 ComponentDidUpdate()에 대해 한번 더 짚고 넘어가도록 하겠다.ComponentDidUpdate:해당 페이지(컴포넌트)의 데이터가 업데이트되는 경우, 자동적으로 Call하는 함수실제

2021년 9월 7일
·
0개의 댓글
·
post-thumbnail

Chapter 12. state 사용하기

오늘은 데이터를 동적으로 바꾸고자 할 때, 사용되는 state에 대해 알아보도록 하자.공통점App 컴포넌트의 렌더링 결과물에 영향을 주는 객체차이점props: 서로 다른 컴포넌트 사이에 데이터를 전달할 때 사용되는 객체state: 하나의 컴포넌트 내에서 데이터를 동적

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

Chapter 11. axios 사용하기

그동안 내부에서 데이터를 생성하고 이를 다루는 방법에 대해 배워봤다.이번 Chapter에선 외부 링크를 통해 데이터를 가져오고 이를 다루는 방법에 대해 알아보도록 하겠다.axios: HTTP통신을 하는데 있어 매우 인기있는 JavaScript 라이브러리IE8 이상을 포

2021년 9월 4일
·
0개의 댓글
·
post-thumbnail

Chapter 10. class 컴포넌트

이전 Chapter들에서는 모두 function 형태의 컴포넌트 선언을 사용했다.하지만 외부에서 데이터를 가져오고 이를 다루기 위해선 한계가 존재하기에 class 형태의 컴포넌트 선언 방식이 필요하다.이번 Chapter에선 class 컴포넌트 선언에 대해 알아보도록 하

2021년 9월 4일
·
0개의 댓글
·
post-thumbnail

Chapter 09. map() 함수

오늘은 map() 함수를 활용하여 데이터를 출력하는 방법에 대해 알아보도록 하겠다.map() 함수는 다른 프로그래밍 언어에서 활용되는 Map 클래스와 동일한 역할을 한다.Key:Value 형태로 저장되며 Key는 반드시 다른 Key와 중복이 있어선 안된다.그럼 이번엔

2021년 9월 1일
·
0개의 댓글
·