CSR : Client Side Rendering 클라이언트 측의 브라우저가 JS파일을 다운로드하고 직접 실행하여 렌더링을 하는 것을 말함 인터넷이 느리거나 사용자가 JS를 비활성한다면 아무것도 나오지 않을 수 있다. 앵귤러, 뷰, 리액트 등 쉽게 말해서 클라이언트 측에서 다하는 것을 말함 서버에서 전체 페이지를 다시 읽어 오고 필요한 부분만 받아오기에 빠른 인터렉션이 가능하다. 문제점 사용자가 첫화면을 보기까지의 시간이 좀 걸린다. 구글 네이버와 같은 검색엔진이 해당 페이지를 빈 페이지로 인식하여 검색엔진이 인식을 못한다. 클라이언트 측에서 사용자의 정보를 쿠키에 저장하기에 보안상의 문제가 발생한다. SSR에서는 서버측에서 세션으로 관리한다. SSR : Server Side Rendering UI를 서..
다양한 의미의 도메인 도메인은 다양한 의미로 사용됩니다. 어떤 전문 분야에 대한 지식의 범위를 도메인이라고 한다. 소프트웨어 공학 비즈니스에서의 소비자와 제공자 사이의 지식을 의미하기도 한다. 수학 수학에서는 정의역을 뜻한다 정의역 : 두 변수 x, y 사이에 y가 x의 함수로 나타내어질 때, x가 취할 수 있는 값의 범위. 주로 어떤 것에 대한 의미, 개념의 범위를 나타내는 뜻으로 사용합니다. 상대와 나의 도메인이 다르다면? 예를 들어 김치에 대해서 대화 하는데 상대는 배추김치를 생각하고 나는 열무 김치를 생각하며 대화를 해 시간 낭비를 할 수 있다. 그렇기에 이러한 상황을 방지하기 위해 상대와 나의 도메인을 맞춰가는 작업은 매우 중요하다. 추상적인 개념을 더 구체적인 지식들로 체계화하는 작업이 중요하..
UI는 직관성, 유효성, 학습성, 유연성이 중요함 직관성 : 누구나 쉽게 이해하고 사용할 수 있어야 함 유효성 : 사용자의 목적을 정확하고 완벽하게 달성해야 함 학습성 : 누구나 쉽게 배우고 익힐 수 있어야 함 유연성 : 사용자의 요구사항을 최대한 수용하고 실수를 최소화해야 함 ex) 지역 입력을 받는다면 사용자가 오타를 낼 수도 있으니 값들을 미리 제공하면 서로 좋다. 이렇게 UI는 사용자의 사용성, 접근성, 편의성을 중요시해서 설계해야 한다. UX UX는 사용자가 시스템이나 서비스를 이용하면서 느끼고 생각하게 되는 총체적인 경험이다. UX는 UI를 통해 사용자가 느끼는 만족이나 감정을 중요시하는데 주관적이기 때문에 본질(사용자의 삶의 질을 향상한다)을 상기하며 잘 설계해야 한다.
사이트맵 목차 같은 역할을 한다. 와이어 프레임 한 화면의 레이아웃을 설계하는 작업. 목업 와이어 프레임보다 실제 화면에 유사하게 디자인을 적용해서 만든 정적 모형 프로토타입 목업에서 동적인 기능이 추가된 동적 모형 실제 구현된 것처럼 시뮬레이션이 가능하며 단시간에 구현 가능해서 사용자 경험에 대해 테스트를 해볼 수 있다. 스토리보드 디자이너/개발자가 참고하는 최종적인 산출문서 정책, 프로세스, 구성, 와이어프레임, 기능 정의 DB 연동등 서비스를 구축하기 위한 모든 정보가 담겨있는 문서 현업에서는 해당 문서를 바탕으로 소통한다. 플로우 차트 UI의 이벤트에 따른 흐름을 차트로 나타낸 모형 와이어프레임 작업 후 목업을 만들어서 스토리보드로 연결하는 식으로 UI 작업을 계획 및 진행할 것이다 참고로 저와 ..
Zoom IT다운로드 링크사용방법 화면 확대 : Ctrl + 1취소는 ESC 또는 Ctrl + F1마우스 휠로 확대 축소 가능좌 클릭하면 화면 고정됨화면에 그림 그리기 : Ctrl + 2타이머 기능 : Ctrl + 3방향키 위아래로 조절 가능자동으로 10분을 재는 타이머가 생긴다.돋보기 : Ctrl + 4취소도 Ctrl + F4alwaysOnTopCSS에서 z-index값이 높게 설정된 것처럼항상 다른 프로그램들보다 위에 나타나게 한다.실시간 zoom 수업을 들으면서 교수님께서 카톡을 활용하시는데항상 카톡이 뒤로 밀리는 것이 싫었고 다른 프로그램들보다 위에 떴으면 좋겠다고 생각해서 찾게 됨계속 추가할 예정...
노션을 사용하는 간단한 방법을 적어볼게요저는 노션을 알기 전에는 메모장에 공부한 거 정리하고 그랬는데 지금은 노션을 만나 아주 행복하게 살고 있답니다.노션을 안 것이 제 공부 삶의 터닝포인트라고 생각할 정도입니다제가 애용하는 것들을 알려드릴게요페이지 제어cmd/ctrl + n을 누르면 새 페이지를 만듭니다cmd/ctrl + shift + n을 누르거나 cmd/ctrl + 클릭 으로 새 Notion 창을 엽니다.cmd/ctrl + [을 누르면 이전 페이지로 이동합니다.cmd/ctrl + ]을 누르면 다음 페이지로 이동합니다.cmd/ctrl + shift + l을 누르면 다크 모드로 전환합니다(숫자 1이 아니라 L입니다)리스트 만들기* 나 -, + 다음에 space를 입력하면 글머리 기호 목록을 만듭니다.1..
GitHub Page란? Github Pages는 정적인 페이지를 호스팅 해주는 서비스입니다. 많은 호스팅 서비스 중에 Github Pages를 선택한 이유는 다음과 같습니다. 호스팅 하는 소스코드를 공개할 경우 무료입니다. 깃허브 리포지토리의 소스코드를 직접 호스팅 해줍니다. 무료인 것도 좋지만, 깃허브 리포지토리를 직접 호스팅 해주는 것은 굉장한 강점입니다. 버전 관리 시스템인 Git을 통해 안정적으로 코드를 관리할 수 있습니다. 배포 방법 1. gh-pages 패키지를 설치해야 한다. $ npm install --save gh-pages // $ npm install gh-pages --save-dev 2. React 프로젝트의 package.json 파일을 수정합니다. homepage 주소를 수정..
프로젝트 시작하기 전 초기에 설정하면 좋은 것들! 개요 CSS초기화 baseUrl 설정해주기 CSS 초기화란? 브라우저마다 다르게 적용되어 있는 CSS 기본 값들을 제거해 주는 것을 뜻합니다! ex) 크롬, 사파리, IE 등등 분명히 동일한 코드인데도 브라우저에 따라 생성된 결과가 다르게 나와서 당황했던 경험들이 있을 것이다! 그래서! 이러한 문제를 해결하기 위해서 각 브라우저의 기본 값을 제거하는 CSS초기화 코드가 있고 CSS작업을 하기 전에 먼저 초기화를 해놓고 CSS작업을 하면 좋다. 알아둘 지식 CSS는 상위 요소의 CSS 속성이 하위 요소에 그대로 상속되는 특징이 있다. 그래서 최상위 파일에 CSS를 적용하면 된다. 에 설정된 기본 margin의 속성 값인 "8px"는 많은 웹 사이트에서 불필..
- s3
- 웹 접근성
- SSR
- 실용주의 프로그래머
- 궁금증
- React
- editor
- CSR
- base64
- SSG
- styled component
- 도메인
- toast
- Section
- Proxy
- 노션
- 성능최적화
- NextJS
- 프론트엔드
- 브라우저
- Next.js
- Typescript
- lazyloading
- https
- server
- 선언적 프로그래밍
- HTTP
- Next
- IP
- 철학
- Total
- Today
- Yesterday
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |