o-ohi-code 님의 블로그

브라우저 렌더링 과정?, CSR, SSR 렌더링 과정? 잉 SPA, MPA? SEO 는 또 뭐고? 실무의 길은 멀고도 험난한 것 같다. 맨날 공부하고 그때는 분명 이해하고 넘어간 개념인데도, 지나가면 또 까먹어버리는 내 모습이 보인다. 그래서 오늘은 명확하게 브라우저의 렌더링 과정을 정리해보려고 한다. 브라우저는 사용자가 웹에 접근하고, 웹페이지를 표시해주는 소프트웨어이다. ex) 대표적인 웹브라우저로 Chrome, Safari, Edge.. 등이 있다. 렌더링(Rendering) 은 코드(HTML, CSS, JS 등) 을 눈에 보이는 화면으로 바꾸는 과정이다. 브라우저의 렌더링 과정 1. HTML 파싱 → DOM 생성 2. CSS 파싱 → CSSOM 생성 3. DOM + CSSOM → Rende..

처음에는 그냥 프론트엔드 개발을 하면서 화면에 잘 보이기만 하고 코드만 잘 짜면 된다는 생각을 가지고 있었다.하지만 취업의 문은 높았고, 나는 아직 우물 안 개구리였다는 사실을 깨닫게 되었다. 기술 면접을 준비하면서 단순한 개발 스킬만으로는 부족하다는 걸 느꼈고, 그때부터 자연스럽게 CS(computer Science) 전반에 대한 공부를 시작하게 되었다. 그 과정에서 "아키텍처" 라는 개념이 눈에 들어왔다. 아키텍처아키텍처를 간단히 말하면 시스템의 구조를 설계하는 일을 의미한다. 어떻게 보면 소프트웨어에서 어떤 기술을 어떤 방식으로 조합해서 전체 서비스를 구현할 것인가에 대한 큰 그림 설계도 라고 할 수 있다. 쉽게 말해, 성능, 유지보수, 협업, 확장성을 고려해 시스템을 나누고 연결하는 전략이다. ..

트랜잭션  하나의 작업 단위를 구성하는 연산 묶음  *이 작업 단위는 모두 성공하거나, 모두 실패애햐만 한다.*   ex) 은행 계좌 이체를 가정   A 계좌에서 돈 빠지고   B 계좌에 돈 들어간다.   이는 하나는 성공하고, 하나는 실패하면 안되는 경우이다.    둘다 성공하거나, 둘 다 실패해야 한다 이런 것을 하나의 트랜잭션으로 묶는 것이다.트랜잭션 4대 속성 (ACID)  A - 원자성 : 머드 상겅 or 모두 실패 (중간 없음)  C - 일관성 : 트랜잭션 전후의 데이터 항상 유효한 상태여야 한다.  I -  격리성 : 동시에 실행돼도 서로 영향 안 받게 한다.  D - 지속성 : 트랜잭션 성공 시, 결과는 영구적으로 저장되어야 한다. 트랜잭션이 필요한 이유여러 DB 작업이 연결된 경우 : 하..

운영체제(Operation System) 는 하드웨어와 소프트웨어 사이에서 중간 다리 역할을 하는 프로그램이다.📌 컴퓨터를 사람이 쉽게 다루게 도와주는 컴퓨터의 관리자 프로그램  ✅ 운영체제의 주요 역할  하드웨어 제어 : cpu, 메모리, 디스크, 입출력 장치 등 관리  자원 할당 : 어떤 프로그램에 얼마나 CPU, 메모리 줄지 결정  프로세스 관리 : 여러 프로그램이 동시에 돌아가도록 조정  메모리 관리 : 각 프로그램이 쓰는 메모리를 안전하게 관리  보안 & 권한 : 사용자/프로그램 접근 권한 제어  파일 시스템 : 파일 저장, 읽기, 쓰기 처리  ✅ 프로세스(Process)   실행 중인 프로그램 한 개를 말해,    ex) 크롬, 카카오톡, VSCode 가 각각 하나의 프로세스    특징메모리..

UI = User Interface (사용자 인터페이스)사용자와 시스템이 만나는 화면, 조작하는 모든 것을 말한다. 🤔 실무에서 UI 는 어떤 의미로 사용이 될까?UI 개발해 주세요 : 사용자가 보게 되는 화면, 버튼, 메뉴 등을 만들어 달라는 말UI 디자이너 : 사용자 인터페이스(화면 구성)을 디자인 하는 사람UI 개선 필요 : 화면이 불편하거나 구조가 복잡하니 사용자 입장에서 더 보기 쉽게 바꾸자는 말UI/UX : UI는 겉모습, UX는 경험 (둘은 항상 함께 다닌다.)

✅ MES = Manufacturing Execution System👉 생산 관리 시스템, 즉 공장에서 제품이 어떻게 만들어지고 있는지를 실시간으로 관리하는 시스템  ✅ MES 가 하는 일생산 계획 관리 : 오늘 몇 개 만들 건지 계획 세우기작업 지시 : 작업자에게 어떤 제품, 어떤 순서로 만들지 지시설비 제어 : 기계/장비 상태 모니터링품질 검사 : 불량품 검사, 검사 기록 저장자재 추적 : 어떤 원자재가 어떤 제품에 사용됐는지 기록실시간 모니터링 : 공장 전체 생산 현황 실시간 확인

MSA 는 Microservices Architecture (마이크로서비스 아키텍처)하나의 큰 서비스(=모놀리식)를 여러 개의 작은 서비스로 나눠서 개발하는 구조다.🤔 쉽게 이야기를 하면?기존 방식은 "하나로 뭉쳐진 거대한 앱" 이라면[ 모놀리식(Monolithic) 구조 ]로그인, 상품 목록, 결제, 배송, 알림 기능이 전부 한 서버 안에 있음근데 MSA 는 기능별로 쪼갠다.[ MSA 구조 ]로그인 서버상품 서버결제 서버배송 서버알림 서버..(각자 독립적으로 운영된다.) 🤔 왜 MSA 를 사용하는 걸까?⚙️ 유지보수 용이 : 기능별로 코드가 나뉘어 있어 관리하기 쉽다. 🚀 개발 병렬화 : 여러 팀이 동시에 작업 가능 🛠 부분 배포 가능 : 전체 시스템을 중단하지 않고 부분만 업데이트 가능 💥 ..

✔ SI 개발자 (System Integration) 만드는 사람고객사가 원하는 시스템을 만들어주는 개발자하늘 일 : 시스템을 처음부터 설계 + 개발 납품si 개발자는 (프론트 엔드 + 백엔드 둘다 다룰 줄 알아야 한다.) ✔ SM 개발자 (System Maintenance) 관리하는 사람이미 만들어진 시스템을 유지보수하고 개선하는 개발자하는 일 : 시스템 운영 중 버그 수정, 기능 추가, 성능 개선 ✔ 프론트엔드 개발자사용자가 직접 보는 화면(UI)를 개발하는 사람하는 일 : 웹페이지 디자인, 버튼 클릭, 애니메이션 등 시각적 구현주요 키워드 : 사용자 경험(UX), 반응형 UI, 웹 접근성 ✔ 백엔드 개발자사용자가 보지 못하는 서버-데이터-로직을 처리하는 사람하는 일 : 로그인 처리, DB 저장, A..