lyla-bae 님의 블로그

요 4주동안 프로젝트 현직 멘토님과 주1회 멘토링을 진행하면서 Next 관련 공부했던 내용들을 정리해보았다기본기가 너무 부족한거같다 공부좀 하자 ^^ SSR / CSR vs 서버 컴포넌트 / 클라이언트 컴포넌트 부터 일단 헷갈림SSR = 서버컴포넌트CSR = 클라이언트컴포넌트라고 이해하고 있었던 나....(진짜 공부 안한거 티남) 너무 부끄러웠다앞에 동일하게 서버/클라이언트라고 들어가니까 개념이 혼재된듯하다 SSR / CSR 이란 → Redering 시점을 말하는것이다.SSR: 서버에서 HTML 만들어서 보냄 (언제 그리냐)CSR: 브라우저에서 JS로 그림그럼서버 컴포넌트(RSC) / 클라이언트 컴포넌트(RCC)는? → 실행되는 위치서버컴포: 서버에서 실행됨클라컴포: 브라우저에서 실행됨 SSR vs CS..

오랜만에 돌아온 블로그,, 요즘 근황은 또 다른 팀플을 하고있느라 정신이 없다문제 해결을 해갈때마다 블로그에 꼭 회고해야지라고 마음속으로 다짐했지만 실제로 행동하기까진 쉽지 않은것같다오늘이야말로 꼭 써야겠단 다짐으로..! 트러블슈팅을 해보자 레츠고 스와이프되는 카테고리 탭을 구현해야한다이번 팀플에서 본격적으로 게시판 CRUD 개발을 맡게되었는데이런 스와이프 되는 모양의 카테고리 탭을 만들어야 하는 상황이었다.처음에는 이 스와이프 동작을 라이브러리 없이 직접 구현할지 고민했다. 문제가 되는 영역이 이 컴포넌트 하나뿐이었기 때문에, JS 이벤트로 가볍게 처리하는 방식도 충분히 가능해 보였다.그래서 실제로 직접 구현을 1차 시도해봤다. { event.currentTarget.scrollLeft += ev..

24년 11월 10월에 진행한 스터디 주제는 UX 관련 논문 찾기였다.프로젝트를 진행할 때 논문을 참고하는 습관을 들이면 좋은데, 각 팀의 프로젝트 주제와 관련된 논문을 찾아보시거나, UX 관련 논문을 찾아보자. 보통 논문을 볼 땐 abstract과 가장 뒤의 결론에 모든게 나와 있긴 하지만 첨부한 논문과 같이 사례 분석을 한 논문은 이론 배경에서 많은 지식을 얻을 수 있다. 논문 결과를 간단히 정리해도 좋고, 인상 깊거나 새롭게 알게 된 내용만 발췌해도 좋다.추천 키워드: 사용자 경험 UX, User experience, 데이터 UX, UX 방법론, UI 디자인국내 무료 논문 사이트 RISS: https://www.riss.kr/index.do논문 중 KCI 등재된 논문은 인정받은 논문이므로 질이 좋음..

다른 곳으로부터 받는 정보는 최대한 많은 변수에 대비해야하고, 상대에게 전달해야할 피드백은 분명하고 명백하게 전달해야한다포스텔의 법칙을 간단하게 요약해 보았다. 자신이 행하는 일은 엄격하게이용자에게 언제나 안정성과 접근성을 보장해야 한다ex) 반응형 웹디자인은 다양한 기기의 크기나 유형에 맞게 웹사이트가 유동적으로 반응하고 이용자에게 제공되는것을 알수있습니다 남의 것을 받아들일땐 너그럽게이용자의 입력은 무조건 수용해야 한다ex) 회원가입 폼을 구성할때 중복된 정보를 요청하고있지 않은지 확인하고, 꼭 필요한 폼만 채울수있도록 구성해야 이용자의 피로를 줄일수있습니다 참고링크https://m.blog.naver.com/moongteagray/222302964051 [UX/UI의 10가지 심리학 법칙] 5장...

드디어 끝이보이는 기다려짐...! (그러나 끝나지않은...)요즘은 리팩토링, 최적화 등 마무리작업을 진행중이다.나는 접근성과 SEO을 개선하기 위해 Lighthouse를 요 몇일사이 열심히 돌려보았고그 과정에서 만난 여러가지 이슈들을 오늘 소개해보고 나의 문제해결 과정을 정리해보고자 한다! 접근성 구조와 Landmark이젠 시맨틱하게 마크업을 해야한다는것은 너무 잘알고있다.그런데 Landmark라는 개념은 초면이였다. 그래서 또 찾아보았다.페이지의 주요 영역을 시맨틱태그 or Aria role로 구분해 스크린단위가 영역단위로 탐색할수있게 해주는 것을 의미한다. 주요 랜드마크 종류는 HTML 태그로 이렇게 표현한다. ⭐️⭐️⭐️ 페이지 상단 헤더 ⭐️⭐️⭐️ 내비게이션 메뉴 ⭐️⭐️⭐️ 주요 콘텐츠 영역..

오랜만에 디깅미션이 돌아왔다!이정환 Next강의를 이미 완강했었기때문에 수업을 잘이해하지않을까 생각했는데미들웨어는 설명이없어서(있었는데 기억을 못하는걸수도;;)나의 영원한 친구 클로드와 지피티와 함께 미들웨어에 대해 공부하는 시간을 가졌다 미들웨어는건물입구의 경비원 같은 존재라 생각하면 된다. 페이지 보여주기 전에 한번 거르는 관문인것이다// middleware.tsimport { NextResponse } from 'next/server'export function middleware(request) { const token = request.cookies.get('token') if (!token) { return NextResponse.redirect(new URL('/login', req..

CSR vs SSRRouter 차이를 설명하기 전에 먼저 SSR의 등장부터 이해할 필요가 있다.CSR는 초기접속이 느리고 SEO가 불리하다는 치명적인 단점이 있었는데SSR의 사전렌더링으로 CSR의 단점들을 해결할수 있다. 아래는 SSR의 사전렌더링 과정을 한눈에 볼수있어서 가져왔다.CSR은 빈껍데기를 화면에 먼저 렌더링시켜버리는 반면 SSR은 서버에서 미리 렌더링시켜 유저에게 뿌리기때문에FCP(First Contentful Paint) : 사용자가 페이지 접속후 첫콘테츠를 만나는 시간을 나타내는 지표 가 굉장히 유리해지게된다. Next12까지 page Router로 SSR을 도입하면서 데이터 패칭과 렌더링을 분리했는데 이 방법도 곧 한계를 보이고만다.페이지 전체가 SSR되면서 굉장히 비효율적이며,모든 컴..

store와 create만 기억하면 됨https://zustand-demo.pmnd.rs/ Zustand zustand-demo.pmnd.rsZustand는 크기가 작아서 가볍고 빠르며 확장성이 좋은 전역 상태 관리 라이브러리다. 이름부터 뭔가 특이한데, 독일어로 상태라는 뜻이라고 한다. 발음은 쭈스탄트 정도로 읽으면 된다 import { create } from 'zustand'export const use이름Store = create((set, get) => { //set은 상태 업데이트할 때, get은 현재 상태 가져올 때 씀 return { 상태: 초깃값, 액션: 함수 }}) Zustand에서는 create라는 함수로 store를 만든다. 그리고 이 store를 기반으로 동작한다.S..