본문 바로가기

전체 글

 (150)
React + Express Js npm i -g webpack webpack-dev-server 모듈 번들러 설치 1. webpack : 브라우저에서 imprt 할 수 있게 자바스크립트 파일 하나로 합쳐줍니다. 2. webpack-dev-server: 서버 구축 없이 static 파일 다루는 웹서버 열 수 있음. hot-loader 통해 코드 수정시 자동으로 리로드. react 설치 npm i --save react react-dom 개발 의존 모듈 설치 npm i --save-dev babel-core babel-loader babel-reset-es2015 babel-preset-react - babel: es5로 변화시켜줌. - babel-preset-react: jsx 사용 허락 npm i --save-dev react-hot-..
TIL babel과 polyfill의 차이 webpack Babel 브라우저별 지원되는 상황 다르므로 ============ 선수지식 프레임워크 (+) 필요한 기능이 이미 만들어져서 우리가 채워넣으면 되는 것. (-) 사용하지 않는것도 있어서 무겁다. 라이브러리 (+) 필요한 데다 갖다쓰면 됨. ================ React란? 프레임워크가 아닌 라이브러리. View를 위함. 장점 Virtual DOM 어플리케이션의 규모가 커질 경우, 일일히 해당하는 부분을 찾아서 비교하고 업데이트하는 로직이 필요해지므로 관리가 어렵다. 리액트는 버츄얼 돔에 그려주고 달라진 부분을 비교한 후, 해당 부분만 업데이트 알아서 해준다. Garbage Collection / 메모리 관리 / 성능 서버사이드 렌더링 / 클라이..
면접 리뷰 2019.11.18 메시지 발신 서비스 실무진 인터뷰 1. 웹개발자님 질문 Gulp 사용이 인상깊다. 왜 사용했는지 이야기해봐라. >CSS와 작은 모듈을 모아서 보여주는 번들링용으로 사용해보았다. Webpack과 Gulp의 차이점에 대해 이야기해보아라. > (제대로 대답 못 함) - 차이점에 대해서 자세히 알지는 못하지만, Gulp가 소규모에 적합하다고 해서 사용해보았습니다. Gulp가 제공하는 각 모듈에 대해 더 깊이 공부해야할 것 같다. es5와 es6의 차이점에 대해 알고 있는 만큼 이야기해봐라 >let, const / promise / 객체 / .. 대략 5가지 개념 나열 let/const를 왜 쓰는지 설명해봐라 >let은 변화가 필요한 변수 일때, 그 외에는 const 사용한다 질문을 잘못 이해..
es6 새롭게 추가된 기능 1. Arrows 함수 1) implicit return이 가능하다. 3) argument 대신 args 사용. (다시 확인 필요, 아래 블로그에서 쓰는건 rest 파라미터 기법인데..) 4) lexical scope을 생성하지 않고, 외부 scope에서 this를 계승 받는다. 출처: https://jeong-pro.tistory.com/110 2. Class 추가 객체 지향 패턴의 대체제 class Person { constructor(name){ this.name = name; } sayName(){ console.log(this.name); } } let person1 = new Person("H"); person1.sayName(); 3. Enhanced Object Literals (객체 리터..
JS: 객체 생성 1. 기본 Object 객체의 생성자 함수 이용 const obj = new Object(): obj.id = 1234 2. 객체 리터럴을 이용 const obj = {id:1234}; 3. 생성자 함수 이용 const Info = function(id, pass){ this.id = id; this.pass = pass; return this; } const info1 = Info();
자바스크립트 패턴 var musicPlayer = function () { var songList = ['California Girls', 'California Dreaming', 'Hotel California']; // We'll expose all these functions to the user function play () { console.log('Im playing the next song!'); } function pause () { console.log('Im paused!'); } function addTrackToMusicQueue (track) { songList.push(track); console.log('I added a song'); } function showNextTrack () { con..
리액트 재정리 리액트의 등장 이유 => 애플리케이션이 복잡해짐에 따라 뷰를 업데이트하는 로직이 고임. => 어렵게 이럴 필요없이 다 날려버리고 다시 그리자! => 리소스가 많이 들테니 virtual dom에 그려주고 달라진 부분만 비교해서 업데이트하자. *DOM(Document Object Model)이란 : 객체로 문서 구조를 표현하는 방법. XML이나 HTML 사용. DOM은 느린가 생각해보면 그렇지 않아. 웹 브라우저 단에서 DOM에 변화가 생기면 CSS가 이를 다시 연산하고, 레이아웃을 구성한 후, 페이지를 리페인트합니다. 이 과정에서 시간이 허비되지요. 페이스북의 경우 하나의 포스트가 1000개의 div를 포함. 즉, 리액트는 이 연산의 단위를 최소화해주는 역할입니다. 리액트는 프레임워크가 아니라 라이브러리입..
프론트엔드 면접 질문 : CORS 이슈 해결법 CORS 이슈 해결 1. 헤더를 이용. response.setHeader("Access-Control-Allow-Origin", "*"); * 는 모든 도메인에 대해 허용하겠다는 의미. 즉 어떤 웹사이트라도 이 서버에 접근하여 AJAX 요청하여 결과를 가져갈 수 있도록 허용하겠다는 의미. 만약 보안 이슈가 있어서 특정 도메인만 허용해야 한다면 * 대신 특정 도메인만을 지정할 수 있음. 2. JSONP 이용 출처: 1. w3schools.com/js/js_json_jsonp.asp 2. https://velog.io/@tmmoond8/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C%EC%9E%90-%EC%9D%B8%ED%84%B0%EB%B..

티스토리툴바