Frontend (8) 썸네일형 리스트형 Java Script - 3. 함수 프로그래밍 언어에서 함수란 하나의 로직을 재실행 할 수 있도록 하여 코드의 재사용성을 높여준다. 함수의 형식 function 함수명 (파라미터) { 코드 return 리턴값 } 함수 호출의 형식 함수명(파라미터); 함수에서의 입력(argument/인자) 함수에 값을 입력할때는 함수명(arg)를 넣어 입력한다 그러면 함수는 파라미터로 인자값을 받아 함수 안 로직/코드를 실행하고 결과값을 리턴한다. 복수의 인자값을 입력할 때는 함수명(arg1, arg2) 순서대로 입력하면 되지만 이 경우 당연히 실행하는 함수의 파라미터도 2개가 필요하다. 함수에서의 출력(return) 함수 내에서 사용한 return 은 리턴뒤에 나오는 리턴값을 함수의 결과로 반환하고 동시에 함수를 종료시킨다. 만약 한 함수내에서 여러번 r.. 1. Call Stack 콜스택 리스트가 존재한다. 함수는 리스트에 추가되고 실행이 완료되면 함수는 해당 리스트에서 최근에 완료된 순으로 제거된다. function three() { console.log('hello world!') } function two() { three(); } function one() { two(); } function zero() { one(); } zero(); 실행순서 zero (anonymous) -> function zero -> function one -> function two -> function three 제거되는 순서 function three -> function two -> function one -> function zero -> zero (anonymous) 단 무한루프에 걸리.. Java Script - 2. 객체 값 조회, 가져오기 phoneticLookup("charlie")를 조회하면 밸류값인 "Chicago"가 나오게 하고 싶을 때. 객체명[매개변수]로 조회할 수 있다. function phoneticLookup(val) { var result = ""; var lookup = { "alpha": "Adams", "bravo": "Boston", "charlie":"Chicago", "delta":"Denver", "echo":"Easy", "foxtrot":"Frank" }; result = lookup[val]; return result; } phoneticLookup("charlie"); 조금 더 Object의 키값, 밸류값에 대해서 조사해봤는데 lookup 객체가 function에 속해있지 않을 때 여러가지 일들을 할 .. Java Script - 1. if 조건절 순서의 중요성 여기 2가지 함수 foo, bar 가 있다. 동일한 조건절, 다른 순서일 때 다른 결과값이 나온다. function foo(x) { if (x < 1) { return "Less than one"; } else if (x < 2) { return "Less than two"; } else { return "Greater than or equal to two"; } } 두번째 함수 bar function bar(x) { if (x < 2) { return "Less than two"; } else if (x < 1) { return "Less than one"; } else { return "Greater than or equal to two"; } } x에 0을 대입했을 때 나오는 결과 값은 foo(0).. 1. HTML은 무엇인가? HTML is the skeleton of all webpages. It's often the first language learned by developers, marketers, and designers and is core to front-end development work. HTML provides structure to the content appearing on a website, such as images, text, or videos. Right-click on any page on the internet, click "Inspect", then you will see HTML structures in a panel of your screen. HTML stands for HyperTex.. 3. Component와 Props 그리고 React Developer Tools Component 리액트는 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 분리해서 생각해 볼 수 있게 해준다. component 를 정의하는 방법은 이전 포스팅에서 설명했던 것과 같이 함수형과 클래스형이 있다. 주의: 컴포넌트의 이름은 항상 대문자로 시작 React는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리한다. 예를 들어 는 HTML div 태그를 나타내지만, 은 컴포넌트를 나타내며 범위 안에 Welcome이 있어야 한다. 1) 함수형 function Welcome (){ return Happy Coding! } function App() { return ( // 위의 웰컴함수의 내용 Happy Coding!이 나타남 ); } 2) 클래스형 class Subje.. 2. React의 구조 그리고 샘플 웹 앱 실행, 코딩, 배포 React를 구성하는 핵심 3개 파일 public - index.html React App 메인 파일인 index.js의 결과창, HTML 템플릿 파일이다. 이 파일이 직접 표시되는 것은 아니고, index.js에 을 읽어와 렌더링된 결과가 표시된다. index.js의 div id="root"를 내포하고있다. src - index.js ReactDOM.render( , document.getElementById('root') ); 메인파일. ReactDom이 App컴포넌트를 document에서 id값이 root인 태그안에 랜더링 해준다는 의미다. ReactDOM.reder(컴포넌트, 조합 대상 요소); 로 코드를 구성한다. "id가 'root'인 요소들을 아이디 선택자를 기반으로 index.html로 보.. 1. React란? 앞으로 공부전략 그리고 React 설치하기 React란 페이스북 회사에서 페이스북의 UI를 더 잘 만들기 위해서 만든, 웹/앱(RN)의 View를 개발할 수 있도록 하는 자바스크립트 UI 라이브러리이다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕는다. 컴포넌트에 데이터를 흘려보내면 설계된 대로 UI가 조립되어 사용자에게 보여진다. 왜 React를 사용하는가? 요즘은 pc웹페이지 하나만 사용하지 않는다. 안드로이드 어플리케이션, 맥 어플리케이션, pc 웹사이트, 모바일 웹사이트 사이트가 출력되는 곳? 기기가 다양하다. 이러니 웹사이트가 동적으로 움직여줘야 한다. 이런 웹 어플리케이션에서 UI를 동적으로 나타내기 위해서는 복잡하고 많은 상태를 관리해야 하는 부담이 생긴다. 특히나 프로젝트 규모가 커질수록,.. 이전 1 다음
