개발/프론트엔드 개념(7)
-
[JS] HTTP 메소드 (GET, POST, PUT, DELETE, PATCH)
HTTP 메소드란 클라이언트가 웹 서버에게 사용자 리퀘스트의 목적이나 종류를 알리는 수단이다. Request의 종류 데이터 조회 GET 데이터 추가 POST 데이터 수정 PUT 데이터 삭제 DELETE 모든 Request는 Head와 Body로 나뉜다. Head : Reqest에 대한 부가 정보 (메서드) Body : 실제 데이터를 담는 부분 (data) 데이터를 추가하는 POST, 수정하는 PUT은 Body 부분의 데이터가 필요하지만 단순히 조회하는 GET과 DELETE는 Body 부분이 필요로 하지 않다. GET method 데이터를 읽거나 검색할 때 사용 서버에 전달하고 싶은 데이터는 query(쿼리 파라미터, 쿼리 스트링)를 통해서 전달 데이터 전달 가능하지만 권장하지 않음 불필요한 리퀘스트를 제..
2024.01.28 -
[JS] 이벤트 버블링, 캡쳐링, 위임
이벤트 전파는 다음과 같이 3단계로 구분된다. 1. 캡처링 단계: 이벤트가 상위 요소에서 하위 요소 방향으로 전파 (부모 요소에서 자식 요소로 전파) 캡쳐링 단계에서 이벤트 핸들러를 동작시키려면, addEventListener 에 세번째 프로퍼티에 true 또는 { capture: true }를 전달하면 된다. 2. 타깃 단계: 이벤트각 이벤트 타깃에 도달 3. 버블링 단계: 이벤트가 하위 요소에서 상위 요소 방향으로 전파 (자식 요소에서 부모 요소로 전파) 기본적으로 이벤트 버빌링이 일어나고, 이를 막으려면 이벤트 객체에서 stopPropagation 메소드로 전파를 막을 수 있음 이벤트 위임 자식 요소 각각에 이벤트 핸들러를 하나씩 등록할 필요 없이 부모 요소에서 한 번에 자식 요소들에 발생한 이벤트..
2024.01.28 -
[Git] Git Flow 브랜치 전략
Git Flow란? main 또는 master 브랜치와 development 브랜치를 유지하면서, 용도에 따라 임시적으로 feature, release, hotfix 브랜치를 생성해서 사용하는 방식의 전략이다. 브랜치 별로 약속된 역할에 맞게 생성해서 사용하는데 각 브랜치를 통해 규칙에 맞는 흐름 flow 대로 작업이 이루어지는 것을 지향한다. 기준이 되는 master, develop 브랜치를 먼저 설명하겠다. master: 정식 배포의 기준이 되는 브랜치로, 항상 안정적인 제품이 서비스 될 수 있는 소스코드로 언제나 배포 가능한 상태로 유지되어야 하는 브랜치이다. develop: 개발 중인 코드를 관리하는 브랜치이다. 새로운 기능 개발과 개발된 변화를 담은 버전 배포작업이 시작될 수 있는 브랜치이다. ..
2024.01.15 -
[Git] branch merge 하는 방법
branch merge란? merge란 현재 위치한 branch에서 다른 branch를 병합할 때 사용한다. 특정 branch로 합치는 요청을 보내는 Pull Request(pr)을 보낼 때 Create a merge commit, Squash and merge, Rebase and merge 이 3가지 merge 방법이 존재한다. 이 방법들을 설명하기 위해서는 commit(커밋) 메세지와 commit 그래프를 어떻게 유지해야 할지 와 연관 있기 때문에 merge 방법의 특징을 설명하겠다. Merge 일반적으로 많이 사용하는 merge 방법으로 커밋 이력을 모두 남길 때 사용한다. 모든 커밋과 분기했던 branch의 이력이 남는 것이 장점이자 단점이다. Fast-forward 설정이란? git merge..
2024.01.14 -
[CSS] position의 속성과 특징(static, relative, absolute, fixed, sticky)
position 속성이란? HTML에서 작성한 요소에 대해서 문서 내에서 배치되는 방식을 결정하는 것이 CSS의 position 속성의 역할이다. top, right, bottom, left 속성과 함께 사용하여 요소의 정확한 위치를 지정한다. 이때 top, right, bottom, left 속성의 값이 모두 똑같을 경우 inset 속성을 사용한다. position: static position 속성의 기본값으로 HTML에서 요소가 문서의 원래 있어야 할 위치에 배치되도록 해준다. 따라서 top, right, bottom, left 속성값은 무시된다. position: relative 요소의 원래 위치를 기준으로 배치한다. top, right, bottom, left 속성을 통해 요소의 원래 위치에 있..
2024.01.07 -
[HTML] 시맨틱 태그를 사용하면 좋은 점
시맨틱 태그란? 태그와 기능은 똑같지만, 의미가 담겨있는 태그들을 '시맨틱 태그'라고 한다. 이를 통해 사이트의 구조(레이아웃)를 설계하기 위해 존재하며 각 부분의 역할과 기능을 전달하는 데 도움을 주는 역할을 한다. 즉, 태그에 의미를 부여함으로써 웹사이트 구조를 파악하기 쉽도록 도와주기 위해 만들어졌다. 엄격한 사용법이 있는 건 아니지만, 작성하는 사람의 의도가 중요하다. 태그 이름 용도 영역 위쪽에서 로고나 제목, 메뉴 같은 걸 담고 있는 도입부 사이트의 본격적인 내용으로 페이지에서 딱 한 번만 사용 가능 영역 아래쪽에서 여러 가지 연락처나 관련 정보를 담고 있음 하나의 완성된, 독립적인 내용을 나타내는 영역 (블로그 게시물, 뉴스 기사, 제품 리뷰 등) 어떤 것의 일부분을 나타내는 영역 이미지와 ..
2024.01.07