항해9924 리액트 입문주차 3 [ Component & Rendering ] ▶ Component 컴포넌트는 리액트의 핵심 빌딩 블록 중 하나 즉 리액트에서 개발할 모든 애플리케이션은 컴포넌트라는 조각으로 구성됨 컴포넌트는 UI 구축 작업을 훨씬 쉽게 만들어줌 컴포넌트란 리액트의 핵심 빌딩 블록 중 하나로 UI 요소를 표현하는 최소한의 단위이며 화면의 특정 부분이 어떻게 생길지 정하는 선언체 컴포넌트를 생성하고 보여지고자 하는 UI 요소를 컴포넌트 내부에서 JSX를 통해 선언하면 이를 리액트가 화면에 그려줌 리액트 컴포넌트가 선언체라는 개념은 아주 중요함 이유는 리액트의 컴포넌트기반 개발 이전에는 브라우저에서 동적으로 변하는 UI를 표현하기 위해 직접 DOM 객체를 조작하는 명령형 프로그래밍 방식으로 구현했기 때문 「명령형은 어떻게(.. 2023. 6. 23. 리액트 입문주차 2 [ React Component ] ▶ React Component란 무엇일까요? 컴포넌트 개념 이해하기 컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있음 개념적으로 컴포넌트는 JavaScript 함수와 유사함 “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환함 리액트 컴포넌트를 표현하는 두 가지 방법 1. 함수형 컴포넌트 // props라는 입력을 받음 // 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return) function Welcome(props) { return Hello, {props.name}; } // 훨씬 쉬운 표현 function App () {.. 2023. 6. 23. 리액트 입문주차 1 [ React 소개 ] A JavaScript library for building user interfaces 리액트 공식 문서에는 이렇게 소개가 되어있음 React를 통해서 UI를 Building할 수 있음 UI를 Building: 웹 또는 앱 애플리케이션의 UI, 즉 보여지는 부분(프론트 엔드 영역이죠)을 구축한다는 의미와 같음 React.js는 SPA 기반의 프론트엔드 개발 프레임워크 중 하나로서, 컴포넌트 단위의 독립적인 블록을 이용한 개발 방법을 이용함 ▶ SPA(Single Page Application) 아키텍쳐 정의 Single Page Application: 한 개의 페이지로 이루어진 애플리케이션 MPA(Multi Page Application) 과 상반된 개념 기존 MPA 문제점(su.. 2023. 6. 23. JavaScript 문법 종합반 4주차 [ 콜백함수 ] ▶ 콜백함수 예시 // setTimeout setTimeout(function() { console.log("Hello, world!"); }, 1000); 다른 코드의 인자로 넘겨주는 함수. 인자로 넘겨준다는 얘기는 콜백함수를 넘겨받는 코드가 있다는 것 여기서 넘겨받는 코드는 setTimeout이 됨 콜백함수를 넘겨받는 코드는 콜백함수를 필요에 따라 적절한 시점에 실행하게 됨 action에 대한 제어권은 함수에 있음 callbkack의 의미는 call(부르다) + back(되돌아오다)로 되돌아와서 호출해줘라는 뜻 즉, 콜백함수는 다른코드(함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수임. 콜백함수를 위임받은 코드는 자체적으로 내부 로직에 의해 이 콜백 함수를 적.. 2023. 6. 20. 띵동코딩 CSS기초_Level1_2 [ 계획 세우기 + GNB 구역 ] ▶ 결과물 보고 계획서 세우기 구역 계획하기 Html 쓰기 CSS 설정하기 구역 나눠보기 GNB구역: 어느 페이지에 들어가든 공통적으로 사용할수 있는 메뉴 바를 지칭 메인구역: 본문의 주 컨텐츠 CTA구역: 사용자의 반응을 유도 하기 위한 버튼이나, 배너를 가르킴 태그를 매칭 ▶ Main 구역 구역 확인 가운데 영역 태그 적용하기 : 줄바꿈 태그 매주 월요일, 내 강의실에 찾아오는 온라인 코딩 학습지 띵동코딩이 도착했어요! CSS 입히기 .main > img 에서 “꺽쇠”(>) : main 구역의 안의 img 이름표를 불러줄 때 사용 .main { display: flex; flex-direction: column; justify-content: center; alig.. 2023. 6. 1. 띵동코딩 CSS기초_Level1_1 [ 앞으로 배울 것 ] ▶ 웹 서비스의 동작 원리 브러우저가 하는 일은 요청을 보내고, 받은 것을 그대로 그려주는 것 Html, CSS, JS처럼 눈에 보이는 부분을 '프론트엔드'라고 함 ▶ Html, CSS, JS 눈으로 보기 Html, CSS, JS를 집짓는것에 비교하면 집의 골조를 세우는 것이 Html 집을 인테리어 하듯 홈페이지 인테리어 하는 것이 CSS 자동문, 불을 켜고 끄는 등의 동적인 역할은 JS가 맡음 [ 뼈대 - HTML 기초 ] ▶ head - body 구조 웹페이지에서 뼈대를 담당하는 html은, 기본적으로 ▶ 주요 태그 훑어보기 구역을 나눔 문단 h1은 제목을 나타내는 태그 h2는 소제목 h3~h6 숫자가 커질수록 글자 크기는 작아짐 하이퍼링크 버튼 대부분의 태그는 여는 태그 ””.. 2023. 6. 1. JavaScript 문법 종합반 3주차 [ 데이터 타입 심화 ] ▶ 데이터 타입의 종류(기본형과 참조형) 자바스크립트에서 값의 타입은 크게 기본형(Primitive Type)과 참조형(Reference Type)으로 구분됨 기본형과 참조형의 구분 기준은 값의 저장 방식과, 불변성 여부 · 기본형과 참조형의 구분 기준 복제의 방식 기본형 : 값이 담긴 주소값을 바로 복제 참조형 : 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제 불변성의 여부 기본형 : 불변성을 띔 참조형 : 불변성을 띄지 않음 ▶ 메모리와 데이터에 관한 배경지식 · 메모리, 데이터 비트(bit) 컴퓨터가 이해할 수 있는 가장 작은 단위 0과 1을 가지고 있는 메모리를 구성하기 위한 작은 조각을 의미 이 작은 조각들이 모여서 여러분들이 흔히 들으시는 ‘메모리’가 만.. 2023. 5. 25. JavaScript 문법 종합반 2주차 [ 각종 es6 문법 ] ECMAScript 6 (ES6)는 JavaScript의 버전 중 하나로, 2015년에 발표되었음 ES6는 이전 버전인 ES5에서 새로운 문법과 기능을 도입하여 JavaScript 개발자들이 보다 쉽고 효율적으로 코드를 작성할 수 있도록 개선 ▶ let, const 기존에 변수 선언을 위해 존재하던 var를 대체해서 나온 변수 선언에 사용 되는 키워드 선언: 변수명을 자바스크립트 엔진에 알리는 것 할당: 변수에 값을 저장하는 것(= 할당연산자) let과 const의 특징 let: 재할당은 가능하고, 재선언은 불가능 const: 재할당, 재선언이 불가능, 초기값이 없으면 선언 불가능 var: 재할당, 재선언, 호이스팅이 됨 let value = "value1" console.log.. 2023. 5. 23. JavaScript 문법 종합반 1주차 [ JS언어의 특징 그리고 역사 ] ▶ JS의 역사 1995년 자바스크립트 탄생 넷스케이프 커뮤니케이션(LiveScript → Javascript) 브라우저 동작 스크립트 언어 1999년 자바스크립트 표준화(ECMA-262) 완료 2005년 AJAX 등장 비동기 웹 애플리케이션 개발 가능 폭발적인 UX 향상 🚀 UX는 User Experience(사용자 경험)의 약자, 유저들이 얼마나 편리하게 프로그램을 사용하는지에 대한 경험 2008년 V8 엔진 출시(google) super fast(코드 실행 속도 상당부분 개선) 🛠️ 컴파일러, 메모리관리 시스템 👍 2009년 Node.js 등장, 서버 개발 활성화 서버개발의 지각변동 : PHP, Ruby, Python, Java → Javascript(Node.j.. 2023. 5. 22. 이전 1 2 3 다음
