우'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,..

IDE주요 기능으로는 코드 편집기, 디버거, 빌드 자동화 도구, 프로젝트 관리 도구, 소스 코드 버전 관리 시스템 등이 있습니다. IDE를 사용하면 개발자는 하나의 환경에서 코드 작성, 디버깅, 컴파일, 테스트, 배포 등의 작업을 편리하게 수행할 수 있습니다.대표적인 IDE로는 Eclipse, IntelliJ IDEA, Visual Studio 등이 있습니다. 각각의 IDE는 특정 언어나 프레임워크를 위해 최적화되어 있으며, 개발자는 자신이 사용하는 언어나 프레임워크에 맞는 IDE를 선택하여 사용할 수 있습니다.IDE는 "Integrated Development Environment"의 약자로, 통합 개발 환경을 의미합니다. 개발자가 소프트웨어를 개발할 때 사용하는 다양한 도구와 기능을 한 곳에 통합하여..