본문 바로가기

Library&Framework32

[리액트 강의 복습 02] 리액트 모달창 UI 만들기 리액트 환경에서, 동적인 UI 만들기(모달창 만들기) {isModalVisible === true ? ( changeTitle(modalIndex)} // changeTitle 함수를 props로 내려줌 toggleModal={() => toggleModal(modalIndex)} // toggleModal 함수를 props로 내려줌 modalIndex={modalIndex} > ) : null} 삼항연산자를 이용해서, modal 을 보여주도록 하고 있다. 지금 모달에 대한 설명을 하자면, 게시글 상세보기를 modal 창을 이용해서 보여주고 있다. 여기서 게시글 상세보기를 누르면 모달창이 나오는 것이다. 모달창을 띄우는 것/ 모달창을 닫는 것 => 상태변화가 2가지 이기 때문에 boolean 필드로 변수.. 2024. 1. 4.
[리액트 강의 복습 01] 리액트에서 레이아웃 만들 때 쓰는 JSX 문법 3개, State 이용해서 변수명 저장하기, State로 좋아요 기능 해보기 리액트에서 레이아웃 만들 때 쓰는 JSX 문법 3개 1. class 대신에 className 2. 변수를 html 에 넣고 싶을 땐 { 중괄호 } 3. style 넣고 싶을땐 4. 중요한 데이터는 변수말고 state에 담습니다 let [name, setName] = useState("김성우"); 라고하면, name 이라는 변수에 "김성우"를 임시 저장하고 setName 이라는 인자로 변수명을 변경할 수 있다. 라우터를 배우기 전에 , 블로그 만들기를 해보았는데 코드는 다음과 같다. // 'logo'가 사용되지 않을 경우 아래 줄을 제거하세요. import logo from "./logo.svg"; import "./App.css"; import { useState } from "react"; const .. 2024. 1. 4.
React 를 쓰는 이유? 1. Single Page Application 바닐라 javascript , html, css 를 써서 프로젝트를 만드는 것은, 무리가 있다. (실제로 해보았음) Route path="/detail" Route path="/" Route path="/login" 과 같이, url path 를 동적으로 라우팅해서 굳이 각각 html 파일을 만들고, js 를 따로 만들지 않아도 컴포넌트화해서 간단하게 넣어줄 수 있다. 2. html을 따로 파일일 만드는것이 아니라, "함수, Array, Object" 이런 곳에 보관하고 재사용할 수 있다. 큰 프로젝트 일 수록 html 관리가 편해진다. 3. React Native 를 쓰면 , 같은 리액트 문법으로 모바일 앱개발도 가능하다. (html, css 문법만 약.. 2024. 1. 3.
파이썬/장고로 결제 시작하기 2~3주차(Feat. 아임포트) 장고(퓨어장고&템플릿문법) 결제하기 강의 42%까지 들었고 커스텀유저 사용하다가, 수정해줘야 할 함수와 변수가 많아져서 그냥 시키는대로 쭉 강의 듣다가, 스프링 부트에도 적용시켜 볼 수 있도록 원리를 파악하고 있습니다 나머지 58% 강의에 상품 모델, 상품 리스트, 결제 정보에 대한 중요한 내용들이 있어서 최대한 빨리 듣고 , 개념을 잘 이해한 다음에 블로그에 기록하도록 하겠습니다.. 다음은 지금까지 적용한 페이지에 대한 기록입니다 인덱스 페이지 결제 정보 입력 결제 테스트를 현대카드로 진행 결제를 진행하면, 선택적으로 입력한 이메일로 결제 정보가 날아옵니다. 결제내역을 보여주는 페이지입니다. 결제에 대한 변수들을 받아와서, 사용자에게 보여줄 수 있습니다 로그인이 되기전, 되고난 후 네비바 변경입니다. .. 2023. 12. 7.
파이썬/장고로 결제 시작하기 1주차(Feat. 아임포트) 새롭게 알게 된 것은 env 관련 함수를 이용해서, 장고 세팅을 용이하게 할 수 있다는 점이었다. LANGUAGE_CODE = env.str("LANGUAGE_CODE", default="ko-kr") INTERNAL_IPS = env.list("INTERNAL_IPS", default=["127.0.0.1"]) env 파일에 따로 변수명을 정의하면, 손쉽게 이용 가능하다. # Build paths inside the project like this: BASE_DIR / 'subdir'. BASE_DIR = Path(__file__).resolve().parent.parent # 취상위폴더의 경로 BASE_DIR # django-envirion # 공식문서참조 : https://django-environ.. 2023. 11. 29.
파이썬/장고로 결제 시작하기 (Feat. 아임포트) https://inf.run/SRZx 파이썬/장고로 결제 시작하기 (Feat. 아임포트) - 기본편 - 인프런 | 강의 웹 서비스 결제 연동에 어려움을 겪고 계신가요? 장고와 아임포트를 통해 여러분의 서비스에 결제를 빠르게 적용해보세요., 인생은 짧습니다. 결제 연동에서도 파이썬/장고를 통해,비즈니스를 www.inflearn.com 인프런 강의를 참고했으며, 주차별로 블로그 기록할 예정입니다. 결제 , 장바구니, 결제취소 뿐만아니라 몰랐던 셋팅방법들도 알려주기 때문에 값어치 있는 강의라고 생각이 든다. 뭐 물론 ! 돈 아끼려면 구글링해서, 혼자서 파는 것도 좋다. 내돈주고 구매해서, 결제기능을 다음주까지 실현해보고자 합니다! 2023. 11. 29.

티스토리툴바