우's 공부 일지

APIpath를 사용해야할 때특정 리소스를 식별하기 위해서query를 사용해야할 때정렬하거나 필터링하기 위해서 fastApi 실습코드shift+F5 : 완전 새로운 사이트로 접속from fastapi import FastAPIfrom pydantic import BaseModelapp = FastAPI()items = ["맥북", "아이폰", "아이패드"]class Item(BaseModel): id:int content:str@app.get("/items")def read_items(): return items# parameter@app.get("/items/{id}")def read_id_items(id): return items[int(id)]# query@app.get("/i..

Wordle깃허브 : https://github.com/kung036/wordle-clone배포 : netlify → 로그인 → sites → Import an existing project → Deloy with Github → https://app.netlify.com/배포된 페이지 : https://main--wordle-clone-kung036.netlify.app/ 백엔드직접적인 데이터베이스 접근을 막아서 보안 문제 해결부하를 줄이기 위해서 백엔드 사용파이썬을 선택한 이유초보자 친화적다양한 라이브러리와 프레임워크거대한 커뮤니티 파이썬변수 선언; 및 변수 타입 선언 X선언 : 변수명 = 변수값조건문선언 : if 조건문:탭을 통해서 구분배열선언 : 배열명=[값1, 값2, 값3]클래스선언 : clas..

web APIscript 태그는 보통 body 태그 끝에 넣음css는 head 태그의 끝에 넣음setInterval() : 주기적 호출.padStart(최대 길이, "채울 문자열") : 문자열 메서드로, 문자 규격을 맞출 때 사용timer.html 00:00 00:00 timer.js// 현재 시간function setTime() { const time = new Date(); const minuates = time.getMinutes().toString(); const seconds = time.getSeconds().toString(); const timeH1 = document.querySelector(".time"); timeH1.innerText = `${mi..

생각보다 공부할 양이 많았다. 웹은 공부한지 오래되어서 기억이 잘안나고, 예전에 공부했을 때 너무 어려웠던 기억만 나서 조금 두렵다. 스프링을 공부한지 꽤 되어서 어느 정도 코드에 대해서 알고 있고, 쉽게 공부할 수 있었고 재밌었다. 자바와 자바스크립트의 차이점, 구조 등을 비교하면서 공부하니 이해가 더 빨랐다. 하지만 완전 초보자들이 공부하기에는 시간이 많이 필요해보인다.

단어 게임 wordlehttps://www.nytimes.com/games/wordle/index.html자바스크립트동적인 요소백엔드와 소통할 때 사용console.log("메세지"); : 웹 브라우저의 console에 메세지 출력변수var : 재선언 시 에러 발생 Xconst : 재선언 시 에러 발생, 값 변경 X(고정값)let : 재선언 시 에러 발생, 값 변경 O(가변값)배열선언 : const 변수명 = ["값1", "값2"]; → const의 값 변경 가능push() : 값 넣기객체boolean값true : 참false : 거짓undefined : 정의도지 않음null : 없는값=== : 동일한 값인지 확인함수선언 : function 함수명() {};호출 : 함수명();화살표 함수선언 : cons..

당근마켓 클론코딩구글 폰트 이용https://fonts.google.com/?subset=koreanpretendard : 현업에서 주로 이용https://github.com/orioncactus/pretendardCSS 예시https://getcssscan.com/깃허브https://github.com/kung036/carrot-market-clone구현화면

웨일 확장앱 - 색상 추출Live color pickerCSS 심화색상은 변수로 선언해서 사용하기transition : 특정 변화를 부드럽게 만들어주는 옵션transform : 이미지 효과</li>cubic-bezier : 이미지 효과 확인하는 사이트https://cubic-bezier.com/@media를 이용해서 반응형 웹 구현CSS 프레임워크Bootstraphttps://getbootstrap.comtailwind cssmuiant design장점 : 같은 코드 반복 줄이기단점 : 러닝커브 증가당근마켓 클론코딩header작업화면메뉴화면main-contentfooterbem 방식 : css에서 이름을 짓는 방법무료 아이콘 사이트 : heroiconshttps://heroicons.com/r..

회원가입 페이지 이메일로 가입 이메일 비밀번호 이름 여기를 눌러주세요  구현된 화면CSS순차적으로 적용된 코드 -> 제일 마지막에 적용된 코드가 적용됨에러를 표출하지 않음현업에는 external 방식을 사용index.html 여기! style.cssdiv { background-color: blue !important;}  incline vs boxinline은 content 없이는 높이와 너비를 갖지 않고, box는 높이와 너비를 갖는다.각 요소는 박스모델(margin, padding,..