전체 글
-
[javascript] this bindingjavascript 2021. 1. 10. 16:46
🙇♂️ 서론 🙇♂️ 이 글은 개발한지 1년이 된 예비 주니어 개발자가 쓴 글로 오류가 있을 수 있습니다. 문제가 있거나 수정했으면 하는 부분은 댓글로 알려주시면 감사하겠습니다. this란? this는 이 메소드를 호출한 인스턴스를 가르킨다. this binding? javascript에서는 this binding이 다른 객체지향 언어와는 다르게 설정된다. 다른 언어들은 그 메소드를 호출한 인스턴스로 바로 잡히지만 javascript는 method로 호출하는지 혹은 함수로 실행하는지에 따라서 달라진다. 위를 보면 4가지 상황이 나오게 된다. 1. 전역 전역은 기본적으로 Window에 this가 바인딩 된다. node라면 Global에 된다. 2. 인스턴스 안에서 메소드 호출 인스턴스 안에 있는 메소드는..
-
[HTML] meta tag의 모든것html 2021. 1. 8. 11:53
what is meta tag? meta tag는 뭘까요? head tag 안에서 사용하는 link, base, style, title등으로는 표현할 수 없는 meta data를 설정하기 위한 tag입니다. meta data는 가장 단순한 정의는 데이터를 설명하는 데이터입니다. 예를 들어 HTML은 데이터입니다. 그리고 HTML의 head tag 안에는 문서 작성자나 문서 요약과 같이 문서를 설명하는 데이터, 즉 메타데이터를 넣을 수 있습니다. 출처 그리고 메타 태그에는 다음과 같은 데이터를 넣을 수 있습니다. 출처 name name에 값이 있으면 content도 값이 있습니다. name의 값에 맞는 content를 작성할 경우 적용되는 key:value 형식입니다. application-name: 웹 ..
-
[css] viewportcss 2021. 1. 6. 23:32
what is viewport? viewport는 브라우저에서 사용자에게 보이는 부분을 viewport라고 한다. 우리가 사용자의 경험을 증진시키기 위해서 신경써야 하는 부분 중 하나이다. 만약 사용자가 우리 웹사이트의 컨텐츠보다 작은 화면을 가지고 있다면, viewport보다 content가 더 크기 때문에, 스크롤하여 화면을 봐야 하는 불상사가 일어난다. 이럴 경우에는 사용자 입장에서 매우 불편하기 때문에 핸드폰이라면 viewport에 맞게 만드는게 좋다. viewport 이용하기 viewport를 이용해서 mobile 기기에 맞는 웹사이트를 제작할 수 있다. html tag중에 meta tag를 이용하면 된다. 그럼 meta tag는 뭘까요? head tag 안에서 사용하는 link, base, s..
-
what is webpackjavascript 2021. 1. 6. 09:39
🙇♂️ 서론 🙇♂️ 이 글은 개발한지 1년이 된 예비 주니어 개발자가 쓴 글로 오류가 있을 수 있습니다. 문제가 있거나 수정했으면 하는 부분은 댓글로 알려주시면 감사하겠습니다. what is webpack webpack은 javascript file들을 dependency에 따라서 파일을 모아 주는 번들러 입니다. why we use webpack? 그럼 우리는 왜 웹팩을 사용하는 것일까요? 이유는 단순합니다. 브라우저 입장에서 여러개의 파일을 다운받는 것은 매우 부담스럽고, 무겁습니다. 그래서 webpack은 엄청나게 많은 파일들을 적은 수의 파일로 묶어서 넘겨 주는 것입니다. webpack의 장점 webpack말고도 gulp나 다른 여러가지 번들링 툴들이 있는데 우리는 왜 굳이 webpack을 사..
-
표현식과 문javascript 2021. 1. 6. 09:30
🙇서론🙇 이 글은 벨로그를 보다가 자신의 근본이 부족하다고 생각하게 된 1년된 세미 개발자가 쓴 글로, 오류가 있다면 댓글이나 메일로 보내주시면 감사히 반영하겠습니다. 어디서 나온겨? javascript를 공부하다 보면 표현식과 문의 차이점을 물어볼 때가 가끔 있다. 필자도 글을 읽다가 javascript를 공부한다면 꼭 알아야 한다고 해서 공부하고 글을 남긴다. 나같은 우매한 자가 더 많아지지 않기를 바라면서 글을 쓴다 표현식 표현식은 값으로 평가될 수 있는 것들 을 말한다. 예를 들면 리터널들도 표현식이라고 할 수 있고, 값을 리턴하는 녀석들을 표현식이라고 할 수 있다. 표현식이 평가되면 값을 리턴하거나 참조한다. 문 프로그램을 구성하는 최소 단위이다. 구분법 간단하다 표현식만 가지고 있는 특별한..
-
axios intercepter를 이용한 error handlingjavascript 2021. 1. 5. 17:00
Error Handling? error handling은 언제 해야 할까요? 대체적으로 프론트엔드에서는 에러 핸들링을 해야 할때는, api server와 통신할 때 자주 해야 합니다. 프론트엔드 개발자라면, api server와 통신할 때, 특정 error에 대응해주어야 할 때, 코드 중복이 자주 발생하는 것을 느낀 적 있을 겁니다. (적어도 저는 그랬습니다.) 물론 요청마다 겹치지 않는 handling도 있지만, 401같은 token expired는 공통적인 error입니다. 그럼 저 401같은 에러는 한군데 묶어서 관리할 수 있지 않을까요? Axios Intercepter axios에는 request를 보내기 전이나 response를 받기 전에, 코드를 실행할 수 있습니다. axios intercep..
-
CSRF개발 2021. 1. 5. 15:29
서론 이 글은 웹 개발 1년차가 쓴 뉴비가 쓴 글이므로, 오류가 있을 수 있습니다. 오류가 있거나 고칠 부분이 있다면 댓글로 알려주세요. 학생 보안챙겨 ^^ 웹 개발을 하다보면 보안에 관심을 가지게 되는 경우가 있다. 요번에도 학교에서 중규모(?) 프로젝트를 하던 도중에 CSRF라는 것으로 해킹을 한다는 것을 듣게 되었다. 그래서 이 웹사이트에는 csrf를 처리해 보는것은 어떨까 해서 공부하게 되었다. what is csrf 개인적인 해석으로 csrf를 말하자면 서버 api에서 보안 취약점을 찾은 후에, 사용자가 의지와는 무관하게 서버 요청을 보내서 정보를 수정, 삭제하는 해킹기법 위키토피아에서는 이렇게 말한다 사용자가 자신의 의지와는 무관하게 공격자가 의도한 행위(수정, 삭제, 등록 등)를 특정 웹사이..
-
npm install과 버전문제javascript 2021. 1. 4. 17:20
npm install npm install은 package.json에 있는 dependency가 있는 library들을 다운받는 명령어 이다. package.json은 dependency version을 ^를 이용하여 다운로드 한다. 이 때, ^는 어떤 방식으로 구동될까? 다음과 같이, ^1.1.0으로 표기되어 있을 경우에 1.1.0에서 2.0.0의 범위를 가지고 있다고 내포하고 있다. 하지만 0.0.x부터는 miner version을 범위로 치기때문에, 2번째 범위인 ^0.0.1이면 0.0.1