본문 바로가기
728x90
반응형

source-code229

브라우저에 데이터 저장하기 - localStorage와 sessionStorage localStorage와 sessionStorage 웹 브라우저 객체(web storage object) 브라우저 내에 키-값 쌍을 저장할 수 있게 해 줌. 페이지를 새로고침하거나(sessionStorage), 브라우저를 다시 실행해도(localStorage) 데이터 유지 가능. 동일한 메서드와 프로퍼티 제공 setItem(key, value) – 키-값 쌍을 보관. getItem(key) – 키에 해당하는 값을 받아옴. removeItem(key) – 키와 해당 값을 삭제. clear() – 모든 것을 삭제. key(index) – 인덱스(index)에 해당하는 키를 받아옴. length – 저장된 항목의 개수를 얻음. Map과 유사(setItem/getItem/removeItem을 지원) / 인덱스를.. 2023. 8. 17.
webpack - settings module 웹 개발 시, 분리된 각 JS 파일을 module이라 할 수 있다 모듈로 분리하면? → 모든 JS 파일에서 재사용이 가능(export/import) → 개발 생산성 증대! But 분리된 module이 늘어날수록, 브라우저의 자원 요청은 증가 → 로딩 지연! 그렇다면... module 분리를 통한 개발상의 편의점과, 로딩 시간 단축을 둘 다 가져가기 위해서는? → module을 분리해 개발하고, 배포 직전에 각 module을 하나의 파일로 묶어서 배포하면 될 테다! 이렇게 여러 module들을 하나로 묶는 작업은 bundling이라 하고, webpack은 bundling을 수행하는 module bundler라 할 수 있겠다! webpack JavaScript application을 위한 정적 .. 2023. 8. 17.
TDD기반 TODO 애플리케이션 1. 웹 프론트엔드 개발과 TDD 테스트 주도 개발. 약 1년 전 누군가 나에게 TDD에 대해 얘기했다면... 한 귀로 듣고 한 귀로 흘렸을 게 뻔하다. 왜? 첫째, 공감가지 않았다. 하면 좋다. 여기에는 당연히 공감했다. 하지만 지금, 이 순간에 도입해야 하는가? 하는 질문에는 항상 회의적이었다. 시장에서 살아남을지도 불확실한 제품을 테스트까지 해가면서! 개발해야 한다는 점이 못마땅했다. 그 시간에 더 많은 아이디어들을 구현하고, 가설을 검증하는 것이 나아 보였다. (TDD = 귀찮고, 많은 시간을 잡아먹는 괴물 처럼 느껴졌다) 둘째, 프론트엔드의 테스트코드라는 게 이해되지 않았다. 사용자가 이러이러한 액션을 취했을 때 → 이러이러한 결과가 나타나야 한다 를 테스트하는 거라면... 그냥 개발하면서 해당.. 2023. 8. 17.
브라우저에 데이터 저장하기 - 쿠키와 document.cookie 쿠키와 document.cookie 쿠키 브라우저에 저장되는 작은 크기의 문자열 →RFC 6265 명세에서 정의한 HTTP 프로토콜의 일부. 주로 웹 서버에 의해 만들어짐. - 서버가 HTTP 응답 헤더의 Set-Cookie에 내용을 넣어 전달. - 브라우저는 이 내용을 자체적으로 브라우저에 저장 = 이것이 쿠키! 브라우저는 사용자가 쿠키를 생성한 동일 서버(사이트)에 접속할 때마다, 쿠키의 내용을 Cookie 요청 헤더에 넣어서 함께 전달. 클라이언트 식별과 같은 인증에서 주로 사용됨. 사용자가 로그인하면, 서버는 HTTP 응답 헤더의 Set-Cookie에 담긴 “세션 식별자(session identifier)” 정보를 사용해 쿠키를 설정. 사용자가 동일 도메인에 접속하려고 하면, 브라우저는 HTTP .. 2023. 8. 17.
Atomic Design https://www.youtube.com/watch?v=33yj-Q5v8mQ Atomic Design 물질(원자, 분자…) 개념을 웹에 적용하여 인터페이스를 세분화한 디자인 시스템을 만드는 방법론 구성 단계 Atoms (원자) 웹 UI의 가장 기본적인 구성 단계 라벨, input, button 등 1차원적 요소 의미 및 정의 Molecules (분자) 그 자체의 의미가 없거나 의미가 흐린 원자들의 결합 재사용성이 가능한 원자 조합 결합체 ex) 각각의 원자들이 모여 검색 ui를 정의 Orhanism (유기체) 원자 or 분자 or 같은 성질의 유기체 까지 포함한 개념 본격적인 UI 기능을 볼 수 있는 단계 ex) GNB에 대한 기본적인 기능이 정의됨 Templates (템플릿) 유기체의 기능적인 UI를.. 2023. 8. 17.
webpack - loader, optimization web pack loader loader? → 다른 파일 확장자를 다루기 위한 Third Party 확장 프로그램 module.exports = { module: { rules: [ { test: /\.filename1$/, use: ['loader-b', 'loader-a'], }, { test: /\.filename2$/, use: ['loader-d', 'loader-c'], }, ], }, } module로 취급하길 원하는 각각의 파일을 rules 배열에 객체로 추가해야한다. 해당 객체들은 파일의 타입을 정의하는 test, loader로 이뤄진 배열인 use 속성으로 구성된다. 이 때, use에 정의된 loader는 오른쪽부터 왼쪽으로 불러옴(순서 중요)에 유의! css 적용하기 webpack에서.. 2023. 8. 17.
next input auto focus를 통한 UX 개선 input UX 현재 반려동물 등록 페이지는 여러 개의 input이 row하게 배치된 형태다. 샵 관리, 특히 애견 미용샵 관리의 중심은 고객(반려동물)이기 때문에, 처음 앱을 시작한 사람이 최적의 UX를 경험하는 것이 무엇보다 중요했다. 덕분에 다른 앱들의 input page를 경험할 때마다 해당 UX를 고민하게 되었는데... 입력해야하는 input들이 많은데도 불구하고, 우리 앱보다 더 쉽게 정보를 입력한다는 느낌을 받았다. 왜지? → input의 onSubmit이 동작했을 때(한 input에서 완료or다음 키패드를 눌렀을 때) 다음 input으로 focus가 이동하는 기능이 우리 앱에는 없었다!!! 즉 기존 반려동물 등록 페이지에서는 하나의 input을 완료하고 → 제출 키패드 or 빈 공간을 눌러.. 2023. 8. 17.
FE 디자인 설계 관련 고찰 3주 정도로 예상했던 sprint가 2주만에 마무리가 되었다. 그 중 내가 맡은 task는 반려동물 등록 flow를 몽땅 개선하는 것. 페이지 수로만 따지만 (꼴랑) 하나뿐이었지만... 지금껏 개발하며 배우고 느꼈던 걸 최대한 써먹으려 노력했다. 가장 마음에 드는 issue! 맨 처음 react-hook-form을 앱에 도입하면서 정확한 개념조차 잡히지 않은 채 재사용이 가능(할거라고 생각했던) 컴포넌트를 만들었는데... props가 20개 남짓 넘어가는 걸 보며, 이를 다시 사용할 수는 없단 생각이 들었다. 따라서 UI 로직, form 관련 로직, react-hook-form 관련 로직이 몽땅 들어있던 컴포넌트를 각 기능을 담당하는 컴포넌트로 잘게 쪼개어 작성했다. 이를 통해 input의 공통 UI 변.. 2023. 8. 17.
next js 13 변경사항 살펴보기 현 프로젝트에서 next js 13 버전을 사용 중이다. 공식 문서를 보며 이전 버전에서 달라진 점 or 추가된 기능을 알아보자. Project Structure 공식 문서에 명시된 프로젝트 구조. Top-level files Next.js next.config.js Configuration file for Next.js middleware.ts Next.js request middleware .env Environment variables .env.local Local environment variables .env.production Production environment variables .env.development Development environment variables .next-env... 2023. 8. 17.
728x90
반응형