불변객체와 불변성, 깊은 복사

불변객체(Immutable Object)는 최근 React, Vue.Jjs, Angular 등의 라이브러리나 프레임워크뿐만 아닌 함수형 프로그래밍 과 디자인 패턴 등에서 매우 중요한 기초 개념이다.기본개념: 새로운 데이터를 할당하고자 하면, 기본형 데이터와 마찬가지로

2020년 12월 12일
·
0개의 댓글

<TIL-25> useState 하나로 state 관리하기

함수형으로 react를 개발할 때, state 값을 관리하기 위해 사용하는 hook 이다. 개발을 계속해서 하다 보면, 규모가 커지게 되고 여러개의 state 값을 관리하게 된다.이럴 때 공통적인 특징이 있는 state값이거나, 같은 타입을 가지는 state 값이면 효

2020년 11월 12일
·
0개의 댓글

<TIL-24> radio button 만들기

Input Tag 를 활용하여 radio Button 을 만들 수 있다.코드 지금의 radio 버튼은 한개만 선택이 가능하다. 만약 중복체크가 가능한 radio 버튼의 UI를 만들고 싶다면, name 속성을 지워주면 된다.코드Point) input tag의 name속성

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

TRUE TRUE 프로젝트 회고록

프로젝트 소개 ▶ 외국 포토샵 브러쉬 판매 사이트를 기반으로 한 기능 구현 프로젝트 ▶ 개발기간 2020년 8월 31(월) ~ 2020년 9월 11일(금) ▶ 팀 구성 Front-End: 3명 (이도윤, 오승하, 김건우) Back -End: 2명 (김태수, 김

2020년 10월 30일
·
0개의 댓글
post-thumbnail

TypeScript) 서버에서 받은 Data에 interface 선언하기

서버에서 받는 데이터 구조는 일반적으로 [{},{},{}...]의 구조를 가지고 있다 React 를 활용하여 개발 할 때, 위의 구조로 데이터를 받아 주로 map() 함수를 활용하여 컴포넌트를 재사용한다. >* user 라는 data를 받아 map() 함수를 돌리고

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

React) Docker로 배포된 React를 Clone 할 때 Setting 방법

인턴으로 진행 중인 프로젝트는 React 셋팅과 Docker로 배포되어 있었다. 초기셋팅이 진행된 프로젝트를 Clone 받은 후, Docker로 실행 될 수 있도록 환경설정을 한 순서와 방법을 적어보려고 한다. >만약에 개발을 진행하는 노트북에 아무런 개발환경이 구

2020년 10월 4일
·
0개의 댓글
post-thumbnail

GraphQL) Playground 란

Playground 란? > GraphQL API를 GUI로 보여주고, 상호작용할 수 있는 GraphQL IDE > * Playground 실행 시 모습 Playground의 편리함 Front-End 개발을 맡았기 때문에, server를 개발하진 않았지만 Graph

2020년 10월 3일
·
0개의 댓글
post-thumbnail

GraphQL) DBeaver Database Tool 활용하기

DBeaver는 다양한 Database를 지원하는 Database 관리 툴 이다.종류: MySQL, PostgreSQL, SQLite, Oracle, DB2, SQL Server, Sybase, MS Access, Teradata, Firebird, Apache Hi

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

GraphQL 이란

페이스북이 개발한 Query LanguageQuery 란 데이터베이스에 정보를 요청하는 것으로, Query Language는 데이터베이스에 접근할 수 있는 언어 라고 이해할 수 있다.GraphQL은 REST API의 단점을 해결하기 위해 개발되었는데, 가장 큰 장점으로

2020년 9월 27일
·
0개의 댓글
post-thumbnail

TypeScript) Optional Properties

어떤 함수에서 인자 3개를 받겠다 설정하여도, 2개를 받아 return 할 수 있다.2개에 해당하는 값만 함수에 대입하여 결과를 출력 할 수 있기 때문이다.만약 이 함수에 TypeScript를 적용하여, 각 인자에 해당하는 Type을 설정해준다면,TypeScript의

2020년 9월 27일
·
0개의 댓글
post-thumbnail

TypeScript) 스타일 컴포넌트에 전달하는 props에 type 선언해주기

Style Component에 props 를 전달하는 방법 정리 > #### TrueGrit 프로젝트에서 발췌한 컴포넌트 개발 코드 Styled Component에 속성을 부여하고, props로 보낼 데이터를 중괄호로 감싸준다.

2020년 9월 27일
·
0개의 댓글

<TIL-23> 서버사이드 렌더링 개념

NEXT.js는 리액트에서 서버사이드 렌더링 적용할 수 있도록 환경을 제공하는 프레임워크 이다. 지금까지의 렌더링 방식은 클라이언트에서 View와 Controller를 작업하였는데, 이것을 서버에서 직접 작업할 수 있도록 해주는 것이 "서버사이드 렌더링" 이다. 리

2020년 9월 20일
·
0개의 댓글
post-thumbnail

React) 아토믹 디자인 패턴

레이아아웃의 요소들을 개별의 컴포넌트로 나누고, 조합하며 디자인해가는 과정이다.UI 재사용의 효율을 높인다.Atoms: 하나의 구성 요소. (ex. input, button 창 하나씩)Molecules: Atoms가 두개 이상 조합되었을 때, (ex. input 과 b

2020년 9월 20일
·
0개의 댓글
post-thumbnail

TypeScript) 인터페이스(interface)

객체로 각 변수의 타입을 지정 >주로 interface로 선언하여 각 변수의 타입을 key 와 value 값으로 저장해준다. >* interface 로 type을 선언해주는 형식 test 코드) > * 코드 설명 코드를 보면, a 변수는 number로 선언되어

2020년 9월 19일
·
0개의 댓글

<TIL-22> Git Rebase

Git Rebase에 대한 자세한 내용은 따로 정리를 하고, TIL에서는 간략하게 기록해 두려고 한다.말 그대로 base를 재배치 한다는 뜻이다. 좀 더 풀어서 설명하자면, branch에서 작업 중 add, commit의 단계를 거치면 어떤 작업이 되고 있는지 log가

2020년 9월 13일
·
0개의 댓글

<TIL-21> Styled Components를 적용하면서 공부한 것

두번째 프로젝트에 styeld components를 적용하는 중인 코드데이터를 가지고 map함수를 활용하여 효율적으로 Component를 관리하였다.InnerImg 스타일 컴포넌트에 img 라는 속성값을 주었고, 그안에 url 데이터를 props로 보내주었다.Inner

2020년 9월 12일
·
0개의 댓글

<TIL-20> 효율적으로 React를 개발 할 수 있도록 해준 꿀팁들

대표적으로 페이지의 Nav 나 Footer의 경우 모든 페이지에 존재하는 경우가 많다.위와 같은 레이아웃과 기능은 보통 공통 컴포넌트로 개발하는데, 모든 페이지에 존재하는 경우 쉽게 적용할 수 있는 방법을 알게 되었다.내가 아끼는 2번째 React 프로젝트의 Route

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

React) Styled Component

CSS-in-jsCSS파일 없이 자바스크립트에서 CSS 작업을 할 수 있도록 해주는 라이브러리.컴포넌트로 style 작업 시 class name의 중복을 신경쓰지 않아도 된다.컴포넌트 구조와 style을 한눈에 볼 수 있다.2018년 이후 폭발적으로 성장하여, npm

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

React) 자식 컴포넌트의 data를 부모 컴포넌트에 넘기는 방법

이제 부모 컴포넌트에서 자식 컴포넌트로 props를 넘기는 일은 너무 자연스럽다. 그러나, 프로젝트를 진행하면서 자식의 데이터가 변했음을 부모가 알아야 하는 경우들이 생겼다. 이번에는 자식 컴포넌트의 data변화를 부모 컴포넌트가 감지할 수 있도록 해주는 방법을 알

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

React) Hooks 사용하기

지금까지 공부했던 React의 컴포넌트는 Class형 컴포넌트 였다.본죽 클론 프로젝트에서 사용했던, Class형 컴포넌트 \-. class Nav 로 선언 되어있는 것을 볼 수 있다.React에는 Class형 컴포넌트와, 함수형 컴포넌트가 있다.먼저 Class형 컴포

2020년 9월 6일
·
0개의 댓글