나의 FE피봇이야기/Dev_Knowledge (34) 썸네일형 리스트형 [ 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.. [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.. [Lecture]Network 2강, Internet Structure. Physical Link : transmitter -> Receiver Guided media : signals propagate in solid. copper(Ethernet), fiber(HFC) , coax Unguided media : signals propagate freely. no physical "wire", radio link type ex) WIFI, Cellular(wide-area), terrestrial microwave, satellite End systems --> access networks --> links --> access network--> End systerms 1.3 Netwrok core : packet switiching, circuit switching, ne.. [Lecture]Network 1강 Internet is network of networks Network structure network edge == millions of connected computing devices : hosts = end systems network core == packet switches : foward packedts(chunks of data) : routers and switches access network, physical media == communication links : fiber, copper, radio, satellite. Protocol Protocols define format, order of messages sned and received among network entities.. [Front-End]HTML에서 토큰화와 어휘분석? 브라우저에서 HTML의 맥락에서 토큰은 마크업 언어의 가장 작은 개별 단위를 의미합니다. 브라우저는 HTML 문서를 구문 분석할 때 콘텐츠를 토큰으로 분류하고, 이 토큰은 DOM(문서 객체 모델) 트리를 구성하는 데 사용됩니다. HTML 구문 분석에는 네 가지 주요 유형의 토큰이 있습니다: 시작 태그: HTML 요소의 시작을 나타냅니다. 여기에는 태그 이름과 요소와 관련된 모든 속성이 포함됩니다. 끝 태그: HTML 요소의 종료를 나타냅니다. 태그 이름 앞에 슬래시(/)가 오는 태그 이름으로 구성됩니다. 코멘트: 문서의 HTML 주석을 나타냅니다. 로 끝납니다. 문자: HTML 요소 내의 일반 텍스트 또는 콘텐츠를 나타냅니다. 브라우저는 HTML 문서를 수신하면 "토큰화(Tokenization)" 또는 .. [Front-End] 브라우저 엔진과 렌더링 엔진의 차이는 뭘까? 웹 브라우저의 맥락에서 '브라우저 엔진'과 '렌더링 엔진'은 웹 페이지 렌더링을 담당하는 동일한 기본 구성 요소를 지칭하기 때문에 종종 같은 의미로 사용되기도 합니다. 하지만 두 용어 사이에는 미묘한 차이가 있을 수 있습니다: 브라우저 엔진: 레이아웃 엔진이라고도 하는 브라우저 엔진은 웹 콘텐츠 구문 분석 및 처리와 관련된 다양한 작업을 처리하는 웹 브라우저의 핵심 구성 요소입니다. 여기에는 렌더링 엔진이 주요 구성 요소 중 하나로 포함되어 있습니다. 브라우저 엔진은 렌더링 외에도 네트워킹(요청 및 응답 처리), HTML 및 CSS 구문 분석, JavaScript 실행 처리, 보안 프로토콜 관리, 사용자 상호 작용 처리 등의 작업도 관리합니다. 렌더링 엔진: 렌더링 엔진은 브라우저 엔진의 하위 집합입니다.. [Front-End]Compiler compiler is essentially a translater that translates one language of which the language of the programmer into a systems language. input -> lexical analysis -> token -> syntacital analysis Token 토큰화란? 주어진 텍스트에서 토큰(token)이라 불리는 단위로 나누는 작업을 토큰화(tokenization)이라고 한다. 토큰의 단위가 상황에 따라 다르지만, 보통 의미있는 단위로 토큰을 정의한다. 참조 https://www.youtube.com/watch?v=r6vNthpQtSI [Front-End]Parsing 이란 사전적 의미 parsing : 어구의 해부, 문의 분석 parse : 어구의 해부, 문의 분석 Parsing a document means translating it to a structure the code can use The result of parsing is usually a tree of nodes that represent the structure of the document. This is called a parse tree or a syntax tree. 문서를 파싱하는 것은 코드가 사용할 수 있는 구조로 변환하는 것을 의미합니다. https://javascript.info/dom-nodes DOM tree javascript.info 파싱은 2개가 있음 어휘 파싱(lexical)과 구분.. [Front-End] a Web rendering Engine 솔직 문서를 읽어도 헷갈렸는데 영상찾아보니까 좋은 자료가 있어서 영상으로 이해함 https://www.youtube.com/watch?v=o3_u1azhfJw https://www.youtube.com/watch?v=z1Jj7Xg-TkU A browser Architecture 브라우저 작업 진행 시나리오 1. 사용자가 주소표시줄(사용자 인터페이스)에 URL을 입력 2. 브라우저 엔진에게 URL(입력받은 주소값) 전달 3. 브라우저 엔진은 URL에 해당하는 데이터를 자료저장소(caching)에서 먼저 찾아봄 4-1. 캐싱된 자료가 있다면, 랜더링 엔진은 브라우저 엔진으로부터 자료를 받아 HTML, CSS, image 등을 파싱 4-2. 캐싱된 자료가 없다면, 서버에 요청해서 자료를 찾고 런더링 엔진은 통.. 이전 1 2 다음
