초격차캠프_FE_공부기록

입력 양식을 만들어 주는 <form> 태그는 사용자가 입력한 데이터를 서버로 보내는 것을 목적으로 사용하는 태그<form>으로 입력 요소들을 감싸면, 서버에 입력 값을 전송할 수 있음입력값을 전송할 서버의 url클라이언트가 입력한 데이터를 어떤 식으로 전송할

시맨틱은 '의미론적인'이라는 의미로 태그명은 개발자와 브라우저에게 의미를 제공\-> 컨테이너 태그와 비슷하지만 시맨틱 태그는 태그의 이름이 요소의 역할을 강조하는 의미로 지어져 있음\-> 검색 엔진에게 좋은 단서가 됨meta 태그는 항상 head 태그 안에 들어가며,

CSS 기본 익히기 02. CSS 문서 사용하기 HTML에 CSS를 더하려면 HTML 문서에 CSS를 적용하는 방법 인라인 스타일: 태그에 직접 기술하기 스타일 태그: HTML 문서에 스타일시트를 위한 태그를 추가하여 기술하기 문서 간의 연결: 스타일시트 문서를 따로

CSS 요소 다루기 11. 요소의 유형 display는 요소의 인라인, 블록 속성을 바꿔줌 inline: 요소를 인라인 요소로 바꿈 block: 요소를 블록 요소로 바꿈 none: 요소가 코드에만 존재하고 실제로는 없는 것으로 처리, 화면에 나타나지 않음 inline-

CSS 더 화려하고 효율적으로 만들기 18.변형과 전환 transform css의 transform 속성을 통해 요소의 크기나 위치를 변형시킬 수 있다 | 함수 | 설명 | |:----------:|:----------:| | translate(x,y) | 지정한 값

02. 자바스크립트 소개 자바스크립트 란 자바스크립트는 프로그래밍적 로직을 더해서 동작을 구현할 수 있는 프로그래밍 언어 HTML이 웹 콘텐츠를 정의하고 CSS가 웹 콘텐츠를 스타일링해서 웹 페이지가 어떻게 생겼는지를 나타내면 거기에 JS를 추가하여 웹 사이트의 동작이

11. DOM 메소드 및 속성 | 메소드 이름 | 역할 | |:----------:|:----------:| | document.querySelector(x) | CSS 선택자 x를 기반으로 첫 번째 요소 선택 | | document.querySelectorAll(x)

18. 함수 정의하고 호출하기 함수 만드는 두 가지 방법 함수 선언식 -> 호이스팅 가능 함수 표현식 -> 호이스팅 불가능 > 호이스팅이란? 함수 호출을 함수 만드는 것보다 먼저 하는 것 20. 이벤트 핸들링 이벤트(event)란? 이벤트란 DOM에서 발생하는

30. 객체 리터럴 객체를 구성하는 속성의 이름과 실제 값을 한 쌍으로 묶어 표현하는 '객체 리터럴'을 이용하여 객체를 생성할 수 있음 이때 속성의 이름을 key, 속성의 실제 값을 value라고 함 예시) 생성자로 객체를 만들면 생성자 함수를 호출해야 객체가 만들

Git & GitHub 란? Git 이란 분산 버전관리 시스템 (Distributed VCS)의 대표적인 한 종류로 소스코드를 효율적으로 다룰 수 있게 만들어 주는 시스템이다 > VCS란? 파일 변화를 시간에 따라 기록했다가 나중에 특정 시점의 버전을 다시 불러올 수

Reset & Revert Reset 원하는 시점의 커밋으로 이동 이동한 커밋을 기준으로 이후의 모든 커밋 이력을 삭제 사용법 reset hard, soft reset --hard를 하면 이전 커밋으로 되돌린 후 이후 커밋 이력을 모두 삭제 reset --soft는

23. 객체를 만드는 생성자 자바스크립트 코드 내에서 객체란 명령을 내리고자 하는 대상이자 '값(속성) 또는 기능(메소드)을 가지고 있는 데이터'이다 자신이 원하는 값이나 기능으로 구성된 객체를 직접 만들 수 있음 생성자 생성자란 객체를 생성할 때 사용하는 함수, '

충돌(conflict) 해결하기

01. 리액트란 무엇인가요 React는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 리액트는 인터렉션이 많은 웹, 앱을 개발하기 위해 주로 사용됨 이와 같은 웹, 앱을 만드는 Vue나 Angular와 많이 비교하게 됨 React vs Vue vs A

04. Node.js 설치 Node.js란? 리액트 프로젝트를 만들기 위해서는 Node.js와 npm을 먼저 설치해야 함 Node.js를 설치하면 자동으로 npm도 같이 설치됨 Node.js란 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임으로서, 웹 브라

10. SPA (Single Page Application)란? 페이지가 꾸며지는 순서 public/index.html: HTML 템플릿 파일. div 앨리먼트의 id를 root로 해놓음 src/index.js: 자바스크립트 시작점. id가 root인 div 앨리먼트를

20. React State란? 리액트에서 데이터가 변할 때 화면을 다시 랜더링 해주기 위해서는 React State를 사용해야 한다 React State React State란 컴포넌트의 랜더링 결과물에 영향을 주는 데이터를 갖고 있는 객체 State가 변경되면 컴

23. React Hooks란 무엇인가? React Hooks React Hooks는 ReactConf 2018에서 발표된 class 없이 state를 사용할 수 있는 새로운 기능 React Hooks가 필요한 이유 주로 Class Component로 사용되어온 Re

28. 리액트 불변성 지키기 리액트에서 불변성이란? 불변성이란 값이나 상태를 변경할 수 없는 것을 의미 자바스크립트 타입을 통한 불변성 의미 원시 타입은 불변성(immutable)을 가지고 있고 참조 타입은 변할 수 있음 (mutable) 원시 타입: Boolean

39. React.memo를 이용한 성능 최적화 React.memo를 이용해 B 컴포넌트의 성능 최적화하기 현재 B 컴포넌트의 문제점 B 컴포넌트는 B, List, ListItem, message 컴포넌트로 나눠져 있음 input에 글을 타이핑 할 때 원래는 mess

46. Vite란? Vite를 사용하는 이유 vite의 가장 큰 장점은 빌드 속도나 새로운 코드를 적용했을 때의 반영 속도 같은 Feedback 속도의 엄청난 개선 브라우저에서 ES 모듈을 사용할 수 있기 전에는 개발자에게 모듈화된 방식으로 JavaScript를 작성

65. React Router Dom React Router Dom이란? React Router Dom을 사용하면 웹 앱에서 동적 라우팅을 구현할 수 있음 라우팅이 실행 중인 웹 외부의 구성에서 처리되는 기존 라우팅 아키텍처와 달리 React Router Dom은 앱

88. 리액트 Context란? 리액트에서 한 컴포넌트 안에서 데이터를 생성하고 업데이트하거나 다른 컴포넌트와 데이터를 공유해서 사용하는 방법은 여러가지가 있음 리액트에서 데이터 흐름을 컨트롤하는 방법 (state 관리하는 방법) state와 props를 사용해서 컴

106. 리덕스란? Redux 리덕스는 자바스크립트 애플리케이션을 위한 상태 관리 라이브러리 Redux 데이터 Flow redux의 데이터 흐름은 strict unidirectional data flow 으로 한 방향으로 흘러감 Action -> Reducer ->

116. 테스트 주도 개발 (TDD) 테스트 주도 개발 (Test Driven Development) 실제 코드를 작성하기 전에 테스트 코드를 먼저 작성함 테스트 코드를 작성한 후 그 테스트 코드를 Pass 할 수 있는 실제 코드를 작성 TDD를 하면 좋은 점 TDD

135. NextJS 란? React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있도록 도와주는 간단한 프레임워크 리액트로 개발할 때 SPA와 CSR(Client Side Rendering)을 하기 때문에 좋은 점도 있지만 단점도 있음. 그것이

01. React Native란? React Native는 React와 앱 플랫폼의 기본 기능을 사용하여 Android 및 iOS 애플리케이션을 빌드하기 위한 오픈소스 프레임워크 사용자 인터페이스(UI)를 구축하기 위한 React를 기반으로 하지만 React는 브라우저

28. React Navigation 리액트 네이티브에서 sreen간의 이동을 구현하기 위해서 React Navigation이라는 모듈 사용 필요한 모듈 설치 44. TailWindCSS TailWindCSS 란? HTML안에서 CSS 스타일을 만들 수 있게 해주는

01. 자바스크립트 엔진 자바스크립트를 실행하려면 자바스크립트 엔진이 필요! 브라우저에는 이미 자바스크립트 엔진이 있기 때문에 자바스크립트를 실행할 수 있음 JavaScript 엔진은 자바스크립트 코드를 실행하는 소프트웨어 구성 요소. 최초의 JavaScript 엔진

33. Express란? Express는 웹 및 모바일 애플리케이션 구축을 위한 광범위한 기능을 제공하는 노드 JS 웹 애플리케이션 프레임워크. 단일 페이지, 다중 페이지 및 하이브리드 웹 애플리케이션을 빌드하는데 사용됨 -> Node.js의 API를 단순화하고 유용한