현고미 노트(H-gomi's Note)

aos와 slick을 사용하다보면 aos가 동작하기 전 slick이 먼저 돌아가서 aos동작이후 중간 부분이나 끝부분부터 보여질 때가 있다.이럴 때 aos가 동작한 다음 slick이 처음 slide부터 보여질 수 있도록 하는 꼼수(?)가 있다. 이렇게되면 aos가 in 된다음에 slider의 index기준 0번째 slide로 이동한다.  item01 item02 item03

코딩 공부노트/Gnuboard5 2025. 3. 19. 17:04

3.  데이터 표시하기- JSX는 HTML 마크업을 자바스크립트 안에 넣을 수 있게 해줍니다. - 중괄호( Curly braces ){} 는 HTML 마크업에서 자바스크립트로 "이스케이프(escape, 다른 환경으로 이동한다.)"하여 코드에서 일부 변수를 "임베드(embed, 다른 곳에 끼워넣다.)"하여 사용자에게 표시할 수 있습니다.위에 적은 중괄호에 대한 설명을 Chat GPT가 적절한 문장으로 표현해주었다."중괄호 {} 는 자바스크립트 세계로 돌아가는 문이에요."  그렇다 JSX에서 중괄호{}는 HTML마크업에서 자바스크립트의 변수를 사용할 수 있게 해준다. 예를 들어, className="avatar"는 "avatar" 문자열을 CSS로 전달하는 방식이고,src={ user.imageUrl }는 ..

코딩 공부노트/React 2025. 2. 5. 16:59

React 학습하기 매일 사용하게될 React 개념의 80%를 소개합니다. Quick Start앞으로 배울 내용1. 컴포넌트(Component) 생성 및 중첩(nest components) 방법2. 마크업과 스타일을 추가하는 방법3. 데이터를 표시(display)하는 방법4. 조건(conditions) 및 목록을 랜더링(render) 하는 방법5. 이벤트에 대응하고 화면을 업데이트 하는 방법6. 구성 요소 간에 데이터를 공유하는 방법 1. 컴포넌트 생성 및 중첩 방법(Creating and Nesting components)- React앱은 컴포넌트로 구성됩니다.(React apps are made out of components)- 컴포넌트는 UI의 일부입니다. 컴포넌트는 고유 로직이나 모양을 가집니다..

코딩 공부노트/React 2025. 2. 2. 09:00

프로젝트를 시작하면서 프로젝트의 제목을 어떻게 선택할 것인가에 대하여 Chat GPT에게 추천을 받아서 선택하였다.기존에 사용중인 이름은 제안해준 리스트에서 제거하였고 친근한 느낌의 한글 이름을 선택하게 되었다. 선택한 최종 프로젝트 명은 '마실지도' 이다. 질문 내용 : 다양한 음료(맥주, 위스키 등)의 가격 비교를 쉽게 할 수 있는 웹사이트를 만들려고 해. 소비자들이 쉽게 기억할 수 있으면서도 신뢰감을 줄 수 있는 한글 브랜드 이름을 추천해줄 수 있어? 답변 내용 : 1. 맛집다리 - 음료의 맛집 정보를 다리처럼 연결해준다는 뜻으로, 사용자가 다양한 음료의 가격을 쉽게 비교할 수 있는 느낌을 줍니다. 2. 술모아 - 술과 음료 정보를 모은다는 뜻으로, 여러 제품을 쉽게 찾아볼 수 있는 사이트라는 인상..

코딩 공부노트/다시 새출발~! 2024. 10. 30. 11:00

사이트를 게시할 호스팅을 선택하는데 있어서 비용을 들이지 않고 선택할 수 있는 옵션을 Chat GPT한테 물어봐서 선택할 수 있었다.가격비교 사이트의 경우 필요한 정보가 실시간으로 변경되어야 하기 때문에 동적 사이트도 가능한 Vercel을 사용하기로 결정하였다. 2. 무료 호스팅 서비스 사용 2-1. GitHub Pages (정적 사이트용) GitHub를 사용하고 있다면, GitHub Pages로 무료 호스팅을 할 수 있어. 주로 정적 웹사이트에 적합해.  1. GitHub에 레포지토리 생성: GitHub에서 새로운 레포지토리를 만들고 이름을 “username.github.io” 형식으로 설정해. 2. HTML 파일 업로드: 레포지토리에 index.html 파일을 포함한 웹 파일들을 업로드해. 3. Gi..

코딩 공부노트/다시 새출발~! 2024. 10. 29. 11:00

1. 데이터 모델 설계 이 단계에서는 데이터베이스에서 주류 정보, 판매처 정보, 사용자 리뷰와 권한을 관리할 수 있는 구조를 설계하는 것이 핵심입니다. 데이터베이스 구조를 효율적으로 설계하면 이후 기능 구현과 유지 보수가 훨씬 수월해질 것입니다. 주요 테이블 구성 주요 테이블과 각 필드를 다음과 같이 설정하는 것이 좋습니다:  1. drinks (주류 정보 테이블) • drink_id (INT, PK) - 고유 주류 ID • name (VARCHAR) - 주류 이름 • type (VARCHAR) - 주류 타입 (맥주, 위스키 등) • origin (VARCHAR) - 생산지 • alcohol_content (DECIMAL) - 도수 • volume (INT) - 용량 2. retailers (판매처 정보..

코딩 공부노트/다시 새출발~! 2024. 10. 28. 11:00

아이디어 : 주류 가격 정보 비교 웹사이트 및 향후 어플 개발아이디어 주요 기능 : 1. 온라인/오프라인 매장 주류 가격 비교2. 해당 주류 기본 정보 (주류 사진, 명칭, 기본설명, 생산지, 특징, 도수, 용량, 등...)3. 주류에 대한 전문가의 의견 게시판 향후 추가 기능 : 1. 구매자 리뷰2. 온라인 주문/오프라인 픽업 주문/택배배송Chat GPT 질문 :저는 웹 개발자로, 대한민국의 온라인 및 오프라인 매장에서 판매하는 주류 가격을 비교하는 웹사이트를 만드는 프로젝트를 계획하고 있습니다. 이 사이트의 목표는 사용자가 다양한 판매처의 주류 가격을 확인하고, 필요한 정보를 한눈에 볼 수 있게 하는 것입니다. 초기에는 맥주와 위스키를 중심으로 시작하지만, 추후에는 모든 주류로 확장할 계획입니다.  ..

코딩 공부노트/다시 새출발~! 2024. 10. 27. 22:20

Chat GPT를 통해서 구상해본 와이어프레임

코딩 공부노트/다시 새출발~! 2024. 10. 13. 13:00