What I studied

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

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

프론트엔드와 백엔드가 협업을 하다보면 CORS 에러를 정말 많이 만나게 되는 것 같다.프론트엔드에서 백엔드 서버로 api 요청을 보낼 때 흔히 볼 수 있는 에러이다. CORS는 Cross Origin Resource Sharing의 약자로 한국어로 직역하면 교차 출처 리소스 공유라고 할 수 있는데 CORS가 무엇인지부터 다시 리마인드해보려고 한다. 1. Origin 이란? 보통 우리가 사용하는 주소와 같은 URL은 마치 하나의 문자열같이 보여도, 여러개의 구성요소로 구성되어있다는게 사실이다. 아래의 그림과 같은 주소가 있다고 가정해보면 5가지 정도의 구성요소가 모여있다는 것을 확인해볼 수 있다. CORS에서의 Origin, 즉 출처라는 것은 Protocol과 Host + 포트번호를 합친 것을 의미하는데,..

프로젝트를 서버에 올리고, 수정하고, 내리고 하는 등의 과정을 반복하게 되면서 서버에 접속하는 방법에 대해서 정리해보려고 한다. 간단하지만 내가 까먹지 않기 위해 정리하는 것. 1) Ubuntu 터미널에서 접속하는 방법 터미널에서 접속하는 방법도 간단하다. 우분투 터미널에 접속하여 아래와 같이 입력하면 된다. $ ssh -p 포트번호 계정@ip주소 $ ssh -p 22 hello@111.1.1.11 포트번호와 계정, ip주소를 입력하고 나면 아래와 같이 비밀번호를 입력하라고 뜬다. hello@111.11.1.111's password: -> 해당 부분에 비밀번호를 입력해주면 되는데, 비밀번호는 입력해도 보이지 않는게 정상이다. 비밀번호까지 입력이 완료되면 서버에 접속된다. $ ssh -p 22 hello..

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

이벤트는 말 그대로 어떠한 사건을 의미하는데 사용자가 어떤 버튼을 클릭하거나 검색창에 글자를 입력했을 때 발생하고, 이벤트가 발생하면 누군가는 이를 감지하고 처리해줘야한다. 실제로 사용자가 어떤 홈페이지에 들어가서 버튼을 클릭하거나 한다면 브라우저가 이벤트를 감지해 이벤트 발생시 통지해준다. 이 과정을 통해 사용자와 웹페이지가 상호작용이 가능하다는 것을 알 수 있는 것이다. 보이는 것과 같이 버튼을 클릭했을 때, 이벤트가 발생하며 이벤트가 발생함과 동시에 함수가 실행된다. 이러한 함수를 이벤트 핸들러라고 하며 이벤트에 대응하는 방법이라고 할 수 있다. 클릭 1. 이벤트 루프와 동시성 자바스크립트는 싱글쓰레드 언어라고 알려져있는데 여기서 싱글쓰레드라는 것은 쓰레드가 하나뿐이라는 뜻이며 즉, 하나의 작업만을..

요즘 회사 코드에 있는 웹팩 동작 방식이 궁금해 웹팩을 공부하고 있다. 자주 사용하는 loader를 먼저 하나씩 공부해보고 있었는데 css-loader, style-loader를 실행하는데까지는 문제가 없었다. 강의에서는 웹팩 4를 사용하고 있는데 나는 그래도 최근에 나온 것으로 해보고 싶어 5를 사용하며, 하나씩 맞춰나가는 중이다. 역시 강의대로 따라하니 file-loader와 url-loader가 적용이 안된다 ㅎ css 파일에 있는 백그라운드 이미지를 웹팩으로 빌드해서 index.html에 보여주는 구조였다. (app.css, app.js, index.html) 결과적으로 index.html에서 번들링 된 자바스크립트 파일을 불러오는데 그 안에 css가 포함되어있는 구조인 것이다. // app.cs..

잠시 멈췄던 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('') }} 이렇게 한줄만 있을 경우에는 그나마 낫지만 동일한 계산식이 템플릿에 두번 이상 쓰일 수도 있기 때문에 반..