웹36 [React 개발 기록장][6번째 이야기] 이벤트 처리하기 1. 이벤트 처리하기 console.log("Clicked")}/> # 함수로 넘겨주기 # {} 사용하기 #DOM 요소에만 가능(컴포넌트 요소는 X) 2. 예시 2022. 7. 2. [React 개발 기록장][5번째 이야기] 속성값 type + default 정의하기 ▶각 속성값의 타입을 지정해주는 것이 생산성을 높여준다는 관점에서 각광 받음 (스크립트 언어는 원래 사용을 잘 X) prop-type 패키지 사용법 1. 설치 ☞ yarn add prop-types 2. 사용법 -- Button.js 라는 파일을 하나 만들고, -- theme, label 인자들을 받아서, defaultProps => default 값 propTypes => 속성값의 type/ (isRequired를 통해서 입력이 없을 때 에러 메시지) 2022. 7. 2. [React 개발 기록장][4번째 이야기] 속성값 1. 속성값 ● 속성값이란? 부모 컴포넌트에서 데이터/함수를 자식 컴포넌트로 넘겨준다 변경 X {} 로 다양한 타입의 값, 함수 지정 가능 2. 속성값으로부터 상탯값 정의하기 this.props or this.state 이후에 지정해둔 이름을 호출할 수 있다 -> this.state.postId this의 state에서 postId를 불러옴 3. 예시 ☞ componenetDidMount, Update 로 클래스 컴포넌트에 생명을 줄 수 있다(차후에 따로 다룰 예정) 2022. 6. 29. [React 개발 기록장][3번째 이야기] 상탯값(state) 1. 상탯값 ● 상탯값이란? - props 처럼 렌더링에 영향을 주는 데이터를 가지고 있는 객체 - UI(Element) 반영을 위해 유지해야할 데이터들의 묶음 - getter, setter 함수를 제공/ 상탯값 직접 변경 X 2. 상탯값 사용하기 ▶ Class형 Component this.state로 상탯값에 접근하고 this.setState로 상탯값을 변경 onClick 함수 내부에서 value라는 변수에 this.state로 값을 받아서 1을 더해주고, 이를 setState로 값을 변경해줌 {} 안에 넣어서 UI에 반영시켜줌 3.상탯값 저장 - 컴포넌트 내부 컴포넌트 객체 단위로 상탯값을 유지, 하위 컴포넌트로 전달 setter 함수로 상탯값 변경( this.setState/ useState 훅) .. 2022. 6. 29. [React 개발 기록장][2번째 이야기] 엘리먼트와 컴포넌트, antd 적용시키기 1. antd 적용시키기 ● antd란? 쉽게 react식 부트스트랩이라고 생각하자. admin과 같은 부수적인 관리 페이지에서 사용할 용도로 적용 ● antd 적용법 1. yarn add antd ▶ 꼭 package.json 이 있는 경로에서 추가해줘야함!!! 2. app.css 파일에 @import '~antd/dist/antd.css' 추가 or app.js 상단에 import'./antd/dist/antd.css' import하기 2. 엘리먼트/ 컴포넌트 ▶Component란? props(속성값), state(상탯값),element, logic 으로 이루어진 재사용이 가능한 독립된 모듈 -> 레고블록처럼 여러 컴포넌트들을 조합해서 하나의 오브젝트를 만들 수 있다 ▶Element 란? Compon.. 2022. 6. 29. [React 개발 기록장][1번째 이야기] 프로젝트 시작하기 1. nodeJs 설치 ▶node -v 로 설치되어있는지 확인 가능! 2. 패키지 관리자 ▶npm: Node Packaged Manager, 기본 패키지 관리자(python pip과 유사) ▶npx: 새로 추가된 도구(잘 안 쓰이는듯?) ▶yarn: 안정적인 지원이 있어서(facebook), 자주 사용한다고 함 => 프로젝트에서 yarn 사용 예정 3. yarn 설치하기 ▶ npm install --global yarn 설치 후 yarn --version 으로 확인가능 ▶ yarn.lock => yarn install 할때마다 생성되고, 모듈의 버전을 저장해서 같은 버전을 사용하게 해준다 4. yarn create-react-app 앱이름 프로젝트 start 하고 ▶yarn start 로 프로젝트 구동가.. 2022. 6. 29. [Migration admin.0001_initial is applied before its dependency accounts.0001_initial on database 'default'.][장고 오류해결] django.db.migrations.exceptions.InconsistentMigrationHistory: Migration admin.0001_initial is applied before its dependency accounts.0001_initial on database 'default'. dq.slite3, 앱 밑에 있는 migrations 파일 삭제후 python manage.py makemigrations 앱이름 python manage.py migrate 앱이름 해결완료 2022. 5. 4. [no such table: auth_user 오류 해결][장고] auth table의 부재 때문에 생긴 오류 python manage.py makemigrations python manage.py migrate 해주면 해결 가능 2022. 5. 4. [장고 기본 개념 총정리][django] 1. 간략한 구조 웹에서의 event (url 클릭, 데이터 수신 등) -> request형태로 서버에 들어옴 url despatcher가 url을 분석 -> view로 보냄 view -> 데이터를 어떻게 다룰건지, 어떤 데이터베이스로 접근할 것인지를 model에게 넘겨줌 model -> db와 함께 이를 처리 후 model로 다시 넘김-> 다시 view로 넘김 view -> template으로 이를 넘겨주고, html페이지를 통해서 시각화됨 2. Project/ App -project와 app project는 하나의 웹사이트라고 생각 각각의 project 안에 function 존재, 기능들을 하는 app들이 존재 django-admin startproject 프로젝트이름 python manage.py .. 2022. 4. 26. [TemplateDoesNotExists 에러][장고] TemplateDoesNotExists(템플릿파일이 존재하지 않습니다) 에러 발생 -> template에서의 html 파일을 수정했을 때, 파일 경로가 꼬여서 나는 오류 --> 서버 껐다가 다시 키면 해결 가능 2022. 4. 17. [ngrok fialed to complete tunnel connection][오류 해결] Failed to complete tunnel connection The connection to http://XXXXX.ngrok.io was successfully tunneled to your ngrok client, but the client failed to establish a connection to the local address localhost:(port). Make sure that a web service is running on localhost:(port) and that it is a valid address. The error encountered was: dial tcp: lookup localhost on #.#.#.#:##: no such host 1. 먼저 python.. 2022. 4. 14. 중간점검/ 계획 생활코딩으로 시작한 html,css 강의에서부터, css의 개념을 이해하기 위한 flex& grid 강좌를 들었다. 프론트엔드의 꽃인 javascript를 공부하여 개인 포트폴리오 웹사이트까지 만들게 되었다. 뭔가 부족한 느낌이 들었고, 보여지는 것 이외의 서비스를 만들어 보고 싶다는 생각에, back-end의 필요성을 느꼈다. frontend framework인 React도 도전해보고 싶은 마음에, django 베이스로 한 프로젝트를 react로 ui를 형성해 배포해 보고자 한다. 정확히 21일 안에 끝내보자. 3월 30일~ 4월 20일 까지 django + react로 포트폴리오를 만들 준비를 하고, 그 이후로 6월까지 헤비한 프로젝트를 진행해보자. 5월달에는 코테 비중을 더 높여서 코테 1: 프로젝.. 2022. 3. 30. 이전 1 2 3 다음
