What I studied

우리가 사용하는 사이트에서 데이터를 내려받기 전까지 화면이 멈춰있다면 사용자 입장에서는 데이터를 받아오고 있는지, 오류가 난건지 등을 파악하기 힘들다. 그렇기 때문에 UX적인 부분을 고려하여 사용자에게 로딩중이라는 것을 나타내주는 것이 좋다. 그래서 많이 사용하는 것이 스피너를 활용한 로딩화면이다. 요즘은 스켈레톤도 많이 사용하는 것 같다. 리액트에서 로딩화면을 만들어줄 수 있는 방법엔 여러가지가 있는데 Gif 파일을 활용하는 방법과 React-spinners를 사용하는 두가지 방법을 알아보려고 한다. 먼저 gif 파일로 간단하게 만들어보자. 1. 리액트 로딩화면 gif 버전 먼저 Loading.jsx 컴포넌트를 생성한 후, 스피너를 다운로드하러 간다. // Loading01.jsx import Reac..

요즘은 소셜로그인이 거의 필수인 것 같은데 카카오톡, 구글, 네이버, 페이스북, 애플 등 다양한 곳에서 소셜로그인 API를 제공하고 있다. 오늘은 그 중에서 네아로를 시도해보려고 한다. 어디까지나 프론트엔드 부분까지이니 리액트로 네이버 소셜로그인을 구현하고자 한다면 한번 참고해보면 좋을 것 같다. (코드는 엄청 짧다! 마지막에!) 1. 네이버 로그인 시작 전 준비 먼저 네이버 로그인 API를 사용하려면 네이버 개발자 센터에 접속하여 애플리케이션을 생성해주어야한다. 이 부분은 카카오톡 애플리케이션 생성과 다를게 없는데 애플리케이션을 등록해야 Client ID를 발급받을 수 있다. Callback URL을 등록했고, Client ID를 발급받았다면 준비 완료! Callback URL을 지정할 것 Client..

1. String.length 자바스크립트 String 객체는 원시 타입인 문자열을 다룰 때 유용한 프로퍼티와 메소드를 제공하는 객체이다. String 객체는 String 생성자 함수를 통해 생성할 수 있으며, 이 때, 전달된 인자는 모두 문자열로 반환된다. name이라는 변수에 String 객체를 할당하고 각각을 콘솔에 찍어보면 다음과 같이 나온다. 이 때, String.length를 이용하여 콘솔에 찍어보면 3을 반환하는 것을 알 수 있다. let name = new String('Lia'); console.log(name) // String {'Lia'} console.log(name.length); // 3 문자열 내의 문자 갯수를 반환하는 것으로, String 객체는 length 프로퍼티를 소유..

개발을 하다보면 만든 제품이 정상적으로 작동하는지를 테스트해봐야한다. 사용자들이 직접 사용하기 전에 개발 단계에서 테스트를 진행하고, 어떤 부분에서 어떠한 에러가 나는지 찾아내는 것이 중요했던 것 같다. 물론, QA를 진행하는 분들이 따로 계시지만 내가 직접 테스트를 하게 되면 QA분들이 확인할 수 없는 부분까지 테스트할 수 있다는 것이 장점인 것 같은데 이번에 정보처리기사를 공부하며 들어봤던 테스트들 중 블랙박스 테스트와 화이트박스 테스트에 대해 다시 한번 듣게 되면서 두가지의 차이를 명확하게 짚어보고자 한다. 1. 블랙박스 테스트란? 블랙박스 테스트는 인터페이스로 소프트웨어를 테스트하는 방식으로 기능이 제대로 동작하는가를 검증하는 방식이라고 생각하면 될 것 같다. 그렇기 때문에 자료구조, 외부데이터 ..

1. 배열이란? 배열은 여러 개의 값을 순차적으로 나열한 자료구조이며, 자바스크립트는 배열을 다루기 위한 유용한 메서드를 다수 제공한다. 원시값은 물론 객체, 함수, 배열 등 모든 값은 배열의 요소가 될 수 있다. 자바스크립트에 배열이라는 타입은 따로 존재하지 않으며, 배열은 객체 타입으로 일반 객체와 구별되는 독특한 특징을 가지고 있다. 구분 객체 배열 구조 프로퍼티 키와 프로퍼티 값 인덱스와 요소 값의 참조 프로퍼티 키 인덱스 값의 순서 X O length 프로퍼티 X O 배열이 일반 객체와 구분되는 가장 명확한 차이는 값의 순서와 length 프로퍼티인데, 인덱스로 표현되는 값의 순서와 length 프로퍼티를 갖는 배열은 반복문을 통해 순차적으로 값에 접근하기 적합한 자료구조이다. 배열은 인덱스, ..

1. 함수의 구분 자바스크립트 ES6 이전의 함수는 동일한 함수라도 다양한 형태로 호출할 수 있었다. ES6 이전의 모든 함수는 일반 함수로서 호출할 수 있는 것은 물론이고 생성자 함수로서 호출도 가능했다. 즉, ES6 이전의 모든 함수는 callable이면서 constructor인 것이다. 이는 혼란을 줄 수 있고 에러를 발생시킬 가능성도 있기 때문에 성능 측면에서 좋지 않은 영향을 끼친다고 하는데 그래서 ES6에서부터는 함수를 사용 목적에 따라 일반함수, 메서드, 화살표 함수로 명확히 구분했다. ES6 함수의 구분 constructor prototype super arguments 일반 함수 O O X O 메서드 X X O O 화살표 함수 X X X X * callable : 호출할 수 있는 함수 객..

vue로 개발을 하기 위해 공부하다보니 @, $, : 등 알 수 없는 기호들때문에 머리가 아팠다. 도데체 뭘 의미하는걸까... 리액트와 바닐라자바스크립트로 개발을 하다가 vue를 사용하려니 쉽다고는 하지만 그래도 처음이라 헷갈린다. 그래서 하나씩 찾아서 정리해보려고 한다. 1. $ (dollar) 의미 MOVIE.WEB Search Movie About 가끔 보면 와 같이 this.$emit, this.$router.push() 등의 코드를 볼 수 있는데 이 때까지만해도 $가 어떤걸 의미하는지 모르고 썼던 것 같다. vue에서 router 하는 법을 검색했다가 다들 저렇게 쓰길래 썼던 건데 이제는 정확히 알고 써야 활용할 수 있을 것 같다. $ 는 vue의 전역객체 속성을 의미하는데 private하게 사..

바닐라자바스크립트로 개발을 하다보면 append 또는 appendChild 메서드를 통해 부모 노두에 자식 노드를 추가하여 데이터를 보여줘야하는 경우가 필수적으로 생긴다. 처음에는 appendChild를 이용해 부모 노드에 각각의 자식노드를 개별적으로 추가를 해줬는데 한번에 모두 추가하는 방법이 없을까를 찾아보다가 append 메서드를 알게 되었다. 1. append vs appendChild 두 메서드는 부모 노드에 자식 노드를 추가한다는 점에서 동일한 특징을 갖지만 몇가지 차이점은 존재한다. 그 중에서 가장 대표적인 것이 자식 노드를 한번에 하나씩 추가하느냐, 여러개를 한번에 추가하느냐인 것 같다. 1) appendChild appendChild는 DOM 메서드이기 때문에 생성되어 있는 요소만 추가 ..

Strict mode는 자바스크립트 언어의 문법을 보다 더 엄격하게 적용하여 기존에는 무시되던 오류 발생 요소나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킨다. 평소 ESLint와 같은 도구를 사용했었는데 이와 비슷한 기능을 하는 것이라고 볼 수 있는 것 같다. 오류를 줄여 안정적인 코드를 생산하기 위해, 잠재적으로 오류를 발생시킬 수 있는 요소들을 제거하고 이를 타이트하게 관리하는 개발환경을 만들어준다고 보면 될 것 같은데 지금까지는 써본적이 없는 것 같다? ESLint를 사용하면 코딩 컨벤션을 파일 안에서 정리하여 보다 더 간편하게 적용할 수 있기에 많은 사람들이 아마 ESLint를 사용하고 있을 것이다. 그래도 Strict mode라는 것도 있다고 ..