본문 바로가기

전체 글91

[Bootstrap] React에 Bootstrap 적용하기 https://chunws13.tistory.com/55 [React] Project Levup - 메모 수정 기능 만들기 이전 작업으로 DB에 저장된 메모를 불러오는 것 까지 확인했다. 백엔드에서 수정및 삭제 기능을 구현했지만, 프론트엔드에서 부드럽게 구현할 수 있도록 구상을 해야했다. 구상 결과 각 메모를 chunws13.tistory.com 가장 기본적인 기능 (메모 CRUD)을 백엔드와 프론트엔드 모두 구현했으므로 이용할 때 보기 좋게 기본적인 스타일링을 진행하려고 한다. 문제는, 본인의 색감이나 구도 잡는 능력 등 스타일링에 관련해서는 별로 좋지가 않다는 점과 css 문서를 만들어서 하나하나 적용하다보면 시간이 매우 오래걸릴 것이라는 우려로 인해 스타일링을 직접 하는 것 보다는 외부 기능을 사용.. 2023. 12. 5.
[React] Project Levup - 메모 수정 기능 만들기 이전 작업으로 DB에 저장된 메모를 불러오는 것 까지 확인했다. 백엔드에서 수정및 삭제 기능을 구현했지만, 프론트엔드에서 부드럽게 구현할 수 있도록 구상을 해야했다. 구상 결과 각 메모를 반환하며, 수정 버튼을 눌렀을 때만 해당 메모가 수정되는 방향으로 정리했다. 그 전에, 수정 및 삭제 요청이 들어갈 때 각 메모의 ID 별로 처리할 수 있도록 컴포넌트를 세분화 시켰다. 1 . 컴포넌트 세분화 - 수정 전 코드 {memo.map((item, index) => { return ( { item._id.$oid } { item.content } 수정 삭제 ) })} 2 . 컴포넌트 세분화 - 수정 후 코드 const EachMemo = ({ memoId, content }) => { return ( { con.. 2023. 12. 2.
[FastAPI] Project Levup - .env (dotenv) 적용하기 프로젝트 버전을 저장 및 다른 기기에서 이어서 작업을 할 수 있도록 github에서 작업을 진행하는데 DB 연결 정보가 있다보니 commit 을 하기 전 비밀번호를 실제와 다른 것으로 저장한 후에 진행했다. 지금은 가려야 하는 것은 DB 정보 밖에 해당하지 않아서 번거롭기는 하지만 잊어버리지 않을 정도는 되지만 민감 정보가 많아지고, DB 연결이 더 많아지는 경우에 하나 하나 관리하기 어려워 진다는 문제가 있다. 이를 위해서 민감 정보를 모아두는 파일을 따로 만들고 그곳에 민감 정보를 저장, gitignore 파일에 포함시켜 commit에서 제외시킨다. 먼저, .env 파일을 불러올 수 있도록 패키지를 설치한다 python3 -m pip install python-dotenv 그 후 프로젝트 폴더 내 ... 2023. 11. 30.
[FastAPI] Project Levup - 메모 수정 & 삭제 기능 만들기 https://chunws13.tistory.com/52 [React] Project Levup - Axios 활용하기 백엔드에서 구현한 사항 : 메모 만들기, 메모 조회하기 백엔드에서는 로그인이 완료되면 토큰을 발급하고, 토큰과 함께 메모 조회 요청을 하면 해당 ID로 작성한 메모를 가져오도록 구현했다. 먼 chunws13.tistory.com 프론트엔드에서 메모 읽기와 쓰기 기능을 받아서 구현을 완료했으므로, 메모 수정 기능을 가진 api를 설계해 본다. 클라이언트에서 메모 id와 내용을 전달해 주면 memo db에서 id를 조회하여 저장된 내용을 바꾸면 될 것이다. 구현을 위해 클라이언트 측으로부터 받아야 하는 정보는 [ 메모 id, 수정할 내용, 로그인 토큰] 으로 총 3가지이다. 수정할 내용은 .. 2023. 11. 29.
[프로그래머스] PCCP 기출문제 2번 https://school.programmers.co.kr/learn/courses/30/lessons/250136 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 가장 많은 기름을 뽑을 수 있는 양을 찾는 문제. 1. 접근 처음 이 문제를 봤을 때, 지점을 순회하면서 BFS나 DFS를 활용해서 얻을 수 있는 기름의 총량의 최대치를 반환해 지속적으로 answer 값을 갱신하고자 했다. 2. 초기 코드 import copy def checker(land, start, depth, width): value = 0 move = [[0, 1], [1, 0], [0.. 2023. 11. 28.
[React] Project Levup - Axios 활용하기 백엔드에서 구현한 사항 : 메모 만들기, 메모 조회하기 백엔드에서는 로그인이 완료되면 토큰을 발급하고, 토큰과 함께 메모 조회 요청을 하면 해당 ID로 작성한 메모를 가져오도록 구현했다. 먼저, 메모 뷰가 랜더링 되면 API 요청을 통해 헤더에 토큰을 담아 데이터를 요청한다. import { useState, useEffect } from 'react' import {Cookies} from "react-cookie"; const cookie = new Cookies(); const token = cookie.get("token"); const [memo, setMemo] = useState([]); useEffect(() => { axios.get("http://127.0.0.1:8000/api/mem.. 2023. 11. 25.

티스토리툴바