본문 바로가기

개발 공부

(32)
React Component React Component에는 다양한 컴포넌트 패턴과 기술이 사용된다. 1. 부모- 자식 컴포넌트 2. HOCs(Higher-Order Components 3. Render props 4. Context API 5. Hooks 오늘은 위와 같은 대표적인 것들 중에서 부모-자식 컴포넌트에 대해서 공부해보았다. 부모 - 자식 컴포넌트 컴포넌트 내에 다른 컴포넌트를 품을 수 있는 것. 계층적 구조 : 부모 컴포넌트는 하나 이상의 자식 컴포넌트를 포함할 수 있음. 이때 자식 컴포넌트는 다른 컴포넌트의 부모가 될 수 있음. 단방향 데이터 흐름 : 일반적으로 단방향 부모 → 자식 컴포넌트에게 데이터 전달 가능 이를 "props"라고 함. 자식 컴포넌트는 이를 읽기 전용으로 사용할 수 있다. 단, 자식 컴포넌트가 ..
Virtual DOM, props, state Virtual DOM (가상 돔): Virtual DOM은 실제 DOM(Document Object Model)의 가벼운 메모리 상의 표현입니다. DOM은 웹 페이지의 구조화된 표현으로, HTML, XML, SVG 문서의 객체 기반 표현입니다. Virtual DOM은 실제 DOM을 빠르게 조작하고, 렌더링 성능을 향상시키기 위한 목적으로 사용됩니다. React에서는 웹 페이지의 변경 사항을 가상 DOM에 먼저 적용한 후, 실제 DOM과 비교하여 변경된 부분만 업데이트합니다. 이 과정을 'Reconciliation'이라고 하며, 이를 통해 성능을 최적화하고 불필요한 업데이트를 줄입니다. Props (속성): Props는 React에서 사용되는 입력 매개 변수의 줄임말입니다. React 컴포넌트는 재사용 가..
주특기 주차 개인과제 Todo의 isDone 상태가 true이면, 상태 버튼의 라벨을 취소, isDone이 false 이면 라벨을 완료 로 조건부 렌더링 되는지가 어려웠다. 겨우겨우 구글링 해가면서 했다... 삭제 버튼은 토이프로젝트를 할 때 했던 기능을 구현했던 경험이 있어서 비교적 쉽게 할 수 있었다...
배열/객체 비구조화 객체의 비구조화(구조분해 할당) // person 객체 안에 있는 값들이 구조가 해제되어 각각 변수에 할당됩니다. const person = { name: '갑돌', age: '27' } const { name, age } = person; console.log(`${name}님, ${age}살이시네요!`); const person = { name: '갑돌', age: '27' } function hello({name, age}) { console.log(`${name}님, ${age}살이시네요!`); } hello(person); 배열의 비구조화(구조분해 할당) // 객체에서의 케이스와 마찬가지로 배열도 구조분해 할당이 이루어짐 const testArr = [1, 2, 3, 4, 5]; const [v..
HTML,CSS,JavaScript의 기본 개념과 특징은 무엇인가? HTML의 개념과 특징 개념 HyperText Markup Language의 약자로 웹 페이지의 구조를 정의하는 마크업 언어. 웹 페이지의 내용을 표현하는데 사용되며, 태그를 이용해 문서의 구조를 표현. 헤더, 텍스트, 이미지, 리스트, 링크 등을 표현할 수 있다. 특징 구조화된 문서 HTML은 웹 페이지의 구조를 구성하는 마크업 언어로, 여러 태그를 사용하여 문서의 구조를 표현한다. 각 태그는 서로 다른 의미와 기능을 가지고 있으며, 웹 페이지의 헤더, 본문, 링크, 이미지 등을 표현할 수 있다. 플랫폼 독립적 HTML은 여러 웹 브라우저와 운영체제에서 호환되는 플랫폼 독립적인 언어이다. 이는 웹 개발자가 다양한 환경에서 동일한 결과를 보장할 수 있게 해준다. 간결한 문법 HTML은 직관적이고 간결한 ..
ES- ES5와ES6의 문법 차이 ES란? ECMAScript"의 약자로, JavaScript의 표준화된 스크립트 언어를 의미한다. ECMAScript는 JavaScript를 포함한 여러 스크립트 언어의 기반으로, 이 표준에 따라 개발자들이 일관된 기능과 문법을 사용할 수 있다. ECMAScript는 주기적으로 업데이트되며, 각 버전에는 새로운 기능과 개선사항이 포함되어 있다. ES5와ES6의 문법 차이 변수 선언: ES5에서는 var 키워드를 사용하여 변수를 선언한다. ES6에서는 let과 const 키워드가 도입되어 블록 범위의 변수 선언이 가능해졌다. 화살표 함수: ES6에서는 화살표 함수(arrow function)가 도입되어 간결한 함수 표현이 가능해졌다. function 키워드를 사용하는 것보다 간편하며, this 바인딩이 자..
웹 퍼블리싱 3주차 ▶https://swiperjs.com/demos Swiper Demos Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 참고하기 유요한 스위퍼 데모스 참고할 만한 자료들과 코드들이 많다. 오늘은 어제에 비해 재밌는 내용이지 않았나 싶다. 개인적으로 로그인 창을 구현하는데 어려움이 있었는데 덕분에 기능 구형은 된 반면 css적인 요소가 문제였다. 이번 기회로 나름 괜찮게 벤치마킹 할 수 있을 듯 하다.
웹 퍼블리싱 2주차 ▶폼 태그 기본 개념 : 폼 태그는 사용자로부터 데이터를 입력할 수 있는 범위를 지정할때 사용되며 주로 내부 input 요소들이 배치되어 있습니다. 오늘은 웹 퍼블리싱 2주차 강의로 공부를 했다. 자바스크립트는 어느정도 익숙해졌다고 생각했지만 평소 css부분이 어렵다고 느껴졌는데, 음 역시나 어려웠다. 모르는 개념이 나올 때마다 구글링을 하며 하다보니 1시간 30여분 되는 강의가 밤 늦게까지 이어졌다. 무리하고 싶지는 않지만, 궁금한게 늘어가고 궁금증을 해결할 때의 쾌감을 놓지 못하겠다. 공부에 대해서는 어느정도 욕심을 부려도 되지 않을까? 언젠가, 페이지를 보고 어떤 식으로 구성을 하고 어떤 기능을 구현 할 수 있는지 알 수 있는 개발자가 되고 싶다.