전체 글 (200) 썸네일형 리스트형 산업 용품 유통 웹페이지 - 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... sum 함수 만들기 (재귀, 꼬리 재귀, 번역한 for문) https://jootang2.tistory.com/172 프로그램이란...? 개발자는 프로그래밍을 하는 직업이다. 프로그래밍은 뭘까? 프로그래밍은 프로그램을 만드는 일이다. 그렇다면 프로그램은 뭘까? 1. 프로그램은 코드가 아님 2. 실행파일 (ex : exe 파일)은 프로그 jootang2.tistory.com 이어서 오늘은 함수에 대해서 배웠다. 그리고 앞으로 이 수업을 들으면서 진행하는 방향도 알았다, Q. 1부터 10까지 더하는 함수를 작성해라 if(1){ let acc = 0; for(let i = 1 ; i v > 1 ? v + sum(v - 1) : 1; 현재 코드의 문제점 a() -> b() -> c() -> d() -> ........ : d가 처리되어야 c가 처리되고, c가 처리되어야.. 프로그램이란...? 개발자는 프로그래밍을 하는 직업이다. 프로그래밍은 뭘까? 프로그래밍은 프로그램을 만드는 일이다. 그렇다면 프로그램은 뭘까? 1. 프로그램은 코드가 아님 2. 실행파일 (ex : exe 파일)은 프로그램이 아님, 파일일 뿐임 3. 파일을 실행해서 OS에 적재한 상태가 프로그램임 4. 메모리에 적재돼서 올라가면 프로그램임 5. 파일은 프로그램 X 6. 프로그램은 명령과 값으로 메모리에 올라감 7. 실행파일 실행 -> 메모리에 명령이 쫙 올라감, 값들이 쫙 올라감 8. 메모리에 적재된 명령이 쭉 실행되면 프로그램이 종료 9. 중간에 명령에서 분기 처리, 명령간의 이동 10. 중간에 명령에서 뺑뺑 돌면 프로그램은 끝나지 않음 프로그램이 뭐냐고 하는 질문을 받으면 위의 내용을 떠올리가 위 사진을 떠올리면 된다. .. React : component에게 인자 넘겨주기 - props 지금까지는 컴포넌트를 만들고 그 컴포넌트에게 데이터를 넘겨주지 않고 그대로 렌더링만 했었다. 오늘은 컴포넌트가 사용할 인자를 넘겨주는 방법에 대해서 알아보았다. 1. 컴포넌트에서 사용할 인자 지정해주기 [props.js] const root = document.querySelector("#root"); const App = () => { return ( ); }; ReactDOM.render(, root); 2. 컴포넌트에서 인자 받아오기 [props.js] const Btn = (props) => { console.log(props) return ( ) } 이렇게 첫 번째 인자로 데이터를 받아올 수 있다. props를 콘솔에 찍어보면 넘겨준 test의 값을 볼 수 있다. 컴포넌트에서 데이터를 받을 때는.. 이전 1 2 3 4 5 6 7 ··· 25 다음
