neda의 블로그

230522 내일배움캠프 2주차 자바스크립트 문법반 시작 이번 주는 자바스크립트 문법반 강의를 듣는다. 따라서 오늘은 0~2주차까지 수업을 들었고 1주차와 2주차의 숙제로 간단한 알고리즘을 풀었다. 자바스크립트 문법은 사전캠프 때도 공부했지만, 늘 모든 것을 기억할 수는 없기 때문에 한 번 더 복습한다는 생각으로 공부하고 있다. 1주차 숙제 문자열 연습하기 문제: 대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. 'p', 'y' 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다. 예를 들어 s가 "pPoooyY"..

WIL Facts 내일배움캠프가 개강하고 첫 주를 보냈다. 팀원 4명과 함께 팀 소개 웹 페이지 미니프로젝트를 진행했다. 미니 프로젝트에서 Flask로 만드는 백엔드를 담당했다. 협업을 위해 Github로 하나의 repo에서 작업을 해봤다. Feelings 처음 만나는 사람과 바로 협업을 한다는 게 조금 걱정이었다. 하지만 다들 비슷한 또래여서 그런지 소통도 잘되고, 재미있었다. 다들 Git이 익숙하지 않았지만, 어떻게 하다 보니 그래도 브랜치를 나누고 Main으로 병합하고 잘 되어 좋았다. Findings api를 만들 때 에러가 자주 발생해 애를 먹었다. 다양한 에러가 뜰 수 있어서 최대한 세세하게 예외 처리를 하고 상태 코드와 응답으로 에러를 알려주는 것이 에러를 빨리 찾고, 사용자가 헷갈리지 않는..

230519 이미지 리셋 버그 수정 사용자 프로필을 수정하는 페이지에서 프로필 이미지를 삭제하여 기본 이미지를 사용했을 때 input image를 서버로 보내지 않았다. 때문에 image를 못 받은 서버에서는 프로필 이미지를 수정하지 않는다고 판단하게 되어, 기본 이미지를 사용하지 못하는 버그가 있었다. 때문에 input checkbox를 새로 만들어서 다시 보냈다. function changeImage(e) { ... is_resetImage.checked = false; imagePreview.src = URL.createObjectURL(file); } function resetImage() { imagePreview.src = "기본 이미지 url"; inputImage.value = ""; is..

S3 폴더 삭제 계속 데이터 생성 삭제 테스트를 하면서 멤버를 생성하면서 이미지를 업로드 하다 보니 s3에 쌓이기만 해서 지우는 함수를 만들기로 했다. 폴더 내의 모든 객체 정보 가져오기 폴더 경로를 Prefix로 전달 ex. 경로가 버킷/폴더/image.png 일경우 Prefix는 '폴더/'이다 while문 내부에서 ListObjectV2Command를 send()하여 객체의 리스트를 가져오고 전부 합쳐 반환한다. async function getObjectList(bucketName, folderPrefix) { try { const command = new ListObjectsV2Command({ Bucket: bucketName, Prefix: folderPrefix }); let isTrunca..

파일 업로드 HTML에서 서버로 form에서 파일을 전송할 때는 enctype="multipart/form-data" 는 필수 속성이다 ... ... formdata에 전부 담아서 서버로 보낸다. async function createMember(event) { event.preventDefault(); const formData = new FormData(event.target); await fetch("/api/member", { method: "POST", body: formData, }); } 서버에서 저장하기 서버에서는 파일이 없는지 확인하고, 없거나 비어있다면 기본 이미지의 url을 사용한다. 파일이 있다면 upload_image() 함수를 실행한다. 그 결과로 받은 url을 사용한다. .....

230516 해싱 argon2 처음에는 그냥 예전부터 유명했던 bcrypt를 쓸까 생각했다. 하지만 세상이 급변하는 요즘 새로운 대안도 등장하고 있었다. 그중에서 암호 해싱 대회에서 우승했다고 하는 argon2_cffi를 써보기로 했다. 사용법 사용법은 정말 간단했다. 사용자의 비밀번호 입력값을 request로 받아왔을 때 그냥 문자열을 넘겨주기만 하면 된다. from argon2 import PasswordHasher def create_member(): ... ph = PasswordHasher() password = request.form['password'] password_hash = ph.hash(str(password)) ... 아래와 같은 무작위한 해시 값을 리턴한다. $argon2id$v..

Git Git 시작하기 linux 명령어 현재 경로 내 디렉터리와 파일 리스트 출력: ls -al 디렉터리 생성: mkdir 디렉터리 이동: cd 디렉터리 삭제: rmdir 파일 생성 및 파일 날짜 시간 변경: touch 텍스트 문서 확인: cat 파일 복사: cp 설치 후 git 최초 설정하기 $ git config --global user.name "John Doe" $ git config --global user.email johndoe@example.com git 저장소 만들기 $ git init git 변경사항 저장하기 add & commit 파일 변경 -> add -> commit $ touch README.md $ git add README.md $ git commit -m 'first co..

2305012 python 가상환경 생성 venv 파이썬을 공부할 때는 그냥 전역으로 패키지를 설치하여 사용해왔다. 대부분의 프로젝트를 코랩에서만 했기에 venv가 필요한지도 몰랐다. 이번에 강의를 듣고 프로젝트를 하면서 venv가 필요하다는 것을 깨달았다. venv모듈 파이썬에서는 venv 모듈을 통해 가상환경을 만들 수 있다. 노드 모듈 폴더처럼 파이썬과 그에 해당하는 모듈들이 폴더 안에 생성된다. 전역으로 설치했을 때는 버전을 관리하기 어려웠는데, 가상 환경 안에서 만드니 해당 프로젝트에서만 필요한 패키지만 설치하고 따로 관리할 수 있었다. 노드에서 package.json처럼 의존성을 관리하기도 쉬웠고, 팀프로젝트를 하면 환경을 공유하여 쉽게 협업이 가능할 것 같다.

5월 11일 1. 폼 데이터를 서버로 보내기 사용자는 메인 페이지에서 영화를 검색해 해당 영화의 코멘트 페이지로 이동 -> 팀원이 만든 코멘트 페이지에서 코멘트를 입력 후 서버로 FormData 전송 -> 서버에서 FormData를 받아 mongodb로 insert() 작성자 이름, 코멘트, 별점은 input에서 나머지는 코멘트 페이지 로드 시 가져왔던 해당 영화 정보에서 가져온다. 장르는 일반적으로 2개 이상이므로, 리스트로 보낸다. //comment.html function posting() { const name = document.querySelector("#name").value; const comment = document.querySelector("#comment").value; const ..

5월 10일 슬라이더 작업 필요 사항: 슬라이드가 항상 가운데 와야 한다. (홀수 일때) 무한 루프 사용 페이지네이션 사용 이전과 다음 슬라이드가 있을 경우 최대한 조금은 보이도록 해야 한다. 느낀 점: 슬라이드가 작아지면 텍스트로 인해 위아래가 너무 길어져 카드 비율이 이상해진다. 간단한 이미지 슬라이더는 스와이퍼를 쓰는 게 가장 좋은 것 같다. 슬라이더간 간격 값(spaceBetween)이 고정이라 원하는대로 반응형을 만들기는 어려운 부분이 있다. Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazi..