전체 글 (64) 썸네일형 리스트형 [Develop/Next.js] Next.js hydrate시 redux state 초기화 Next.js hydrate시 redux state 초기화 Next.js에는 hydrate 개념이 존재한다. 아마 기존 Next.js를 공부하고 있는 개발자라면 이미 개념을 이해하고 있을 것이다. 하지만 간단하게 설명하자면 Next.js는 SEO를 위해 사용한다 해도 과언이 아닐 정도로 많은 개발자나 회사들이 ServerSideRendering을 위하여 사용하고 있을 것이다. Hydrate 즉 Hydration 은서버사이드렌더링을 통한 이미 그려져 불러온 HTML들과 더불어 번들링 된 JS파일들을 클라이언트 단에서 상호작용할 수 있도록 융합되는 과정을 말한다. 즉, 초기 HTML을 로드하고 클라이언트 사이드 동작이 되도록 React가 동작하도록 JS를 불러와 합쳐주는 것이 이런 과정이 물이 흐르는 듯한.. [Develop/Next.js] Next.js에 구글 애널리틱스 적용 Next.js에 구글 애널리틱스 적용 최근 회사에서 업무와 더불어 토이 프로젝트를 진행하면서 SEO (검색 엔진 최적화)에 중점을 두고 개발하여야 할 일이 많아졌다. React를 주로 공부하고 있었던만큼 자연스럽게 Next.js를 접하게 되었다. 물론 그전부터 관심을 가지고 강의를 보면서 어느 정도 공부하였지만 역시나.. 실무는 만만하지 않았다... 본론으로 들어가 회사에서도 구글 애널리틱스를 사용하였지만 공통업무를 담당하는 부서가 이미 스크립트 파일을 만들어놨고 그것을 활용했었다. 이번에 네이버, 카카오, 라인, 쿠팡, 배달의민족의 채용공고를 모아 보는 토이 프로젝트를 진행하면서 유지보수 관점과 더불어 사용자의 유입경로를 통해 조금 더 나은 운영을 해보고자. 구글 서치 콘솔과 더불어 구글 애널리틱스를 .. [Develop/HTML&CSS] CSS box-sizing 알아보기 box-sizing에 대하여 알아보기 CSS에서 box-sizing이란 무엇이고 언제 사용하게 될까? MDN에서는 box-sizing 속성을 아래와 같이 정의하고 있다. box-sizingCSS속성은 요소의 너비와 높이를 계산하는 방법을 지정합니다.라고 되어있다. CSS 박스 모델은 요소에 테두리나 안쪽 여백이 있으면 너비와 높이에 그 크기만 큼 더하여 화면에 그리게 된다. 따라서 내가 같은 크기의 div 영역을 만들고 padding이나 border를 서로 다르게 준다면 같은 크기의 div일지라도 그 크기가 달라지게 되는것이다. box-sizing에는 2가지 키워드가 있다. content-box와 border-box 맨 처음에 이 속성을 알게 된 것도 저 border-box 키워드 덕분이다. conten.. [Develop/HTML&CSS] Mobile input focus 시 zoom 막기 및 mobile meta tag 정보 Mobile input 클릭 시 focus 막기 및 mobile meta tag 정보 친구들과 방 코드를 통한 채팅을 구현하는 팀 프로젝트 중 모바일에서 input창 focus시 화면이 zoom이 되는 현상이 발견하여 수정 중 블로그에 정리하고 누군가 이런 이슈에 대하여 수정하기 쉽도록 블로그를 정리하기로 했다. 예를 들어 Mobile로 web project시 input을 클릭하여 글을 쓰려고 하는데 화면이 zoom 처리되어 의도하지 않은 스크롤이 생기거나 화면이 가려질 경우 아래와 같은 방법으로 처리할 수 있다. 첫 번째, 가장 쉬운 방법은 input이나 textarea에 font-size를 16px 이상으로 주면 된다. 모바일 환경에서 글자 크기가 16px이하 일 경우엔 고맙게도 자동으로 zoom 처.. [Daily] 나이키 덩크 컬리지네이비 / (W) Nike Dunk Low SP College Navy / 리뷰 및 사이즈 나이키 덩크 컬리지네이비 / (W) Nike Dunk Low SP College Navy / 리뷰 및 사이즈 최근 들어 이직 준비와 다한증 수술 등 여러모로 많이 바쁘게 보내면서 평소에 조금씩 조금씩 공부하고 노력한 결과물이 된 건지 이직을 하게 되었다. 한 회사에 오래 다녔다보니 새로운 출발이고 아직 더 배우고 노력해야 하지만 그래도 이직하고 고생했으니! 예전부터 살려고 봐왔던 덩크 컬리지네이비를 사게 되어 리뷰를 남긴다. 먼저 덩크 컬리지네이비 컬러는 우먼스(W) 사이즈로 발매가 되었다. 이 신발도 역시나 응모를 넣었지만 전부 실패했다. 남들처럼 여러 아이디로 응모하지 않아서 인가.. 아직 1번밖에 당첨되어 보지 않았다.. 구매는 크림(KREAM)에서 구매하였고 아무래도 컬러가 여름보다 가을 겨울에 .. [Develop/React] React Code Splitting과 cra-bundle-analyzer Code Splitting과 cra-bundle-analyzer React는 빌드되면서 Webpack을 통한 번들링 작업을 하게 된다. cra로 React를 시작할 경우 기본적으로 Webpack, Babel 설정이 되는데 번들링이 되면서 하나로 합쳐진 js는 프로젝트가 커질수록 용량도 커지고 그로 인해 페이지 최초 접속 시 CSR 특성상 리소스들과 하나로 된 js 파일을 불러오는데 오래 걸리게 된다. 따라서 React에서는 코드분할(Code Splitting)을 하라고 설명하고 있다. React 공식문서에도 아래와 같이 설명하고 있다. 코드 분할은 여러분의 앱을 “지연 로딩” 하게 도와주고 앱 사용자에게 획기적인 성능 향상을 하게 합니다. 앱의 코드 양을 줄이지 않고도 사용자가 필요하지 않은 코드를 불러.. [Develop/Database] AWS RDS MySQL timezone 변경 [Develop/Database] AWS RDS MySQL timezone 변경 AWS RDS를 만들었을 때 기본 MySQL의 시간대는 UTC(국제 표준시)로 설정이 되어있다. 따라서 개인 프로젝트 진행하면서 DB 저장시간과 웹에서 등록하는 시간이 일치하지 않는 이슈가 발생하였다. UTC와 현재 작업중인 우리나라의 시간과 맞지 않아 생기는 이슈다. 그럼 현재 MySQL에 설정시간을 확인해보고 AWS의 RDS 인스턴스의 timezone을 변경해보자. 현재 timezone 확인 해당 DB에 접속 후 아래 쿼리를 통해 timezone이 무엇으로 설정돼있는지 보자. RDS 인스턴스의 초기 timezone은 UTC로 되있기 때문에 UTC로 결과물이 나올 것이다. 이제 timezone을 KST(한국 표준시)로 변경.. [Develop/React] Redux-Saga란? 간단 맛보기 Redux-Saga 맛보기 redux-saga는 redux-thunk와 마찬가지로 redux 미들웨어로써 redux 사용 시 비동기 요청의 side effect를 줄이기 위해서 사용된다. 지금까지 redux-thunk를 사용하거나 컴포넌트에서 비동기 요청을 직접 처리했었다. redux-saga를 공부하고 적용해보면서 redux-thunk와는 다르게 effect를 관리하는 많은 기능들이 확실히 유연하고 좋다고 생각했다. redux-saga 문서에는 redux-saga 는 애플리케이션 부작용 (예 : 데이터 가져오기와 같은 비동기 작업 및 브라우저 캐시 액세스와 같은 불순한 작업)을 더 쉽게 관리하고, 실행하기 쉽고, 테스트하기 쉽고, 오류 처리를 더 잘하는 것을 목표로 하는 라이브러리입니다.라고 설명되어있.. 이전 1 2 3 4 ··· 8 다음
