profile
Front-End Developer 'Coming Sooooon'

[React] 새로고침을 해야 함수가 작동하는 경우

여러 삽질을 한 결과, react-router-dom의 <Route ... />의 props인 history를 이용한 이 코드가 문제였다.클라이언트 단에서 url을 변경한 것처럼 보이게하는 방식이기 때문에, 여기에서는window.location.replace("/

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

[JS] Spread 연산자, Rest 파라미터

Spread 연산자는 ... 을 통해 사용할 수 있다. MDN에서는 아래와 같이 Spread 연산자를 설명한다.전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개

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

[React] Chart.js2

먼저 관련 라이브러리를 설치한다.react-chartjs-2에서는 사용하고자 하는 Chart를 불러오고 렌더링해준다.예로 Bar Chart를 사용해보자. 모든 chart들은 data, option props를 가진다.datachart의 데이터 값optionchart의

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

[JS] String.prototype.indexOf()

찾으려는 문자열. 아무 값도 주어지지 않으면 문자열 "undefined"를 찾으려는 문자열로 사용한다.문자열에서 찾기 시작하는 위치를 나타내는 인덱스 값이다. 어떤 정수값이라도 가능하다. 기본값은 0이며, 문자열 전체를 대상으로 찾게 된다. 만약 fromIndex 값이

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

[React] LifeCycle보충

React의 컴포너트는 생명주기(Life cycle)을 가진다. 생명주기란 컴포넌트가 생성되고 사용되고 소멸될 때 까지 일련의 과정을 말한다.이러한 생명주기 안에서는 특정 시점에 자동으로 호출되는 메서드가 있는데, 이를 라이프 사이클 이벤트라고 한다.생성자 메소드로 컴

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

[React] Hooks

Hook >Hook은 함수 컴포넌트에서 react state와 lifecylcle을 연동 할 수 있게 해주는 함수이다. hook은 class 안에서는 동작하지 않는다. 대신 class 없이 react를 사용할 수 있게 해준다. Hook 사용규칙 최상위에서만 Hoo

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

[2차 프로젝트 회고록]

기간: 2020/11/30~2020/12/11 (총 12일간)레퍼런스 페이지: Class101 (https://class101.net/) 팀명: ClNASS 101이번 프로젝트 또한 scrum방식으로 진행하였다. 저번 프로젝트때도 같은 방식으로 진행하였지만 조

2020년 12월 13일
·
1개의 댓글

[React] Styled Component

지금까지 css작업은 SSAS로 진행했었다. css에서 SASS로 넘어가면서 편리함을 느꼈었는데 SSAS에서 styeld component로 작업 방식을 바꾸면서는 의문점이 많았다. 오히려 처음에는 더 불편함을 느꼈었던 것 같다. 그렇지만 좀 더 깊이 있게 사용해보면

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

1차 프로젝트 회고록

기간: 2020년 11월 16일(월) ~ 2020년 11 27일(금)사이트: HourPlace (https://hourplace.co.kr/)팀명: OurPlays (프론트 2, 백엔드 3)첫 프로젝트는 scrum 방식으로 진행해보았다. 스크럼(Scrum)은

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

[React] 동적라우팅

IndexSPA, React Router리스트 페이지 >>> 상세 페이지유동 라우터유동라우터란?유동라우터 방법 두 가지1) Query parameters2) URL parameters두 가지 방법을 각각 언제 사용하는게 좋을까?Wrap UpSPA, React Route

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

[React] 부모-자식 간 Lifecycle & 조건부 렌더링

에러메시지를 읽어보면 말 그대로 undefined에 대하여 map 함수를 실행하려 했다는 뜻입니다. 분명 우리가 없는 값에 map을 사용하려 했던 건 아니었을텐데 말이죠. 하지만 이는 분명 해당 값이 어느 순간에는 비어있었다는 뜻이고, 상태값의 시점에 관한 문제라

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

[React] props

링크텍스트props : properties(속성)단어 뜻 그대로 컴포넌트의 속성값이다.props는 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체이다.props를 통해 부모 컴포넌트로부터 자식 컴포넌트에게 state의 상태값, event handler를 넘겨줄

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

[React] state

State >- 단어 뜻 그대로 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값이다. state는 화면에 보여줄 컴포넌트의 정보(상태)를 지니고 있는 객체이다. state는 컴포넌트 내에서 정의하고 사용하며 얼마든지 데이터(객체)가 변경될 수 있다. state 객체

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

[React] SSAS

Syntactically Awesome Style Sheet nesting이 가능한 css 이다. SSAS의 확장자 명은 .scss이다.Sass의 가장 기본적인 기능으로 Nesting 이라는 것이 있다. JSX 최상위 요소의 className을 컴포넌트 이름과 동일하게

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

[React] Router

SPA(Single Page Application) - 페이지(html)가 한개인 애플리케이션()리액프 프로젝트에서 .html 파일의 개수는 1개이다.Routing이란 다른 경로에 따라 다른 view(화면)을 보여주는 것이다.리액트 자체에는 이러한 기능이 내장되어 있지

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

[React] Component & JSX

componet: 재활용 가능한 UI 구성 단위 예제. westagram 메인페이지 \- main 페이지를 Component로 나눈다면, \- Nav컴포넌트, Main컴포넌트, 그리고 Main 컴포넌트 안에는 Feed 컴포넌트와 MainRight 컴포넌트로

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

[React] Introduce

규모가 커지고 복잡한 애플리케이션을 개발하며 생산성을 향상시키고 많은 양의 데이터 관리와 코드 유지 보수를 더욱 편리하게 하기 위해 다양한 Frontend Framework(Library)가 등장하게 된다. 그 중 가장 많이 쓰이는 세 가지가 Angular, Vue,

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

[Web] How the Web works

인터넷에 띄운다는 것은 홈페이지의 구성파일들이 인터넷에 항상 연결되고, 절대 꺼지지 않는 호스트 컴퓨터의 일부에 저장되어 있다가 사용자의 요청이 오면 언제든 응답하는 것이다.ex) AWS ec2/S3, cafe24등등IP주소는 internet으로 통신하는 각 devic

2020년 10월 31일
·
0개의 댓글

[Database]

위의 표는 스타벅스 메뉴를 나타낸 것이다.category - sub-categorysub-category - productproduct - product_allergy - allergynutrient - product_allergy데이터를 저장 및 보존 하는 시스템Ap

2020년 10월 31일
·
0개의 댓글

[git] git이란?

GIT -> VCS(version control system) 쉽게 말해, 프로젝트 파일의 변경 사항을 추적하는 시스템이다. 이를 통해 개발자들은 프로젝트의 변경 사항을 기록하고, 특정 시점의 버전으로 언제든 돌아갈 수 있다. 여러 사람들과 효율적으로 작업할 수 있다.

2020년 10월 28일
·
0개의 댓글