본문 바로가기

💻 Deep Wide Programming

(79)

자바스크립트의 클래스와 오브젝트의 차이점 알아보기(feat. 파이썬이랑 뭐가 다를까?) 📌 클래스와 오브젝트 붕어빵 틀(template) : 클래스 object: 팥을 넣으면 팥붕어빵, 크림 데이터를 넣으면 크림 붕어빵! ✅파이썬에서의 클래스와 객체 개념과 같다. 둘다 객체지향언어! 📌자바스트립트에서 클래스 사용하는법 파이썬과 다르게 자바스크립트에서는, 클래스를 선언하기 위해 'constructor'가 필요하다. 파이썬에서는 def 와 self를 사용했다면, 자바스크립트에서는 'constructor/method와 this'를 이용한다. 구조는 유사하다. 또한 오브젝트를 생성할 때도 차이가 있다. 파이썬에서는 별다른 별도 코드 없이 그냥 생성하면 되는데, 자바스크립트에서는 const와 new를 써준다. 📌 Getter & Setter incapsulation => private 만드는 것 클..

[파이썬] 파이썬 클래스 이해하기 📌점프 투 파이썬_ 클래스 스터디 목차 점프 투 파이썬 클래스 : 초보 개발자를 위한, 클래스의 개념 A-Z, 기초부터 차근차근! 클래스는 왜 필요한가? 클래스와 객체 사칙연산 클래스 만들기 클래스를 어떻게 만들지 먼저 구상하기 클래스 구조 만들기 객체에 숫자 지정할 수 있게 만들기 더하기 기능 만들기 곱하기, 빼기, 나누기 기능 만들기 생성자 (Constructor) 클래스의 상속 메서드 오버라이딩 클래스 변수 📌클래스와 객체 ✍️클래스와 객체의 개념: 과자 틀과 틀에 의해 만들어진 과자 ✍️클래스를 어떻게 만들기 먼저 구상하기 클래스는 무작정 만드는 것보다 클래스로 만든 객체를 중심으로 어떤 식으로 동작하게 할 것인지 미리 구상한 후에 생각한 것들을 하나씩 해결해가면서 완성해나가는 것이 좋다. 📌더 ..

[생활코딩 리액트] 이벤트 state 변경하기 (feat. bind 함수, setState함수) 📌이벤트 설치 (1); 테스트 (링크 클릭시, alert창 띄우기) 📌이벤트 설치 (2); 다음페이지로 이동 중지 📌"mode 설정 & render 부분"과 "이벤트를 설치한 부분"을 연결해주면 된다. ⇢🔗 연결시키는 방법 *이벤트 함수 안에서 'this'의 값은 아무것도 가리키지 않게 되기 때문에 오류가 뜬다.* ⇢ 이벤트 함수 바로 뒤에, '.bind(this)'를 추가하여 this의 값을 생성할 수 있다. ✚ 또 하나의 작업이 필요하다. 리액트의 언어 'setState({})'로 모드를 전환해주어야 작동하기 때문. this.state.mode = 'Greeting'; 으로는 작동하지 않는다. 리액트 언어로 모드 전환을 해주니, 비로소 위에서 세팅해준 greeting의 모드의 값들로 로드가 되었다. ..

[생활코딩 리액트] 14. 별도의 파일로 컴포넌트 정리, 15. state 1. props : 사용자가 컴포넌트를 사용할 때 중요한 것이고, 2. state는 그 props 값에 따라 내부에서 구현에 필요한 데이터들이다. : 좀더 다양한 일을 하는 컴포넌트를 만들기 위해 필요한 state의 개념! props를 더 잘 활용할 수 있게 될 것. 위의 코드 안에 컴포넌트 요소들 title, sub 값들을 저렇게 적어주는게 지저분해서 위로 썁 하고 따로 빼주려고 한다. 그때 필요한 것이 바로 하단의 constructor(props){ super(props); here it goes } 저기 안에 필요한 코드를 넣어주는 것이다. 요기 담긴 코드들이 가장 먼저 실행되게 된다. 하단의 코드와 같이 수정!

[생활코딩 리액트] 리액트를 도와주는 크롬 확장앱 리액트 디벨로퍼 툴을 깔고, 기존에 만들어놨던 웹의 inspect로 들어가니, 새로운 탭이 생성되었다. 이곳에서 원래는 파악할 수 없었던 리액트 코드를 발견가능해졌다. 대박!

[생활코딩 리액트] props를 사용한 리팩토링 📌Props 공식문서 참고! reactjs.org/docs/getting-started.html Getting Started – React A JavaScript library for building user interfaces reactjs.org 컴포넌트 만드는 법이다. class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } 하이라이트된 부분에 주목하자 📌적용해보기 📌나도 해보자

[생활코딩 리액트] 10-11강 컴포넌트 만들기 📌리액트 본격 사용연습 시작 리액트 없이 만든 html 환경을, 리액트의 컴포넌트를 활용해서 remade하도록 할 것이다. 이렇게 심플한 html 연습 파일을 하나 만들어준 뒤, 리액트의 src 디렉토리의 App.js를 열어준다. class App extends Component { render() { return ( Hello react!! ); } } 바로 이부분이 컴포넌트를 만드는 코드다. (말하자면 템플릿 같은 것으로 이해하자. 객체지향을 이해하면 좀 더 잘 이해할 수 있지만 여기서는 일단 패스) 📌를 Subject라는 컴포넌트로 만들기 📌이때, 주의사항! 1. 컴포넌트를 만들 때는 반드시, 하나의 최상위 태그만을 포함해야 한다. 2. 컴포넌트 이름은 대문자로 시작한다. 실제 App.js에는 태그..

[생활코딩 리액트] 1-7강 리액트 기본, 공부전략, 학습환경 설정 1. 리액트- 컴포넌트기능 1) 가독성을 높여줌 2) 재사용성을 높여줌 3) 유지보수가 훨씬 더 편리해짐 2. 리액트 공부 전략 📌공부 Tip 리액트 공식문서와 친해지기 * reactjs.org * 3. 리액트 학습환경 코드샌드박스를 이용해 간편한 리액트 학습환경을 사용할 수 있다. codesandbox.io/s/new React - CodeSandbox React example starter project codesandbox.io 4. Terminal을 통해 create-react-app install을 마친뒤, VS code의 터미널에서 다음의 코드를 입력한다. npm run start 라고 치고 엔터를 눌러 실행한다. (종료를 원할때는 command + c를 누른다.) 요런 화면들이 뜨게 된다. ..

이전 1 2 3 4 5 6 7 ··· 10 다음

728x90

티스토리툴바