VSCODE 한 줄 주석 단축키 Ctrl + / 여러 줄 주석 단축키 Alt + Shift + a 블록지정한 후 alt + shift +/ 를 동시에 누르면 여러줄 주석이 적용된다 2022. 10. 27. JavaScript https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference JavaScript 참고서 - JavaScript | MDN 이 페이지는 JavaScript 언어에 대한 정보 보관소입니다. 이 참고서에 대해 더 읽어보세요. developer.mozilla.org 개발자 도구 단축키 : ctrl + shift + I alert() 명령을 활용하면 브라우저에 경고창을 띄울 수 있다 undefined는 실행된 명령인 console.log("출력 내용");의 결과값을 나타냅니다. console.log() 명령은 출력만 할 뿐 결과는 반환하지 않는 명령이므로 undefined(정의되지 않음)가 나온 것입니다 자바스크립트 프로그램에서 명령을 여러 개 나열하여 프로그램.. 2022. 10. 23. Java 1) Jdk 설치 https://www.oracle.com/java/technologies/downloads/#java16 2022. 9. 20. CSS CSS : html과 함께 웹 표준의 기본 개념이다텍스트나 이미지, 배경의 크기나 배치 방법 등의 요소를 이요하여 디자인을 담당Style : html 문서에서 자주 사용한는 글꼴이나 색상, 정렬, 각 요소의 배치 방법과 같이 문서의 겉모습을 결정짓는 것을 가리킨다반응형 웹 디자인 : 사용자가 PC로 접속하든, 모바일로 접속하든 웹 브라우저의 크기에 따라 화면 레이아웃을 자동으로 바꿔주는 방법웹 브라우저의 Web Developer라는 확장 기능을 사용하면 스타일 개념을 쉽게 익힐 수 있다Web Developer 확장 기능 설치하기- Web Developer를 사용해 사이트에서 스타일 비활성화하기* css 탭에 있는 Disable all styles 선택하기스타일 형식 알아보기Css 소스에서 한 줄이 하나의.. 2022. 9. 20. JS를 통해 DATA fetch하는 웹 만들기 데이터를 주고 받는 방법을 배우는 것 목차 "DATA 주고 받기"의 필요성 알아보기! "DATA 주고 받기" 방법 알아보기! JS로 REST API 활용하기 영화 API로 실습하기 "DATA 주고 받기" 필요성 → "DATA 주고받기"가 필요하다 장고(Django)라는 프레임워크를 예시로 들을 수 있을 것이다 웹 브라우저에서 요청이 오면 저장되어 있는 static만 전달되는 것이 아니고 파이썬으로 짜여져 있는 로직 혹은 데이터베이스에 저장되어 있는 데이터들을 가공해서 html,css,javascript를 만들어서 웹브라우저로 넘겨주게 된다 백엔드 서버와 프론트엔드 서버를 나눈 상태를 배우게 된다 프론트엔드 서버는 웹 브라우저에서 요청이 올 경우에 백엔드 서버에게 또 다시 요청을 보낸다 "~한 데이터가 필.. 2022. 8. 17. REACT (3) React Router(v6) VSCODE 열기 yarn create react-app practice_router 터미널 창에 입력 후 폴더 생성 npm install react-router-dom@6 설치 후 reactrouter를 적용해볼 것이다 src 폴더에 index.js에 가서 App 컴포넌트를 react router dom의 브라우저라고 감싸줘야함 route를 이용해 특정 주소에 component를 연결해야하는데 이 때 필요한 페이지들을 미리 만들어보자 src 폴더에 pages 폴더를 생성하고 그 후 home.js와 movies.js 파일을 만들어준다 그 후 home.js 파일에서 rsc 키워드를 입력하여 자동완성 시켜준다 movies.js에도 똑같이 rsc를 입력한다 이제 router를 연.. 2022. 8. 17. REACT (2) State & Component 사용하기 목차 1. component에 대한 이해 2. state·props에 대한 이해 3. component의 효율적 활용 실습 Component 란? 앱을 이루는 최소한의 단위 - UI는 재사용 가능한 개별적인 여러 조각으로 나누고 각 조각을 개별적으로 나누어 코딩 - props 혹은 state 값을 입력 받아 DOM 노드 생성 -이름은 항상 대문자 > 소문자로 시작하는 컴포넌트는 DOM 태그로 취급 UI를 조각으로 나눈 컴포넌트에 대해서 직관적으로 이해해보자 이 인스타 페이지에서는 검색 컴포넌트, 프로필 컴포넌트, 스토리 컴포넌트, 포스터 컴포넌트로 크게 나눠볼 수 있다 컴포넌트를 분리해서 개발을 진행할 경우 각 사람들이 특정 컴포넌트를 담당하고 개발하기 때문에 동.. 2022. 8. 11. jsx (2) Inline Style html에서 태그 안에서 스타일 속성을 추가한 것과 같다 아주 작은 차이점이 있는데 제일 먼저 style 속성에 들어가는 값은 객체 형태여야 한다 그리고 css 속성 이름이 camel case로 작성되어 있다는 차이점이 있다 모든 하이픈을 빼고 하이픈 뒤 문자를 대문자로 바꾸면 된다 * Camel Case : 단어가 합쳐진 부분마다 맨 처음 글자를 대문자로 표기하는 방법 두 개 이상의 단어가 모인 합성어에서 사용됨 터미널에서 yarn start 를 타이핑하면 됨 그런데 같은 스타일의 태그가 늘어나면 코드 재사용성이 떨어진다 그래서 스타일 값에 들어갈 객체를 미리 선언하여 사용할 수 있다 이렇게 인라인 스타일을 할 수 있고 기존의 css 파일의 별도로 작성해서 적용하는 방식도 사용할.. 2022. 8. 9. 이전 1 2 3 4 5 다음
