Category: Front-end

2019
0
Front-endJavaScript

JavaScript에서 return과 break의 차이

JavaScript에서 return과 break의 차이 JavaScript로 코드를 짜면서 for문과 switch문을 작성할 일이 있었다.return과 break가 비슷한 역할을 하면서도 미묘한 차이가 있다는 사실은 알지만,명확하게 무엇이 다른 지는 생각나지 않았다. 따라서, 간략하게 정리하고자 한다. 1. return return은 함수 실행을 종료하고

0
Front-endJavaScript

원본 배열에 아무런 영향을 미치지 않는 메소드

배열로부터 새로운 값 생성원본 배열에 아무런 영향을 미치지 않는 메소드 JavaScript에서 원본 배열을 변경하는 것이 아닌,배열로부터 새로운 값을 생성하여 원본 배열에 아무런 영향을 미치지 않는 메소드를 알아보자. slice map concat reduce filter join 요소찾기 indexOf lastIndexOf 배열이 특정 조건을 만족

0
Front-endReact

React 12일차

BEM(Block, Element, Module)클래스 이름에 _나 -로 계층 구조를 나눈다.영역이름__ element이름 ModifiersModifier은 block 또는 element의 상태이다 어디에 밑줄, 오디에 하이픈 써야 하는지 알면 됨 React에서 BEM을 사용할 때는 컴포넌트가 블록이기 때문에 ex) PostListtitle, Post

0
Front-endReact

React 11일차

고차 컴포넌트 (Higher-Order Components) 컴포넌트를 받아서 컴포넌트를 반환하는 그저 함수일 뿐이다 컴포넌트x. 함수가 컴포넌트가 되려면, 컴포넌트가 아니라 엘리먼트를 반환해야 한다. 횡단 관심사(Cross-Cutting Concerns)를 위해 HOC 사용하기코드는 자세히 읽지 x 12345678const CommentListWithS

0
Front-endReact

React 10일차

합성 (composition) vs 상속 (inheritance)다른 컴포넌트를 담기게시판에 적용 헤더의 메뉴바에 하이라이트를 주는 등 페이지별로 달라야하는 부분이 있기 때문에App.js에 레이아웃을 두지 x -> Layout.js를 따로 만들면 확장성이 좋음 헤더, 푸터 뭔가를 감싸는 컴포넌트 만들고 싶을 때 레이아웃 뿐만이 아니라 뭔가 빈칸이

0
Front-endReact

React 9일차

제어되지 않는 컴포넌트제어되지 않는 컴포넌트는 진리의 원천(유일한 진리의 원천x)을 DOM에 두기 때문에,React를 사용한 코드와 사용하지 않은 코드를 통합하는 작업을 좀 더 쉽게 만들어줄 수 있습니다. 기본값 지정하기 value 속성을 이용하면, 제어되는 컴포넌트가 됨 defaultValue를 이용하면, 기본값을 주면서도 사용자가 편집 가능 (기본값도

0
Front-endReact

React 8일차

JSX 더 알아보기 문법 설탕(syntatic sugar): 무언가를 문법적으로 쉽게 만든 것 .createElement()의 반환값은 객체다.가 중요 React 엘리먼트의 타입 지정하기<div/><Div/>는 리액트에서 다르게 동작대문자로 시작하는 타입은 해당 JSX 태그가 React 컴포넌트임을 가리킨다. 그러니까, <

0
Front-endReact

React 7일차

리스트와 키 React element가 들어있지 않은 배열로부터 React element가 들어있는 배열을 만들 수 있다.-> 화면에 바로 그릴 수 있다. 기본적인 목록 컴포넌트 Warning: 에러는 아니지만, 코드에 문제가 있으니 확인해야 한다. map 메소드를 사용할 때는 key를 써줘야 한다. 키 키를 지정해주면 어떤 아이템이 바뀌었는지

0
Front-endReact

React 6일차

조건부 렌더링&& 논리 연산자를 사용해 if를 인라인으로 넣기 React는 문자열, 숫자는 잘 그려주는데, true, false, null 등은 화면에 안 그려준다. &&는 앞의 코드가 falsy이면 앞의 걸 반환하고, 앞의 코드가 true이면 뒤의 걸 반환한다. 12345678910111213141516171819202122

0
Front-endReact

React 5일차

이벤트 제어하기 함수 안에서 함수를 정의할 수 있다. onClick={handleClick}의 {}안에 함수를 정의해도 되고, 밖에서 정의하고 안에 함수 이름을 써줘도 됨 123456789101112function ActionLink() { function handleClick(e) { e.preventDefault(); c