차마시는 개발자

SPA(Single Page Application) 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것(reloading X) history api Page를 이동할때 마다 url을 쌓아서 Page의 뒤로가기, 앞으로가기, 지정한 위치고 가기 사용가능한 history => api를 이용해 주소를 인위적으로 바꾸고, 서버로 페이지 전체를 요청하는 게 아니라 history.state에 담아둔 정보로 ajax 요청을 보내 화면을 갱신하는 것 history.pushState() 화면 이동없이 url만 바뀌면서 history에 새로운 url쌓는다. => 앞,뒤로가기 가능 history.replaceState() history.pushState()와 다르게 history를 쌓지 않..

Hoisting 함수 내에 있는 선언들을 모두 끌어올려 사용 var 변수 선언, 함수 선언문만 해당 설명 기본적인 Hoisting 선언 부분만 맨 위로 올라가서 수행됩니다. //hoisting //var b; undefined로 3은 hoisting 되지 않는다. //function a(){ console.log('a');}; a(); function a() { console.log('a'); }; console.log(b); var b = 3; 함수 Hoisting 주의 1. 함수 표현식은 Hoisting 안된다. 2. 함수와 변수 선언문 중에 함수 선언문이 먼저다. //1. fun(); var fun = function() {}; //2. fun(); var fun = function(){}; //s..

이번 과제를 하면서 js의 실행 순서, callback 함수 등을 익히게 되었습니다. javaScript는 어떻게 작동하는가 여기서 많이 익히게 되었습니다. (링크 눌러서 꼭 보면 좋습니다. ) 저도 수시로 완벽히 이해하도록 보려고 합니다. 다른 것들은 전의 것들과 비슷해서 조금 더 발전 시키고 있습니다. :) setTimeout 설정 setTimeout을 사용할 때 위의 링크(javaScript는 어떻게 작동하는가)를 보면 해당 함수는 Web APIs에 이동 -> Callback Queue -> Call Stack에 함수가 없어진 후 ->> Call Stack이동 하여 함수 진행 하기 때문에 이런 관계를 잘 파악해야 합니다. 그래서 전체를 묶어 서 함수를 짜게 되었습니다. 구조체 function Car..

VSCode에서 index.html(경로: /woocourse-alone/5_cypressBasic)을 Live server을 할 때 visit()에 url을 써주는 것이 헷갈렸다 그냥http://localhost:5500만 해주면 되는지 알았는데 아니다 => visit내부 url은 VSCode live Server로 실행하는 파일(index.html) 경로를 넣어줘야 한다. descirbe("Home", () => { beforeEach(() => { cy.visit("http://localhost:5500/woocourse-alone/5_cypressBasic/"); }) }) > cy.visit() 만 확인하지 말자 위의 코드와 같이만 작성해서 visit()이 잘 연결되었는지 확인하면 다음과 같이 ..

우아한 테크 코스를 하면서 VSCode에서 Live Server을 같이 실행을 했는데 다음과 같은 오류가 생성되었습니다. 그래서 다음과 같이 해결하였습니다. 응답을 받기 전에 메시지 포트가 닫혔습니다. => 구글 확장 프로그램과 충돌하는 증상입니다. 크롬확장 사이트 로 가서 하나씩 하나씩 꺼보면 됩니다.

ESlint ESLint - Pluggable JavaScript linter Customize Preprocess code, use custom parsers, and write your own rules that work alongside ESLint's built-in rules. You can customize ESLint to work exactly the way you need it for your project. eslint.org 소스코드를 분석해서 문법 에러, 버그를 찾고 보고해주는 도구 ES6, React를 완벽하게 지원합니다. 초기구성 필요 / 조금 느리다 Prettier Prettier · Opinionated Code Formatter Opinionated Code Formatte..

undefined, null을 이 있을 때 매번 if문을 사용하는 것이 참 불편했습니다. 그래서 찾아보게 되었습니다. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining 설명 함수 호출과 함께 사용할 때 undefined주어진 함수가 존재하지 않으면 반환 합니다. null이나 undefined인 값이 반환되면 즉시 중단하고 undefined를 return 한다. => null, undefined 파악 ex function a(api) { const { data } if (data) { return data.person.name; } return null; } function a(api) {..

> Array.from() & Object.assign() 배열, 객체 복제하는 방법 (주소 다릅니다.) //Array.from() var a = [1, 2]; var b = Array.from(a); //Object.assign() var a = {a: 'a'}; var b = Object.assign{{b: 'b'}, a}; // {b: 'b'} 객체에 a를 추가 하는 것(주소 다르다) b => {b: 'b'} + {a: 'a'} => {b: 'b', a: 'a'} > push() & concat() push()는 같은 주소에서 변경시킵니다. concat()은 복제본(주소 다른)것을 만들어 변경시킵니다. //push() var a = [1, 2]; a.push(3); console.log(a); //..