비전공 프론트엔드 개발자

VSCODE Prettier 설치 방법 정리 1. vscode 확장? 프로그램을 먼저 설치를 확인한다. 2. 기본 포멧 에디터가 prettier 로 설정되어 있는지 확인한다. ( 추가로 해당 부분이 체크되어 있는 지도 확인해 봐야 한다. ) 3. 설정 검색 부분에 json 을 검색 후 setting.json 파일에 코드를 추가한다. 추가해야할 코드는 아래와 같다. { "editor.defaultFormatter": "esbenp.prettier-vscode", "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } } 이 부분을 굳이 복붙하지 않아도, prettier install 페이지에서도 확인할 수 있다. 코드까지 추가가 되었..

State 는 상태이다. 즉 변할 수 있는 값이다. 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값이다. state 와 props 의 다른점은 State 는 내부에서 변하는 값 Props 는 외부로 부터 전달 받은 값 Props 1. 컴포넌트의 속성(property)을 의미한다. -> 외부로 부터 전달 받은 값이다. 2. 부모 컴포넌트(상위) 에서 전달받은 값이다. -> React 컴포넌트는 JS의 함수나 클래스로, props를 함수의 전달인자처럼 받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. 그래서 컴포넌트가 최초로 랜더링 될 때 화면에 출력하고자 하는 내용을 초깃값으로 줄 수 있다. 3. 객체형태 이다. -> props로 어떤 타입의 값도 넣어 전달 할..

React 는 단방향 흐름이며, 하향식 이다. 하위 컴포넌트가 상위 컴포넌트에 데이터를 줄 수 없다? 그래서 하위 컴포넌트가 상태(state)가 변한다면 변한 데이터를 상위 컴포넌트에 전달을 할 수 없게 된다. 그래서 나온게 데이터 끌어올리기 === state 끌어올리기 이다. React 는 하향식 이다. 그래서 상태가 변하는 컴포넌트들이 있다면 공통 조상 컴포넌트에 상태를 전달해 줘야 한다. 즉, 상태관련 함수를 조상 컴포넌트에 작성을 하고, 함수 실행은 상태가 변할 컴포넌트에 실행을 하면 되는 것이다. Side Effect 는 함수 내부의 어떤 구현이 함수 외부에 영향을 미칠 경우를 말한다. ( fetch 를 사용해 API 정보를 가져오거나, 이벤트를 활용해 DOM을 직접 조작할 때도 side eff..

SPA = Single Page Application 전통적인 웹 방식은 전체 페이지를 리로드를 하게 된다. 이러한 방식은 매번 전체의 파일을 요청을 하게 되니, 서버의 과부하가 걸릴 수 있게 되며, 효율도 상당히 떨어지게 된다. 그래서 등장한게 SPA 방식이다. SPA 방식은 중복되는 부분은 새로 불러오지 않고, 필요한 부분만 업데이트가 되게 하는 방식이다. 필요한 부분만 업데이트가 되기 때문에 이전의 방식보다 과부하로 인한 문제를 줄일 수 있게 된다. 하지만 이런 SPA 방식에도 단점이 있으니, 첫번재째 단점은 바로 JavaScript 파일의 비중이 너무 높기 때문이다. 브라우저는 HTML 을 파싱하기 시작하는데, SPA방식은 HTML 코드는 대부분 비어있고, JavaScript 코드가 ( TMI :..

React 란? 프론트 엔드 개발을 위한 JavaScript 오픈소스 라이브러리 이다. 리엑트의 3가지 특징 1. 선언형 ( Declaration ) => 리엑트를 한 페이지에 보여주기 위해 HTML CSS JS 를 나눠서 작성하기 보다는, 하나의 파일로 작성 할 수 있게 JSX( HTML + JavaScript )를 활용한 선언형 프로그래밍을 지향한다. => 개발을 위한 개발이 아닌, 웹 어플리케이션이 잘 작동할 수 있게 하는 초석이 된다. 2. 컴포넌트 기반 ( Component - Based ) => 리엑트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트 기반으로 개발한다. ( 재사용성, 유지보수, 유닛 테스트가 편하다. ) => 컴포넌트를 분리하면 서로 독립적이고 재사용이 가능하다...

이전 글과 같은 내용이다. 연습할 겸, 이해할겸 한 번 더 적어본다. TOC 컴포넌트에 이벤트를 넣을 것이다. 똑같이 App 컴포넌트 안에 있는 TOC 컴포넌트에 onChangePage 라는 이벤트를 넣었다. setstate 는 클릭이벤트가 발생했을 때 mode 를 read 로 변경하기 위함이다. 이제 TOC 컴포넌트 내부로 가서 함수를 만들어본다. class TOC extends Component { render(){ var lists = []; var data = this.props.data var i = 0; while( i < data.length){ lists.push( {data[i].title} ) i = i + 1; } TOC 컴포넌트의 일부분이다. 태그에 이벤트를 줘야 하기 때문에 dat..

이전에 진행하던 실습을 이어서 하고 있지만 내용이 왔다갔다 할 예정이다. ( 이해하면 다시 정리하면서 글을 쓸 예정. ) 지금 공부하고 있는 내용은 컴포넌트에 이번트 함수를 만들고, App 컴포넌트에 이벤트 함수를 호출해 볼 것이다. App 컴포넌트 안에 있는 Subject 컴포넌트 이다. 여기에 onChagnPage 이벤트를 줄 것이다. onChangPage 이벤트는 컴포넌트 안에 링크를 클릭했을 때, 이벤트에 설치한 함수를 불러올 수 있게 도와준다. this.props.setState({mode:'read'}) => 현재 상태는 constructor 안 state 에 지정되어 있다. 컴포넌트 안에서 또 state 를 사용하게 되면 오류가 발생한다. state의 상태가 변경되기 때문에 setState를..

저번 글에서 welcome 이벤트를 위한 준비를 했다. 이제 WEB 이라는 링크를 통해 mode 가 welcome 에서 read 로 변경이 되게 해볼 것이다. WEB 이라는 태그를 사용하기 위해서는 Subject 컴포넌트를 수정해야 하는데, {/* */} 기존의 Subject 컴포넌트를 꺼내서 App 컴포넌트 안으로 옮길것이다. {this.state.subject.title} {this.state.subject.sub} 현재 실습은 여기까지 진행을 했다. 태그를 꺼내와서 onClick 이벤트를 함수로 실행하는데, 함수의 e 값은 기본적으로 들어가는 값으로, 해당페이지가 계속 새로고침 되는 것을 방지하고자 e.preventDefault() 를 줘서 새로고침을 못하게 강제로 만들었다. 그리고 a 태그의 th..