[WEB] 데이터 처리 4가지 방식 <CRUD>

C:create(생성)R:read(조회)U:update(수정)D:delete/destory(삭제) 이러한 CRUD작업을 처리하기 위한 HTTP 요청 메서드는 POST(생성), GET(조회), PUT/PATCH(수정), DELETE(삭제)로 총 네 가지가 있다. 먼저 POST방식은 URL에 데이터가 모두 노출되지 않아 민감한 정보를 담아도 보안에 취약하지 않다.즉, 정보가 쿼리 문자열이 아닌 본문에 담겨 새로운 데이터를 생성하게 된다.사용 예) 상품주문, 식당예약, 티켓 예매 등등 GET방식은 URL의 쿼리 문자열을 통해 데이터를 조회하므로 POST방식과는 달리 조건이 URL에 모두 노출되므로 민감한 정보를 담는 경우엔 사용하지 않는 것이 좋다.또한 웹브라우저에는 URL길이 제한이 되어있으므로 비교적 크기..

• format_list_bulleted 카테고리 없음
• · 2025. 4. 2.

[WEB] API란?

API란 앱 사이에 데이터를 주고받는 규칙이라고 할 수 있다.또한 공공데이터포탈에 업로드되어있는 오픈 API를 활용할 수 있다웹서비스에서 사용되는 회원가입, 결제, 인증, 메시지 전송과 같은 기능들은 API로 구현되어 있다. 내가 현재 공부하고 있는 프런트엔드는 백엔드에게 데이터를 요청하여 사용자에게 보여주게 되는데그렇게 백엔드에 데이터를 요청할 때 지키는 규칙은 API(application programming interface)라고 한다. 프론트엔드에서 백엔드로 API규칙에 맞게 데이터를 요청(Request), 백엔드가 프론트엔드로 응답(response) or 데이터베이스에 저장하는 방식으로 웹사이트가 굴러가게된다. API가 요청을 받으면 제이슨(JSON) 형태로 응답함. API(HTTP,URL)..

• format_list_bulleted 카테고리 없음
• · 2025. 4. 2.

[Javascript] 이벤트

이벤트란?사용자나 시스템이 어떤 동작을 했을 때 발생하는 신호를 뜻한다. 예를 들어, 사용자가 (버튼을 클릭, 키보드 클릭, 마우스 오버, 페이지 로드)click(클릭), mouseover(마우스를 올림), keydown(키 누름), submit(폼 제출), load(페이지 로딩 완료) 이란 HTML 태그 안에 직접 자바스크립트 코드를 넣는 방식이다.장점:간단하고 빠르게 테스트 가능, 구조가 직관적, 외부스크립트 없이 동작 가능단점:HTML과 JS가 섞여 코드가 지저분해짐, 유지보수에 어려워짐, 하나의 요소에 여러 동작 삽입 난이도 상승 이러한 인라인방식의 단점들 때문에 실제 프로젝트에서는 JS와 HTML을 분리시킨 방식인 를 많이 활용하게 된가.이러한 방식은 HTML을 건드리지 않고 자바스크립트로 이벤..

• format_list_bulleted 프론트엔드/자바스크립트
• · 2025. 4. 2.

[Javascript] getElementsBy__()함수

ID아이디는 유일한 하나의 값만 가지므로 Element로 단수형을 사용함document.getElementById('아이디값'); 클래스와 태그는 여러 값을 가질 수 있으므로 Elements로 복수형을 사용함document.getElementByClassName('클래스명')document.getElementByTagName('태그명') *그냥 갑자기 생각난 거 위로 가는 키보드 버튼 누르면 방금 작성했던 코드가 다시 나오니까 오탈자로 코드가 실행 안 됐을 때 코드 처음부터 다시 칠 필요 없이 pg up 버튼 눌러주면 됨.

• format_list_bulleted 프론트엔드/자바스크립트
• · 2025. 4. 2.

[Javascript] DOM과 BOM

DOM(돔) : document object model (문서 객체 모델)+BOM(봄) : browser object model (브라우저 객체 모델)=웹 브라우저 창 *DOM 트리구조[document]--- --, *BOM(봄)은 DOM(돔)을 제외한 모든 것을 의미하며 웹브라우저의 기본 요소라고 할 수 있다.예) 알림 창, 확인창, 주소창 등등 -알림 창alert() 함수를 이용 -확인창confirm() 함수 이용확인을 누르면 True 출력, 취소를 누르면 False 출력 -입력창prompt() 함수 입력 location 객체에 담긴 정보를 추출하여 사용자가 URL을 이용할 수 있게 된다. location.href = "URL"를 입력하면 해당 ..

• format_list_bulleted 프론트엔드/자바스크립트
• · 2025. 4. 2.

[Javascript] 반복문

자바스크립트 반복문 for(초기식, 조건식, 증감식) {    실행문;} for (let i=10; i     console.log("10초 카운트 다운" +i);} *i++ 는 i=i+1와 동일문  *공통 문자열을 제외하고 값에 따라 출력이 달라지는 부분은 ${i}로 작성하면 됨.ex) (i, '만큼 사랑해');('${i}만큼 사랑해'); 라고 생각하고 코드를 입력했는데.. 리터럴리 ${i}가 출력되고 난리길래 챗지피티선배님 붙잡고 물어보니까`백틱`으로 입력해야 한다고 하네요..지피티 선배님 아니었으면 영원히 몰랐을 듯^_^  결론)따옴표 (' 또는 ") 사용 → 변수 인식 ❌'${i} 명' → 출력 결과: ${i}명백틱 (`) 사용 → 변수 인식 ✅`${i}명` → 출력 결과: 1명, 2명 ...fo..

• format_list_bulleted 프론트엔드/자바스크립트
• · 2025. 4. 2.