본문 바로가기

전체 글

(397)
vs code - react 초기 세팅 npm 명령어를 실행하기 위해서는 node.js가 설치되어 있어야한다. 1. node.js 설치 Node.js — Node.js® 다운로드Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.nodejs.org 2. LTS로 설치 (가장 안정적인 버전) 3. 설치 후 vs code 터미널에 node -v (버전 확인) 4. 터미널에 npm init react-app my-app 입력npm init react-app my-app 기본구조 세팅미리 생성해 놓은 REACT 폴더 ..
채팅 프로젝트 - 4 구현 및 영상 Front-endpage.tsx'use client';// 'use client' 지시어는 이 파일이 클라이언트 측에서 렌더링되고 실행되는 "클라이언트 컴포넌트"임을 Next.js에 알립니다.// useState, useEffect와 같은 React 훅을 사용하거나 브라우저 API와 상호작용하려면 이 지시어가 반드시 필요합니다.import { useEffect, useState } from "react";import { Box, Heading, VStack } from "@chakra-ui/react"; // UI 구성을 위한 Chakra UI 컴포넌트들import socket from "../lib/socket"; // 앞서 설정한 socket.io 클라이언트 인스턴스를 가져옵니다.import { Ch..
채팅 프로젝트 - 3 API 명세서 작성 API 명세서를 작성하는 이유는?1. 프론트엔드와 백엔드 간 약속프론트는 이 API가 어떤 요청/응답을 주고 받는지 모르고는 화면을 만들 수 없습니다.백엔드도 프론트가 뭘 요청하는지 정확히 모르고 기능을 구현하면 동작이 어긋납니다.명세서를 통해 양측의 오해없이 명확한 계약을 맺습니다. 2. 개발 속도 향상백엔드 API가 아직 완성되지 않아도 프론트엔드는 명세서 기반으로 Mock 데이터를 만들어 개발할 수 있습니다.병렬 작업이 가능해지고, 의존성 병목을 줄입니다. 3. 테스트와 유지보수에 유리QA나 자동화 테스트 시 명세서 기준으로 정상/비정상 케이스를 명확히 정의할 수 있습니다.나중에 API를 수정할 때도 명세서를 보면 영향 범위를 바로 알 수 있습니다. 4. 문서화 & 인수인계다른 개발자나 외부 파트너..
피그마 Component, Variants를 활용하여 토글 버튼 만들기 피그마에서 버튼(컴포넌트)를 클릭했을 때 variants를 활용해서 토글 버튼을 만들어보자 1. 원하는 사이즈의 프레임을 생성한다. 2. 원하는 사이즈와 색상을 넣은 원을 하나 만들어준다. 3. 원을 만든 후 마우스 우측 버튼을 눌러 컴포넌트 만들기 클릭컴포넌트로 만들면 바인딩박스가 기존 파란색에서 보라색으로 변경된 걸 확인할 수 있다. 4. 다시 마우스 우측 클릭 후 주요 컴포넌트 - 베리언트 추가 클릭 5. 베리언트 추가를 클릭하면 똑같은 원이 하나 복사가 되는 걸 좌측 레이어에서 확인할 수 있다. 6. 색상 변경을 원하는 원을 더블 클릭하면 내가 선택한 원 하나가 선택된다. 이후에 색상과 테두리를 변경 7. 프로토타입으로 변경하고 원 하나를 선택 8. 우측 바에서 상호작용 - 트리..
피그마 prototype 프로토타입 만들기 1. 피그마 실행 후 하단의 프레임 - 데스크톱 2. 원하는 세로 길이 만큼 조절해준다 3. 원하는 디자인 시안 제작 4. 여기서 자동 정렬을 해주고 싶은 친구들끼리 오토레이아웃 설정을 해준다. (shift+a)오토 레이아웃 기능을 사용하면 원을 하나 지웠을 때 알아서 간격 조절을 해줘서 편하다. 간격, 정렬 등을 모두 마쳤으면 이제 prototype을 사용해서 클릭 후 이동하는 걸 만들어보자.나는 원을 체크 했을 때 바로 밑 질문으로 이동하고 싶다.1. 네모 상자를 하나 만들어준다.프레젠테이션을 클릭하고 화면을 볼 때 동그라미를 클릭하면 다음 질문이 가운데에서 보였으면 좋겠어서 1번 질문의 동그라미 바로 밑과 3번 질문 바로 위까지 영역을 잡아주었다. 2. 오른쪽 상단의 프로토타입을 선택 후 ..
React와 Chakra UI, Ai를 활용한 설문조사를 활용한 설문조사 - 2 수정 어제 작업한 결과물에서 설문지에 대한 답을 클릭했을 때 점수를 도출해 내는 과정을 추가 작업하였습니다.마찬가지로 모든 항목을 선택 후 점수보기를 클릭해야 최종 점수가 나오고,점수보기를 클릭 했을 때 선택하지 않은 항목이 있을 경우 해당 질문으로 이동 후 선택 가능하고마지막 선택하지 않은 항목까지 다 선택했을 경우 제일 하단으로 스크롤 이동으로 사용자 편의를 더했습니다. "use client";import { Box, Button, Flex, Heading, IconButton, Progress, Stack, Text, VStack,} from "@chakra-ui/react";import { motion, AnimatePresence } from "framer-motion";impor..
React와 Chakra UI, Ai를 활용한 설문조사를 활용한 설문조사 - 수정 어제 작업한 결과물에서 설문지에 대한 답을 클릭했을 때 점수를 도출해 내는 과정을 추가 작업하였습니다.마찬가지로 모든 항목을 선택 후 점수보기를 클릭해야 최종 점수가 나오고,점수보기를 클릭 했을 때 선택하지 않은 항목이 있을 경우 해당 질문으로 이동 후 선택 가능하고마지막 선택하지 않은 항목까지 다 선택했을 경우 제일 하단으로 스크롤 이동으로 사용자 편의를 더했습니다. "use client";import { Box, useBreakpointValue, Flex } from "@chakra-ui/react";import { Global } from "@emotion/react";import { getScrollbarStyle } from "@/styles/scrollbar";import { useColo..
React와 Chakra UI, Ai를 활용한 설문조사를 활용한 설문조사 - 2 1. 설문 답변을 클릭 시 스크롤 이벤트 발생2. 설문 답변에 따라 progress bar 움직임3. 마지막 질문의 답변을 클릭하면 제출하기 버튼 활성화4. 제출하기 버튼을 클릭 했을 때 답변하지 않은 질문이 있을 경우, alert 창으로 답변하지 않았다고 뜸5. 답변하지 않은 질문으로 이동6. 답변하지 않은 질문이 여러 개 일 때 순차적으로 이동7. 마지막으로 답변한 곳에 제출하기 버튼 활성화"use client";import { Box, Button, Flex, Heading, Progress, Stack, Text, VStack,} from "@chakra-ui/react";import Link from "next/link";import { useEffect, useRef, useSt..

728x90