본문 바로가기

웹개발프로젝트

나의 첫 프로젝트(3), "Flask에서 React까지" [17] state에 배열 추가하기 포트폴리오에 등록한 정보를 바탕으로 유저들의 데이터를 한 페이지에 나열하는 기능을 만들려고 했다. 리스트를 state로 지정하고 나서, 유저 목록을 가져오면 seState로 상태를 저장해야하는데, 배열의 경우에는 concat을 사용하여 해결하였다. // React const [userList, setUserList] = useState([]) const users = [] useEffect(() => { async function bring_user_list() { try { const response = await axios.get(`${process.env.REACT_APP_BASE_URL}/userList`) for(let i=0; i < response.data.. 더보기
나의 첫 프로젝트(2), "Flask에서 React까지" [08] 비밀번호 암호화 입력받은 비밀번호 값을 그대로 저장하지 않고 암호화 하여 저장해야하는데 쓰는 함수이다. 해시(hash)란 단방향 암호화 기법으로 해시함수(해시 알고리즘)를 이용하여 고정된 길이의 암호화된 문자열로 바꿔버리는 것을 의미한다. 이 과정을 소금 친다고 표현하는데, generate_password_hash는 보통 5만번정도 소금을 친다. (챱챱 x 50000) # app.py from werkzeug.security import generate_password_hash, check_password_hash @app.route("/join", methods=["POST"]) def join() : data = request.get_json() # axios.post로 받아온 데이터 use.. 더보기
나의 첫 프로젝트(1), "Flask에서 React까지" 엘리스 AI 트랙을 달려온지 8주가 지났고 드디어 개인 프로젝트를 하게 되었다!!! 설렘 반, 두려움 반 프로젝트 주제는 아래 3가지 중에 선택을 할 수 있었다. 직업 심리 검사 서비스 (프론트엔드) 도서관 대출 서비스 (백엔드) 레이서 포트폴리오 서비스 (풀스택) 엘리스 1주차부터 8주차까지 배웠던 모든 내용을 프로젝트 안에서 녹여내보고 싶다는 생각에 세번째 포트폴리오 서비스 사이트를 과감히 선택했다. 세번째 주제는 역시 1분만에 마감되기도 했다. 첫주에는 부족한 개념을 다시 공부하고 로그인, 회원가입 기능을 구현하는 것에 모든것을 쏟았고, 둘째주에는 서버(MySQL)와 백엔드(Flask) 그리고 프론트엔드(React)를 넘나들면서 웹사이트에 살을 붙여갔다. 코딩의 코도 모르던 코맹맹이가 2주동안 얼마.. 더보기