일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- HTML
- lodash
- til
- 객체 프로퍼티
- NPM
- leetcode문제풀이
- 자바스크립트 연결리스트
- Next
- 타입스크립트
- 자바스크립트 알고리즘
- 알고리즘문제풀이
- 프로그래머스
- JavaScript
- 자바스크립트 문제 풀이
- 자바스크립트코딩테스트
- 제로베이스
- Baekjoon
- Next.js13
- 자바스크립트
- 자바스크립트 알고리즘 문제
- 자바스크립트 문제풀이
- 리액트
- CSS
- 리액트쿼리
- stack문제
- leetcode
- JS
- 자바스크립트 문제
- next13
- 프론트엔드
- Today
- Total
목록전체 글 (218)
코드노트
프로그래머스에서 코딩테스트를 진행하다가 시간초과가 나왔다. 먼저 문제에서 배열을 순회해야했었고 for문을 통해서 작성하고 for문 안에서 indexOf를 순회했다. 배열의 길이가 길어질수록 각 호출마다 indexOf를 연산하게 되면서 O(n)의 시간복잡도를 가지게 된다. 문제를 풀다가 Map객체를 활용하는 방법이 효율적이게 작용하는걸 알게 되었다. 더보기 문제설명 얀에서는 매년 달리기 경주가 열립니다. 해설진들은 선수들이 자기 바로 앞의 선수를 추월할 때 추월한 선수의 이름을 부릅니다. 예를 들어 1등부터 3등까지 "mumu", "soe", "poe" 선수들이 순서대로 달리고 있을 때, 해설진이 "soe"선수를 불렀다면 2등인 "soe" 선수가 1등인 "mumu" 선수를 추월했다는 것입니다. 즉 "soe..
프로젝트에 채팅기능을 만들려고한다. WebSocket을 사용하여 실시간 통신을 하지만 WebSocket 이전의 양방향 통신 Rest 방법도 함께 정리해보려고 한다. Rest는 일반적으로 요청을 하고 서버에서 응답받는 방식이다. WebSocket을 많이 들어보고 알고는있지만 REST API와는 어떤것들이 다를까? 가장 큰 차이는 접속을 유지하고 있는지의 차이가 있다. REST 방식은 요청을 하고 응답을 받는다. 그러나 WebSocket은 한번 요청을 하게되면 그 뒤로 계속해서 업데이트 해주는 방식의 API이다. 구독형 API라고도 한다. 배달 어플을 생각해보자. 고객과 배달기사는 서로의 위치를 알려면? REST 고객 -> 서버에 배달기사의 위치를 요청하고 서버에서 배달기사의 위치를 받아서 받아볼 수 있다...
이번 프로젝트를 하면서 정말 많은걸 경험하고 배우게 되었다. 규모가 크기도 했지만 SSR, CSR 관련해서도 다시한번 정리가 되었고, 프로젝트가 끝난 후 QA를 진행하고 생각하지도 못했던 에러들을 만나고 수정했다. 그 중에서도 처음에는 원인을 찾지 못했던 에러가 있다. - 웹페이지의 일부분을 코드 스니펫으로 나타나고 있었다. 장시간동안 페이지를 켜두거나 재시동 또는 다시 시작을 한 후 사용하던 페이지가 열리면 이렇게 에러가 발생했다. 만약 router로 다시 그 페이지에 접근하게 되더라도 이러한 문제가 발생했다. SSR로 작업을 했지만 SSG로 빌드되었고, 정적인 파일로 동작을 하다보니 미리 서버측에서 가져온 HTML파일을 생성하다보니 그 뒤에는 서버와 연결이 되지 않아서 나오는 문제인걸로 파악했다. 우..
최근 프로젝트를 하면서 vercel로 CI/CD로 작업을 하고 팀 레포를 사용하다보니 유료로 사용했었다. 머니브릿지 프로젝트는 실제 서비스가 진행되는 프로젝트다보니 기업과 의논후 AWS로 배포를 옮기는 과정에서 Amplify를 사용하여 배포를 하기로 최종 결정하였다. Amplify를 사용한 이유는 Next.js로 작업을 진행했고, github와 연동 후 빌드, 배포 과정을 통해서 SSR적용이 가능하기 때문이다. vercel로도 CI/CD를 사용해봤지만 Amplify도 사용법이 그렇게 어렵지 않다. github Action을 사용해서 ec2에 배포하는거에 비하면 정말 쉬웠다! - 우선 웹 앱 호스팅을 누르고 GitHub를 선택해서 계속을 진행한다. - 다른 레포를 사용중이라면 다른것으로 하면 된다. - 나..
리액트는 가상 돔을 사용하여 실제 돔에 업데이트 시킨다. 여기서 나오는 가상돔이 무엇인지 정리를 해보려고 한다. 리액트 Virtual DOM에 관련해서는 면접 질문에서도 자주 나오게 된다. Virtual DOM에서 DOM이 무엇인지 알아보자. DOM - DOM은 Document Object Model의 약어로 웹 페이지를 프로그래밍 언어가 이해할 수 있는 구조로 표현한 것이다. DOM은 문서의 구조를 트리 형태로 나타내는데. 이트리의 각 노드는 객체를 나타낸다. HTMl 문서가 웹 브라우저에 로드되면 브라우저는 HTML 태그들을 파싱하고 DOM 요소를 생성한다. 이렇게 생성된 DOM은 자바스크립트를 통해 조작이 가능하다. DOM API - 자바스크립트는 DOM API를 사용하여 웹페이지 내의 요소들을 선..
현재 개인프로젝트를 리팩토링...? 아니 마이그레이션을 하고 있다. 처음에 React를 사용하여 작업을 했었지만 Next.js를 사용하여 프로젝트를 진행중이다. 이번 프로젝트를 진행하면서 Optimistic UI를 적용한 방법을 정리해보려고 한다. Optimistic UI - 사용자 요청을 서버에서 처리되기전 성공할 것을 가정하여 성공한 결과를 미리 보여주는 것이다. 사용자가 API요청을 보내게되면 서버에 요청을 하고 값을 받아서 변경된 값을 보여주어야하는데 그 값이 변하는게 오래걸린다면 사용자 경험에 있어서 좋지 않은 경험을 받게 된다. UI 시각적으로 우선 보여주고 그 뒤에 백그라운드에서 실제 작업이 실행된다. 그럼 아무곳에서나 사용해도 될까? - 아니다. 사용자에게 즉각적으로 피드백이 중요한 상황에..
ReactDOM.createPortal(child, container) - createPortal은 리액트에서 DOM트리 의 다른 위치에 컴포넌트를 렌더링을 할 수 있는 기능 - 기본적으로 컴포넌트는 컴포넌트 트리의 노드로 렌더링이 되지만, 컴포넌트를 루트 DOM요소 밖의 다른 위치에 렌더링해야 할때 사용할 수 있다. - 간단하게 말하면 첫번째 인자는 자식요소, 두번째 인자는 자식요소를 렌더링할 DOM요소 ex) 모달, 툴팁, 독립적인 컴포넌트 등등 이번 프로젝트에서 모달을 사용하면서 css를 사용하여 z-index를 조절하여 모달을 만들었는데 createPortal을 사용하는것이 좋다고 한다. 아니 맞는것 같다. - 모달은 기존 컴포넌트 구조와 격리되어야한다. - 컴포넌트와 상호작용하는 문제가 발생할 ..
리덕스는 전역 상태관리 라이브러리이다. 리액트쿼리, SWR, zustand, recoil 등 여러 상태관리 라이브러리가 있지만 기본으로 알고가야하는 라이브러리가 리덕스라고 생각한다. 리덕스의 구조와 Flux패턴에 대해서 정리를 해보려고 한다. 리덕스의 구조를 알아보기전 MVC패턴과 Flux패턴을 알아보자 MVC 패턴 MVC 패턴은 Flux 패턴이 등장하기전 사용되던 디자인 패턴이다. Model : 데이터 보관 및 정의 Controller : 데이터에 대한 수정, 조회 등의 역할 View : 데이터를 화면에 보여주는 역할 - Model에 데이터를 정의해 두고, Controller를 이용해서 Model 데이터를 생성, 조회, 수정, 삭제 등을 하여 변경된 데이터를 View에 출력하여 사용자들에게 보여줄 수 ..
이번 개인프로젝트에서 OAuth 소셜 로그인을 등록하면서 구글, 카카오, 네이버를 모두 연결하였는데 Next.js 에서 사용할 수 있는 방법을 정리해 놓으려고 한다. Next.js 13 버전을 사용하고 있기 때문에 NextAuth.js 에서 자세하게 설명이 되어있다. 사용방법은 어렵지 않다. 13버전에서 이제는 app 폴더에서 사용할 수 있다. Initialization | NextAuth.js The main entry point of NextAuth.js is the NextAuth method that you import from next-auth. It handles different types of requests, as defined in the REST API section. next-aut..
Headless CMS(Content Management System) - Headless는 직역하면 머리가 없다는 뜻이다. 즉 웹사이트에서 프론트부분이 아닌 백엔드의 데이터 부분이라고 볼 수 있다. - 컨텐츠를 저장하고 있는 저장소라 볼 수 있으며, 프론트엔드가 없는 데이터 저장 관리시스템이다. - Headless CMS의 작동 방법 * 컨텐츠 편집자와 개발자가 완벽히 분리될 수 있다. 컨텐츠 편집자는 GUI로 컨텐츠를 추가/수정/삭제 할 수 있다. * 개발자는 Headless CMS에 Restful API를 통해서 데이터에 접근 가능하다. 기존 CMS와 Headless CMS의 차이 CMS - Monolithic 모놀리틱 : 기존 CMS는 하나의 서비스에 설치된 형태로 사용되어야 했다. - 서비스와 ..