전체 글

[React] 리액트 프로젝트 시작 세팅하기(CRA)

* 본 글은 스스로 공부하면서 정리한 내용입니다. 틀린 부분은 댓글로 남겨주시면 감사하겠습니다! * 리액트 프로젝트를 만들기 위한 준비물 Node.js vscode 리액트 프로젝트를 만드는 방법은 간단합니다. Node.js와 에디터만있으면 됩니다. Node.js는 LTS(Long Term Support) 버전으로 다운받아줍니다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 에디터는 가장 유명하고 사용하기 쉬운 vscode를 쓰겠습니다. 본인의 운영체제에 맞게 다운받아줍니다. https://code.visualstudio.com/ Visual St..

[React] React.js 리액트 특징! 간단하게 알아보자

* 본 글은 스스로 공부하면서 정리한 내용입니다. 틀린 부분은 댓글로 남겨주시면 감사하겠습니다! * 리액트 리액트는 2013년 facebook에서 발표한 UI를 만들기 위한 오픈소스 자바스크립트 라이브러리입니다. 오픈소스이기 때문에 facebook과 많은 개발자들에 의해 지속적으로 업데이트되고 있습니다. 따라서, 리액트는 풍부한 라이브러리를 보유하고있습니다. 그렇다면 기존 JavaScript와 비교해서 리액트로 개발하면 어떤 점이 좋을까요? JS는 기본적으로 DOM을 이용해서 요소를 참조하고(예를들어 document.querySelector) 값을 추출하기때문에 만약 해당 요소의 id값을 참조하고있었는데 id값이 변경된다면 사용하고있는 코드를 전부 고쳐야하기 때문에 유지보수가 어렵게됩니다. 하지만 리액트..

[CSS] Flexbox 톺아보기 (flex-grow,shrink,basis)

기존 float와 inline-block가 가지는 레이아웃 설정에서의 한계점을 보완하는 Flexbox에 대해 공부해 보았다. flex container에 적용하는 속성 flex container 의 자식요소인 flex item에 적용하는 속성 flexbox를 사용하려면 부모태그인 container를 설정하고 CSS로 flex를 설정한다. //html //css .container { display: flex; } flex 설정 후 width -> content의 크기만큼. height-> 부모 컨테이너의 높이만큼 늘어남. ▶container에 적용하는 속성 - flex-direction : row(default) / row-reverse / column / column-reverse reverse 속성은..

[CSS] 레이아웃을 깨뜨리는 마진병합 현상

- 2개의 박스가 있다. 첫 번째 박스는 margin이 위,아래로 20px 두 번째 박스는 margin이 위, 아래로 40px See the Pen Untitled by tangjinlog (@tangjinlog) on CodePen. 분명 첫 번째 박스와 두 번째 박스 사이에는 총 margin이 60px 존재하지만, 개발자 도구로 확인시 40px로 설정된다. 즉, 좀 더 큰쪽의 margin값으로 설정된다. 이와 같은 현상이 '마진 병합'현상이다. ▶ 마진 병합 현상이 발생하는 경우 1. 형제 요소끼리 - 블럭요소끼리 인접해 있을 때, margin-top, margin-bottom이 겹칠 경우 2. 부모 자식요소끼리 - 부모 태그안의 자식요소가 margin 설정시 부모도 함께 적용됨. -> 자식요소에 p..

[JS] FormData() 생성자에 데이터 추가하는 법

1. 사용 목적 FormData() 생성자 생성으로 form의 데이터들을 비동기처리를 위한 ajax에 넘겨주기 위함 // 생성 let formData = new FormData(form); //id가 form인 form태그 존재시 -> new FormData(document.querySelector('#form') 기존 HTML에서 form 태그가 존재한다면 위처럼 매개변수로 넣어준다. 2. 데이터 추가 기본적으로 입력한 데이터는 '문자열'로 추가됨. set() 과 append()를 사용해서 데이터를 추가한다. //데이터 추가 let formData = new FormData() formData.append('age', 18); // 같은 key값으로 데이터 추가 가능. formData.append('a..