한국공학대학교 축제 웹사이트 개발(FESTINO) 회고록

🫧 FESTINO?한국공학대학교 축제 정보를 제공한 웹사이트이다.2024년 6월 ~ 2024년 9월 13일(약 두달 반)동안 기획, 개발, 배포까지 ✨성공적으로 마무리한 프로젝트✨이다.9/11 ~ 9/13 3일 동안 3천명의 사용자와 8만회의 조회수를 달성했다.🫧 팀원 모집 개발 소모임인 DEV-TINO(https://github.com/DEV-TINO) 팀장님에게 프로젝트 아이디어를 듣고재학생으로써 학교 학생들을 위한 웹 사이트를 만들고자 프론트엔드 팀장으로 참여하게 되었다.팀원은 디자이너 3 + 프론트엔드 4 + 백엔드 5 => 총 12명의 인원으로 팀이 구성되었고 모두 한국공학대학교 학생들(졸업생 포함)이다. 지금까지는 4-5명 정도의 인원으로 프로젝트를 해왔었는데12명이라는 많은 인원과 디자이..

• format_list_bulleted 이것저것
• · 2024. 9. 24.
• textsms

프론트엔드에서 테스트

❗️ 테스트란?프로그램을 실행하여 오류와 결함을 검출하고 애플리케이션이 요구사항에 맞게 동작하는지 검증하는 절차이다.즉, 개발자의 의도대로 코드가 동작하는가를 확인해보는 작업이다. 테스트는 두가지 종류로 나누어지는데자동화 테스트 - 코드를 작성하고 반복적으로 테스트수동 테스트 -  브라우저에서 직접 사용해보는 테스트실제 사용자가 사용한다고 생각하고 직접 테스트를 해볼 수도 있지만(수동 테스트)코드가 수정될 때마다 다시 테스트를 해야 하고, 실수를 할 가능성이 있기 때문에 테스트 코드를 작성하여 자동화를 한다.❗️ 프론트엔드에서 테스트프론트엔드에서 테스트 코드를 통해 테스트 코드를 자동화는 사례는 많지 않다고 한다.프론트엔드에는 UI가 존재하는데, UI가 자주 변경되기 때문이라고 추측할 수 있다. 최근에는..

• format_list_bulleted 카테고리 없음
• · 2024. 9. 22.
• textsms

Web Worker

❗️ JS는 싱글 스레드 JS는 싱글 스레드 기반으로 한 번에 한가지 작업만 처리할 수 있다.for (let i=0; i위와 같은 코드를 브라우저 콘솔 창에 실행시킨다면 브라우저가 먹통이 되는 경험을 할 수 있다.JS가 메인 스레드 하나만 가지기 때문이다.오래 걸리는 코드를 다른 스레드에서 실행시키면 문제가 해결되는데 이때 web worker를 사용한다.❗️ Web Worker?싱글 스레드로 동작하는 JS의 단점을 보완하기 위해 나온 기능이다.JS는 싱글 스레드로 동작하는데, 웹 브라우저는 멀티 스레딩을 지원한다.worker는 JS가 제공하는 기능이 아니라 브라우저에서 제공하는 기능이다.최신 브라우저는 대부분 web worker 기능을 지원한다. web worker는 메인 스레드가 아닌 별도의 스레드인 ..

• format_list_bulleted WEB
• · 2024. 9. 21.
• textsms

타입스크립트를 사용하는 이유

❗️ TypeScript?요즘 프론트엔드 채용공고를 보면 자격요건에 TypeScript가 적혀있는 것을 볼 수 있는데,사용해본 적도 없고 어떤 장점이 있는지 궁금해졌다. TypeScript = JavaScript + Type즉, 자바스크립트에 타입을 더한 언어가 타입스크립트이다. 🤔 자바스크립트애서 5-'3'의 결과는 ?결과는 2이다.숫자에서 문자열을 뺐는데 숫자가 나올 뿐만 아니라, 어떠한 에러도 출력하지 않는다. 하지만 TypeScript에서 위의 코드를 실행시킨다면 오류가 발생한다.TypeScript도 JS 기반 언어이지만 왜 다를까?TypeScript에 대해 더 알아보자 !❗️ JavaScript vs TypeScript가장 큰 차이점은 당연히 타입이고 이 타입이 결정되는 시점이 다르다. - 타..

• format_list_bulleted WEB
• · 2024. 9. 6.
• textsms

Virtual Dom

❗️ DOM(Document Object Model)이란?브라우저가 HTML 코드를 해석해서 요소들을 트리 형태로 구조화 것HTML을 자바스크립트가 이해할 수 있도록 객체로 변환DOM은 JS를 사용해서 화면에 콘텐츠를 추가/수정/삭제하거나 이벤트를 처리할 수 있도록 인터페이스 제공❗️ Virtual DOM 등장 배경브라우저가 렌더링 되는 과정을 간단하게 알아보자.HTML과 CSS를 파싱하고 파싱된 결과인 DOM과 CSSOM 트리 생성DOM과 CSSOM 트리를 결합하여 Render 트리를 생성각 노드들의 실제 위치를 계산하는 layout 과정을 진행화면에 요소들을 그리는 painting 과정을 진행 예전에는 SSR 방식을 많이 사용했다.하지만 SPA가 등장하면서 CSR 방식이 사용되고,  DOM 트리를 즉..

• format_list_bulleted WEB
• · 2024. 9. 4.
• textsms

Polling/Long-Polling/SSE/Web Socket

❗️ 기존 HTTP 요청 방식웹은 HTTP 요청-응답 모델을 기반으로 동작클라이언트의 요청이 있을 시에만 서버가 데이터를 보낼 수 있음(단방향)비연결성 프로토콜(connectionless) -> 서버는 데이터를 보내고 연결을 끊음무상태 프로토콜(stateless) -> 클라이언트의 상태를 저장하지 않음❗️ Polling클라이언트가 정기적으로 서버에 http 요청을 계속 보내서 데이터를 전달 받는 방식서버는 보낼 데이터가 있든없든 바로 응답을 해줌서버의 상태 변화에 즉각적으로 반응하지 못함 => 요청을 보내는 주기가 정해져 있기 때문에 실시간으로 보낼 수 없음계속해서 요청을 보내기 때문에 트래픽을 낭비http 오버헤드가 발생함일정하게 갱신되는 서버 데이터의 경우에 유용하게 사용❗️ Long-Pollin..

• format_list_bulleted WEB
• · 2024. 8. 27.
• textsms