FE

서론 파일 업로드 기능 구현을 위해 React(3000번 포트)에서 Spring(8080포트)으로 multipart/form-data 를 전송하는 테스트를 진행했을 때에는 CORS 문제가 발생하지 않았었다. 하지만 Axios를 사용하였더니 CORS 이슈가 발생하였다. 왜 그럴까? 기존 파일 업로드 테스트 기존에 파일 업로드를 테스트할 때는 form 태그로 localhost의 8080포트로 form-data를 전송하였다. Axios를 사용한 파일 전송 axios.post를 사용하여 formData를 전송한다. formData에는 사용자가 업로드한 이미지를 담고 있다. 하지만 파일을 전송해보면 CORS 에러가 발생한다. CORS(Cross-Origin Resource Sharing)? CORS에 대해서는 인..

DOM (Document Object Model) DOM은 객체 지향 모델로 구조화된 문서를 표현하는 형식이다. DOM은 문서의 구조화된 표현을 제공하여 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 해준다. 모든 HTML 요소는 HTML DOM을 통해 접근이 가능하다. Document Document 객체는 웹 페이지 자체를 의미한다. 웹 페이지에 존재하는 HTML 요소에 접근할 때는 반드시 Document 객체부터 시작해야 한다. Document 메서드 HTML 요소의 선택 HTML 요소의 생성 HTML 이벤트 핸들러 추가 HTML 객체의 선택 HTML 요소의 선택 HTML 요소의 생성 HTML 이벤트 핸들러 추가 DOM의 트리 구조 계층화되게 만들어 주는 것이 DOM이 하는 역..

미디어 쿼리 PC 뿐만 아니라 모바일과 태블릿에도 적용되는 웹 사이트를 만들기 위해 사용된다. 모바일에 대응되는 반응형(브라우저 폭을 줄이거나 늘릴 때 자연스럽게 resize 되는 것) 또는 적응형 웹 사이트를 만들 때 사용되는 css 구문이다. 최소, 최대 넓이처럼 범위를 설정해 놓는 것이 미디어 쿼리라고 생각하면 된다. 주의사항 meta 속성을 반드시 넣어줘야 한다. viewport는 기기(노트북, 태블릿 등)의 화면을 의미한다. 너비와 배율은 content 안에서 정하고 device-width는 말 그대로 디바이스의 너비를 의미하고 initial-scale은 꼭 1.0으로 해줘야 한다. 만약 미디어 쿼리 안에서 background-color를 지정해주지 않는다면 그대로 yellow로 나타난다. ->..

Transform rotate : 입력한 각도만큼 특정 오브젝트를 회전시킨다. 음수도 가능하다. scale : 오브젝트를 확대, 축소시킨다. High 버전에서도 사용할 수 있게 해 준다. Transition (특정 조건 하에 연속적으로 변함) property : 점점 변해가는 과정을 적용할 속성을 넣어주면 된다. duration : 변하는 시간을 설정한다. timing-function : 속도의 성격을 정한다. delay : 특정 조건일 때(ex 마우스를 올려놨을 때) 효과를 몇 초 뒤에 발동시킬 건지 정한다. 순서는 상관없지만 duration 다음에 delay가 나와야 한다! hover를 쓸 때 .transition:hover 이런 식으로 붙여 써야지 잘 동작한다! (.transition :hover)..

Display inline 요소도 block 요소처럼 바꿀 수 있다. Float 선택된 요소를 왼쪽 끝 혹은 오른쪽 끝에 정렬시킬 때 사용한다. 말 그대로 레이어를 띄운다는(float) 의미다.(화면 바깥?으로 띄운다고 생각하면 될 듯) Clear float를 제어할 때 사용한다. 보통 clear:both; 를 사용한다. 브라우저와 공간 사이의 공백 제거 html과 body 자체가 margin과 padding을 가지고 있기때문에 모두 초기화를 해야한다. 디자인 할 때 필수적으로 해줘야 되는 부분이다!

margin과 padding 위 사진처럼 border 바깥은 margin, border안쪽은 padding이라고 한다. 그리고 각 속성은 left, right, top, bottom으로 구성되어 있다. 열두 시 기준으로 시계방향 이라고 생각하면 된다. top, right, bottom, left 순서로 작성하면 된다 margin: 0 auto; 는 x축 기준으로 중앙 정렬을 해준다. margin 병합 현상 같은 부분에 margin이 적용되면 겹쳐진다(숫자가 큰 값이 적용된다). 자식에게 margin을 적용하면 부모에게까지 적용된다. 가장 많이 발생하는 경우라고 한다. position : absolute; 로 해결할 수 있다!

font-family font-family에 여러 값을 넣을 수 있는데 마지막은 sans-serif로 해주는 게 좋다. -> 모든 브라우저에서 지원하는 default 값이기 때문이다. background background-image는 공간을 이미지로 모두 채우려고 하는 속성이 있다. 한 축으로만 반복하고 싶다면 background-repeat: repeat-y; 혹은 repeat-x; 를 사용하면 된다. default는 background-repeat: repeat; 이다. 반복이 싫다면 background-repeat: no-repeat;로 설정하면 된다. background-position은 background의 위치를 지정해 준다. 오른쪽 위에 위치시키고 싶다면 right top 처럼 쓰면 된다...

Block 요소와 Inline 요소를 구분 짓는 세 가지 특징 줄 바꿈 현상이 있는가 가로, 세로 공간에 대한 크기를 만들 수 있는가 상, 하 배치가 가능한가 Block 요소 y축 정렬 형태로 출력된다(줄 바꿈 현상이 나타난다). 공간을 만들 수 있고 상, 하 배치 작업이 가능하다. Inline 요소 x축 정렬 형태로 출력된다(한 줄에 출력된다). 공간을 만들 수 없고 상, 하 배치 작업이 불가능하다.