Daily Dev.

배운 것 자바스크립트에서 객체는 python의 dictionary와 class 둘 다를 포괄하는 개념으로 이해했다. 오늘은 dictionary 같은 자료형으로서의 객체를 다루는 방법에 대해서 정리해 본다. 1. 객체(Object) 만들기 객체는 {propertyName: propertyValue}로 이뤄져 있다. 일단 this 를 쓰지 않고도 객체를 dictionary 처럼 만들 수 있다. this를 쓰는건 class형태로서의 Object를 정리할 때 볼 것 예를 들어, 아래와 같이 person이라는 객체를 만들 수 있다. let person = { name: 'Hong', age: 10, gender: "Male", } 그런데 자바스크립트는 loosely-typed language 라고 하지 않는가, ..

배운 것 1. 배열(Array) 요소 다루기 1.1. push 배열 끝에 하나 이상의 요소를 추가 const arr = [1, 2, 3]; arr.push(4, 5); console.log(arr); // [1, 2, 3, 4, 5] 1.2. pop 배열의 마지막 요소를 제거하고 반환(return) shift와 unshift로 할거면 push랑 pull로 하지 const arr = [1, 2, 3]; const last = arr.pop(); console.log(last); // 3 console.log(arr); // [1, 2] 1.3. shift 배열의 첫 번째 요소를 제거하고 반환(return) const arr = [1, 2, 3]; const first = arr.shift(); consol..

배운 것 1. 데이터 타입 JS에는 원시형과 객체가 있다. 1.1. 원시형(Primitive values) 원시형은 불변(immutable) 타입이다. 원시형에는 boolean, null, undefined, number, string, symbol 이 있다. boolean 타입 true와 false 두개만 있다. (왜 불린...으로 쓰고, 읽는 사람이 있는지 잘 모르겠다. 불리언 아닌가?) null 타입은 null 만 있고, undefined도 undefined만 있다. number는 -(2^53 − 1)부터 2^53 − 1까지의 수를 가진다. 왜냐면, 링크(64비트를 쓰는데, 부호에 1개, exponent에 11개, 나머지는 숫자로 한다는 약속). 그리고 +Infinity와 -Infinity, NaN..

Issue 로컬에서 잘 작동하는 것을 확인하고, Elastic beanstalk으로 배포를 했다. 기대한건 아니지만, 역시 나오는 심각 메세지. 한번에 될 일은 없다고 생각하긴 했는데. Try&Error 우선 Elastic Beanstalk의 로그를 살펴보니, AttributeError: module 'jwt' has no attribute 'ExpiredSignatureError' 에러가 났다. 로컬에서는 안생기던 에러인데... 위 에러 메세지와 aws elastic beanstalk으로 검색을 하니, 두가지 원인과 솔루션을 확인할 수 있었다. 1. pyjwt 라이브러리 호환성 문제 2. jwt와 pyjwt 두개의 라이브러리를 모두 설치했을 때 생기는 문제. 우선 jwt와 pyjwt 두개 설치하는 문제..

이번주차 프로젝트에서 JWT 인증방식과 해시함수 SHA256을 꼭 사용해서 로그인 기능을 구현하라는 과제를 진행했다. JWT 인증에 대한 설명글은 많은데, 구체적으로 어떻게 구현해야 하는지에 대해 내가 구현해야 하는 Flask 관련 자료는 잘 찾지 못했다. 나중에 그 이유도 알게되었지만. 우선 JWT에 대해서 공부했다. JWT에 대해서 잘 정리된 글은 많이 있으니 간단하게 정리하면, JSON 형식으로 ".".join([Header,Payload,Signatrue]) Header.Payload.Signature로 구성되어 있는 토큰으로 웹페이지에서 인증과 권한을 부여하고, 확인하는 용도로 사용한다고 한다. 토큰을 서버에서 만들어 클라이언트에 보내주고, 보내준 토큰으로 사용자 확인, 인증, 권한 확인에 사용..

프로젝트 제목: TBD 와이어프레임: index.html 기능 Method URL request response (success) response (error) 로그인 페이지 이동 /signin page 이동 document - 회원가입 페이지 이동 /signup page 이동 document - 로그인 아이디 확인 GET /auth/signin - {"result": "success", "userId": userId} redirecting to /signin To-do 리스트 목록 불러오기 GET /todo/list - [{"toDo": toDo, "status": True/False, "toDoId": toDoId, "sharedId":userId}] redirecting to /signin To-d..

간단한 웹페이지를 구현할 수 있는 방법을 학습 개별 언어 또는 기술의 구조는 HTML + Javascript(jQuery) + CSS(Bootstrap) ↔ Flask ↔ MongoDB 과 같고, 이해한 바로는 아래와 같은 형태로 역할을 했다. 심플하고 강력한 jQuery는 점점 덜 사용하는 듯 (상황, 분위기가...) querySelector나 getElementById 같은 쉬운 method를 사용하는 것이 jQuery를 불러와서 사용하는 것 보다 더 간단할 것. jQuery import 할 때 불러오는 주소인 https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js를 열어보니, 복잡한 Javascript 가 보인다. 용량은 88KB. 요즘의..

Git으로 코드를 관리, 협업하는 방법 GitHub을 저장소로 활용하며 협업하고 사용하는 방법 Git 과 GitHub사이의 사용법 에 대해서 이해한 만큼의 정리. Git은 버전 컨트롤 시스템이다. 관리할 범위를 지정하고 (init, clone) 변경한 문서를 순차적인 버전으로 보관하며 (add → commit) 나무 가지 뻗어나가 듯 여러 순차적인 버전을 만들 수 있고 (branch) 가지끼리 합칠 수도 (merge) 다시 돌릴 수도있다.(amend, revert, reset) GitHub은 원격 저장소인데, GitHub을 이용해서 일처리를 분배하고 (issue Assignees) 일한 결과를 리뷰하고 취합하는 일을 할 수 있다. (pull request, merge) 남의 일을 가져와서 수정할 수도 있..

Issue jQuery를 사용해서 간단한 웹페이지 만들기 중에, jQuery에 대해서 한번 찾아봐야 겠다 싶었는데 뭔가 현업에서 사용하지 않는 분위기가 감지되었다. 최근 글은 많이 없고 2년 전 까지 게시물이 조금 있는 느낌. "jQuery 현업"으로 검색해보니 jQuery에 대한 슬픈 고찰이라는 재밌는 글을 발견했다. Try&Error 글의 요지는 초창기 Javascript에서 불편함을 해소하기 위해 jQuery가 탄생했으나, ES6이 나오고, SPA(Single Page App) 라이브러리, 프레임워크가 많아지면서 jQuery가 해소해주던 많인 부분이 ES6에서나 SPA 라이브러리, 프레임워크로 해결이 되니, 자연스럽게 사용빈도가 내려가고 있다는 것. 그래서 나도 간단하게 jQuery로 구현했던 것을..

Issue 간단한 웹개발 수강을 기반으로 토이프로젝트를 만들기로 했다. 간단한 웹페이지라서 4명이 역할을 분담하기 애매해서 각자 개발하기로 했다. 32개의 이미지 URL을 가지고, 소위 OOO 월드컵 게임을 구현하는 것이다. 머리속에서 간단하다고 생각했으나 실제로 구현하기 위해서는 약간의 고민이 필요했다. Try&Error 우선 구현해야 하는 간단한 조각을 나열했을 때 랜덤으로 두 이미지를 추출하되, 추출하고싶지 않은 리스트를 반영해야 할 것 (구현하다 보니 두 이미지에서 n개의 이미지를 랜덤으로 추출하도록 수정했다.) 두 이미지가 떠 있을 때 선택한 이미지와 미선택한 이미지에 대한 정보 저장 선택 후 새로운 두 이미지로 화면 전환 32강, 16강, 8강, 4강 ... 으로 바뀌는 지점에 대한 로직 게임..