FrontEnd

리액트를 기준으로 폴더, 컴포넌트등 여러 명명규칙을 잘 지켜야한다. react hooks 사용 시 소문자로 사용하시면 규칙 에러 표시된다고 한다. 폴더명 직접적으로 컴포넌트들이 들어있지 않은 디렉토리 폴더명의 첫시작은 소문자로 한다. (camelCase) 직접적으로 컴포넌트들이 들어있는 디렉토리 폴더명은 대문자로 시작하고 후속단어의 시작을 대문자로 한다. (PascalCase) 컴포넌트 명 (styled component 포함) PascalCase를 사용 컴포넌트 명과 파일명을 일치시킨다. 컴포넌트를 제외한 모든 태그들은 소문자로 한다. js 함수, 변수, hook camelCase를 사용 asset 파일 소문자 사용

프로젝트 생성 - 현재 디렉토리에 리액트 프로젝트 생성 npm init react-app . 개발 모드 실행 npm start 프로젝트 빌드하기 npm run build 빌드한 프로젝트 로컬에서 실행 npx serve build

React의 기초개념 5가지 Component React에서 UI를 구성하는 독립적인 단위이다. 컴포넌트는 재사용이 가능하며, 각각의 컴포넌트는 특정한 기능을 담담한다. 예를 들어 버튼, 입력 필드, 헤더, 페이지 등이 모두 컴포넌트가 될 수 있다. 예시. 정의 function Welcome(props) { return Hello, {props.name} } 랜더링 const element = ; ReactDOM.render( element, document.getElementById('root') ); Props Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는데 사용된다. Props는 읽기 전용이며, 자식 컴포넌트에서 변경할 수 없다. 컴포넌트의 속성을 설정하여 해당 컴포넌트에 데이터를..

내가 React를 선택한 이유, React의 장점 첫 프로젝트를 진행하다 보니 프론트에 대한 지식이 많이 부족한 것 같아서 프론트에 대해서 조금 공부를 해봐야겠다라고 생각하였다. 많은 프론트 기술들 중에서 고민을 하다가 React를 간단하게 배워볼까라고 생각하게 된 가장 큰 이유는 같이 프로젝트를 진행한 팀원들이 React를 이용한 것이 컸지만 React를 배우면서 사용자 정의 태그를 만들 수 있기 때문에 많은 사용자들이 있는 것을 알게 되었다. React는 자바스크립트를 기반으로 하고 class와 function 두 가지 문법이 있는데 function 문법을 주로 사용한다. 출처 https://www.youtube.com/watch?v=AoMv0SIjZL8

웹 프로젝트를 진행하면서 html에서 views.py로 데이터를 전송해줘야 할 필요가 있었는데 데이터를 딕셔너리 형태로 변환해 줘서 보내야 했다. 딕셔너리는 key값과 value값을 가지고 저장이 되어서 key값으로 접근하여 원하는 값을 빠르게 찾을수 있다는 장점이 있어다. 물론 파이썬에서는 딕셔너리를 완벽히 구현할 수 있으나 자바스크립트는 아직 부족한 부분이 많아 정리해 두려고한다 아래의 예제들만 알면 앞으로 딕셔너리 구현은 쉽게 할수 있을거 같다. 소스코드 // Dictionary 사용하는 방법 var dictObject = {} dictObject['apple'] = '사과'; dictObject['banana'] = '바나나'; dictObject['orange'] = '오렌지'; console...