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. JSX 목차 1. 멋쟁이 JSX와 Babel 2. JSX 문법 파헤치기 3. Style Basic 4. 실습 JSX : JS과 XML의 합성어 XML를 사용하는 자바스크립트의 확장 문법 xml를 쉽게 말하자면 html과 같은 마크업 언어, 표시하기 위한 언어 xml은 html과 굉장히 유사하지만 다르다 html를 데이터를 화면에 보여주기 위함을 목적이라고 한다면 xml은 데이터를 저장하고 전달하는 것이 주목적이다 xml은 각 데이터가 어떠한 데이터 인지 설명하기 위해 태그를 직접 정의할 수 있다 HTML Hyper Text Markup Language Hello,World XML EXtensionable Markup Language 991206 SCNU JSX = JS + XML Const App = () =>.. 2022. 8. 8. REACT (1) REACT 기초 1. 리액트가 무엇인지 2. yarn 3. 리액트 업계 hello world. 4. 리액트 꿀팁 REACT : 유저 인터페이스를 만들기 위한 자바스크립트 라이브러리 * 오픈소스 라이브러리 UX : User Experience (사용자 경험) - 사용자가 서비스를 이용하면 겪는 모든 이용 경험 UI : User Interface (사용자 인터페이스) - 사용자가 경험을 할 때 직접 상호작용을 한 부분 프레임워크 : 뼈대, 골조, 소프트웨어의 설계와 구현을 위한 상호 협력하는 클래스와 인터페이스의 집합 라이브러리 : 소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임 (이미 만들어진 기능들의 집합의 느낌이다) 프레임워크 : 전체 설계와 구현을 주도 라이브러리 : 불려 와 .. 2022. 8. 8. 이전 1 2 3 4 5 6 다음
