💡 URECA

컴포넌트를 선언하는 방식1. 함수 컴포넌트import React from 'react';const TTest = () => { return ( );};export default TTest; 2. 클래스형 컴포넌트import React, { Component } from 'react';class TTest extends Component { render() { return ( ); }}export default TTest; render 함수가 꼭 있어야한다. → 그 안에 보여줘야할 JSX를 반환한다.  함수 컴포넌트와 클래스형 컴포넌트의 차..

자바스크립트초기에는 단순한 연산과 시각적인 효과를 주는 스크립트 언어현재는 웹 어플리케이션에 가장 핵심적인 역할슬랙, 아톰, VScode등을 일렉트론으로 개발(자스로 데스크톱 어플리케이션을 만들 수 있는 프레임워크)페이스북, 디스코드, 페이팔 등등하지만 순수 자바스크립트 만으로는 관리하기 어려움순수자바스크립트 문제 해결위해 프레임워크들 등장프레임워크는 항상 발전하고 새롭게 등장 다양한 프레임워크 리액트 점유율 킹왕짱! 다른 프레임워크의 경우 MVC 아키텍쳐를 사용하고 있음.다른 아키텍쳐와 공통점은 모델과 뷰가 있다는 것.모델은 애플리케이션이 사용하는 데이터를 관리뷰는 사용자에게 보여짐애플리케이션 규모가 크면 복잡해지고 관리를 제대로 하지않으면 성능이저하됨   ⭐ ReactMVC, MVW 등과 다르게 오직..

기존에 있는 다양한 학습 앱들을 참고하면서, 새로운 형태의 학습 앱을 구상해보고 싶었다.앱의 이름은 T-Time으로, 단순히 차를 마시는 시간을 의미하는 Tea Time뿐만 아니라, 대화를 나누는 시간이라는 의미의 Talk Time까지 포함할 수 있도록 네이밍했다. 이 앱은 마이크로 러닝을 기반으로 학습을 돕는 서비스를 제공하며, 짧은 시간 안에 효율적으로 학습할 수 있도록 설계되었다.또한, 추후 수익화 방안을 고려한다면 화상 언어 교환 기능을 추가할 수 있다. 사용자가 기본적인 언어 교환을 무료로 경험할 수 있도록 하되, 일정 시간이 지나면 제한이 걸리고, 추가 시간을 연장하기 위해서는 유료 결제를 해야 하는 방식으로 구성할 수 있다.이를 통해 사용자들에게 자연스럽게 학습을 지속하도록 유도하는 동시에,..

캐러셀 인터랙션 메인 페이지에서 디자인 컨셉이나 마케팅 정보를 순서대로 전환하면서 보여주는 이미지 방식오버플로우 스크롤링 인터랙션  오버플로우 스크롤링은 화면 내에서 좌우로 스크롤리 된다는 점스크롤이 멈추면 멈춘 위에서 이미지가 좌우 어디로든 안 겹친다. 모달창 인터랙션  모달 창이란 팝업 창과 비슷한 개념특정 영역에 원하는 크기로 새로운 디자인을 띄우는 것을 의 내비게이션 드로워 인터랙션 화면의 왼쪽 가장자리에서 서랍 처럼 열리고 닫히면서앱을 탐색 할 수 있는 패널 의미모바일 그리드컬럼 4 마진 16 거터 16웹 그리드컬럼 12 마진 64 거터 36

재사용 가능한 UI요소인 컴포넌트디자인의 핵심컴포넌트를 사용해 디자인 요소를 한번에 수정 및 변경 가능다른 페이지와 프로젝트에서도 재사용 가능재사용하도록 등록한 원본 → 컴포넌트 원본 컴포넌트를 복제한 오브젝트 → 인스턴스  컴포넌트 색상 바꾸면인스턴스들도 색상이 바뀐다.           인스턴스로 따로 색상을 지정한건로컬 인스턴스라 컴포넌트에서 색상을 바꿔도 안바뀐다.            요소에서 색상을 바꾼다. 인스턴스 전체를 클릭한다.push 버튼을 누르면나머지 요소도 색상이 바뀐다.연보라 컬러로 표시된걸 누르면 인스턴스가 끊긴다.            layer에 아이콘이 바뀐걸 확인 할 수 있다.          베리언트비슷한 컴포넌트의 세트컴포넌트 아이콘을 눌러서 create component..

피그마를 이용해 간단한 레이아웃을 디자인해봤다.왼쪽 디자인은 수업시간에 실습한 내용,오른쪽 디자인은 내가 자주 사용하는 어플리케이션인 유튜브를 디자인한 것이다.            컨스트레인트다양한 디바이스 크기에 맞게 디자인을 변경해야할 때 컨스트레인트 기능을 사용한다.컨스트레인트를 사용하면 화면의 크기가 늘어나거나 줄어들어도 원래의 위치에 구성 요소가 존재하도록 할 수 있다. => 즉, 반응형으로 만들 수 있다.   위 배경:  l+r, top으로 지정홈 아이콘: center, top으로 지정저장 아이콘과 알림 아이콘: right, top으로 지정 자동차 사진 아이콘:  l+r, top+bottom으로 지정       연락처아이콘과 text는 center과 bottom으로 지정아래 배경:  l+r, ..

UX/UI가 중요한 이유사용자에게 편리하고 유용한 환경을 제공단순한 서비스를 넘어 사업으로, 문화로 확장WHY => WHAT, HOW CX란 무엇일까? Customer Experience고객 경험 디자인고객이 제품이나 서비스를 인지, 탐색, 이용하는 전 과정에서의 경험을 설계하고 최적화 하는 작업  UX/UI의 공통점은 무엇일까?USER, 서비스를 사용하는 사람이다.   UI사용자 인터페이스 => 어떻게 보이고 기능하는가실제로 사용자가 접하게 되는 부분=> 시각적으로 드러나는 것들 디자인하는 것         UX 사용자 경험 중심적인 관점에서 웹/앱을 구상하고 설계하는 모든 단계사용자 경험 => 사용자가 서비스를 이용하는데 느끼는 총체적 경험   UI 색상어려울 수록 간결하게 검은 색은 검은색이 아니다..

20일과 21일 사이의 새벽, 한숨도 안 자고 PPT 제작과 영상 편집을 했다.PPT는 캔바를 통해 팀원과 공동 작업을 진행했고, 영상 편집을 하면서도 팀원이 함께 잠을 안 자고 대본 작성에 도움을 줬다.디스코드로 화면을 공유하며 편집을 하다 보니 노트북 메모리가 부족해 작업 속도가 느려졌고, 30분이면 끝날 작업이 1시간 넘게 걸리기도 했다. 게다가 편집 앱이 계속 꺼지는 바람에 고생 아닌 고생을 했다.그렇게 영상을 만들다 보니 어느덧 해가 뜨고, 수업 시작 30분 전에야 노트북을 잠시 쉬게 해줄 수 있었다.오전시간에 음악을 추가하고 무사히 제출할 수 있었다. 홈 화면을 맡았을 때 생각보다 많은 기능이 숨어 있어서 다소 버거웠다.단순히 UI만 다듬으면 될 줄 알았지만, 데이터를 어떻게 보여줄지, 상태 ..

[URECA] 독서 목표 설정 및 챌린지 달성 지원 웹사이트 구현을 통한 웹 아키텍처 이해 #8 — console.log("Hello, Bug!"); [URECA] 독서 목표 설정 및 챌린지 달성 지원 웹사이트 구현을 통한 웹 아키텍처 이해 #8프로젝트 발표일까지 남은 시간은 단 하루삭제버튼도 만들어야하고독서 진행바도 만들어야했다.하지만 시간이 부족해 로그인과 회원가입 기능을 완료한팀원이 도와줬다.팀원은 독서 진행바를recordoftheday.tistory.com