What I studied

항상 로컬에 띄워놓고 코드를 바꿔가면서 테스트 하다가 사수가 개발자도구를 활용해 디버깅도 하고, CSS 수정도 하고 테스트도 하는 그런 모습을 보게된 것 같다. 아직 개발자 도구를 자유롭게 사용하지는 못하지만 확실히 잘 사용하면 프론트엔드 개발을 할 때 시간을 엄청 단축할 수 있을 것 같다는 생각이 들었다. 그래서 개발자 도구를 활용할 수 있는 방법을 정리해보려고 한다. 1. 개발자 도구 오픈 기본적으로 우리는 개발자도구를 열 때 F12 단축키를 많이 사용한다. 단축키를 사용하거나 마우스 오른쪽 버튼을 클릭해 검사 항목을 누르면 개발자도구가 열린다. 윈도우 맥 공통 F12 최근 탭 열기 Ctrl + Shift + I Cmd + Opt + I 요소 탭 열기 Ctrl + Shift + C Cmd + Opt ..

사이드 프로젝트나 어떤 프로젝트를 할 때, 사용자 정보를 입력 받아 백엔드 서버로 전송하는 부분은 항상 있었던 것 같은데 그 대표적인 예가 회원가입, 로그인일 것 같다. 이뿐만이 아니라 사용자 정보를 입력받아 처리가 필요한 부분이 있을 수 있는데 그 때, 평문으로 보내지는 사용자 정보를 암호화하여 백엔드로 전송해보려고 한다. 사용자 정보를 암호화하지 않고 평문으로 그대로 보낼 경우, 아래와 같이 개발자 도구의 네트워크 탭에서 해당 정보를 모두 확인할 수 있다. 해당 요청의 Payload 탭을 클릭하면 사용자 정보를 볼 수 있다. 클라이언트단에서 사용자 정보를 암호화해서 보낼 경우, 백엔드쪽에서도 이를 복호화하는 과정이 필요하기에 논의는 필요하다. 내가 클라이언트단에서 사용할 라이브러리는 CryptoJS라..

웹개발을 하다보면 자연스럽게 웹 접근성에 대해서 공부를 하게 되는데, 회사 프로젝트 중 장차법이 적용되어있지 않은 부분을 하나하나 찾아 적용했다. 처음에는 웹접근성, 웹표준을 생각하지 않고 개발했던 것 같은데, 이런 부분을 자세히 찾아보면서 적용하니 앞으로는 이런 부분도 놓치지 말아야겠다는 생각이 들었다. 웹 표준, 웹 접근성 등 이러한 용어에 대해서도 헷갈렸기에 다시한번 정리해보고자 한다. 1. 웹 표준 (Web Standards) 웹 표준이라는 것은 웹에서 사용되는 기술들을 표준화한 것을 의미한다. 즉, 웹사이트를 구성하는 HTML, CSS, Javascript 등의 언어들이 표준화된 방식으로 작성되어야한다는 것이다. W3C(World Wide Web Consortium)에서 권고하고 있으며, 사용자..

잠시 멈췄던 vue 프로젝트를 다시 진행하기 위해 프로젝트 구성 후, vue router에 대해 공부했다. vue router같은 경우에는 처음 vue 프로젝트를 구성할 때 추가하여 바로 사용할 수도 있지만 나는 기본적인 셋팅만 맞춰놓고, 라우터를 직접 설치했다. 라우터뿐만 아니라 피니아, 타입스크립트 등도 처음에 모두 설정 가능하지만 추후 하나씩 적용해보며 공부해보려고 한다. 1. Vue Router란? SPA, 싱글페이지 어플리케이션의 경우 기본적으로 html이 한개이기 때문에 우리가 기존 바닐라 자바스크립트로 만들었을때와 달리 html을 여러개 생성하는 구조가 아니다. 그래서 쉽게 말해 하나의 html안에서 router를 통해 화면을 바꿔준다고 생각하면 될 것 같다. 즉, route는 URL에 따라..

프론트엔드 개발자는 당연히 브라우저와 연결되어있을 수밖에 없는데 이번 스터디 주제는 브라우저 렌더링 과정에 대한 부분이었다. 예전에 취업을 준비하며 단순히 기술면접을 대비해 암기했던 기억이 있지만 이제는 단순 암기가 아닌 브라우저 렌더링 과정을 좀 더 자세하게 살펴보고 이해해보고자한다. 사용자가 브라우저 주소창에 주소를 입력하면 어떤 과정이 일어날까? 1. 브라우저의 기능 브라우저는 쉽게 말해 우리가 평소에 사용하는 인터넷이라고 생각하면 되는데 익스플로러, 파이어폭스, 사파리, 크롬, 오페라 이정도를 가장 많이 사용할 것이다. 나는 평소에 크롬을 주로 사용하는데 오픈소스 브라우저가 시장에서 상당 부분을 차지하고 있다. 브라우저는 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 기능을 수행하는데..

vue 코드를 보다보면 리액트와는 다르게 computed를 어렵지 않게 찾아볼 수 있는데 이건 언제 어떻게 사용하는지가 궁금했다. computed 속성은 템플릿의 데이터 표현을 좀 더 직관적이고 간결하게 도와주는 속성이라고 하는데 템플릿 내에 너무 많은 조건과 연산식을 넣으면 템플릿이 복잡해지고 유지보수가 어려워지기에 이를 사용한다고 한다. 1. computed 사용 예시 예를들면 아래의 코드처럼 데이터 연산식을 템플릿 코드에 그대로 넣는다고 생각해보자. 연산이 길어지면 길어질수록 복잡해지는 것을 알 수 있다. {{ data }} {{ data.split('').reverse().join('') }} 이렇게 한줄만 있을 경우에는 그나마 낫지만 동일한 계산식이 템플릿에 두번 이상 쓰일 수도 있기 때문에 반..

우리가 사용하는 사이트에서 데이터를 내려받기 전까지 화면이 멈춰있다면 사용자 입장에서는 데이터를 받아오고 있는지, 오류가 난건지 등을 파악하기 힘들다. 그렇기 때문에 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..

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

추후 백엔드에서 GraphQL API를 사용할지 REST API를 사용할지 아직 확정이 나지 않은 상태여서 각각의 차이에 대해 알아보고 Apollo Client 를 테스트하기 위해 간단하게 Apollo Server를 만들어보았다. Apollo Server에서 원하는 데이터를 받아오기 위해 서버를 만든 후, 임시 json 데이터를 넣어주었다. 1. 작업 폴더 생성 후 package.json setup 우선, sever만 따로 작업할 폴더를 만들어주었고, 이 안에서 npm을 사용할 수 있도록 기초적인 셋팅을 해주었다. # 폴더생성 및 package.json setting mkdir server cd server npm init -y 2. apollo-server, graphql, nodemon 설치 apol..