전체 글 (179) 썸네일형 리스트형 산업 용품 유통 웹페이지 - 5. 상품 페이지 (LNB) 산업 용품 유통 웹페이지 제작 1. 상품등록 (LNB) - 원하는 카테고리는 두 개 - 카테고리 1 , 카테고리 1에 해당하는 카테고리 2 둘 다 자유롭게 관리자 마음대로 생성 가능 - 더 많은 카테고리가 생길지는 정책을 정해야 함 : 많아진다면 지금 db 구조로는 확장성이 불편 (현재는 카테고리 1, 2 테이블을 따로 두고 구현) - RepeaingGroup1(Category1) - RepeatingGroup2(Cateogry2) - RepeatingGroup1 : Search for Cateogry1s - 선택한 Category1을 물고있는 Cateogry2의 리스트가 필요 - 디자인이나 반응형은 다음 시간에... - 스크롤이 너무 못생겨서 스크롤 없애는 플러그인을 .. 산업 용품 유통 웹페이지 - 4. 로그인 (임시) 산업 용품 유통 웹페이지 제작 1. 로그인 - 아직은 주문 기능이나 댓글기능을 추가하지 않을 예정 - 따라서 회원기능은 필요없지만, 게시물을 작성할 수 있는 관리자의 계정을 로그인할 수 있는 화면은 있어야 함 - 임시로 로그인 화면을 구현하고, 추후에 어떤 정책을 가져갈건지 정해야 함 - 회원가입은 없어질 예정, 편의상 만들어 놓음 - 새로 써본 네비게이션 : Go to previous page - 생각보다 네비게이션에 지원되는 기능이 있어서 새삼 놀람 참고 자료노코더스 - https://nocoders.kr/노코드 풀스택 개발 with 버블 (이명성 저) - https://product.kyobobook.co.kr/detail/S000214875929모두의 노코드 - https://ever.. 산업 용품 유통 웹페이지 - 3. 헤더, 메인페이지 산업 용품 유통 웹페이지 제작 1. 메인페이지 - 메인페이지에는 50%씩 두 구간으로 구분 - Section 1. (회사상호명 + 부가설명 + 상품 페이지 이동버튼): 좌측 + 회사 로고 : 우측 - Section 2. 판매하는 브랜드 및 기타 판매상품들...? (미정) - Section 0, Section 1을 Group 생성- Section 0의 Group 0, 회사 로고 생성 : Row- Group 0 안에 Column 형식으로 필요한 리소스 등록 2. 헤더 - FloatingGroup0 생성 - FloatingGroup0 안에 회사상호, Group0생성 - Groupp 0 안에 이동할 수 있는 네비게이션 버튼 3개 생성 - 각각의 버튼은 해당 페이지로 이동하는 워크플로우 지정 3. 화면 .. 산업 용품 유통 웹페이지 - 2. 사이트 구조, 디자인 시스템 산업 용품 유통 웹페이지 제작 1. 사이트 구조IA (Information Architecture) 와이어 프레임 기존의 형식적인 사이트를 참고추후에는 피그마로 작업 예정 (아직 피그마에 익숙하지 않아서 너무 많은 공수가 들것으로 예상 됨으로 생략 2. 디자인 시스템기본 폰트 : Noto Sans KR컬러 시스템요소메인 : #4b86b4메인 대비 : #FFFFFF글자 : #333333배경페이지 배경 : #f5f8fa그룹별 배경 : #FFFFFF상태에러 : #e74c3c성공 : #27ae60경고 : #f39c123. 요소 시스템Primary-large : 페이지에서 버튼 한개만 사용 시Secondary-large : 페이지에서 메인 버튼과 함께하는 버튼 필요 시Error-large : 페이지에서 취소 버튼.. 산업 용품 유통 웹페이지 - 1. 개요 산업 용품 유통 웹페이지 제작 1. 프로젝트 개요제작 계기 : 고객의 요청제작 의도 : 고객사의 판매 효율성 증대, 사용자 접근성 향상 (현재는 오프라인 및 유선상으로 영업 중)목표 고객 : 고객사의 기존 고객 (개인, 업체), 검색을 통한 신규 유입 고객2. 제작 도구Bubble.io3. 제작 일정2025.01.15 ~ 2025.1.24 (해외여행 이슈로 연장 가능성 多).4. 의의토이프로젝트를 Bubble.io로 제작하는 첫 결과물실제 서비스를 할 수 있는 프로젝트 5. 참고 자료 노코더스 - https://nocoders.kr/노코드 풀스택 개발 with 버블 (이명성 저) - https://product.kyobobook.co.kr/detail/S000214875929모두의 노코드 - https:.. React 공식문서 보기 - 3 (Component, props) 1. Component 컴포넌트는 함수 컴포넌트와 클래스 컴포넌트로 나뉜다. function Welcome(props) { return Hello, {props.name}; } 위와 같이 생긴 모양이 함수 컴포넌트다. class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } 이 모양은 클래스 컴포넌트다. 상태가 있으면 클래스 컴포넌트를 쓰고 상태가 없으면 함수형 컴포넌트를 쓴다. 이와 관련된 내용은 state(상태)부분을 볼 때 자세히 보자! 위에서 만든 Welcome (클래스 컴포넌트) 는 아직 엘리먼트는 아니다. 그저 리액트의 클래스일 뿐이다. 이 때, 전 게시물에서 배운 JSX를 통해서 엘리먼트로 반.. React 공식문서 보기 - 2 (JSX, 엘리먼트 렌더링) 1. JSX 문법 const element = Hello, world!; 마치 마크업 문법같이 생긴 이 문법은 JSX라고 한다. JSX는 React.createElement() 함수 호출로 바뀐다. const element = ( Hello, world! ); const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' ); 위의 두 가지 코드는 동일하다. 첫 번째 코드는 JSX로 표현한 코드고 두 번째 코드는 React.createElement()를 사용한 코드다. JSX를 사용해서 쓰는것이 코드의 가독성도 좋고 HTML과 모습이 닮아서 보다 쉽게 코드를 작성할 수 있다. 2. 엘리먼트 렌더링 처음 리액트 프로젝트.. React 공식문서 보기 - 1 (React 앱 만들기, Hello World) React 공식문서를 보고 하나씩 정리해보겠다. 1. 새로운 React 앱 만들기 (https://ko.legacy.reactjs.org/docs/create-a-new-react-app.html) npx create-react-app my-app 터미널에 위 명령어를 입력하면 자동으로 my-app이라는 React app을 생성해준다. 이름은 바꿔도 무방하다 (my-app) my-app 폴더로 이동해서 (cd my-app) npm start를 입력하면 react 첫 화면을 볼 수 있다. cd my-app npm start 주요 개념 - 1. Hello World (https://ko.legacy.reactjs.org/docs/hello-world.html) 생성된 my-app 폴더의 src에 index... 이전 1 2 3 4 ··· 23 다음 목록 더보기
