General_/Dev_Knowledge (42) 썸네일형 리스트형 [ 인지 / UX ] 한 줄에 몇 자가 가독성을 높이는 데 좋을까? UX에 대해 이야기하다보면 가독성에 대해서 이야기 하곤 한다. 그리고 더불어 아이트레킹도 이야기를 하는데... 그렇다면 아이트레킹 기준으로 얼마만큼의 글이 가독성을 높일 수 있을까?다시 말해, 사람의 생물학적 기준으로 한 줄당 몇개의 글자 수(not 논리적)가 아이트레킹으로 읽기 편한가? 결론: 한국어의 경우, 40~60자 이하(한 줄당) 원글 Readability: The Optimal Line Length – Baymard InstituteThe length of text lines substantially impacts their readability — yet this is often overlooked in e-commerce. See our latest test findings on line .. [ FE ] 우리가 홈페이지를 만들 때 고려해야할 사항은 뭘까?-2 4. 서버와의 데이터 교환을 제어합니다.WWW가 구상되었을 당시 클라이언트와 서버 간의 데이터 교환은 몇 가지 방법으로 제한되었습니다.링크를 클릭하면 GET 새 페이지가 나타나고 새 페이지가 렌더링됩니다.양식을 제출하면 새 페이지가 렌더링됩니다 POST . GET이미지나 객체를 포함하면 GET 비동기적으로 렌더링됩니다. 허나, 여기에는 2가지 문제점이 있습니다. 새 페이지로만 데이터를 보낼 수 있으며 무엇보다도 뒤로 가기 버튼을 할 수 없다는 것이다.데이터를 보낼 때마다 새 페이지를 불러오기뒤로 가기 버튼이 제대로 동작하지 않는 문제 발생이와 같은 문제는 Javascript와 AJAX를 통해서 해결 가능해집니다. 다시 말해 사용자 경험이 좋아집니다. 이걸 React 관점으로 바꾸면 비동기 데이터 .. [ 서버 / AWS ] 아마존 AWS 활용한 클래식 서버 체험하기(S3-EC2-DB) 아마존 AWS 교육을 받았다. 이 글은 각 vscode 등으로 client & server가 이미 다 작성됐다는 상태로 AWS만 설정 하는 방법을 공유하는 글이다. 온프레미보다 장점은 역시 가변성. 언제든지 스케일 확장이 빠르게 가능하며, 특히 초기 스타트업에서 장점은 기회비용이 적다는 것이다. 언제든지 프로젝트의 스케일을 줄일 수 있다는 것이다. ‘S3 – EC2 – DB’ 개념 설명S3 (Simple Storage Service)역할: 대용량 데이터를 저장하고 관리하는 객체 저장 서비스입니다. 웹사이트, 모바일 앱, 백업, 아카이브 등 다양한 용도로 활용됩니다.EC2 (Elastic Compute Cloud)역할: 가상 서버를 생성하여 웹 애플리케이션, 데이터베이스, 기타 소프트웨어를 실행하는 서.. [ FE ] 우리가 홈페이지를 만들 때 고려해야할 사항은 뭘까?-1 홈페이지를 제작할 때, 고려해야 할 사항은 다양할 것입니다.하지만 대다수 동의하는 것은 홈페이지 로딩 속도를 더 빠르게 만드는 것입니다.사전 렌더링된 페이지는 선택 사항이 아닙니다.사용자 입력에 따라 즉시 조치데이터 변경에 대응서버와의 데이터 교환을 제어합니다.역사를 깨지 말고, 역사를 더욱 발전시키자푸시 코드 업데이트행동을 예측하다 제 접근 방식은 사용자 경험(UX)의 관점에서만 JavaScript 사용을 검토하는 것입니다 . 특히, 사용자가 관심 있는 데이터를 얻는 데 걸리는 시간을 최소화하는 아이디어에 중점을 두었습니다. 네트워킹 기본 사항부터 미래 예측까지. 1. 사전 렌더링된 페이지는 선택 사항이 아닙니다.사용자 연결의 대역폭 용량은 꾸준히 개선되어 왔기 때문에 눈에 띄게 개선될 수 있지만.. [ AWS ] 데이터베이스 기본 편 데이터베이스 개요Amazon EC2 인스턴스 스토어 및 Amazon EBSAmazon S3Amazon EFS관계형 데이터베이스 및 Amazon RDS비관계형 데이터베이스 및 DynamoDBAmazon RedshiftAWS DMS 인스턴스 스토어 인스턴스 스토어는 Amazon EC2 인스턴스에 임시 블록 수준 스토리지를 제공합니다. 인스턴스 스토어는 물리적으로 EC2 인스턴스의 호스트 컴퓨터에 연결되어 있고, 따라서 인스턴스와 수명이 동일한 디스크 스토리지입니다. 인스턴스가 종료되면 인스턴스 스토어의 데이터가 손실됩니다. Amazon EBSAmazon Elastic Block Store(Amazon EBS)는 Amazon EC2 인스턴스에서 사용할 수 있는 블록 수준 스토리지 볼륨을 제공하는 서비스입.. [ AWS ]아마존이 나눈 클라우드 각 영역별 정의 아마존이 개발 역할을 나누는 기준(2017) 클라우드에서 비즈니스를 운영하는 데는 네 가지 책임 영역이 있습니다. 해당 영역은 클라우드 비즈니스 관리, 클라우드 인프라, 클라우드 보안 및 클라우드 애플리케이션 인프라입니다. 각 영역에는 클라우드에서 비즈니스를 운영하는 데 필요한 역할과 책임이 포함됩니다. 클라우드 엔터프라이즈 아키텍트는 클라우드 비즈니스 관리 영역 내에 존재하지만 모든 분야에 걸쳐 책임을 맡습니다. 클라우드 엔터프라이즈 아키텍트는 비즈니스 관리 영역에서 프로그램 관리자 및 재무 관리자와 협력합니다. 또한 클라우드 엔터프라이즈 아키텍트는 다른 영역의 아키텍트와 협력하여 비즈니스를 위한 전반적인 아키텍처를 설계합니다.클라우드 인프라 아키텍트는 클라우드 인프라 운영 엔지니어가 구축하는 솔루션 .. [ Front-End] 프론트 엔드는 어디로 향해가는가? (feat. Next.js) 이글은 Youtber 가장 쉬운 웹개발 with Boaz님의 영상을 저 생각대로 정리한 글입니다.원본 영상 보기 대표되는 언어 혹은 라이브러리 흐름도를 제 마음대로 그려봄Java + JSP ->> AJAX ->> React ->> Next.js 결론 부터 말씀드리면,React의 한계(CSR) 예를 들어, 1) 성능 저하 2) SEO로 인하여 이런 것을 간편하게 해결줄 방법을 찾게 됨.프론트 엔드의 영역이 넓어지면서(UI, 비지니스, 서버 등) 추상화와 환경설정을 좀 더 쉽게 접근할 수 있는 Framework의 등장. Next js.Under the hood, Next.js also abstracts and automatically configures tooling needed for React, li.. [ CS / cache ] Browser cache 이해해 보기 Cache 란?캐싱은 주어진 리소스의 복사본을 저장하고 있다가 요청 시에 그것을 제공하는 기술 // MDN Cache의 존재 이유1. 모든 클라이언트를 서비스할 필요가 없어지므로 서버의 부하를 완화2. (캐시가 원래 서버에 비해서) 클라이언트에 더 가까이에 있으므로 성능이 향상됩니다. 즉, 리소스를 회신하는데 더 적은 시간이 들게 됩니다. 웹 사이트에서 캐싱은 높은 성능을 달성하는 데에 주요한 요소입니다. Cache의 사용과 전략1. 파일을 다운시 재사용할 것인지(Reusable)2. 로컬 데이터가 서버 데이터와 동일하냐 (Revalidate)3. 캐쉬 서버와 서버의 데이터가 동일하냐 (Cachable by intermediate cache) == 보완성 Browser 상세 보기 : 유효(Fresh.. [ CODE ] 토스, 가독성 좋은 코드란 가독성이란?1. 읽기 편안한 코드(심리성) => 세미 콘론이라던지, 띄어쓰기 라던지2. 머리가 편안한 코드(공학성, 구조적) => 작성된 코드를 읽었을 때 쉽게 이해할 수 있다는 것 코드 작성시 실천하려고 노력하는 방법(진우) : 코드 작성시 맥락이 적어도 한번에 이해할 수 있도록 코드를 작성해 보려고 하는 것(순수 함수)(유림) : 켄트 벡 개발자 책 'Tidy Frist' 인용 : '1) 설계를 오래 하고 짤 것인지 2) 먼저 짜고 나중에 리팩토링 할 것인지에 대한 답은 없다. 우리는 언제나 틈틈히 리팩토링에 대한 생각을 준비해야 한다.' 조금씩 짜고 고치고 짜고 고치고(서진) : 일정 산정시 리팩토링에 대한 생각을 포함시켜서 그래도 여유있게 코드를 작성 하기 가독성 좋은 코드를 작성하기 위한 방.. [npm/redux] redux 잘 못 깔아서 안된다고 징징 npm install을 잘못해서 list 확인 후 다시 설치 (전 / 후) 비교 npm list redux 최초 잘못 설치했을 때, 잘 설치했을 때, 차이가 발생한 지점 npm install redux npm install react-redux mac 권한 설정 해제 추가적인 이슈 해결책 권한 설정 disable https://m.blog.naver.com/5341287/221697740777 https://stackoverflow.com/questions/32659348/operation-not-permitted-when-on-root-el-capitan-rootless-disabled [NPM] package manager version conflict(버전 이슈) 버전 이슈가 있어서 짜증난다. 사진을 찍었어야 했는데, 사진을 못 찍어서 그래도 남겨놓은 글을 적어 놔야겠다. No loader is configured for ".node" files: node_modules/re2/build/Release/re2.node 개념은 하나의 매너지에 프로젝트마다 다른 버전으로 생기는 이슈일 수 있다고 한다. 그래서 Gemini는 -g 를 써서 버전 관리를 하는게 좋다고 한다. 1. 버전 확인 vite --vision or node -v 2. 전역(global) Dependencies를 확인 : npm list -g or yarn global list 불필요하거나 안 맞는 거 있으면 삭제 삭제는 두 가지 방법 1. a certain package만 삭제 2. 그냥 packa.. [REST API] REST standfor Representational State Transfer restful web service 장점 1. 간단하며 표준화 되어있다. such as 데이터 형식, 매번 요청 방식 선택/고민 2. 확장가능성과 비저장(무슨 데이터인지, 어떤 상태 확인을 위한 No tracking) 3. 퍼포먼스가 여전히 좋음 Collection table 구분값을 뺀 나머지 가져온 정보 ex) http://example.com/topics Element table 하나 하나의 값 ex) http://example.com/topics/1 Method Create(REST) = post(HTTP) Read = get(HTTP) Update = put(HTTP : all)/ Patch(HTTP : part).. [Network]Socket과 Segment,Packet 등 대명제 : Socket은 a File이다. 문맥에 따라서 Socket의 달라짐. Bluetooth socket, IRDA socket, TCP socket etc File의 기본 명제 Open(Read, Write, execute) Create Close Delete TCP에서 File == TCP Socekt --> TCP File 에 대한 입·출력 방법론 - Write == Send / Read == Receive - 데이터 단위 : stream(각 층에서 사용하는 조각 단위 ex, L4:segment, L3:packet) Stackflow A packet is a chunk of data. All IP networks send data in small chunks across the network... [Lecture]Network : Cookies, Proxy Server Cookies 1) 서버가 cookes를 initiate 해 (ID == set-cookie) 라는 필드로 넣어 Response to User. - 서버에서 Unique ID 생성 in Server's Backend Database. 2) 브라우저는 서버가 알려준 Cookies ID 정보 저장 3) 다음에 다시 요청할 때, cookies 값에 ID 담아서 요청 -> 서버는 해당 클라이언트를 cookies(history, keyword etc) 관리할 수 있음 User Server ID Process cookie-specific action - stored a User information in Server Database by customized data stucture. If user has got a.. [Browser]브라우저 구조와 작동원리 업데이트 2024.3.25 공통 브라우저 구조 1. User Interface 사용자 인터페이스는 브라우저 상단 표시줄로, 컨트롤이 있는곳. 여기에는 URL을 입력하는 공간, 뒤로/앞으로 가기 버튼, 탭과 설정 옵션이 있는 공간이 포함. 2. Browser engine 브라우저 엔진은 사용자 인터페이스와 렌더링 엔진 사이의 다리 역할을 합니다. 사용자의 입력을 기반으로 렌더링 엔진을 쿼리하고 조작합니다. 3. Render engine 기본 기능은 '' 및 관련 기호 및 속성을 찾아 HTML을 구문 분석한 다음 CSS를 구문 분석하고 마지막으로 스크립트를 구문 분석하는 것입니다. 주목해야 할 점은 모든 구문 분석이 병렬로 진행된다는 점입니다.( Parsing 진행순서 HTML -> CSS -> JS) CS.. [Browser]CPU와 GPU를 통해 할당 받는 Process 애플리케이션을 시작하면 프로세스가 생성됩니다. 프로그램이 작업을 돕기 위해 스레드를 생성할 수도 있지만 이는 선택 사항입니다. 운영 체제는 프로세스에 작업할 수 있는 메모리의 "슬래브"를 제공하며 모든 애플리케이션 상태는 해당 개인 메모리 공간에 보관됩니다. 애플리케이션을 닫으면 프로세스도 사라지고 운영 체제에서 메모리를 확보합니다. When you start an application, a process is created. The program might create thread(s) to help it do work, but that's optional. The Operating System gives the process a "slab" of memory to work with and all ap.. [Lecture]컴퓨터 네트워크 5강 : Message, Layer Detail 5 Layer Internet Protocol Stack 각 계층은 아래 계층의 서비를 제공받는 Service User / 윗 계층에게 서비를 제공하는 Service Provider. PDU(Protoco Data Unit)은 각 Protocol이 처리하는 기본 단위. 단 모든 층의 데이터 단위가 다름 Application (Message) Transpor (Segment) Network(Packet, Datagram) : 출발지로부터 도착지까지 Routing 수행 Link (Frame) : 한 Hop을 지나가는 일 수행 Physical : 4 : Application Layer: Where a Communication Originates The packet's history begins when a u.. [Lecture] 4강 / Chapter2 : Layers Application architecture 2 type(by HOST로 구분) - client-server - peepr-to-peer(P2P) Client-Server architecture 통신을 하는 주체는 프로그램이라고 함. 실행중인 프로그램을 프로세스(Process)라고 칭함. OS 관점에서. Server:precess that initiates communictation - always-on host - permanent IP address - data centers for scaling Clients:process that waits to be contacted - communicate with only server - do no communicate directly with each ot.. [Lecture]Network 3강 : 1.4 delay, loss, throughput in networks One-Hop(Link) Delay 1. Processing delay(routing table lookup&swiching) 2. Queueing delay(output buffer at router when data be crowed) 3. Transmission delay (bit --> singal depanding on a cable performance) 4. Propagation delay(router to router) Nodal processing - routing table lookup & switching from input port to output port(store and forward) 1. Check bit erros 2. Determine output link Queuein.. 이전 1 2 3 다음
