# component

22개의 포스트
post-thumbnail

👩🏻‍💻Today We Make Code

협업의 능력을 키우기 위해,물론 학원처럼 많은 사람과 함께하진 못하지만그래도 협업하는 방법들을 익혀가며 배우기 위해서 만든 첫 OrganizationTodayWeMakeCode = TWMCcomponent list를 만들어서 외부 다른 작업에서도 우리가 직접 만든 co

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

Component 작업 - Button

각 페이지들을 살펴보며 공통된 component들을 모아서작업한 후 props로 퍼블리싱을 하는 방법을 사용하기로 했다.이중에 나는 이전 프로젝트에서 담당했던 button컴포넌트를 맡기로 했고이전보다 더 업그레이드 된 코드를 알게되고 작성하는 연습을 하게 되었다.But

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

props. 컴포넌트의 재사용성을 위한 자식에게 부모의 아이템을 전달하기 위한 프로퍼티

commentList, commentInput라고 컴포넌트를 만들었다. commentList의 역할을 받아온 데이터를 보여줄 output 공간이다. commentInput의 역할은 데이터를 input받을 공간이다.여기서 props는 컴포넌트 옆에 달린 것들이다. 우선

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

컴포넌트

코딩에서 자주 강조하던 코드의 유지보수, 그리고 재사용성을 위한 리액트의 가장 기본UI를 이루는 한 단위의 그룹들이라고 생각할 수 있음.기존 class나 function들로 하는 것과 유사함.리액트 컴포넌트는 딱 함수만 나눈다기보다는 보여지는 기능들을 단위로 쪼갰다고

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

Main Page 틀 짜기

미완성인 main page의 모습색 조합이 짜여진 사이트를 알게 되어서 내가 요즘 빠진? 주황/갈색 계열의 색들로 찾아서 조합해보았다.Play Neagle내글을 클릭하면 Profile page로 이동하고,하단에 있는 컴포넌트들을 클릭하면 Component page로 이

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

1차 프로젝트 기획안 스케치

genie 뮤직 플레이어 페이지를 참고프로필과 그동안 만들었던 컴포넌트들을 소개하기 위함path="/"로 들어올 수 있는 메인페이지.화면 전체를 사용하는 것이 아니라 플레이어의 모양을 참고하여화면 중간에 페이지를 구성할 계획가운데 앨범사진 들어가는 위치에 내 프로필 사

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

1차 프로젝트 기획안 스케치-수정

google 메인페이지를 참고프로필과 그동안 만들었던 컴포넌트들을 소개하기 위함다른 페이지에서 돌아올 수 있는 메인페이지.Play Naegle을 클릭하면 Profile page로 이동한다.Play Naegle 전체를 로고로 만들어서 컴포넌트로 만들기hover 시 이동할

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

React

React CRA node.js - node -v 로 확인 npm(node package manager) - npm -v 로 확인 CRA > 초기설정 명령어 => npc create-react-app 프로젝트명(폴더) node.modules => package

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

Component , Props

Component, props

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

컴포넌트란?

많은 하드웨어 제품들은 각각 독립된 기능을 가진 모듈로 만들어진다.이 제품들은 회사 상관없이 서로 조합하여 하나의 제품이 만들어진다.이러한 제품들의 부품은 문제가 발생했을 시, 해당 부품만 다른 부품으로 바꾸어도 제품은 문제없이 작동한다. 컴퓨터와 스마트폰과 같은 제품

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

[Angular]Angular 개요

\*본 글은 앵귤러 공식 홈페이지(http://angular.io)의 Doc 항목을 한국어로 요약정리한 글임을 밝힙니다.Angular는 HTML과 TypeScript로 클라이언트 SPA(싱글 페이지 애플리케이션)를 개발할 때 사용되는 플랫폼이자 프레임워크입니다

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

React - component

component

2020년 1월 20일
·
0개의 댓글

[React] Core Concepts(JSX, Component, Props, State, Life Cycle…)

React Core Concepts React 사이트에 정의된 React 가 무엇인지 확인해보면, A JavaScript library for building user interfaces, 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 (프레임워크) 즉, UI 를 보다 쉽고 간편하게 만들기 위한 JS 라이브러리입니다. 그렇다면 이 Re...

2019년 12월 31일
·
0개의 댓글

TIL - React로 To-do List 만들기

Today What I Learned Javascript를 배우고 있습니다. 매일 배운 것을 이해한만큼 정리해봅니다. * 1. To-Do List by React 1. 지난 이틀 리뷰 - 어떻게 이틀이 지났는지 모르겠다. 하... 지난 이틀은 Mac의 '미리 알

2019년 12월 18일
·
0개의 댓글

TIL - React로 유튜브 클로닝하기

Today What I Learned Javascript를 배우고 있습니다. 매일 배운 것을 이해한만큼 정리해봅니다. * 1. Youtube Player Cloning by React 1. 지난 3일 리뷰 - 지난주는 그래도 간단한 서버를 만들어 보면서 매일 진척

2019년 12월 14일
·
0개의 댓글

[TIL] React 01: Basic

React 리엑트가 뭐지 리엑트(React)는 Interactive UI를 손쉽게 만들 수 있게 해주는 자바스크립트 라이브러리이다. 웹사이트를 개발하는 방법은 여러가지가 있고, html+css+javascript를 통한 개발도 그 중 한가지다. 또 다른 한 가지는 React, Vue와 같은 프론트엔드 라이브러리를 이용하는 것이다. 오늘날의 웹 애플리케이션...

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

리액트 컴포넌트 타입스크립트로 작성하기

이 튜토리얼에서는 타입스크립트가 적용된 리액트 프로젝트를 만드는 방법을 알아보고, 리액트 컴포넌트를 타입스크립트로 작성하는 방법에 대하여 다뤄보게 됩니다. 프로젝트 생성 우선, 타입스크립트를 사용하는 리액트 프로젝트를 만들어볼까요? 타입스크립트를 사용하는 리액트 프로젝트를 만들때는 다음과 같이 명령어를 사용하세요. 제 yarn start를...

2019년 9월 27일
·
8개의 댓글

React - Component

React에서 component가 있습니다. component는 HTML를 반환하는 함수입니다. component의 사용법을 알아보겠습니다. React - 로컬 서버 켜기. test 폴더로 들얻가서 npm start를 하면 다음과 같은 화면이 나옵니다. 스크린샷 2019-08-23 오전 9.30.44.png 작업을 진행하기 위해 아무것...

2019년 8월 23일
·
0개의 댓글

PureComponent와 shouldComponentUpdate

리액트로 첫 프로젝트를 하면서 학교 선배에게 코드 리뷰를 부탁드렸는데, 선배가 코드를 보더니 한숨을 쉬시면서 내게 질문 한가지를 하셨다. "너 컴포넌트와 퓨어컴포넌트의 차이가 뭔지 알아?" "...몰라욘" "...공부해" 퓨어컴포넌트가 뭘까? 순수한 컴포넌트인가? 순수하면 뭐가 좋은거지? 조금 더 빠르다고 들은 것 같긴한데... 이 때까지는 정확한 정의를 ...

2019년 8월 9일
·
0개의 댓글
post-thumbnail

리액트 컴포넌트 만들기 - 캘린더

썸네일 어그로에 끌리셨다면...ㅋ 1. 프로젝트 생성 https://github.com/zynkn/component-calendar 에서 프로젝트를 fork 하거나 clone 해주세요. 그리고 init branch로 이동 합니다. 폴더트리.PNG 이닛.PNG 프로젝트 실행 후 위의 결과가 나오면 준비 완료입니다. 2. 디자인 확인 ideal....

2019년 6월 13일
·
2개의 댓글