주니코딩

Histour 개발기캡스톤디자인 프로젝트 Histour 개발 회고담당 : FrontEnd사용 기술 : Next.js, React, TypeScript, Tailwind CSS들어가며2026년 1학기 캡스톤디자인 프로젝트에서 우리 팀은 외국인 관광객을 위한 AI 기반 역사 관광 웹 플랫폼 Histour를 개발했다.프로젝트 GitHub: https://github.com/greenfield-2026-capstone/greenfield-project배포 링크: https://histour.vercel.app Histour는 사용자가 역사 관광지를 탐색하고, 해당 장소와 연결된 역사 인물과 대화하며, 선택지에 따라 달라지는 스토리와 결말 영상을 경험할 수 있는 서비스다. 나는 이번 프로젝트에서 프론트엔드 개발..

15  스타일링CSS : 스타일링을 위한 일종의 언어선택자와 스타일로 구성 ⇒ 선택자를 먼저 쓰고 이후에 적용할 스타일을 중괄호 안에 세미콜론(;)으로 구분하여 하나씩 기술한다. h1 { color: green;}위 코드는 태그 글자 색깔을 녹색으로 바꾸기 위한 CSS 속성이다. 선택자엘리먼트 선택자id 선택자 : id를 기반으로클래스 선택자전체 선택자그룹 선택자엘리먼트의 상태와 관련된 선택자 레이아웃 : 정해진 공간에 가구나 물건 등을 배치하는 일 플렉스박스 : 기존 CSS 레이아웃 사용의 불편한 부분을 개선, 컨테이너와 아이템으로 구성 div { display: flex; flex-direction: row | colunm | row-reverse | column-reverse; align-item..

9장  추천 시스템 01  추천 시스템의 개요와 배경추천 시스템을 통해 사용자의 취향을 이해하고 맞춤 상품과 콘텐츠를 제공해 조금이라도 오래 자기 사이트에 고객을 머무르게 한다.추천엔진 : 사용자가 무엇을 원하는지 빠르게 찾아내어 사용자의 온라인 쇼핑 이용 즐거움을 배가시킨다. 추천 시스템을 구성하는 데이터사용자가 어떤 상품을 구매했는가?사용자가 어떤 상품을 둘러보거나 장바구니에 넣었는가?사용자가 평가한 영화 평점은? 제품 평가는?사용자가 스스로 작성한 자신의 취향은?사용자가 무엇을 클릭했는가? 추천 시스템의 유형 - 콘텐츠 기반 필터링 방식 / 협업 필터링 방식 02  콘텐츠 기반 필터링 추천 시스템콘텐츠 기반 필터링 방식 : 사용자가 특정한 아이템을 매우 선호하는 경우 그 아이템과 비슷한 콘텐츠를 가..

08  이벤트 헨들링프로그래밍에서의 이벤트 : 사건이라는 의미ex. 사용자가 버튼을 클릭하는 사건 ⇒ 클릭 이벤트 ActivateDOM에서 클릭 이벤트를 처리하는 예제 코드.버튼이 눌리면 activate()라는 함수를 호출하도록 되어 있다.  Activate이와 달리 리액트에서 이벤트를 처리하는 예제 코드.리액트에서는 이벤트를 처리할 함수를 문자열이 아닌 함수 그대로 전달한다. 이벤트 핸들러 : 어떤 이벤트가 발생했을 때 해당 이벤트를 처리하는 함수이벤트 핸들러에 Arguments(함수에 주장할 내용)를 전달하는 방법 : 매개변수(함수에 전달할 데이터)를 이벤트 헨들러에 전달한다. this.deleteItem(id,event)}>삭제하기삭제하기하나는 arrow function을 사용, 다른 하나는 F..

8장 텍스트 분석 01 텍스트 분석 이해텍스트 분석 : 비정형 데이터인 텍스트를 분석하는 것피처 벡터화/피처 추출 : 텍스트를 word 기반의 다수의 피처로 추출하고이 피처에 단어 빈도수와 같은 숫자 값을 부여하여 단어의 조합인 벡터값으로 표현하는 것 텍스트 분석 수행 프로세스텍스트 사전 준비작업(텍스트 전처리): 텍스트를 피처로 만들기 전에 미리 클렌징, 대/소문자 변경, 특수문자 삭제 등의 클렌징 작업, 단어 등의 토큰화 작업, 의미 없는 단어 제거 작업, 어근 추출 등의 텍스트 정규화 작업을 수행하는 것을 통칭피처 벡터호/추출: 사전 준비 작업으로 가공된 텍스트에서 피처를 추출하고 여기에 벡터 값을 할당합니다. 대표적 인 방법은 BOW와 Word2Vec이 있으며, BOW는 대표적으로 Count 기반..

00  준비하기HTML : 마크업(문서나 데이터를처리하기 위해 문서에 추가되는 정보) 언어의 한 종류 ⇒ 웹사이의 뼈대를 구성하기 위해서 사용하는 마크업 언어SPA(Single Page Application) : 하나의 페이지만 존재하는 웹사이트 SPA는 페이지가 하나라는 것이며 이는 HTML 파일이 하나라는 뜻이다. 리액트가 동적으로 태그 내부를 채워넣는 역할을 한다. CSS : 웹사이트의 레이아웃과 글꼴, 색상 등의 디자인을 입히는 역할을 하는 언어자바스크립트 : 프로그래밍 언어의 한 종류로, 만약 웹사이트가 HTML으로만 구성되어 있다면 추가적으로 사용자가 버튼을 누르거나 정보를 입력하는 동적인 작업을 처리하기 위해서 사용한다. macOS 개발 환경 ⇒ 터미널이라고 부르는 명령 줄 기반 인터페이스..

6장 차원 축소 01  차원 축소 개요차원 축소 : 매우 많은 피처로 구성된 다차원 데이터 세트의 차원을 축소해 새로운 차원의 데이터 세트를 생성하는 것 일반적으로 차원이 증가할수록 데이터 포인트 간의 거리가 기하급수적으로 멀어지게 되고, 희소한 구조를 가지게 된다. 따라서 매우 많은 다차원의 피처를 차원 축소해 피처 수를 줄이면 더 직관적으로 데이터 해석 가능 차원 축소 ⇒ 피처 선택 or 피처 추출피처 선택 : 특정 피처에 종속성이 강한 불필요한 피처는 아예 제거하고, 데이터의 특징을 잘 나타내는 주요 피처만 선택하는 것피처 추출 : 기존 피처를 저차원의 중요 피처로 압축해서 추출하는 것 차원 축소 알고리즘 ⇒ PCA, SVD, NMF이 중 SVD와 NMF는 시맨틱 의미나 토픽을 잠재 요소로 간주하고..

13  자바스크립트와 첫 만남 자바스크립트 : HTML이나 CSS와 함께 사용해서 웹의 요소를 움직이거나 포토 갤러리를 펼쳐 놓는 것처럼 웹 사이트 UI 부부에 많이 활용한다.자바스크립트 소스 코드가 짧을 경우 ⇒ 태그 사이에 실행할 자바스크립트 소스를 작성하면 된다. 웹 문서 안에 어디든 위치할 수 있고 여러 개 사용할 수도 있다. 자바스크립트 색 바꾸기 위 텍스트를 클릭하면 색 바뀜   웹 브라우저에서 스크립트를 해석하는 과정를 보고 이 문서가 웹 문서라는 것을 알게 된다. 과 태그 사이의 내용을 HTML 표준에 맞춰 읽기 시작한다.웹 문서에 HTML 태그의 순서와 포함 관계를 확인한다.태그 분석이 끝나면 스타일 정보를 분석한다. 확인 창 ⇒ confirm()를 사용하여 만들기 가능프롬프트 창에서..

5장 회귀 01  회귀소개회귀 분석 : 데이터 값이 평균과 같은 일정한 값으로 돌아가려는 경향을 이용한 통계학 기법(회귀 : 여러 개의 독립변수와 한 개의 종속변수 간의 상관관계를 모델링하는 기법을 통칭)  여러 가지 회귀 중에서 선형 회귀가 가장 많이 사용.선형 회귀는 실제 값과 예측값의 차이(오류의 제곱 값)를 최소화하는 직선형 회귀선을 최적화하는 방식이다. 대표적인 선형 회귀 모델일반 선형 회귀 : 예측값과 실제 값의 RSS(Residual Sum of Squares)를 최소화할 수 있도록 회귀 계수를 최적화하며, 규제(Regularization)를 적용하지 않은 모델릿지(Ridge): 릿지 회귀는 선형 회귀에 L2 규제를 추가한 회귀 모델라쏘(Lasso): 라쏘 회귀는 선형 회귀에 L1 규제를 적..

10 CSS 고급 선택자 하위 요소에 스타일을 적용하는 하위 선택자section p {.....}section : 상위요소 p : 하위요소  하위 요소에 스타일을 적용하는 자식 선택자section > p {.....}section : 부모요소 p : 자식요소  형제 요소에 스타일을 적용하는 인접 형제 선택자h1 + p { color: blue; }h1 + p : h1의 형제인 p 요소 중 첫 번째 p 예약 방법 & 이용 요금 아직 온라인 예약 신청이 준비되어 있지 않습니다. 전화(xxx-xxxx-xxxx)로 문의 바랍니다. 가족실(2~4인) : 60,000원/일 도미토리(4인 공용) : 25,000원/일  특정 속성이 있는 요소를 선택하는 [속성] 선택자a[href] {....