개발감성

지금까지 dotnet환경에서 리액트를 사용하며 사용법을 알아봤다. [React] 컬렉션 형태의 데이터 출력 컴포넌트에 상태값을 주고 변경하는 것에 이어 다수의 데이터에 접근하는 것을 알아본다. [React] 컴포넌트에 상태값 주고 변경하기 컴포넌트의 조건문에 따라 내용을 다르게 표현하는 것에 대해 developefeel.tistory.com 여기선 CRA를 통해 프로젝트를 생성하고 react환경에서 진행한다. [React] 리액트 시작하기 Node.js 설치 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 위 사이트에서 LTS를 클릭해 다운받아준다. 다운이 끝나면 cmd창에서 버전확인을 해..

컴포넌트에 상태값을 주고 변경하는 것에 이어 다수의 데이터에 접근하는 것을 알아본다. [React] 컴포넌트에 상태값 주고 변경하기 컴포넌트의 조건문에 따라 내용을 다르게 표현하는 것에 대해 알아봤었다, [React] 컴포넌트에 조건문 주기, if, 3항 연산 컴포넌트에 분해할당으로 속성을 전달하는 것을 알아보았다. [React] 분해 developefeel.tistory.com Booklist컴포넌트에는 두 개의 데이터를 불러오기 위해 BookCard컴포넌트가 두번 호출되었다. 실제로는 JSON형태의 수 많은 데이터를 다뤄야 하기 떄문에 일일히 컴포넌트와 속성을 적어주기는 힘들다. 컬렉션 데이터 네 개의 속성이 포함된 각 데이터를 세개를 나열하고 books에 저장한다. 다음으로 Booklist컴포넌트에..

컴포넌트의 조건문에 따라 내용을 다르게 표현하는 것에 대해 알아봤었다, [React] 컴포넌트에 조건문 주기, if, 3항 연산 컴포넌트에 분해할당으로 속성을 전달하는 것을 알아보았다. [React] 분해할당, Destructuring Assignment 태그를 컴포넌트화 해서 분리하고 props를 통해 속성을 전달받는 것을 알아봤었다. [React] 컴포넌 developefeel.tistory.com 이번엔 컴포넌트에 상태를 주고 버튼을 클릭해 상태를 변경해본다. 상태값 주기 클래스형 컴포넌트 Booklist에 state를 통해 테마를 white로 줬다. 2개 이상의 상태를 줄 수도 있다. 클래스형은 render함수를 통해 반환을 해야한다. 현재 컴포넌트(this)의 state의 theme값이 whit..

컴포넌트에 분해할당으로 속성을 전달하는 것을 알아보았다. [React] 분해할당, Destructuring Assignment 태그를 컴포넌트화 해서 분리하고 props를 통해 속성을 전달받는 것을 알아봤었다. [React] 컴포넌트 화, props를 이용해 컴포넌트에서 속성 전달 JSX표현식과 함수형 컴포넌트를 제작하여 표현하는 developefeel.tistory.com 이번엔 조건문을 통해 컴포넌트의 출력을 다르게 해보도록 한다. if AppOther컴포넌트 내의 Booklist컴포넌트에 속성값으로 ASC를 주었다. Booklist의 sortOrder속성이 ASC일 경우엔 위의 경우로 ASC값이 아닐 경우에는 아래의 경우로 출력되도록 해봤다. sortOrder값에 따라 BookCard의 위치가 다르..

태그를 컴포넌트화 해서 분리하고 props를 통해 속성을 전달받는 것을 알아봤었다. [React] 컴포넌트 화, props를 이용해 컴포넌트에서 속성 전달 JSX표현식과 함수형 컴포넌트를 제작하여 표현하는 것을 알아봤다. [React] JSX 표현식, 함수형 컴포넌트 react에서 element를 쉽게 만들기 위해 JSX를 사용하고 Bootstrap을 이용해 스타일을 주는 것까지 developefeel.tistory.com 이번엔 전달받은 속성들을 다른 방식으로 전달하는 것을 알아본다. 분해 할당 props를 넘기는데 사용했던 컴포넌트에선 속성에 접근할 때 props.속성 식으로 전달했다. 분해 할당이란 props대신 어떤 속성을 받을지 명시해두고 좀 더 간단하게 전달받는 것이다. BookCard 컴포넌..

div태그를 세 개 중첩했다. 구조상으로는 parent1 > parent2 > child 이다. 부모 좌표 노드 - offsetParent( ) child 노드에 offsetParent를 적용하여 $parent변수에 저장하고 반환되는 노드의 id 속성을 콘솔창에 찍어봤다. child노드의 바로 상위는 parent2일텐데 콘솔에는 parent1으로 찍혔다. 이유는 css의 position때문이다. 따로 position을 정해주지 않아서 parent2노드는 위치계층도에서 제외된다. 노드의 지역 위치 구하기 - position( ) 5개의 물고기 이미지를 두고 해당 사진을 클릭하면 위치를 위에 표시해본다. fish클래스의 노드를 클릭했을 때 pos변수에 클릭된 노드의 position을 저장하고 str문자열을 ..

리액트에서 중첩노드를 만들고 간단한 스타일을 줘봤다. [React] 리액트에서 html태그에 스타일 입히고 중첩 태그 만들기 html문서를 react에서 열고 태그 요소를 하나 만들어서 확인해봤다. [React] 순수 html파일에서 react 사용하기 dotnet을 통해 react프로젝트를 열어봤다면 이번엔 react에서 html문서를 어떻게 여는지 알아 developefeel.tistory.com 보다시피 div 태그안에 태그를 중첩해 세개를 생성했는데, 태그 하나를 생성할 때마다 메소드를 호출하는 것은 번거로운 일이다. JSX - html을 JS로 변환 Babel · The compiler for next generation JavaScript The compiler for next generati..

html문서를 react에서 열고 태그 요소를 하나 만들어서 확인해봤다. [React] 순수 html파일에서 react 사용하기 dotnet을 통해 react프로젝트를 열어봤다면 이번엔 react에서 html문서를 어떻게 여는지 알아본다. [React] 리액트 닷넷으로 시작하기 .NET 설치 Download .NET (Linux, macOS, and Windows) Free downloads for b.. developefeel.tistory.com 태그에 스타일 주기 createElement의 null로 남아있는 두 번째 인자가 스타일이 들어가는 자리다. 스타일 값을 저장해 두 번째 인자에 넣어줬다. 글자색이 파란색으로 바뀌는 것을 확인할 수 있다. 스타일을 두번째 자리에 직접 넣어 줄 수도 있다. 갈..

dotnet을 통해 react프로젝트를 열어봤다면 이번엔 react에서 html문서를 어떻게 여는지 알아본다. [React] 리액트 닷넷으로 시작하기 .NET 설치 Download .NET (Linux, macOS, and Windows) Free downloads for building and running .NET apps on Linux, macOS, and Windows. Runtimes, SDKs, and developer packs for .NET Framework, .NET, and.. developefeel.tistory.com dotnet프로젝트에서 html문서 열기 dotnet run을 통해 react프로젝트를 실행해주니 7204포트를 타고 44416포트에서 react앱이 열리는 것을 ..

URL로 파라미터를 넘기는 방식에 대해 선행이 필요하다면 아래로 [Back-end] get방식으로 파라미터 값 넘기기 선행으로 REST방식으로 데이터 전송하는 방법에 대해 [Back-end] flask로 Rest API 구현 REST (REpresentational State Transfer) Rest API는 REST기반 서비스 API 이다. HTTP는 서버/클라이언트 모델로써 서버와.. developefeel.tistory.com HTML에서 form으로 파라미터 값 받기 앞서 글에서 get방식을 통해 파라미터값을 넘기는 방식을 알았다. 하지만 사람들이 사이트에 접속할 때 주소창에 파라미터를 직접 입력해서 이동하진 않는단 것도 알것이다. 실제 웹페이지에서 get방식으로 파라미터 값을 어떻게 받고 전달..