# component

42개의 포스트
post-thumbnail

TIL. [React] 컴포넌트의 Lifecycle - 8/4

render, componentDidMount, componentDidUpdate, componentWillUnmount 등의 함수는 React.Component class에서 제공하는 메서드 입니다.컴포넌트를 만들 때 class로 생성하면 위의 메서드를 사용할 수 있

어제
·
0개의 댓글

TIL.[React] Component와 State - 8/4

state란 말 그대로 컴포넌트의 상태 값입니다.state와 props는 둘 다 object 이고, 화면에 보여줄 정보(상태)를 가지고 있다는 점에서 서로 비슷한 역할을 합니다.props는 컴포넌트를 사용하는 부모쪽에서 전달해야만 사용할 수 있고(parameter 처럼

2일 전
·
0개의 댓글

TIL.(React) Component와 Props - 8/3

1. Component 프론트앤드 개발에서 Component 라는 단어를 많이 사용합니다. component(컴포넌트)란 재사용 가능한 UI 단위입니다. 동일 코드가 반복되는 부분을 하나의 component로 만들어서 같은 디자인의 input이 필요한 곳마다 재사용

2일 전
·
0개의 댓글

Component 정의

하나의 페이지를 구현하기 위해 여러 개의 컴포넌트를 사용한다. 그렇기에 컴포넌트의 기능은 단순한 템플릿 이상이다.데이터가 주어졌을 때, 이에 맞추어 UI를 만들어준다.라이프사이클 API를 이용하여 컴포넌트가 화면에서 나타날 때, 사라질 때, 변화가 일어날 때, 주어진

2일 전
·
0개의 댓글

[React 리팩토링 #1] JSX로 HTML 렌더링하기

JSX에서 <br/>태그를 사용하면, 적용되지 않은 채 문자열 그대로 렌더링 된다. React는 무조건 텍스트형태로만 페이지를 렌더링하도록 설계되어있기 때문이다.

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

풀스택을 향하여 - Vue.js Component & Flask Backend 연동(2) - frontend

Backend에서 보내준 데이터를 frontend에서 보여주자이전 글에서 네이버 야구경기의 데이터를 긁어오는 과정을 Backend에 적용했다.이제 Vue에서 Backend와 연동하여 데이터를 보여주는 Component를 작성하겠다.완성된 소스는 깃허브에 있다 →

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

프론트엔드의 역할은 어디까지? - 더미데이터 만들기

더미데이터를 만들어 컴포넌트에 데이터를 전달해보고, map()을 이용해 더 계층적인 컴포넌트로 리팩토링 해보면서 느낀점들.

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

Tooltip 작업진행

3번째 component : Tooltip > 📌 참고하였습니다 https://www.w3schools.com/howto/tryit.asp?filename=tryhowcsstooltip 내 개인 페이지에 넣을 component들을 우선적으로 만들다 보니 프로필 페이

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

Main Page 수정작업

처음에 작업했던 Main page가 너무 부실했기에...수정작업을 거쳐서 어느정도 완성 된 페이지!profile page로 넘어가는 버튼을 표시?하기 위해서 tooltip component를 추가사용되지 않은 check-box component를 삭제하고 tooltip

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

Profile Page 틀 짜기

시행착오 끝에 완성한 Profile Page.제일 처음 완성한 page였다. 제일 간단해서 그런지 빨리 끝냈다.원래 좀 그냥 간단한 페이지였었는데,다른 작업들을 하나하나 하다 보니 너무 심심해보여서폰트도 바꾸고, transition도 추가하다 보니그래도 꽤 맘에 드는

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

Component Page 틀 짜기

미완성인 Button component 페이지 틀.우선 페이지마다 쓰인 버튼들을 모아서 넣어두긴 했는데내용이 너무 부실한 것 같아서 각 버튼들이 어떤 작동을 하는지 설명을 간단히 할까 생각중.중첩라우터를 사용해서 상단 tab menu에서 각 컴포넌트로 이동이 가능하게

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

TIL(20.05.01) react

react는 JavaScript 라이브러리로써 사용자 인터페이스를 만들기 위해 사용된다 JSX는 자바스크립트의 확장 문법으로 dom에 그려질 ui가 어떻게 생겼는지를 설명하기 위한 문법이다 JSX는 엄연히 자바스크립트 코드이기 때문에 자바스크립트 객체로서 다루어 진다

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

React Component로 웹페이지 디자인하기

CSS, React 라이브러리 및 템플릿을 component화 시켜 예발자닷컴 메인 페이지를 반응형으로 디자인했다.

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

[React] 컴포넌트의 State 란?

사용자가 알 필요가 없는 데이터를 내부에서 은닉하는 것. 즉, 캡슐화를 통해 코드를 리펙토링 하는 것이 좋은 사용성을 만드는 핵심이다.

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

[React] 컴포넌트의 Props 란?

마치 HTML 태그의 속성처럼, 한 컴포넌트의 요소에 props value를 지정하면 다른 컴포넌트에서 그 value에 값을 넣어 사용할 수 있는 것이다.

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

[React] 컴포넌트(Component) 생성 및 파일별로 분리하기

App.js 파일의 App 컴포넌트 구조를 참고해 새로운 컴포넌트를 만들고, 파일로 분리해 관리한다.

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

들어는 보았나 Transparent Wrapper Component

Vuejs가 제공하는 유용한 props들이 있다. 가령 v-model, @focus 등의 이벤트 인터페이스 들은 prop으로 건내주는 것 만으로 기대되어지는 작동(?)을 잘 한다 이렇게 native component들에 v-model, v-on:hover 등 pro

2020년 6월 17일
·
4개의 댓글
post-thumbnail

👩🏻‍🎨 전체적인 분위기 바꾸기

이전에 틀을 만들어서 진행하던 프로젝트를 다른 프로젝트들을 통해 만들어진 component들을 가지고 다시 꺼내서 진행하게 되었다. 그 처음으로 전체적인 분위기를 바꿔주기로 했다. 딱딱하고 시시한 기본 서체에, 탁하고 재미없는 색상들 때문에 신경쓰였던 sidebar와

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

리액트의 컴포넌트란...?

토이프로젝트를 진행하면서 느꼈던 점을 몇가지의 포스팅을 통해서 공유해볼려고 합니다.왠만하면 첫 언어 혹은 framework를 배우면서 바로 서비스를 처음부터 만들지 않는다. 대부분, 그 기술스택에 능한 사람을 옆에 끼고(?), 같이 만들게 되고 이렇게 되었을때 그 기술

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

알면 좋은 React 지식

React 지식들 모음

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