분류 전체보기28 Typescript만으로 SPA 라우터 만들기 (라이브러리 x) 이 글에서는 다른 라이브러리 없이 typescript를 이용하여 SPA 라우터를 만드는 것을 다룹니다. 시작 전에 SPA가 무엇인가? SPA는 하나의 페이지를 동적으로 바꾸어가는 어플리케이션이다. 하지만 같은 url이면 사용자들끼리 링크를 공유했을 때 모두가 다른 화면을 볼 것이다. 그래서 url은 달라지지만 다시 get요청을 받는 것이 아닌 같은 index.html에 DOM을 동적으로 바꿔주는 라우터가 필요하다. 그래서 SPA에서 라우터는 무엇을 해결하는가? SPA에서는 페이지 이동 시 Dom을 다시 그려주어야한다. MPA: 새로운 html SPA: 같은 html 내부를 갈아끼우기 페이지 바뀜을 의도한 이벤트를 인식해야한다. 그러면 라우터의 역할은 무엇인가? 라우터의 역할은 정하기 나름일 것 같지만 내.. 2022. 9. 30. 클로저 (부제: 결국은 스코프) 클로저는 아무도 듣는 사람 없이 쓰러진 숲 속의 나무와 같다. - You Don't Know JS(카일 심슨) JS 코드 얘기를 할 때 제일 헷갈리는 얘기 중 하나가 클로저였다. 클로저를 공부하다보니 결국 내가 필요한 건 클로저의 정의를 이해하고 어떤 상황을 클로저라고 말하는 지 인지하는 거였다. 공부하며 얻게 된 인사이트를 공유하고 싶어 글을 적는다. You Don't Know JS에 적힌 클로저의 정의는 함수가 속한 렉시컬 스코프를 기억하여 함수가 렉시컬 스코프 밖에서 실행될 때에도 이 스코프에 접근할 수 있게 하는 기능 정의를 이해하기 위해 렉시컬 스코프를 알아야한다. 렉시컬 스코프가 렉시컬 스코프인 이유 컴파일러 이론에서 배우는 렉서 가 키워드다. 자바스크립트가 동작할 때 엔진, 컴파일러, 스코프.. 2022. 9. 23. 3d Carousel 구현하기 아래 gif처럼 원근감이 느껴지는 캐루셀을 만들기 위해서는 크기를 다르게 하는 방법도 있겠지만 css에 transform-style: preserve-3d; 를 이용하여 전체 이미지 리스트를 3d로 바꿔줄 수 있다. 그리고 이제 js를 활용하여 버튼 클릭 이벤트 시 회전할 수 있게 해준다. 일단 prev버튼을 클릭할 시 생기는 이벤트를 정리해주면 center에 있는 이미지와 왼쪽 이미지를 특정한다. 왼쪽에 있는 이미지를 가운데에 보내주고 가운데에 있는 이미지는 오른쪽으로 보내준다. 그에 맞게 다른 이미지들도 한칸씩 원주를 따라 돌려준다. 또 next버튼을 클릭할 시 생기는 이벤트를 정리해주면 center에 있는 이미지와 오른 이미지를 특정한다. 오른에 있는 이미지를 가운데에 보내주고 가운데에 있는 이미지.. 2022. 8. 25. 부스트캠프 멤버십 합격 후기 (feat: 챌린지 수료) 챌린지 과정 후기 처음에 챌린지를 합격하고 나서 챌린지에서 내가 성장해야할 부분은 크게 세가지라고 정리하고 시작했다. 첫번째는 CS지식, 두번째는 JS를 다루는 실력, 마지막은 태도이다. 일단 CS지식은 뭘 모르는 지도 몰랐던 상태에서 챌린지 과정을 진행하며 무엇을 위주로 어떻게 공부해야하는 지 아는 상태가 됐다. JS를 다루는 실력은 자료구조를 만들거나 내장 자료구조를 이용하여 효율적인 자료구조로 데이터를 관리하는 능력이 늘었고, 동기와 비동기를 다루는 기술들이 늘었다. 태도적인 측면에서는 딱 두가지를 연습했는데 첫번째는 다하지 못했으면 될때까지 할 것, 두번째는 다했으면 조금만 더 해볼 것이었다. 이 두가지를 바탕화면에 적어두고 쉬고 싶을 때마다 봤었는데 이를 지켜내며 끈기나 근성같은 부분에서 성장한.. 2022. 8. 24. JWT를 이용한 사용자 정보 SSR (next.js와 redux-saga 사용) 이 글은 직접 프로젝트에서 적용한 react와 next를 사용한 프로젝트에서 jwt를 이용하여 사용자 정보를 서버사이드 렌더링 하는 것을 다룬다. 대게 웹에서 jwt를 다룰 때 로컬스토리지나 세션 스토리지를 사용하곤 한다. 하지만 ssr을 이용하게 되면 프론트 서버는 로컬스토리지가 없어 사용자의 정보를 가져올 수가 없다. 그렇기에 나의 경우는 쿠키로부터 토큰을 관리하는 방식을 사용했다. 토큰을 관리하는 과정을 정리하면 로그인하면 액세스 토큰과 리프레쉬 토큰을 받는다. 쿠키와 리덕스에 두 토큰을 넣어놓는다. 헤더에 액세스 토큰을 붙여놓는다. 새로고침 시 프론트 서버에 있는 쿠키를 바탕으로 내 정보를 불러온다. 리덕스 사가를 이용한 로그인 코드이다 function* logIn(action) { try { c.. 2022. 8. 7. .git 내부를 살펴보자 .git을 까보자 모던 자바스크립트 튜토리얼의 .git을 까보았는데 이런 구조로 생겼다. objects 내부 object 내부에 이런식의 폴더들이 있는데 이는 각각의 커밋마다 생기는 폴더들이고 폴더의 이름은 커밋해시값의 앞2자리일것이다. 원래 git은 sha-1을 사용하였지만 현재 git은 SHA256으로 해시를 만든다고 한다. (아직 완전히 바뀌지 않았을 수도 있다.) Object는 3가지를 담고 그 3가지는 blob, tree, commit이다. Blob Blob은 다양한 파일의 데이터를 압축해서 저장한다. 파일명이나 식별자등은 관심없이 파일 내부 데이터만 담긴다. Tree git이 폴더구조를 관리하도록 하는 것이 tree 파일이고 Blob에는 실제 파일의 데이터들만 담기지만 Tree는 구조를 담기 .. 2022. 8. 5. 이전 1 2 3 4 5 다음
