본문 바로가기

전체 아티클73

This의 여러 쓰임새 단독으로 쓴 this 기본적으로 this를 호출하는 경우엔 global object를 가리킨다. 브라우저에서 호출하는 경우 [object Window]가 된다. 이는 ES5에서 추가된 strict mode(엄격 모드)에서도 마찬가지이다. 'use strict'; var x = this; console.log(x); // Window 함수 안에서 쓴 this 함수 안에서 this는 함수의 주인에게 바인딩된다. 함수의 주인은 window가 된다. function thisTest() { return this; } console.log(thisTest()); // Window var num = 0; function addNum() { this.num = 100; num++; console.log(num); //.. 2023. 2. 20.
자바스크립트 new Date 객체의 크로스 브라우징 문제 문제 발생 어플라이 프로젝트를 만들면서 아래와 같이 코드를 작성해주고, currentTime에 따른 변수가 startTime과 endTime 안에 속할 때 열리는 페이지를 구상을 했다. ("YY:MM:DD HH:mm:ss") 다음과 같은 날짜 양식을 지정을 해주었고, 이 양식은 Edge, Opera, Firefox, Chrome 브라우저에서는 동작을 잘 하지만, IOS(Safari)의 경우 NaN을 나타내고 있었다. 문제 해결 Media Query를 통해 모바일 해상도의 접근을 막아놓긴 했지만, Safari로 접속을 하는 태블릿의 경우는 이 문제점을 발견할 수 있다. 그래서, ("YY-MM-DD HH:mm:ss") 와 같이 시간 규격을 변경해주거나 아래와 같은 표준 방식으로 변경을 해주어야한다. let .. 2023. 2. 17.
TypeScript useRef "Object is possibly null" error? 문제 발생 프로젝트에서 TypeScript 환경에서 useRef를 활용할 일이 있었는데, 해당 DOM 객체의 타입을 명시해주었음에도 불구하고 에러가 발생 문제 해결 const linkRef = useRef(null); // useRef 지정 if (linkRef.current !== null) { // null 값 체크 linkRef.current.focus(); } useRef를 통해 지정을 해주고, null 값을 체크해주면서 해결을 할 수 있다. const myRef = useRef(null); // useRef 지정 myRef.current?.focus(); // ES2020의 optional chain을 통해 다음과 같이 지정도 가능하다. ES2020의 optional chaing을 통해 위와 같.. 2023. 2. 17.
Axios Header에 Access Token을 넘기는 방법은? 서론 토이프로젝트에서 Axios 통신을 사용해 Header 부분에 Access Token을 넘겨야하는 상황이 발생했다. 오늘 포스팅에서는 Axios 통신에서 Access Token을 넘기는 방법에 대해 포스팅을 해보려고 한다. 프론트 단에서 백엔드로 어떻게 데이터를 넘길까? Access Token을 header Authorization에 넣어서 * Bearer과 Token을 합쳐 보내줘야 데이터를 가져올 수 있다. 프론트 단에서 header Authorization에 넣어 백엔드로 넘기면, 백엔드에서는 Access Token을 대조하여 걸맞는 정보를 다시 넘겨준다. * Bearer 이란? 정보의 신호 전달을 네트워크 단에서 손실 없이 있는 그대로 전달하는 서비스를 말한다. 베어러 서비스가 종합 정보 통신.. 2023. 1. 7.
요즘 많이 사용하는 JWT는 뭘까? 서론 요즘 웹 개발을 하면서 JWT 라는 기술이 되게 많이 사용된다. 로그인 기능을 구현하면서, 자연스레 프론트 개발을 접하며 백엔드와의 소통시 JWT에 대한 개념이 자주 나오곤하는데, 오늘 포스팅에서는 JWT에 대해서 다뤄볼 예정이다. JWT(JSON Web Token)가 뭘까? JWT는 JSON Web Token의 약자로, 인증에 필요한 정보들을 암호화시킨 Json 형태의 토큰이다. 웹에서 서버에서 클라이언트의 인증 방식으로 토큰 방식 외에 세션과 쿠키 인증 방식이 있지만, 세션과 쿠키 방식을 지원하지 않는 앱 같은 경우에는 이러한 토큰 방식은 필연적이라고 말할 수 있다. JWT를 통한 인증 방식은 JWT 토큰(Access Token)을 HTTP 헤더에 실어 서버가 클라이언트를 식별하는 방식이다. J.. 2023. 1. 5.
프론트엔드 실무 면접 준비해보기 https://xiubindev.tistory.com/119 (출처) 실제로 받은 프론트엔드 개발자 면접 질문 모음 첫 번째 직장에는 운 좋게 바로 들어가서 일을 시작했기 때문에, 제대로 취업 준비를 해본 경험이 없었다. 그래서 이번에 다시 프론트엔드 개발자로 취업 준비를 하면서 코딩 테스트 공부도 하 xiubindev.tistory.com CS ⭐️ 브라우저 주소창에 www.google.com을 입력하면 어떤 일이 일어나나요? DNS에 대해 설명해주세요. ⭐️ GET과 POST의 차이는 무엇인가요? REST API에 대해 설명해주세요. ⭐️ 객체 지향 프로그래밍이란 무엇인가요? 자료구조 stack과 queue에 대해 설명해주세요. ⭐️ 프로세스와 스레드에 대해 설명해주세요. JavaScript ⭐️ P.. 2023. 1. 2.