1. 시맨틱 태그를 사용하는 이유 - html 코드를 작성할 때 웹 브라우저가 HTML의 소스코드만 보고도 어느 부분이 제목이고 어느 부분이 메뉴이고 본문인지를 쉽게 알 수 있게 하도록 하는 지표. - 검색 엔진이 검색을 수행할 때에는 HTML 태그 내에 있는 태그를 분석하는데 태그들의 의미가 분명하다면 검색 엔진 입장에서 구분하기가 쉬워진다. - 코드 가독성 및 유지보수가 쉬워진다. 모든 태그가 로 되어있으면 어느 영역(헤더,바디,푸터 등)인지 알기 힘든데 시맨틱 태그를 이용하면 해당 영역에 접근하기 쉬워진다. >> 결국은 코드를 쉽고 편하게 읽기 위해서 시맨틱 태그를 사용한다고 하자. 2. 시맨틱 태그의 종류 ,:웹페이지 메뉴 만들때 사용, :메인 콘텐츠를 나타내는데 사용(nav,aside,secti..

1. 트랜잭션 DB의 상태를 변화시키기 위해서 수행하는 작업의 단위 DB의 상태를 변화시킨다는 의미는 SQL을 이용하여 DB에 접근한다는 의미이다. ex) SELECT, INSERT, DELETE, UPDATE 등 작업 단위는 많은 질의어 명령문들을 사람이 정하는 기준에 따라 정하는 것 즉 작업단위는 상대적이라는 의미이다. 게시판을 예로 들자면, 게시판 사용자 - 게시글 작성, 올리기 버튼 > 그 후에 다시 게시판에 돌아오면 게시판은 자신의 글이 포함된 업데이트된 게시판을 보게 된다. 이러한 상황을 DB 작업으로 옮기면 1) 사용자가 올리기 버튼을 눌렀을 시 = INSERT 2) 사용자가 입력한 게시글의 데이터를 옮긴다 3) 게시판을 구성할 데이터를 다시 SELECT 하여 최신 정보로 유지 이런 작업 단..

아직 React의 key-props 그리고 컴포넌트들이 헷갈린다. 이참에 이 둘의 개념들에 대해 한 번 정리해보자. Warning: Each child in an array or iterator should have a unique "key" prop ... 리액트를 개발하다 보면 자주 나오는 Error.. 이전 포스팅에서도 이 에러에 대해 다뤘다. 왜 React의 Element에 key prop이 필요하고, key prop을 사용하면서 주의해야 할 점? - 재조정 (Reconcilation) key prop을 이해하기에 앞서 React가 화면을 어떻게 업데이트 하는지 알 필요가 있다. React는 새로운 엘리먼트를 그리기 위해 비교 알고리즘 (Diffing Algorithm)을 이용해서 효율성을 최대화..

1. state 리마인드 다시 한번 주의하자 리액트는 state가 변경되면 render() 함수를 다시 실행하여 변경된 state를 화면에 출력한다. 그런데 state를 직접 변경하는 경우에는 render() 함수를 다시 실행하지 않는다. 즉 어떤 동작이 업데이트가 되면(+ 버튼을 누른다거나, - 버튼을 누른다거나.. 하면) render() 함수가 다시 실행되어 그 결과를 화면에 출력해주는 것이다. 2. 리액트 생명주기 큼직큼직한것만 보자면 constructor() 함수 실행 > render() 함수 실행 > componentDidMount() 함수 실행 1.Add또는 Minus 버튼을 누르면 setState() 함수가 실행되고 2. 버튼이 눌렸으므로 화면의 변화가 생긴다. render() 함수가 다시 ..

1. 함수형 컴포넌트 function App() { return ( 우리가 클래스형 컴포넌트를 사용하는 이유는 state 를 사용하기 위해서이다. state는 객체 형태의 데이터이고 state를 사용하려면 반드시 클래스형 컴포넌트 안에서 소문자를 이용하여 state라고 적으면 된다. 2. state의 쓰임 state는 동적 데이터를 저장할 수 있어야 한다. 동적이라는 것은 값을 바꿀 수 있다는 말인데, 즉 값을 바꿀 수 있도록 코드를 작성해야 한다. (예를 들면 사용자 동작에 따라 state의 count를 바꿀 수 있도록) react는 state를 직접 변경하지 못하게 한다. add = () => { // console.log('add'); this.state.count=1; }; minus = () =..

1. 리액트가 반환한 컴포넌트 renderFood()는 map() 함수가 반환한 리액트 컴포넌트를 출력하려고 사용해본 코드이다. function renderFood(dish){ return ; } // const renderFood = dish => ;도 같은 표현이다. function App() { console.log(foodILike.map(renderFood)); return( /*;*/ {/*{foodILike.map(dish=>())}*/} {/*위에서 food라는 컴포넌트를 만들고 여기서 사용*/} {foodILike.map(renderFood)} ); } 0번 인덱스에 대해서 구체적으로 보고 싶다면 다시 열어서 본다. 콘솔창을 보면 아래와 같은 에러가 발생하는데 key의 값이 실제로 없어서..