본문 바로가기

Frontend

 (48)
port :5000 403 error mac 맥에서 포트 5000번 403에러 5000번 포트를 뭐가 쓰고 있는지 확인 sudo lsof -i :5000 ControlCe 가 쓰고있음 Monteray 업데이트 이후 Airplay 수신 포트로 5000번 사용 해결방안 1. Airplay 수신 모드를 끈다. 공유 > 시스템 환경설정 > AirPlay수신모드 끄기 2. 다른 포트를 사용한다. 2번 다른 포트를 사용하기로함
[번역] babel-preset-env는 무엇이고 왜 필요한가? https://blog.jakoblind.no/babel-preset-env/ What is @babel/preset-env and why do I need it? If you have followed any recent tutorial on how to set up a modern JavaScript project, you have installed Babel and then added @babel/preset-env to your… blog.jakoblind.no 모던 javascript 프로젝트를 시작할 때, babel을 설치하고 babel-preset-env plugin 설정을 .babelrc에서 하였을 것이다. { presets: ['@babel/preset-env] } 이렇게 하면 나름 동작을..
Browser Size Window : 열려있는 브라우저 전체 창 Document: html에서 작성한 요소들이 표기되는 실제 페이지 부분 Navigator: 사용자 눈에는 보이지 않지만 중요한 정보들이 담겨있는 오브젝트 html을 브라우저에서 열면 window라는 전체적인(글로벌) 최고 오브젝트가 있고 그 아래 DOM, BOM, JavaScript - Window DOM(Document Object Model): document … BOM(Browser Object Model): navigator, location, fetch, storage … JavaScript: Array, Map, Date … window.screen.width, height: 모니터 사이즈 window.outerWidth, outerHeight: 탭..
Web APIs Web APIs 브라우저에서 자체적으로 제공하는 APIs. 대표적인 APIs Dom APIs - Document Object Model. 웹페이지의 요소들을 생성, 삭제, 스타일 변경등 조작하는 기능 Network APIs Graphics APIs Audio/video APIs Device APIs -사용자가 온라인인지, 오프라인인지 등 Fils APIs -파일조작 Storage APIs 다 외울필요는 없고 다양한 APIs가 존재한다는 것을 알고 프로젝트할 때 필요하면 찾아서 사용하면 된다. 자주 사용하는 APIs HTML Drag and Drop API History API Image Capture API IndexedDB(브라우저 디비 이용 가능) Intersectio Observer API Stor..
[ES6] ES6란? ES 는 ECMAScript 의 약자로 숫자 6은 여섯번째 ES를 의미. ECMAScript는 Ecma 인터내셔널의 ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어입니다. 자바스크립트를 표준화하기 위해서 만들어졌으며 꼭 자바스크립트가 아니더라도 어도비 플래시를 사용하는 소프트웨어에서 사용하는 액션스크립트, MS 사의 인터넷 익스플로러에 쓰이는 J스크립트 등 다른 구현체들 역시 포함하고 있습니다. https://ssungkang.tistory.com/entry/ES6-ES%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-%EC%99%9C-ES6%EC%9D%B8%EA%B0%80
[JavaScript] 커링함수 Currying in Functional JavaScript Currying은 무엇인가 Currying 은 1967년 Christopher Strachey 가 Haskell Brooks Curry의 이름에서 착안한 것이다. Currying은 여러 개의 인자를 가진 함수를 호출 할 경우, 파라미터의 수보다 적은 수의 파라미터를 인자로 받으면 누락된 파라미터를 인자로 받는 기법을 말한다. 즉 커링은 함수 하나가 n개의 인자를 받는 과정을 n개의 함수로 각각의 인자를 받도록 하는 것이다. 부분적으로 적용된 함수를 체인으로 계속 생성해 결과적으로 값을 처리하도록 하는 것이 그 본질이다. 출처:sujinlee.me/currying-in-functional-javascript/ [번역] 초보자를 위한 함수형 자바스크립트 Currying 가이드 원문 : A Beginner’s..
[리액트] 커링 Currying 커링은 쉽게 말하자면 함수를 반환하는 함수 커링을 사용해야 하는 이유는 함수의 재활용 때문 function multiply(a, b) { return a * b; } function multiplyTwo(a) { return multiply(a, 2); // 함수 재활용 } 이를 응용해 n배 함수를 생성해주는 커링 함수를 만들 수 있다. function multiplyX(x) { return function(a) { return multiply(a, x); } } 화살표 함수로 표현하면, const multiplyX = x => a => multiply(a, x); 커링 함수의 사용 const multiplyThree = multiplyX(3); const multiplyFour = multplyX(4)..
[리액트] 함수형 컴포넌트에서 ref를 사용할 때에는 useRef라는 Hook함수를 사용. / 클래스형 컴포넌트에서는 콜백함수 of React.createRef라는 함수를 사용. // JavaScript 를 사용 할 때에는, // 우리가 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택합니다. // 리액트를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 발생 할 때도 있습니다. // 예를 들어서 특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야된다던지, 또는 포커스를 설정해줘야된다던지 등 // 추가적으로 Video.js, JWPlayer 같은 HTML5 Video 관련 라이브러리, 또는 D3, chart.js 같은 그래프 관련 라이브러리 등의 외부 라이브러리를 사용해야 할 때에도 특정 DOM 에다 적용하기 때문에 DOM 을 선택해..
[ES6] 객체 확장 표현식과 구조 분해 할당 var obj = {}; // 객체 선언 var ram = 'other'; obj.a = 1; // a라는 키값에 1이라는 값을 선언 obj['a' + ram] = 1; // 키 값을 연산을 통해 사용하기 위해 [ ]를 사용해 문자값을 연산. 오브젝트에 연산된 키값에 1을 선언 obj[`a${ram}`] =1; // `백틱을 사용한 위와 동일한 표현 console.log(obj); -> {a: 1, aother: 1} 오브젝트 변수 선언하는 다른 방식 var obj = { a: 1, }; 방식으로 선언할 때는 바로 키를 조합해 사용하는 방식이 불가능 했음. var ram = 'other'; obj[`a${ram}`] = 1; 이렇게 꼭 따로 선언해서 조합해야 했음. 그런데 확장표현식에서는 오브젝트 안에서..
[ES6] 화살표함수 => 모양 사용. 기존 함수 표현 법 function 함수이름 (인자) { 연산식 } ex) function add(first, second) { // typeof add === 'function' return first + second; } 자바스크립트는 함수형 언어로 익명함수라고 하는 함수의 이름을 포함하지 않는 함수 선언식 표현이 존재. var add = funcntion(first, second) { // typeof add = 'function' return first + second; } 선언식 자체가 함수를 반환하게 되고, add라는 변수가 이 함수를 할당. 위 두 식은 이름을 함수 안에 포함하느냐, 반환이 된 값을 할당하느냐의 차이. 화살표 함수는 익명함수 방식을 따라 표현됨. functi..

티스토리툴바