기초/프론트엔드 종합반 HTML&CSS, JS, React23 7주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트4 문제 정의 어떤 코드가 상태를 어디서 바꾸나 Redux: 어플리케이션을 개발하는데 있어서 상태를 전역적으로 관리해주는 라이브러리 상태라는 것은 어떤 어플리케이션이든 다 가지고 있는 중요한 요소. 웹어플리케이션을 개발하는데에 기본적으로 상태 데이터를 어떤 유형의 UI로 가공하는가가 핵심적인 문제 react라는 라이브러리도 결국 데이터를 어떻게 UI로, 즉 DOM으로 변형할것인가에 문제를 다루고 있음 그만큼 상태는 어플리케이션에 있어서 굉장히 중요한 위치를 차지하고 있음 문제는 상태를 관리하는것이 매우 까다로움 어플리케이션의 규모가 커질수록 상태관리는 매우 중요한 화두로 떠오름 ※놀랍게도 공부중 이번에도 Node.js로 인하여 서버가 잘 실행되지 않아 문제가 되었음 이번에는 버전이 너무 높아 18버전으로 하.. 2023. 1. 22. 7주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트3 JS 함수 컨포넌트 리액트가 사용자 컴포넌트를 만드는 방법 함수로 컴포넌트 만드는 방법 클래스로 컴포넌트 만드는 방법 사용자 컴포넌트를 만들게 되면 HTML 태그와 같은 것으로만 마크업을 하는 것과 정말 다르게 UI조각을 JS 모듈화 하듯이 조직화할 수 있음 모듈화 할 수 있다는 것은 언제든 필요할 때 재활용할 수 있고 사용자가 이름을 붙여서 HTML 태그와는 다르게 훨씬 더 의미가 명확한 형태로 UI를 만들 수 있는 장점이 생김 function Title(){ return React 만들기; } 사용자 컴포넌트를 만들어서 이름을 부여하고 이름이 잘 명명된다면 UI 구성을 훨씬 더 readability(읽기 쉬운) 높일 수 있는 장점이 생김 Jsx문법에 태그의 이름이 대문자로 시작되면 문자열로 취급하지 .. 2023. 1. 22. 7주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트2 해결책 만들기 DOM이 기능은 매우 많지만 실제로 복잡한 문제를 다루기에는 그만큼 복잡한 코드를 생산해야하고 코드가 복잡해졌으니 유지하는 것은 고통스러운 일 또한 소프트웨어는 한사람이 계속 코드를 유지하는 것이 아님 그래서 개발자는 여러가지 방법을 사용해 해결책을 생각해 보았음 그 중 React를 공부하는 이유는 시장에서 가장 많이 쓰이고 있고 주류 프레임 워크임 React 해결법은 DOM API가 다루기 까다로우니 사용자한테 DOM API보다 훨씬 더 다루기 쉬운 무언가를 제공해 주고 사용자가 다루기 힘든 DOM API는 우리가 제어권을 가지고 다루겠다는 것 create Element 일반사용자들이 사용하는 서비스나 혹은 어플리케이션 같은 경우에도 사용자들한테 선택받는데에는 이유가 있음 제일먼저 떠오르.. 2023. 1. 20. 7주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트 무엇을 배울것인가 개발자가 고려해야 하는 것 어떻게 코드를 안전하게 바꿀 수 있는지 어떤 코드 형태가 내용을 잘 파악할 수 있는 형태인지 소프트웨어 개발, 프로그래밍 패턴과 같은 것들이 대부분 변경 용이성에 초점이 맞춰져 있음 어떻게 잘, 안전하게, 빠르게 바꿀수 있는지 바꿔도 올바르게 동작할 수 있을지 올바르게 동작하지 못하더라고 올바르지 못한 동작이 최소한의 영향 범위를 갖게 할 것인지 리펙토링 예시 function createEl(type, props){ switch(type){ //type에 들어오는 문자열에 따라 createElement를 이용하여 DOM API로 DOM node를 하나 만들고 //Attribute에 data-id 속성을 추가하여 내용을 넣음 //props 객체를 setAttru.. 2023. 1. 20. 6주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트3 JS 데이터 실습 가져오기, 내보내기 JS파일은 외부에 있는 다른 JS파일을 가지고 올 수 있는 하나의 통로를 가지고 있음 대표적으로 import라는 키워드를 통해서 외부에 있는 다른 JS 가져오는 문법을 작성을 함 JS파일은 안에 있는 특정 내용을 내보낼 수 있는 2개의 통로를 가지고 있음 Default export라고 해서 이름을 따로 지정하지 않아도 되는 기본통로가 있고 Named export라고 해서 이름을 꼭 지정해야 되는 통로가 있음 이름을 따로 지정할 필요가 없는 통로를 사용할 때는 export 키워드와 함께 default라는 키워드를 사용할 수 있음 그러면 따로 데이터에 이름을 설정하지 않아도 됨 import _ from "lodash"; //From `node_modules` //loda.. 2023. 1. 18. 6주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트2 JS 데이터 객체 다양한 키 모음 및 더 복잡한 엔티티들을 저장하는 데 사용 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object Object - JavaScript | MDN Object 클래스는 JavaScript의 데이터 유형 중 하나를 나타냅니다. 다양한 키 모음 및 더 복잡한 엔티티들을 저장하는 데 사용됩니다. 객체는 Object() 생성자 또는 객체 초기자 / 리터럴 구문를 통해 생 developer.mozilla.org //참조형, 메모리의 주소만 참조해서 사용 const userAge = { //key: value name: "H.E", age: 21, }; const userEmail = {.. 2023. 1. 17. 6주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트 JS 데이터 문자 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String String - JavaScript | MDN The String object is used to represent and manipulate a sequence of characters. developer.mozilla.org String 전역 객체는 문자열(문자의 나열)의 생성자 const string1 = "A string primitive"; const string2 = "Also a string primitive"; const string3 = `Yet another string primitive`; const str = .. 2023. 1. 17. 5주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트2 JS 화살표 함수 ( ) => { } vs function ( ) { } 활살표 함수를 사용할때 {}에 식을 넣으면 반환이 안됨. {}을 쓸려면 retrun을 사용 축약형으로 객체데이터를 반환할때는 꼭 ()소괄호로 감싸주어야 함 const double = function (x) { return x * 2; }; console.log("double:", double(7));//14 const doubleArrow = (x) => { return x * 2; }; console.log("doubleArrow:", doubleArrow(7));//14 const doubled = x => x * 2; console.log("doubled:", doubled(7));//14 const myName = (x) =.. 2023. 1. 13. 5주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트 JS 데이터 타입 확인 console.log(typeof "Hi");//string console.log(typeof 123);//number console.log(typeof true);//boolean console.log(typeof undefined);//undefined console.log(typeof null);//object console.log(typeof {});//object console.log(typeof []);//object function getType(data) { return Object.prototype.toString.call(data).slice(8, -1); } console.log(getType(123));//Number console.log(getType(fal.. 2023. 1. 12. 이전 1 2 3 다음
