본문 바로가기

Frontend43

JS의 일급객체 JS에서 함수는 특별하게 취급된다. 변수에 할당할 수 있다. 다른 함수의 인자로 전달될 수 있다. 다른 함수의 결과로서 리턴될 수 있다. 배열,객체의 요소가 될수 있다. 즉, 함수를 데이터 다루듯이 다룰수 있다는 것이다 변수에 저장할 수 있기 때문에 배열의 요소나 객체의 속성값으로 저장하는 것도 가능하다. 그래서 함수를 일급객체라고 표현한다 2022. 4. 29.
CSR과 SSR CSR : Client Side Rendering 클라이언트 측의 브라우저가 JS파일을 다운로드하고 직접 실행하여 렌더링을 하는 것을 말함 인터넷이 느리거나 사용자가 JS를 비활성한다면 아무것도 나오지 않을 수 있다. 앵귤러, 뷰, 리액트 등 쉽게 말해서 클라이언트 측에서 다하는 것을 말함 서버에서 전체 페이지를 다시 읽어 오고 필요한 부분만 받아오기에 빠른 인터렉션이 가능하다. 문제점 사용자가 첫화면을 보기까지의 시간이 좀 걸린다. 구글 네이버와 같은 검색엔진이 해당 페이지를 빈 페이지로 인식하여 검색엔진이 인식을 못한다. 클라이언트 측에서 사용자의 정보를 쿠키에 저장하기에 보안상의 문제가 발생한다. SSR에서는 서버측에서 세션으로 관리한다. SSR : Server Side Rendering UI를 서.. 2022. 4. 29.
도메인, DNS, 호스팅 다양한 의미의 도메인 도메인은 다양한 의미로 사용됩니다. 어떤 전문 분야에 대한 지식의 범위를 도메인이라고 한다. 소프트웨어 공학 비즈니스에서의 소비자와 제공자 사이의 지식을 의미하기도 한다. 수학 수학에서는 정의역을 뜻한다 정의역 : 두 변수 x, y 사이에 y가 x의 함수로 나타내어질 때, x가 취할 수 있는 값의 범위. 주로 어떤 것에 대한 의미, 개념의 범위를 나타내는 뜻으로 사용합니다. 상대와 나의 도메인이 다르다면? 예를 들어 김치에 대해서 대화 하는데 상대는 배추김치를 생각하고 나는 열무 김치를 생각하며 대화를 해 시간 낭비를 할 수 있다. 그렇기에 이러한 상황을 방지하기 위해 상대와 나의 도메인을 맞춰가는 작업은 매우 중요하다. 추상적인 개념을 더 구체적인 지식들로 체계화하는 작업이 중요하.. 2022. 4. 29.
UI 설계할 때 알아둘 점 UI는 직관성, 유효성, 학습성, 유연성이 중요함 직관성 : 누구나 쉽게 이해하고 사용할 수 있어야 함 유효성 : 사용자의 목적을 정확하고 완벽하게 달성해야 함 학습성 : 누구나 쉽게 배우고 익힐 수 있어야 함 유연성 : 사용자의 요구사항을 최대한 수용하고 실수를 최소화해야 함 ex) 지역 입력을 받는다면 사용자가 오타를 낼 수도 있으니 값들을 미리 제공하면 서로 좋다. 이렇게 UI는 사용자의 사용성, 접근성, 편의성을 중요시해서 설계해야 한다. UX UX는 사용자가 시스템이나 서비스를 이용하면서 느끼고 생각하게 되는 총체적인 경험이다. UX는 UI를 통해 사용자가 느끼는 만족이나 감정을 중요시하는데 주관적이기 때문에 본질(사용자의 삶의 질을 향상한다)을 상기하며 잘 설계해야 한다. 2022. 4. 2.
UI 설계 단어 정리 사이트맵 목차 같은 역할을 한다. 와이어 프레임 한 화면의 레이아웃을 설계하는 작업. 목업 와이어 프레임보다 실제 화면에 유사하게 디자인을 적용해서 만든 정적 모형 프로토타입 목업에서 동적인 기능이 추가된 동적 모형 실제 구현된 것처럼 시뮬레이션이 가능하며 단시간에 구현 가능해서 사용자 경험에 대해 테스트를 해볼 수 있다. 스토리보드 디자이너/개발자가 참고하는 최종적인 산출문서 정책, 프로세스, 구성, 와이어프레임, 기능 정의 DB 연동등 서비스를 구축하기 위한 모든 정보가 담겨있는 문서 현업에서는 해당 문서를 바탕으로 소통한다. 플로우 차트 UI의 이벤트에 따른 흐름을 차트로 나타낸 모형 와이어프레임 작업 후 목업을 만들어서 스토리보드로 연결하는 식으로 UI 작업을 계획 및 진행할 것이다 참고로 저와 .. 2022. 4. 2.
GitHub Page 배포하기 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 주소를 수정.. 2022. 4. 1.