profile
상상을 현실로 꺼내길 좋아하는 프론트엔드 개발자입니다.
post-thumbnail

CSR 앱에서 SSR + CSR 환경으로 이주하기

❗ CSR에 SSR을 적용하는데 어려움을 겪는 분들을 위해 작성했습니다. 혹시 틀린 부분이 있다면 말씀해주세요!❗ SSR과 refresh token에 대한 사전 지식이 있으면 글을 이해하기 조금 더 편합니다.❗ 웹서버와 WAS가 무엇인지 궁금하다면 여기를 참고해주세요!

3일 전
·
0개의 댓글
post-thumbnail

이벤트 루프, 넌 누구냐

최근 requestAnimationFrame(이하 rAF)과 setTimeout을 공부하면서 브라우저의 싱글 스레드 동작이 정확히 어떻게 이루어지는지 잘 모른다는 생각이 들었다.이번 기회에 이벤트 루프의 동작을 공부하고 추가로 rAF와 setTimeout의 차이점까지

2021년 9월 12일
·
0개의 댓글
post-thumbnail

리액트에서의 에러 처리

🔥 아직 고민할 점이 많은 문제입니다. 다양한 의견 남겨주세요🔥 에러 처리에 대해서 개인적인 생각들을 담았습니다.이전부터 프론트 개발을 하면서 계속 고민했던 부분이다.팀 프로젝트를 할 때 명확한 기준없이 에러 처리를 해왔었는데 에러 처리 코드가 일관성이 떨어졌을 뿐

2021년 8월 22일
·
0개의 댓글
post-thumbnail

사용자 경험 개선 2편 - react concurrent mode

❗ react suspense에 대한 이해가 필요한 글입니다. 사용자 경험 개선 1편을 참고해주세요.자바스크립트가 싱글 스레드 언어라는 것을 들어본 적이 있을 것이다.이는 자바스크립트가 하나의 작업을 수행할 때 다른 작업을 동시에 수행할 수 없음을 의미한다. 리액트도

2021년 8월 17일
·
0개의 댓글
post-thumbnail

사용자 경험 개선 1편 - react suspense

🎈 본문에 등장하는 문제에 대한 예시는 suspense를 사용하지 않고도 해결할 수 있습니다.하지만 앱이 커지고 복잡해짐에 따라 각 문제를 어떻게 선언적으로 손쉽게 해결할 수 있느냐에 대한 관점으로 봐주시길 바랍니다.🎈 2021.07.11 기준 시험적인 기능입니다.

2021년 7월 11일
·
1개의 댓글
post-thumbnail

객체 지향 프로그래밍이란 무엇인가

프로그램을 단순히 코드의 나열로만 봤던 시각을 벗어나프로그램을 객체 라는 기본 단위로 나누고 객체들 간의 상호 작용으로 문제를 해결하는 방식독립성이 높은 객체들을 작은 단위부터 만들고, 그 작은 단위들을 재사용해가며 더 큰 객체들을만드는 방식으로, 상향식(Bottom-

2021년 6월 17일
·
0개의 댓글
post-thumbnail

JWT는 어디에 저장해야할까? - localStorage vs cookie

이번에 지하철 미션을 만들면서 JWT를 클래스 property에 저장했었는데 리뷰어 분께 해당 부분을 피드백 받으면서 어디에 JWT를 저장하는 것이 좋을까 에 대해 고민해보게 되었다. 0. 기본 지식 JWT Json Web Token의 약자로 모바일이나 웹의 사용자

2021년 4월 6일
·
16개의 댓글
post-thumbnail

웹은 어떻게 동작할까? - 1. 사용자가 웹페이지를 보기까지

이번에 SPA(Single Page Aplication)을 공부하면서 내가 웹 페이지의 동작 원리에 대해서 제대로 모르고 있다는 생각이 많이 들어 한번 총 정리를 해보려 한다. 오해하고 있던 부분 클라이언트는 서버로부터 html 파일만 가져온다? 이 생각은 잘못된

2021년 3월 23일
·
17개의 댓글
post-thumbnail

파일명 대소문자 인식에 대한 고민

파일명을 파스칼 케이스로 쓰고 있다가파일명 대소문자 인식(case sensitive) 관련 문제로 webpack --watch 가 동작하지 않는 상황에 직면해서 3시간을 날린 나를 위한 글이다.. 😥내가 쓰는 window 10의 파일 시스템은 NTFS 방식이다.NTF

2021년 3월 14일
·
0개의 댓글

구현방법에 대한 고민 function vs class vs mixin

최근 페어프로그래밍 하면서 웹 하나를 mvc구조로 만들게 되었다.페어와 논의 끝에 mvc 중 model을 제외한 view와 controller를export function으로 구현하기로 하였는데function 방식의 크나큰 단점을 직접 느끼고 배운 것이 많아 글을 작성

2021년 3월 11일
·
0개의 댓글

AJAX & JSON

AsynchronousJavaScriptAndXML비동기 데이터 통신을 위해 개발된 js 기술.HTML, XML, JSON 등 다양한 데이터를 주고 받을 수 있다.하지만 JSON만 통신에 사용하는 이유가 뭘까.먼저 JSON은 웹에서의 통신으로 주고받는 거의 모든 데이터

2021년 3월 11일
·
0개의 댓글
post-thumbnail

프론트엔드에서 API Key를 숨기는 법

이전에 여기에서 웹팩과 dotenv 패키지를 통해 api key를 숨길 수 있다고 포스팅한 적이 있는데, 사실 그게 아니었다. 어차피 AJAX 방식으로 보내는 거라 개발자 도구에서 정보가 줄줄 새고 있었던.... 지금이야 토이프로젝트 개념으로 개발하는 것이라 유출되어

2021년 3월 8일
·
2개의 댓글
post-thumbnail

스크롤을 내리면 새로운 컨텐츠 불러오기(lazy loading)

youtube api를 이용해서 유튜브 검색 결과를AJAX를 통해 받는 작업을 하고 있다.그런데 검색 결과를 한번에 엄청나게 가져온다면 웹에 크나큰 부담이될 것이고 그렇게 할 필요도 없다.초기에 10개의 검색결과만 불러오고 스크롤을 아래로 끝까지 내리면새로운 10개를

2021년 3월 4일
·
2개의 댓글
post-thumbnail

css grid

grid는 flex와 비교해flex는 col이나 row 중 하나를 주요 축으로 하여 구성하는 방식이라면grid는 좀 더 복잡한 2차원 레이아웃을 구성할 수 있는 시스템이다.백번 듣는 것보다 직접 보는 게 훨씬 좋다.직접 해보자.위와 같은 레이아웃을 그리드로 구현한 cs

2021년 3월 4일
·
0개의 댓글

webpack, loader

요즘 youtube 검색 api를 사용해서 웹을 제작하고 있다.그런데 문제가 api key를 숨겨서 git에 배포해야하는데어떻게 숨길 것인가에 대해서 고민이 됐다.대략 방법은 2가지로 생각을 했는데1\. webpack을 이용해 nodeJs의 환경변수를 설정해주는 dot

2021년 3월 3일
·
0개의 댓글

css flex

기존 css에서 불가능하거나 굉장히 어렵게 구현했던 것들을 좀 더 쉽게 구현 할 수 있도록 css3에서 추가된 레이아웃 방식.flex는 자식 요소에게만 적용된다. 후손은 적용되지 않음flex의 방향에 따라 100%의 기준이 달라짐 \- ex flex-directio

2021년 3월 1일
·
0개의 댓글

html semantic tag 공부

@ 공부하다가 자주 까먹는 semantic tag를 정리하기 위한 공간입니다 😊(작성중)

2021년 3월 1일
·
0개의 댓글

html attribute 공부

@ 공부하면서 자꾸 까먹는 attribute들을 위한 공간입니다 😊tab키를 이용해서 focus가 안되는 요소도 가능하도록 만듦tab으로 focus가 안되지만 시각 장애인 입장에서 반드시 읽어야하는 요소라면 tabIndex를 주어 접근성을 높일 수 있을듯주의 : ta

2021년 3월 1일
·
0개의 댓글

함수 네이밍 관련 리뷰

데이터를 검증하는 함수는 긍정형으로 짓기isNotNumber() 보다!isNumber() 나음.메서드에 not이 포함되어 있으면 오히려 읽기 힘들다.함수 이름은 함수가 하는 일의 목적을 추상화 시켜 정해야한다.ex. "축하합니다! 게임이 모두 끝났습니다!"라는메세지를

2021년 2월 27일
·
0개의 댓글

2021-02-18 코드 리뷰 : 로또 미션 1차

https://github.com/woowacourse/javascript-lotto/pull/18BEM은 css class의 이름을 좀 더 관리하기 쉬운 형태로 만들기 위한 방법론임네이밍은 Block\_\_Element--Modifier로 표현됨. 각 요소는

2021년 2월 27일
·
0개의 댓글