전체 글
-
[카페24] 공급사 미니샵 관련StartUP/카페24 2023. 1. 20. 15:47
공급사 미니샵 파일은 2개 supply 폴더 내 index.html 과 main.html 파일 있음 공급사 아이디가 발급되어야 공급사 페이지를 사용할 수 있다. 루트(URL) 도메인/supply/index.html?supplier_code=공급사코드 도메인/minishop/공급사아이디 두 개 다 사용 설정 (공급사미니샵 사용함/사용안함 은 쇼핑몰관리자 - 공급사 관리 또는 개별 공급사 로그인)은 쇼핑몰 관리자에서 진행함 (관리 페이지 링크) index.html은 모바일에서 연결될 때 열림 main.html은 PC에서 연결될 때 열림 둘 중 하나라도 없으면 PC 또는 모바일에서 안 열림 supply/index.html?supplier_code=공급사코드 루트는 상세페이지 내에 공급사 바로가기버튼 삽입하는 ..
-
[CSS] Animation - TransitionWEB Dev/HTML | CSS 2023. 1. 20. 00:13
냥이집사님의 Web-animation 노션을 보고 CSS Animation을 공부합니다. Transition 이란? transtion이란 CSS 속성값이 변할 때, 값의 변화가 일정 시간에 걸쳐 일어나도록 하는 것 transition: transition-property transition-duration transition-timing-function transition-delay Transition의 속성들 transition - property property 속성이란 뜻으로 어떤 속성에 transition 효과를 줄 지 설정해줄 수 있음 속성값(all, none, property, initial, inherit)으로 all: 기본값으로 모든 속성에 transition 효과를 적용 none: 속성들..
-
[TypeScript] GraphQL과 타입스크립트로 개발하는 웹 서비스 스터디 Pre02WEB Dev/StudyNote 2023. 1. 2. 00:35
⌈GraphQL과 타입스크립트로 개발하는 웹 서비스 : 설계부터 개발배포까지 따라 하며 완성하는 웹 풀스택 개발⌋ 따라하기 2023-01-01 21:00 2일차 대비 프로젝트 준비 과정 3장 프로젝트 준비 3.1 프로젝트 소개 무료로 배포된 지브리의 명장면 사진, 포스터를 감상하고 장면에 대한 "좋아요" 및 감상평을 남길 수 있는 간단한 서비스 제작 기능 요구사항 - 회원가입과 로그인이 가능해야 합니다. - 유저는 영화 목록을 확인할 수 있어야 합니다. - 유저는 특정 영화의 명장면 목록을 확인할 수 있어야 합니다. - 유저는 명장면에 "좋아요"를 누를 수 있고, 감상평을 남길 수 있어야 합니다. "좋아요" 누르기와 감상평 남기기는 로그인 상태에서만 가능해야 합니다. - 유저는 프로필 사진을 업로드할 수..
-
[React] Udemy 강의 노트 9WEB Dev/StudyNote 2022. 12. 27. 00:28
모듈 소개 - 더 많은 문제를 해결하게 해주는 리액트 툴인 프래그먼트, 포털, ref에 대해 알아본다. JSX 제한 사항 및 해결 방법 - JSX는 컴포넌트에서 반환하는 코드이다. - JSX는 제한 사항이 있다. - 루트 수준에서 JSX 요소가 인접해 있으면 오류가 발생한다. 루트 수준에서는 하나의 JSX요소로 래핑되어있어야 한다. - div 같은 HTML 요소 대신 사용자 정의 컴포넌트를 이용할 수도 있다. - div를 이용할 때는 div 수프라는 문제가 생긴다. 시맨틱 의미를 갖지 않는 불필요한 div가 실제 DOM으로 렌더링 된다는 점이다. 컴포넌트 감싸기(wrapper) 만들기 - div soup를 해결하는 트릭을 만든다. - 별도의 파일로 Wrapper.js 컴포넌트를 만들고 props.chil..
-
[React] Udemy 강의 노트 8WEB Dev/StudyNote 2022. 12. 26. 01:18
"사용자" 컴포넌트 추가하기 - for은 class처럼 htmlFor로 사용해야 한다. - form의 기본 제출 동작을 막기 위해 e.preventDefault()를 사용한다. - useState에서 객체의 state를 업데이트 할 때는 setUserDate((prev)=>{ return {...prev, name: e.target.value} }) 처럼 함수 return 값으로 기존 정보 prev를 Deep copy 해주고 key로 업데이트 한다. 재사용 가능한 "카드" 컴포넌트 추가하기 - props.children를 통해 컴포넌트의 여닫는 태그 사이의 JSX코드에 접근할 수 있다. - 사용자 정의 컴포넌트들은 이 className이라는 속성과 어떻게 작업해야 하는지 모른다. - 그래서 props에 ..
-
[React] Udemy 강의 노트 7WEB Dev/StudyNote 2022. 12. 21. 00:59
모듈 소개 - 오류에서 자유로운 코드를 작성할 수는 없다. - 오류를 찾아서 수정하는 것은 개발자의 덕목이다. - 리액트 오류 메시지를 이해하고 디버그하고 분석하는 방법과 코드를 이해하는 방법을 배운다. 리액트 오류 메시지 이해하기 - 스스로 오류를 파악하기 - 오류가 발생한 곳과 몇번째 줄인지도 확인할 수 있다. - IDE도 오류를 탐색할 수 있다. 코드 흐름 및 경고 분석 - 콘솔이나 IDE에 경고나 나타나지 않는 오류는 코드 순서를 따라가면서 확인해 볼 수 있다. 중단점(breakpoint) 작업하기 - 개발자 센터의 sources 탭에서 현재 웹페이지에서 사용중인 소스 파일을 찾아볼 수 있다. - npm start 스크립트는 브라우저에 코드를 보내서 실행될 수 있도록 하고 브라우저에 추가적인 정보..
-
[React] Udemy 강의 노트 6WEB Dev/StudyNote 2022. 12. 20. 00:22
모듈 소개 - 리액트로 웹앱을 구축하는 것은 컴포넌트를 만들고 로직이 동작하도록 하는 것이다. - 그리고 앱을 스타일링 하는 것이기도 하다. - 조건부로 혹은 동적인 방법으로 스타일을 설정하는 방법을 알아보자 - 스타일을 적용하는 컴포넌트의 범위를 정하기 위해 전역스타일로 추가하지는 않는다. - Styled Components 사용 - css 모듈이라는 개념 살펴보기 동적 인라인 스타일 설정하기 - 스타일이 적용된 방식 - 일반적인 class 선택자로 css 설정 - trim() 메소드는 과도하게 설정된 공백을 지워준다. - inline style 속성에 객체로 조건문을 설정해 줄 수 있다. style={{ borderColor: !isValid ? 'red' : 'black', color: !isVal..
-
[React] Udemy 강의 노트 5WEB Dev/StudyNote 2022. 12. 12. 00:03
모듈 소개 - 목록과 조건부 컨텐츠를 어떻게 렌더링 하는지 알아보기 - 페이지에서 데이터 배열을 출력하고 다양한 조건에서 다양한 컨텐츠 보여주기 데이터의 렌더링 목록 - 배열의 요소별로 하나씩 expense 아이템을 렌더링 하기 - JSX코드에서 자바스크립트를 실행하기 위해 JSX코드 안에 {} 중괄호를 사용 - 표준 자바스크립트 배열 메소드인 .map() 메소드 - map은 다른 배열을 기반으로 새로운 배열을 생성하는데, 원본 배열에 있는 모든 요소들을 변환한다. - 이 변환 작업을 적용하기 위해 함수 형태로 함수가 실행되면 배열의 모든 아이템에 map 을 호출해 새로운 배열에 추가한다. - JSX코드의 일부로 JSX요소의 배열을 가졌다면 리액트는 JSX요소를 나란히 렌더링 할 것이다 ([, , ]) ..
-
[React] Udemy 강의 노트 4-2WEB Dev/StudyNote 2022. 11. 30. 23:06
양식 입력 추가하기 - 양식 입력을 위한 form 태그를 별도로 분리한다. - input[type="number"]는 step을 설정할 수 있고 - input[type="date"]는 날짜 선택기를 제공하고, 날짜의 범위를 min과 max로 지정할 수 있다. 사용자 입력 리스닝Listening - 입력에서 발생하는 이벤트를 가지고 와서 저장하기 - 우선 요소에게 리스너를 추가해야 한다. - onInput이나 onChange는 같은 타입의 input에 사용할 수 있다. - onChange={함수} 로 붙일 수 있고 onChange={함수()}처럼 실행하지 않는다. - addEventListener를 사용했 던 것처럼 event를 인자로 주게 되면 자동적으로 변경 이벤트가 발생했을 때 이벤트 객체를 받을 수..
-
[React] Udemy 강의 노트 4-1WEB Dev/StudyNote 2022. 11. 29. 18:35
모듈 소개 - 리액트의 중요한 기본 개념 - 컴포넌트, props - 사용자와 상호작용에 대해 공부 - 사용자 이벤트 다루기 - state - 리액트는 선언적인 접근 방식을 사용. - 원하는 목표 상태를 정의하고 리액트가 그 상태에 도달하도록 처리 이벤트 리스닝 및 이벤트 핸들러 수행하기 - 이벤트가 상태의 변화를 촉발 - 클릭했을 때 리액트가 반응하도록 하는 것은 내장된 HTML 요소에서 수신할 수 있는 모든 DOM 이벤트에 접근할 수 있다. - JSX요소에서 props를 추가해서 이벤트 리스너를 적용한다. ex) onClick과 같이 on으로 시작 - 이런 on props는 함수가 필요하고 on props로 함수를 실행한다. - 함수를 전달할때는 return 전에 함수를 선언하고 ()를 빼고 실행한다..