Chansol's Tech Blog

GitHub - jinmidnight01/powersell_frontend Contribute to jinmidnight01/powersell_frontend development by creating an account on GitHub. github.com 본 내용의 코드는 전부 위 링크에 있으니 참고바랍니다 구매 Modal (Modal.js) 주문 POST 1. 제어 컴포넌트로 주문 input 객체 생성 ... // 수량, 주문자명, 지역번호, 전화번호, 우편 번호, 주소, 상세 주소, 비밀번호 const [inputs, setInputs] = useState({ quantity: 1, name: "", preNum: "010", phoneNumber: "", zipCode: "", address:..

GitHub - jinmidnight01/powersell_frontend Contribute to jinmidnight01/powersell_frontend development by creating an account on GitHub. github.com 본 내용의 코드는 전부 위 링크에 있으니 참고바랍니다 홈페이지 (LandingPage.js) 전 상품 정보 GET - useEffect를 통해 최초 렌더링 시에만 작동 - useState를 통해 itemList 상태를 GET한 전 상품정보로 set - useState를 통해 전 상품정보를 GET할 경우 loading 상태 false로 변경 ... // REST API 2-1: get all items useEffect(() => { async fu..

GitHub - jinmidnight01/powersell_frontend Contribute to jinmidnight01/powersell_frontend development by creating an account on GitHub. github.com 본 내용의 코드는 전부 위 링크에 있으니 참고바랍니다 본 사이트는 외부 서버에서 불러온 데이터를 활용할 것이기에 REST API에 대한 이해가 필수다 Client가 request를 보내면 Server가 JSON 형태로 response를 보내주는 것이다 HTTP Method에는 GET, POST, PUT 등 다양한 방식들이 있다 React는 Client 측에서 request를 보내는 역할을 한다 로컬에서 React를 개발할 때 서버 측의 API가 개..

GitHub - jinmidnight01/powersell_frontend Contribute to jinmidnight01/powersell_frontend development by creating an account on GitHub. github.com 본 내용의 코드는 전부 위 링크에 있으니 참고바랍니다 Visual Studio Code, Node.js는 기본적으로 설치되었다는 전제하에 진행된다 REST API로 외부 서버와 통신할 수 있는 React 기반 커머스 사이트를 만들어볼 예정이다 본 사이트에서는 상품을 구매하고 주문을 조회할 수 있으며, 서비스 후기를 작성할 수 있다 또한, 관리자 페이지에서 주문/상품/후기 목록을 관리할 수 있다 마지막으로 해당 사이트를 AWS와 Netlify를 통해..

React - 유저 인터페이스(UI)를 관리하는 Javascript 라이브러리 NPM(node package manager) - Javascript 라이브러리들을 설치하고 버전을 관리하는 도구 - node_modules 폴더에 있는 모든 라이브러리들을 주고받기에는 용량이 크기에, package.json만 주고받으며 npm을 통해 라이브러리들을 설치한다 Yarn - NPM의 역할을 하는 동시에 NPM의 단점을 보완한 라이브러리 관리 도구 (feat. Meta) # 빈 폴더를 Visual Studio Code에서 오픈 # 터미널에 입력하여 yarn 설치 npm -install -g yarn # 어플리케이션 설치 yarn create react-app "앱 이름" # 설치된 앱으로 이동 cd "앱 이름" # ..

Heroku 또한 무료 호스팅 서비스다. 좀 더 정확히 말하면 무료 호스팅 서비스"이었다". 2023년부터 유료로 전환된 서비스지만, 여전히 Heroku는 많이 이용되는 호스팅 서비스인 만큼 배포 방법을 정리해보고자 한다 우선 Heroku가 무료일 당시 활성 주기가 짧은 저장공간을 보유하고 있어서, static/media와 같은 이미지 파일들이 얼마 안 있어 휘발되고는 했다. 이를 방지하기 위해서 static/media 파일은 AWS S3에서 관리할 수 있도록, Heroku와 AWS S3를 연동하여 배포했다 이에 대한 내용을 IT 동아리에서 활동할 당시 강의한 영상이 있어서, 글 대신 아래 유튜브 링크로 설명하고자 한다. 아래 첨부한 참고링크와 참고코드는 유뷰트 시청 시 활용될 예정이다 참고링크 Hero..

기본 세팅 우선 필요한 패키지를 배포할 때도 설치해줘야 하기 때문에, 미리 패키지를 모아놓는 것이 좋다 작업하던 폴더의 최상단 위치에서 아래 명령어를 터미널에 입력해준다 그러면 requirements.txt가 폴더의 최상단 위치에 생성될 것이다 pip freeze > requirements.txt 또한, settings.py에서 ALLOWED_HOSTS를 전체로 설정하여 어떤 호스트 URL이든 접근할 수 있도록 허용해준다 (프로젝트 URL만 접근할 수 있도록 허용하고 싶으면, 프로젝트 URL 생성 후 해당 URL만 입력하면 된다) # 호스트 URL 전체 허용 ALLOWED_HOSTS = ['*'] # 프로젝트 URL만 하용 ALLOWED_HOSTS = ['프로젝트 URL'] 다음으로, 개발한 코드들을 G..

GitHub - jinmidnight01/community_answer Contribute to jinmidnight01/community_answer development by creating an account on GitHub. github.com 본 내용의 코드는 전부 위 링크에 있으니 참고바랍니다 CRUD(Update): View & Template 작성, URL 주소 지정 1. views.py에서 update 함수 작성 * @login_required: 로그인된 사용자만 접근 가능 / 로그인하지 않았다면 로그인 페이지로 연결 2. templates에서 update.html 작성 3. urls.py에서 주소 지정 CRUD(Delete): View & Template 작성, URL 주소 지정 1...

GitHub - jinmidnight01/community_answer Contribute to jinmidnight01/community_answer development by creating an account on GitHub. github.com 본 내용의 코드는 전부 위 링크에 있으니 참고바랍니다 익명 커뮤니티 사이트는 다 구현했으니, 실명 커뮤니티 사이트를 구현해보고자 한다 실명 커뮤니티 사이트에는 회원가입/로그인, 게시글 수정/삭제 기능을 추가할 예정이다 세팅 1. account 앱 생성 & settings.py 등록 django-admin startapp account * 앱 이름만 등록 가능 2. urls.py 분리 3. 상단 헤더에 회원가입/로그인/로그아웃 연동: base.html 회원..

GitHub - jinmidnight01/community_answer Contribute to jinmidnight01/community_answer development by creating an account on GitHub. github.com 본 내용의 코드는 전부 위 링크에 있으니 참고바랍니다 CRUD(Create, Read): Model 생성 1. models.py 작성 및 DB에 적용 # 모델 생성 python manage.py makemigrations # DB 연동 python manage.py migrate 2. admin.py에 모델 등록 3. Admin 페이지(DB)에 접근 가능한 관리자 계정 생성 # 관리자 계정 생성 python manage.py createsuperuser ..