분류 전체보기18 [엘리스 SW Engineer 트랙 7기] 웹 프로젝트 1주차 - 두 번째 학습 정리 - 진행된 사항 개발 전 이슈 작성 개발한 기능 저번 시간에 제작한 와이어 프레임을 토대로 기본적인 CSS와 HTML을 사용하여 메인 페이지를 만들었습니다. 먼저 메인 헤더와 카테고리 리스트를 구현하였고, 내부 요소들은 flex를 이용하여 배치 하였습니다. 그리고 바로 밑에 메인 배너로써 슬라이드 효과를 넣어주었어야 했지만, 구현이 쉽지가 않아 완성해놓지는 못했습니다. 베스트 상품 부분은 JavaSript를 사용하여 컴포넌트화 시켜 컨테이너 안에 innerHTML을 사용해 붙혀넣는 식으로 하였습니다. 이 부분은 gird 방식으로 배치하였습니다. 이벤트 보여주기 부분은 flex 방식으로 배치하였고, 마지막 리뷰 부분은 자동 슬라이드 효과를 주어 3초마다 효과가 나타나도록 설정하였습니다. 진행 중 겪었던 이슈 .. 2023. 11. 12. [엘리스 SW Engineer 트랙 7기] 웹 프로젝트 1주차 - 첫 번째 학습 정리 - 기획 기본적으로 웹 서비스 프로젝트라는 틀이 주어진 팀프로젝트이다. 팀원분들과 첫 스크럼을 통해 포지션, 프로젝트 테마, 팀 규칙 등을 정하였다. 포지션 : 인원은 총 6명으로 프론트 4명, 백엔드 2명으로 진행하였다. 팀 규칙 : 1. 소통은 일 얘기는 디스코드로! 2. 10시부터 22시까지는 연락 빨리 잘 되도록 노력하기!!! 3. 매일 아침 10시부터 15분~30분씩 짧게 스크럼 => 전 날까지 진행 상황, 진행하면서 어려웠던 점/ 막혔던 점, 오늘 진행할 예정, 요구 사항 등등... 4. 주석 자세히 쓰기, 브랜치명 규칙대로 진행하기 5. 커밋 자주 하기 ( 커밋컨벤션 : 깃이모지를 통해 커밋 규칙을 정하였다.) 6. 협업 도구로는 git lab을 사용하기 7. 이슈와 마일스톤 규칙 정하기 프로젝.. 2023. 11. 5. [HTML, JavaScript] 드래그 앤 드롭(Drag and Drop) 이벤트 알아보기 [JS 이벤트] 드래그 앤 드롭이란? draggable 가능한 요소를 마우스로 클릭하여 드래그하고 마우스 버튼을 떼면서 요소를 드롭하는 것을 드래그 앤 드롭 기능이라고 한다. 드래그 앤 드롭 속성 draggable Item1 먼저 HTML에서 요소가 드래그 이벤트를 받기 위해선 draggable 속성이 true 값을 가져야 한다. ※ 태그 중에 기본적으로 draggable이 true인 값은 대표적으로 태그가 있다. 반면에 태그는 드래그가 불가능 하다. 드래그 앤 드롭 이벤트 종류 dragstart const item = document.querySelector(".item"); item.addEventListener("dragstart", e => { console.log(e.target); // 드래그를 시작한 요소가.. 2023. 10. 12. [JavaScript] IndexedDB 사용법 알아보기 [JS기초 함수] - 띵코딩 on Code IndexedDB란? IndexedDB는 웹페이지에 내장된 데이터베이스로 서버가 아닌 클라이언트에 데이터를 저장하고 사용한다. 인덱스를 사용하기 때문에 탐색면에서 서버에 비하면 속도가 빠르고, 비용도 절감되며, 서버로부터 사용자의 정보를 노출시키지 않기 때문에 보안상에서도 보다 안전하다. 이 외에 Cookie, LocalStorage 내장 데이터베이스도 존재하지만 이 둘은 저장공간이 크지않고 동기식으로 작동되며 데이터타입이 문자열인 것만 저장되기 때문에 IndexedDB에 비하면 성능이 뛰어나지 않다. 확실히 다른것에 비해 성능이 뛰어나지만 IndexedDB는 비동기식이며, 사용 난이도가 어렵다는 단점이 있다. IndexedDB 구조 여러개의 객체들을 오브젝트 스토어에 넣고, 그 오브젝트 스토어들을 묶어.. 2023. 10. 3. [JavaScript] 이미지 파일 업로드 하기 [JS기초 함수] - 띵코딩 on Code FileReader 객체란? FileReader는 웹페이지 상에 파일을 업로드하여 파일의 내용을 보여주는데 도움을 주는 객체이다. 세부적으로는 웹 어플리케이션이 비동기적으로 데이터를 읽기 위하여 파일을 가리키는 File 혹은 Blob 객체를 이용해 파일의 내용을 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해준다. 여기서 File객체는 input 태그를 이용하여 유저가 선택한 파일들의 결과로 반환된 FileList 객체 정보를 제공한다. FileReader 생성자 구문 var reader = new FileReader(); // reader는 FileReader 속성, 이벤트, 메서드를 사용할 수 있다. FileReader 속성 FileReader.error 파일을 읽는 도중에 발생한 에러를 나타낸다... 2023. 9. 20. [CSS] box-sizing 사용법 알아보기 - 띵코딩 on Code box-sizing이란? box-sizing은 요소의 너비와 높이를 어떻게 계산할 것인지 지정하는 속성이다. 우리는 보통 요소의 크기를 정하고, 안쪽 여백이나 테두리를 넣게되면 크기 + (여백or테두리)만큼의 크기를 얻게된다. 하지만 부모 컨테이너 내에서 자식 컨테이너가 (여백or테두리)를 갖게되면 문제가 될 수 있다. 자식 컨테이너가 부모 컨테이너보다 크기가 커져 틀에 벗어나거나 겹치는 상황이 나올 수 있기 때문이다. box-sizing속성을 이용하면 이러한 여백or테두리의 크기를 고려하여 원하는 크기를 얻을 수 있다. box-sizing의 주요 속성 content-box box-sizing: content-box; content-box는 가장 기본이 되는 박스 크기 결정 방법이다. 위에 예시는 자식.. 2023. 9. 15. 이전 1 2 3 다음
