소개UniVap은 대학생들이 함께 식사하며 자연스럽게 새로운 친구를 만나고, 캠퍼스 내에서 사회적 연결과 공동체 의식을 형성할 수 있도록 돕는 플랫폼이다.대학 인증 API를 통해 신뢰성을 보장하며, 대학생만을 위한 맞춤형 교류 환경을 제공한다. 문제 정의 및 배경 기간: 2025년 3월 초 ~ 6월 8일개발 배경대학생들은 학업과 취업 준비에 집중하면서 자연스럽게 교류가 줄어들어 관계 단절이 심화된 상황이다.대면 활동이 재개된 이후에도 캠퍼스 내에서는 여전한 거리감이 존재하는 문제이다.개인주의 성향이 강화되면서 소속감과 공동체 의식이 점차 약화된 현상이다.기존 SNS 서비스는 대학생 특화 기능의 부재와 미흡한 인증 절차로 인해 신뢰성이 부족한 한계를 지닌 플랫폼이다.이러한 문제를 해결하기 위해 UniVap..

와이어프레임을 만들때부터와이어프레임을 만들때부터 기능 요약을 해야한다.ex) 사용자 입력 필드에 텍스트를 입력하면 상태에 저장됨⬇️컴포넌트 구현에 대한 설명도 하면 좋다.ex) 1. 상태관리사용자가 입력 필드에 텍스트를 입력할 때마다 상태가 업데이트 된다. 📝 유저에게 알림을 줄때는 alert()보단 모달 사용하기⬇️사용자 관점에서 동작 과정도 설명하면 좋다 📃 주요 코드 설명import React, { useState } from 'react'const InputFild = ({ setData }) => { const [inputText, setInputText] = useState('') // 태그들에 이벤트 넣고 함수로 만들어놓기 const inputItem = e => { // 한글..

Event Handling이란 무엇일까?Event - 웹 내부에서 발생하는 사용자의 행동 (버튼 클릭, 메시지 입력, 스크롤 등등)Handling - 다루다, 취급하다, 처리하다=> 이벤트가 발생했을 때 그것을 처리하는 것 (웹에서 발생하는 사용자들의 행동을 처리하는 것) (버튼 클릭시 경고창 노출)각각의 버튼을 누르면 큰솔창에 메일, 카페, 블로그가 출력된다. 첫번째 방법onClick={() => { console.log(text); }} 위의 코드를 이벤트를 실질적으로 처리해서 이벤트 핸들러라고 부른다.  두번째 방법 - 변수로 지정해서 작성하기const Button = ({ children, text, color = 'black' }) => { const onClickButt..

useRef - 새로운 Reference 객체를 생성하는 기능const refObject = useRef()refObject → 컴포넌트 내부의 변수(일반적인 값 저장 가능) useRefuseStateReference 객체 생성State 생성컴포넌트 내부의 변수 활용 가능컴포넌트 내부의 변수로 활용 가능어떤 경우에도 리렌더링 유발x값이 변경되면 컴포넌트 리렌더링 useRef를 이용하면 해당 요소에 Foucus를 주거나 요소의 스타일 변경 가능 1. 레퍼런스 객체의 활용 사례import { useRef } from 'react'; 리액트로 부터 이 useRef라는 함수를 불러온다. const refObj = useRef(); console.log(refObj);래퍼런스 객체란 이 Currnet라는 프로..

컴포넌트를 선언하는 방식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 등과 다르게 오직..

React.js란?Meta가 개발한 오픈소스 JavaScript 라이브러리대규모 웹 서비스의 UI를 더 편하게 개발하기 위해 만들어진 기술  React의 기술적 특징1. 컴포넌트를 기반으로 UI를 표현한다.컴포넌트(Component) - 화면을 구성하는 요소, UI를 구성하는 요소를 말한다. 컴포넌트를 자바스크립트 파일로 모듈화할 수 있다는 것은 중복 코드를 제거하는 관점에서 매우 큰 장점 마크업: UI 구현2. 화면 업데이트 구현이 쉽다.리액트는 선언형 프로그래밍 방식으로 동작된다. 선언형 프로그래밍 방식이란? 불필요한 과정은 생략하고 내가 이루고자 하는 목적만 간결히 명시하는 방법예시) 토마토 파스타를 만드는 과정은 난 잘 몰루~ 그냥 토마토 파스타 하나 주세요. 라고 말하는 것 ←→ 명령형 프로그래..

Node.js란 무엇인가?웹 브라우저가 아닌 환경에서도 자바스크립트 코드를 실행시켜주는 자바스크립트의 런타임, 즉 자바스크립트의 실행환경(RunTime)이다. 실행환경이란 무엇일까?구동기이다. 구동기는 기본적으로 무언가를 동작시키는 기계라던가 프로그램을 의미하는 것 🤔 Node가 필요한 이유는 무엇일까?자바스크립트는 웹페이지 안에서 일어나는 단순한 기능만을 개발하기 위해 만들은 언어이다. 개발자들은 최대한 빠르게 개발할 수 있도록 생산성에만 중심을 두고 언어를 설계했었다.  웹 브라우저 밖에서도 자바스크립트가 실행되게 하고 싶었는데 2009 Node.js가 만들어졌다. Node.js는 자바스크립트를 범용적으로 사용할 수 있도록 도와주는 JavaScript의 실행환경, 즉 런타임이다.  패키지Node.j..