🌟키워드: 웹 소켓, WS 프로토콜, Socket.IO, 미들웨어, 컨트롤러1. 웹 소켓 이해하기1. 웹 소켓- 양방향 데이터 전송을 위한 기술이다.- WS 프로토콜을 사용한다.※ 서버센트 이벤트(Server Sent Events): Event Source 객체를 사용해 처음에 한 번만 연결하면 서버가 클라이언트에 지속적으로 데이터를 보낸다. 즉, 서버에서 클라이언트로 데이터를 보내는 단반향 통신 2. ws 모듈로 웹 소켓 사용하기위와 같은 디렉터리 구조로 프로젝트와 파일을 작성한다. - 패키지를 설치하고 .env, app.js, routes/index.js, package.json 파일을 작성한다.- 그 후 ws 모듈을 설치해 노드에 웹 소켓을 구현한다. (npm i ws@8)- 웹 소켓을 익스프레스..

24-25/Node.js 2 2025. 1. 17. 13:28

9장. 컴포넌트 트리에 데이터 공급하기 Context가 무엇인지 알아보고, Context로 [할 일 관리] 앱을 리팩토링하자.  Context Context란 리액트 컴포넌트 트리 전체에 데이터를 공급하는 기능으로, Context를 통해 Props Drilling 문제를 해결할 수 있다. 이때 Context가 데이터를 공급하는 범위를 '같은 문맥'이라고 표현하기도 하는데, 이 문맥이라느 글의 방향을 말한다.  Props Drilling Props Drilling이란 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때, 중간에 위치한 모든 컴포넌트에 일일히 Props를 전달해야 하는 문제를 말한다. 리액트의 트리 상에서 2단계 이상 떨어져 있는 컴포넌트에는 직접 데이터를 전달할 수 없기 때문이다. 이런 ..

24-25/React.js 2 2025. 1. 17. 10:00

[10. 유효성 검사와 예외 처리]개요 유효성 검사의 문제점📌유효성 검사란?애플리케이션의 비즈니스 로직이 올바르게 동작하려면 데이터를 사전 검증하는 작업이 필요한데 이것을 유효성 검사(데이터 검증)이라고 한다. ex) Java - NullPointException 예외계층별로 진행하는 유효성 검사는 검사 로직이 각 클래스별로 분산되어 있어 관리하기 어렵다.검증 로직에 중복이 많아 여러 곳에 유사한 기능의 코드가 존재할 수 있다.만약 검증해야 할 값이 많다면 검증하는 코드가 길어진다. => 코드가 복잡해지고 가독성이 떨어진다.📌 @Bean Validation이 같은 문제를 해결하기 위해 자바에서는 'Bean Validation'이라는 데이터 유효성 검사 프레임워크를 제공한다.Bean Validation..

24-25/Spring 1 2025. 1. 17. 10:00

S.E.O● 작성자루나 ● 게임명S.E.O ● 게임 소개장르 : 3D 스텔스 어드벤처시점 : 1인칭 플랫폼 : PC엔진 : Unity ● 게임 시놉시스공포 특집 촬영을 위해 폐허 한 곳을 답사하러 온 주인공.답사를 시작한 지 얼마 지나지 않아 발을 헛디뎌 기절하고 만다.눈을 뜬 순간, 폐허 주위에 가득한 로봇들.이곳은 사람의 손길은 끊긴채 로봇에 의해 지배된 건물이었다.다행히 로봇은 알 수 없는 이유로 폐허를 벗어나지 못한다는 사실을 확인했다.과연 주인공은 로봇의 감시를 뚫고 열쇠를 찾아 이 위험한 폐허에서 탈출할 수 있을까? ● 레퍼런스Hello Neighbor, Little Nightmares ● 게임 설명해당 게임은 주인공을 추격해오는 로봇을 피해 열쇠를 획득하고 탈출을 목표로 하는 게임이다.열쇠는..

24-25/Untiy 2025. 1. 17. 10:00

1. Context 1-(1) Context를 사용하는 이유Context를 사용하는 까닭은 'Props Drilling' 문제를 해결하기 위해서다. Props Drilling 문제는 리액트 컴포넌트 계층 구조에서 컴포넌트 간에 값을 전달할 때 발생한다. 리액트에서는 트리에서 2단계 이상 떨어져 있는 컴포넌트에 직접 데이터를 전달하는 것이 불가능하다. 2단계 이상 떨어져 있는 컴포넌트에 모두 같은 값을 전달해야 한다면 경로상에 있는 모든 컴포넌트에 일일이 Props를 전달해야 한다.Props를 전달하는 과정이 마치 드릴로 땅을 파고 내려가는 것과 같다고 하여, Props Drilling 문제라고 하며, Props Drilling은 컴포넌트 사이의 데이터 교환 구조를 파악하기 어렵게 만든다. 또한 Props..

24-25/React.js 1 2025. 1. 17. 10:00

🌟키워드: 웹 소켓, WS 프로토콜, Socket.IO, 미들웨어, 컨트롤러1. 웹 소켓 이해하기1. 웹 소켓- 양방향 데이터 전송을 위한 기술이다.- WS 프로토콜을 사용한다.※ 서버센트 이벤트(Server Sent Events): Event Source 객체를 사용해 처음에 한 번만 연결하면 서버가 클라이언트에 지속적으로 데이터를 보낸다. 즉, 서버에서 클라이언트로 데이터를 보내는 단반향 통신 2. ws 모듈로 웹 소켓 사용하기위와 같은 디렉터리 구조로 프로젝트와 파일을 작성한다. - 패키지를 설치하고 .env, app.js, routes/index.js, package.json 파일을 작성한다.- 그 후 ws 모듈을 설치해 노드에 웹 소켓을 구현한다. (npm i ws@8)- 웹 소켓을 익스프레스..

24-25/Node.js 2 2025. 1. 17. 10:00

10장. 유효성 검사와 예외처리 애플리케이션의 비즈니스 로직이 올바르게 동작하려면 데이터를 사전 검증하는 작업이 필요함=> 유효성 검사 or 데이터 검증이라고 부름 10.1 일반적인 애플리케이션 유효성 검사의 문제점일반적으로 사용되는 데이터 검증 로직에는 몇 가지 문제점 존재=> 계층별로 진행하는 유효성 검사는 검증 로직이 각 클래스별로 분산되어 있어 관리하기 어려움& 검증 로직에 의외로 중복이 많아 여러 곳에 유사한 기능의 코드가 존재 가능& 검증해야 할 값이 많다면 검증하는 코드가 길어짐=> 코드가 복잡해지고 가독성 떨어짐 문제 해결을 위해 자바 진영에서는 2009년부터 Bean Validation이라는 데이터 유효성 검사 프레임워크 제공Bean Validation=> 어노테이션을 통해 다양한 데이터..

24-25/Spring 2 2025. 1. 17. 10:00

안녕하세요, 컴퓨터공학전공 IT개발동아리 𝘾𝙤𝙧𝙣𝙚𝙧입니다. 이번 정기 콘텐츠는 Team 코코트의 vscode에서 powershell과 git bash의 차이에 대한 이야기인데요, 두 쉘의 특징과 차이점에 대해 알아봅시다!

Corner 코너 2025. 1. 16. 13:12

안녕하세요, 컴퓨터공학전공 개발 소모임 𝘾𝙤𝙧𝙣𝙚𝙧입니다. 이번 정기 콘텐츠는 Team 커밋노트의 Github에 대한 이야기인데요, Github의 특징과 이점에 대해 알아봅시다!

Corner 코너 2025. 1. 10. 12:48

10. 유효성 검사와 예외처리애플리케이션의 비즈니스 로직이 올바르게 동작하려면 데이터를 사전 검증하는 작업이 필요합니다.이것을 유효성 검사 또는 데이터 검증이라 부릅니다.  10.1 일반적인 애플리케이션 유효성 검사의 문제점 1. 계층별로 진행하는 유효성 검사는 검증 로직이 각 클래스별로 분산돼 있어 관리하기가 어렵습니다.2. 검증 로직에 중복이 많아 여러 곳에 유사한 기능의 코드가 존재할 수 있습니다.3. 검증해야 할 값이 많다면 검증하는 코드가 길어집니다.이러한 문제로 코드가 복잡해지고 가독성이 떨어집니다. 자바 진영에서는 Bean Validation이라는 데이터 유효성 검사 프레임워크를 제공합니다.Bean Validation은 어노테이션을 통해 다양한 데이터를 검증하는 기능을 제공합니다.  10.2..

24-25/Spring 3 2025. 1. 10. 10:01

1. 최적화와 메모이제이션최적화: 웹서비스의 성능을 개선하는 기술 + 렌더링의 성능을 높이는 방법-> 최적화가 잘된 웹서비스는 사용자를 불필요하게 기다리지 않게 하여 서비스의 긍정적인 경험을 만든다.최적화 방법으로는 코드, 폰트, 이미지 파일의 크기를 줄이는 등의 여러 방법이 있다. 리액트는 '메모이제이션'으로 연산 최적화 한다.메모이제이션: 특정 입력에 대한 결과를 계산해 메모리 어딘가에 저장했다가, 동일한 요청이 들어오면 저장한 결괏값을 제공해 빠르게 응답하는 기술이다.  (불필요한 연산을 줄여 실행속도가 빨라진다: 동적 계획법) ex) 식당에서 메뉴를 외웠다가 누가 물어보면 답한다.    2. 함수의 불필요한 재호출 방지하기1. 할 일 분석 기능 추가하기// src/component/TodoList..

24-25/React.js 1 2025. 1. 10. 10:01

10.1. API 서버 이해하기API (Application Programming Interface)다른 애플리케이션에서 현재 프로그램의 기능을 사용할 수 있게 허용하는 접점이다.  웹 API 다른 웹 서비스의 기능이나 자원을 가져올 수 있는 창구로,다른 프로그램에서 현재 프로그램의 기능을 사용할 수 있게 허용한다.📌 정보를 제공하고 싶은 부분만 열어 놓거나, 인증된 사람만 일정 횟수 내에서 가져가게 제한을 둘 수 있다.  웹 API 서버 서버에 API를 올려서 URL을 통해 접근할 수 있게 만든 것이다.  크롤링 (crawling) 웹 사이트의 정보를 일정 주기로 수집해 자체적으로 가공하는 기술로, 웹 사이트가 자체적으로 제공하는 API가 없거나 API 이용에 제한이 있을 때 사용한다. 📌 도메인/..

24-25/Node.js 1 2025. 1. 10. 10:00