neda의 블로그

230524 동기와 비동기 동기적 실행 자바스크립트 문법반 4주차에서는 콜백함수와 관련해 동기와 비동기에 대해 배웠다. 대표적인 비동기 함수로 타이머 역할을 하는 setTimeout()과 setInterval()이 있었다. 일반적인 자바스크립트 코드는 동기적 실행이다. 동기적이라는 말은 코드의 한줄을 작업이 완료하길 기다렸다가 완료되면 다음줄을 실행한다. 반복문 안에서는 왜? 하지만 반복문 안에서 반복마다 html element를 변경하도록 코드를 짠 경우 for (let i = 0; i < n; i++) { document.getElementById("display").value = i; } 반복문이 다 끝난 후에 바뀐다는 것이다. 단순하게 생각하면 각 반복마다 html element가 바뀌어야 할 것..

230523 자바스크립트 메모리 할당 자바스크립트 문법반을 공부하면서 메모리 할당에 대해 배웠다. 원시값은 변경할 수 없고(불변성을 가짐), 복제할 때는 값이 담긴 주소값을 복제한다. 참조값은 변경이 가능하고, 복제할 때는 값이 담긴 주소값들을 묶음으로 가지고 있어 그 묶음에 대한 주소값을 복제한다. 객체에 대한 메모리 살펴보기 실제로 이런지 알아보기 위해 개발자 도구를 통해 메모리를 살펴 보았다. 실제 메모리 주소는 아니다. 과정은 아래와 같다. 처음에 name, age 프로퍼티를 가지는 객체를 전역 객체로 생성한다 name 값만 변경해 본다. age 값만 변경해 본다. 객체 아예 다른 객체로 변경해 본다. 1. 생성 후 2. name 변경 후 3. age 변경 후 4. 새로운 객체로 객체를 변경 후 ..

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처럼 의존성을 관리하기도 쉬웠고, 팀프로젝트를 하면 환경을 공유하여 쉽게 협업이 가능할 것 같다.