프론트 엔지니어링 (7) 썸네일형 리스트형 [Java Script]React Hooks-useState 예제를 통해서 이해하기 *이 포스팅은 별코딩님의 강의를 토대로 했습니다.https://www.youtube.com/watch?v=G3qglTF-fFI&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO 1.State란?컴포넌트가 가질 수 있는 상태, 컴포넌트당 여러 개의 상태를 가질 수 있습니다.요 상태를 쉽게 관리할 수 있게 해주는것이 useState! const[state,setState]=useState(초기값);setState(6); //state 를 6으로 설정. 아래 예시는 사용자가 버튼을 클릭할때마다 시간이 +1로 업데이트 되는 간단한 예제입니다. 1.useState를 통해 time,settime을 설정합니다.2. handClick함수가 실행되면 setTime은 time+=1이 됩니다.3.A.. JavaScript 비동기 개념, 이 때 브라우저 내부에서 일어나는 일(이벤트루프) *이 포스팅의 일부는 코딩애플님의 아래 영상을 참고하였습니다.감사합니다^^ https://www.youtube.com/watch?v=v67LloZ1ieI JavaScript에서 등장하는 비동기 개념을 알아본다.JS에서 어떻게 비동기구조를 재현하는지 이를 구현해주는 객체인 Promise의 개념과 예제를 살펴본다. 비동기가 뭐냐면.. 아닐 비/같을동/때 기 다.그래서 정석적인 순서를 기다리지 않는다는 거다. 예를들면 .. 원래 코드의 순서대로 1-2-3-4-5 실행하는것이 동기다. 설사 2번이 예상치 못하게 매~우많은 시간이 걸려 3,4,5번이 밀리더라도 순서를 지킨다. 그러나 비동기는 다르다. 2번이 오래걸린다면 1-3-4-5-2번의 순서로 실행된다. 더 빠른 이해를 위해서 아래의 코드를 브라우저.. Javascript에서 웹페이지의 데이터를 긁어오는 두가지 방식(cheerio와 request) *이 포스팅은 신한 프로디지털 아카데미 신윤수 강사님의 포스팅을 토대로 작성되었습니다. 이번의 과제는 크롤링입니다.기존 웹 페이지에서 원하는 정보만 긁어오는 것입니다. 두 가지 방식을 배웠는데요 1.도메인 주소를 통해HTML구조를 파싱해서 그 중 원하는 태그의 값만 불러오는 Cheerio2.Request URL을 통해서 직접 Post: 규격화된 헤더,바디 구조를 맞춰 받아오는 형식 2번을 사용하는 경우는 HTML이 비어있을 때 입니다. HTML이 비어있다는 것은 무엇일까요?페이지의 틀을 먼저 로딩하고,데이터는 나중에 불러온다는 것입니다. 예를들면.. react등을 이용해서,데이터를 받아오고 페이지로 뿌리는 경우등이 있겠습니다. 이번 포스팅에서는 2번의 경우를 다뤄보도록 하겠습니다. 1.NODE JS 가.. JavaScript 콜백함수(함수인자) 호출시 화살표 함수를 써야하는 경우 안녕하세요. 지난번에 https://gpdbs9409.tistory.com/45 [JavaScript] 함수를 인자로 받는 함수 클로저를 구현하는 예제 문제*이 포스팅은 신한투자증권 프로디지털 아카데미 신윤수 강사님의 강의를 토대로 작성되었습니다. 안녕하세요.오늘은 클로저라는 개념에 가까워 지려고 합니다. 저는 오늘 JS를 예시로 들테지gpdbs9409.tistory.com클로저함수에 대해 간단하게 알아보았는데요, 클로저함수는 함수를 인자로 받는 함수입니다.그렇다면.. 함수를 인자로 받을 때 명시적으로 받는것과,화살표 함수로 받는 것에 차이가 있을까요? 아래의 예시 코드를 봅시다. const a = (callback) => { //a는 callback함수를 인자로 받는다. 실행 후 3초 뒤에 conso.. [JavaScript] 함수를 인자로 받는 함수 클로저를 구현하는 예제 문제 *이 포스팅은 신한투자증권 프로디지털 아카데미 신윤수 강사님의 강의를 토대로 작성되었습니다. 안녕하세요.오늘은 클로저라는 개념에 가까워 지려고 합니다. 저는 오늘 JS를 예시로 들테지만 클로저는 JS에만 있는 개념은 아니고요 요렇게 다양한 언어에서 사용한다고 하네요. 그러나 함수중첩이 많은 JS에서 특히 많이쓰인다고 합니다.클로저(closure) 의 정의는함수와 함수가 선언된 어휘적 환경의 조합내부 함수가 생성될 때 그 scope에 있는 모든 변수에 대해 접근할 권한을 가짐외부 함수의 실행을 마친 후에도 그 변수에 접근 가능이렇다고 하는데요.. 저만 이해안가나요?^^; 당장은 함수 안에 함수가 인자로 들어가서, 변수 역할을 하거나 리턴타입으로 나온다고 이해했습니다.간단한 예제를 봅시다.아래 문제에서 in.. JavaScript -Call Stack/함수형 프로그래밍 https://www.youtube.com/watch?v=-AzANhKOpHA&t=324s* 이 포스팅은 유튜브 "얄팍한 코딩사전"님의 강의 내용을 정리한 것입니다. Call Stack Call Stack이란 함수내부에서 함수를 호출 했을 때,함수 호출이 Stack구조로 쌓이는 것을 말한다.참고)Stack=>LIFO last in first out구조 아래 예시코드를 들면, f1이 f2를,f2가 f3을 호출하도록 구현된 경우이다.그리고 f1을 호출하면?call은 아래와 같이 쌓이고, 함수 종료는 f3 -> f2 -> f1 의 반대로 구현된다.function f1() { console.log("Entering f1"); // 🔴 f2(); console.log("Exiting f1"); // 🔴.. 환율 변환기 어플 - ① 프론트엔드 코딩을 시작한다. 1.어떤 게 필요할까?1 메인화면에 필요한 ELEMENT들 로고Input currency 드롭다운박스output currency 드롭다운박스input amount moneyoutput amount money 2 메인화면에 필요한 계산 로직 변환을 원하는 두 가지 화폐의 환율이 필요하고,이는 하나은행 API를 이용하기로 계획한다. 사용자 행동 흐름:입력 화폐 및 값 설정, 출력 화폐 설정 2.어떻게 구현할까?1. 디렉토리 구조 Flutter 프로젝트에서 기능별로 코드를 분리해두면 유지보수성과 확장성이 좋아진다. 따라서, 다음과 같은 구조를 사용할 예정이다.lib/├── main.dart # 앱 진입점├── screens/ .. 이전 1 다음
