본문 바로가기

전체 글

 (47)
[코딩애플] 리액트 기초 #1 일단 프로젝트를 만들기! 터미널 -> npx create-react-app [만들고자하는 프로젝트명] npm start로 실행 리액트 기초 - JSX 사용법 리액트의 메인은 src의 App.js App.js가 public의 index.html로 보내질 수 있도록 src의 index.js에서 작성됨. 1. 태그에 class를 주고 싶으면 JSX에서는 class가 아닌 className이라고 작성! class라는 예약어가 있기 때문. 2. 리액트가 날 것의 HTML보다 편한 이유 JSX를 이용하여 데이터 바인딩을 매우 쉽게 할 수 있다. 데이터 바인딩? let posts = '강남 고기 맛집'; 강남 고기 맛집이라는 데이터를 가져와서 posts라는 변수에 저장하고, { posts } 중괄호 안에 { 변수명 ..
[생활코딩] React #2 React #2 컴포넌트 제작 리액트가 없다면? npm run start를 했을 때 public 디렉토리를 찾음. 의미론적으로 정의할 때 사용. 시맨틱 태그는 아무런 기능이 없지만 제목 부분임을 의미 등... 시맨틱 태그마다 n만 줄의 코드가 있다면? -> 인지하기 어려움 태그를 감추고 이름만 심플하게 해도 웹페이지 내용은 그대로 해주는 것이 리액트 컴포넌트 만들기 class App extends Component { render() { return ( Hello, React! ) } } 컴포넌트를 만드는 코드. 객체 지향으로 이해하면! 리액트가 가지고있는 Component라는 클래스를 상속해서 새로운 클래스 App을 만든다. render()라는 메소드를 가지고 있다. class Subject exten..
[생활코딩] React #1 React #1 개발 환경 리액트의 컴포넌트 기능 1. 가독성 복잡한 코드를 가독성 있게 배치 2. 재사용성 태그를 붙여넣는 것만으로 재사용 3. 유지보수 업데이트가 실시간으로 한 번에 이루어짐 리액트 개발환경 1. 온라인 플레이그라운드 : 웹에서 바로 개발 가능 2. Add React to a Website : 웹에 리액트 추가 3. React 툴체인 : npm이라는 도구를 이용하여 컴퓨터에 Create React App 설치 * npm : node.js 계의 앱스토어, 플레이스토어와 같은 역할. * npx : 프로그램을 한 번만 일시적으로, 임시로 설치할 경우 (용량 낭비 최소화, 최신 버전 사용 가능) npm install -g create-react-app -g : global의 약자로, 컴퓨터 ..
[스파르타코딩클럽] 웹개발 종합반 3주차 로딩 후 바로 실행 $(document).ready(function () { listing(); }); function listing() { console.log('화면 로딩 후 잘 실행되었습니다'); } 로딩 후 listing()함수가 바로 실행됨. let star_image = '⭐'.repeat(star) .repeat(star)는 star만큼 반복하라는 의미의 내장함수. 스파르타피디아 API 복습 function listing() { $('#cards-box').empty() $.ajax({ type: "GET", url: "http://spartacodingclub.shop/web/api/movie", data: {}, success: function (response) { let rows = ..
[스파르타코딩클럽] 웹개발 종합반 2주차 JQuery : HTML의 요소들을 조작하는 편리한 Javascript를 미리 작성해둔 라이브러리 모든 jQuery를 외울 필요는 없고, 필요할 때에 필요한 기능을 구글링하면 된다. * 부트스트랩 : 미리 짜여진 CSS코드 어떤 값을 가져오기 위해 어떠한 대상을 지칭할 필요가 있음. ex) CSS는 class를 이용해 지칭했다. ex) jQuery에서는 id 값을 통해 특정 값을 가리킴. $('#url').val('입력을 하고 싶다') #url : url이라는 id에 jQuery를 적용. url 창에 '입력을 하고 싶다' 라는 문구 입력 $('#url').val() url의 value값을 가져옴. ex) 홍길동 박스를 감췄다가 보여주기! 1) 박스 id값으로 post-box 작성 2) $('#post-b..
[스파르타코딩클럽] 웹개발 종합반 1주차 HTML : 뼈대 HTML은 head와 body로 구성된다. body는 안에 들어가는 내용, head는 안에 들어가지 않는 내용 div 태그 : 는 division의 약자로, 구간을 나누는 것 p 태그 : 는 paragraph의 약자로, 문단 h1 : 제목. 제목을 써주어야 구글 검색 엔진이 제목만 긁어갈 수 있다. h2부터 h6 : 글씨가 작아짐 span 태그 : 특정 글자를 꾸민다. 특정 글자를 꾸민다. a 태그 : 하이퍼링크 img 태그 : 이미지 input 태그 : 입력 button 태그 : 버튼 textarea 태그 줄을 맞추고 싶을 때, 맞출 구간을 드래그하여 Ctrl + Alt + L 오른쪽 : Tab 왼쪽 : Shift + Tab CSS : 꾸미기 무언가를 가리킬 수 있어야 꾸미는 것. e..
[스파르타코딩클럽] 데이터분석 입문 1주차 공부시간이 높을 수록 성적이 높아질까? 분석해보자. 성적은 다른 요인들에 의해 결정되는 변수, 종속변수 공부시간은 종속변수인 성적이 결정되도록 영향을 주는 변수, 독립변수 공부시간 외에도 성적에 영향을 주는 요인은 많음. 공부시간 * a + b = 성적 엑셀로 상관관계를 분석할 수 있다. 상관관계 : 변수들이 서로 어느정도의 관계가 있는지의 정도 양의 상관관계 -> 공부시간이 높을 때 성적 높음 음의 상관관계 -> 공부시간이 낮을 때 성적 낮음 파이썬 기초 return 결과값을 재사용할 수 있고, 다른 변수에 저장가능함. 출력하라는 의미는 아니지만 코랩에서는 사용자 편의상 print를 쓰지 않아도 출력해줌. print 결과값 재사용 불가능 데이터가 일관되지 않은 경우 Try-except try : pri..

티스토리툴바