본문 바로가기
반응형

Spec UP - Frontend131

chap 4. 엘리먼트 렌더링 4.1 엘리먼트에 대해 알아보기 1. 엘리먼트의 정의 엘리먼트는 리액트 앱을 구성하는 가장 작은 블록들을 의미한다. 리액트 엘리먼트는 화면에서 보이는 것을 기술하며, 엘리먼트가 기술한 내용을 토대로 실제 화면에서 보게되는 DOM 엘리먼트가 만들어진다. 아래 JSX 예제코드를 살펴보자. const element = Hello world! element 변수에 값을 대입하는 코드가 실행되면, 리액트의 createElement() 함수를 사용하여 엘리먼트를 생성하게 된다. 이렇게 생성된 것이 리액트 엘리먼트이며, 리액트는 이 엘리먼트를 이용해 실제 화면에서 보게될 DOM 엘리먼트를 생성한다. 2. 엘리먼트의 생김새 리액트 엘리먼트는 컴포넌트 유형(ex. Button)과 속성(ex. color) 및 내부의 모든.. 2024. 3. 18.
chap 1. 리액트 소개 1.1 리액트는 무엇인가? 1. 리액트란? : 사용자와 웹사이트의 상호작용을 돕는 인터페이스를 만들기 위한 자바스크립트 라이브러리 * 라이브러리란, 특정 프로그래밍 언어에서 자주 사용되는 기능을 모아서 정리해놓은 모음집이다. * 사용자 인터페이스(UI)란 사용자와프로그램이 서로 상호작용을 하기 위해 중간에서 서로간에 입/출력을 제어하는 것이다.(ex. 버튼, 텍스트 입력창) UI를 만들기 위한 기능 모음집을 UI 라이브러리라고 하며, 리액트는 대표적인 자바스크립트 UI 라이브러리이다. - UI 라이브러리 예시 : React, 앵귤러JS, Vue.js 1.2 리액트의 장점 1. 빠른 업데이트와 렌더링 속도 리액트는 빠른 업데이트를 위해 Virtual DOM(가상의 DOM)을 이용한다. * DOM(Docum.. 2024. 3. 5.
chap 0. 준비하기 1. HTML 이란 무엇인가? HTML(하이퍼 텍스트 마크업 언어) : 웹 페이지를 구조화하고 콘텐츠를 표시하는 데 사용되는 표준 마크업 언어. 태그를 사용하여 문서의 구조를 정의한다. 태그는 시작 태그와 종료 태그로 구성되며, 문서의 제목, 본문, 이미지, 링크 등을 구분하고 위치를 지정한다. CSS와 JavaScript를 이용하여 문서의 디자인과 동작을 구현할 수 있다. CSS는 문서의 스타일을 정의하고, JavaScript는 문서의 동작을 제어한다. 웹 브라우저에서 해석되어 화면에 출력된다. 대부분의 웹 브라우저는 HTML을 지원하며, HTML로 작성된 문서는 웹 브라우저에서 정상적으로 표시된다. 다양한 버전이 있으며, 현재는 HTML5가 최신 버전이다. 2. 웹사이트의 뼈대를 구성하는 태그들 : .. 2024. 3. 5.
Python) 공공데이터 포털 API 공휴일 정보를 활용하여 전 영업일 계산하기 파이썬을 활용하여 당일 기준 전 영업일을 계산하는 로직을 만들어보자. 전영업일 : 주말+휴일을 제외하고 영업일 기준으로 전일자. Ex) 2023.5.8의 전영업일은 2023.5.4일이다. 한국 공휴일은 매년 달라지므로 공공데이터 포털 API를 활용하여 정보를 받아오도록 하자. 아래 작업을 수행하기 위해서는 먼저 회원가입을 해야한다. 회원가입이 완료되었다면 로그인 후 아래 사이트에 접근한다. https://www.data.go.kr/tcs/dss/selectApiDataDetailView.do?publicDataPk=15012690 한국천문연구원_특일 정보 (천문우주정보)국경일정보, 공휴일정보, 기념일정보, 24절기정보, 잡절정보를 조회하는 서비스 입니다. 활용시 날짜, 순번, 특일정보의 분류, 공공기관 .. 2023. 4. 28.
서버-클라이언트 통신 이해하기/JSON/AJAX/API활용 서버-클라이언트 통신 이해하기 8) 서버→클라이언트: "JSON"을 이해하기 클라이언트 -> 서버로 데이터를 요청하고 서버에서 클라이언트로 데이터를 전송해줄 때 데이터포맷을 JSON 이라고 한다. 서울시 OpenAPI에 접속해보기 http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99 https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko 에서 JSON 뷰를 설치하면 데이터형식을 좀 더 깔끔하게 볼 수 있다. JSON은, Key:Value로 이루어져 있습니다. 자료형 Dictionary와 아주- 유.. 2021. 12. 24.
jquery Quiz https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/web101/week02/06.+Jquery+%EC%97%B0%EC%8A%B5%EB%AC%B8%EC%A0%9C+%EC%99%84%EC%84%B1%EB%B3%B8.html jQuery 연습하고 가기! s3.ap-northeast-2.amazonaws.com jQuery + Javascript의 조합을 연습하자! 1. 빈칸 체크 함수 만들기 1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기 [완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기 클릭 2. 이메일 판별 함수 만들기 2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기 2-2. 이메일.. 2021. 12. 23.
jQuery jQuery 란? 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서, jQuery라는 라이브러리가 등장하게 되었답니다.HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리! 👉 Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만, 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서, jQuery라는 라이브러리가 등장하게 되었답니다. jQuery와 Javascript - 코드 비교해보기 document.getElementById("element").style.display = "none"; //javascript 문법 $('#element').hide(); //jQuery 문법 Javascript로 길고 복잡하게 .. 2021. 12. 23.
주문 페이지 스파르타코딩클럽 1주차 숙제 📃 아래 기획서를 보고, 부트스트랩 또는 템플릿을 활용해서 나만의쇼핑몰의 메인 페이지를 완성해주세요. (아이템은 가상으로, 아무거나 파셔도 좋습니다.^^;;) * 기능: 주문하기 버튼을 클릭했을 때 '주문이 완료되었습니다.'라는 얼럿을 띄워주세요. * Bootstrap을 활용해 디자인하세요. //내가만든코드// 부릉부릉 어피치가격 : 00000원 / 개 이 상품으로 말할 것 같으면 용왕이 찾지 못한 토끼의 간을 찾아 빨간망토의 늑대와 아기돼지 삼형제의 숨결이 고루 녹아 120세까지 살 수 있는 어피치다. 주문자 이름 수량 수량을 선택하세요 1개 2개 3개 주소 전화번호 주문하기 스파르타코딩클럽 2주차 숙제 📃 1주차에 완성한 쇼핑몰에, 환율 정보를 넣어주세요! 로딩이 완료되면.. 2021. 12. 22.
Java-이름 출력 public static void main(String[] args) { String[] name = new String[] {"윤아","태연","유리","태연","제시카","티파니","태연","서현","수영", "효연","써니","제시카","지연","은정","보람","윤아","지연"}; 1. 중복된 이름을 제거 후 출력하세요 //배열을 Hashset으로 변환 HashSet hashSet = new HashSet(Arrays.asList(name)); //HashSet을 배열로 변환 String[] Result = hashSet.toArray(new String[0]); //중복된 이름을 제거 후 출력 System.out.println(Arrays.toString(Result)); 2. 중복된 이름 제거.. 2021. 12. 14.
Node.js JavaScript : 웹 브라우저에서 여러 요소들을 동적으로 움직이거나 외부와 통신하기 위해 사용하는 언어 Node.js : 또 다른 자바스크립트 실행환경, 즉 브라우저 밖에서도 자바스크립트를 실행할 수 있다. Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임. 웹서비스 실현 시 프론트엔드(HTML, CSS, JavaScript)와 백엔드(Java, PHP, Python) 개발이 필요한데 Node.js를 이용하면 백엔드에서도 JavaScript를 이용할 수 있다. 즉, 자바스크립트 언어만으로도 웹서비스를 구현할 수 있는 장점이 있다. 01. Node.js 설치 방법 Node.js의 경우 버전이 계속 변경되다보니 주로 노드 버전관리자(NVM)를 함께 설치한다. (구글링 #n.. 2021. 12. 13.
반응형