o-ohi-code 님의 블로그

취업을 준비 중인 취준생으로서, 오늘도 유튜브 알고리즘을 타고 개발자 면접 관련 영상을 찾아보고 있었다. 그중 한 영상에서, 실제 면접관이 지원자에게 보통 이런 질문을 자주 한다는 이야기 들었다."API를 연결할 때, 각 요소들이 어떤 순서로 연결되나요?""API 요청이 처리되는 전체 과정을 설명해 보세요." ...? 순간, 아무 생각이 들지 않았다. 분명 여러 프로젝트를 진행하면서 많은 백엔드, 프론트엔드를 만져봤는데, 막상 구조적으로 설명하려고 하니 머릿속이 하얘지는 기분이었다. 그래서 오늘은 이 질문에 대해 "자신 있게 대답할 수 있도록 정리를 해보려고 한다". 우선 API 연결 흐름을 알기 전에 API에 대한 용어 먼저 정리하면, API (Applicaion Programming Interfac..

브라우저 렌더링 과정?, 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) 전반에 대한 공부를 시작하게 되었다. 그 과정에서 "아키텍처" 라는 개념이 눈에 들어왔다. 아키텍처아키텍처를 간단히 말하면 시스템의 구조를 설계하는 일을 의미한다. 어떻게 보면 소프트웨어에서 어떤 기술을 어떤 방식으로 조합해서 전체 서비스를 구현할 것인가에 대한 큰 그림 설계도 라고 할 수 있다. 쉽게 말해, 성능, 유지보수, 협업, 확장성을 고려해 시스템을 나누고 연결하는 전략이다. ..

React 렌더링React 프로젝트를 진행하던 중, 예상치 못한 로그인 오류가 계속 발생해서 원인을 추적하게 되었다.그러다 보니 자연스럽게 react 의 렌더링 과정에 대해 알 게 되었고, 결국 그 렌더링 방식이 로그인 오류의 핵심 원인이었다는 것을 깨닫게 되어 정리를 해보았다. React의 렌더링 과정에는 크게 2단계로 나뉜다.Render Phase (렌더 준비 단계)컴포넌트 함수 호출됨JSX 평가 → 가상 DOM 트리 구성useState, useEffect, useRef 등 Hook들이 등록만 됨 (실행 X)렌더링은 순수해야 함 (랜덤값, API 호출, 상태 업데이트 등 ❌)Commit Phase (렌더 반영 단계)실제 DOM 업데이트가 여기서 발생useLayoutEffect → useEffect 순..

오라클 or cmd 에서 계정 등록 1. board_seq 시퀀스 생성하기CREATE SEQUENCE board_seq START WITH 1 -- 시퀀스의 시작 값 INCREMENT BY 1 -- 값 증가량 NOCACHE -- 캐시하지 않음, 시퀀스를 메모리에 미리 로딩하지 않음 NOCYCLE -- 시퀀스가 끝나면 오류가 발생, 재사용하지 않음 MINVALUE 1;2. 시퀀스 사용 시SELECT board_seq.NEXTVAL FROM dual

500 오류가 발생하는 원인500 Internal Server Error 가 발생하는 원인  요청이 백엔드 컨트롤러까지 도착했지만, 처리 중에 서버 내부에서 예외(Exception) 즉, 파라미터 이름은 맞아서 컨트롤러 진입은 했는데, 안에서 뭔가 error 가 발생한 경우이다. 나의 경우 DB 쿼리 자체에서 문법 오류가 발생했다.  SQLSyntaxErrorException 오류 발생

400 (Bad Request) 프론트에서 보내는 요청 파라미터가 백엔드에서 기대하는 형식과 다를 때 발생한다. case 1) 클라이언트 앞단 오타 오류 원인클라이언트에서 값을 전달 할 때 id, pw 형식으로 값을 보내야 하는데 클라이언트에서 값을 전달 할 때 id. ps 형식으로 값을 보내서 오류가 발생했다. 전달하는 형식이 잘 못 될 경우위와 같이 400 에러가 발생하게 된다. 정리하면 서버에서 클라이언트의 값을 받을 때 id, pw 로 값을 받게 해놨는데클라이언트에서 id, ps 형식으로 값을 전달하여 발생하게 된 오류였던 것이다.case 2) post 방식 오류 앞단 구조 백단 구조  오류 원인현재 앞단에서 뒷단으로 데이터를 보내는 방식은  (get 형식인 : 쿼리 파라미터) 방식을 사용하고 있..

React + Spring boot 를 활용한 게시판 CRUD 프로젝트를 진행하다  🫤 ..그 악명높은 CORS 오류가 발생하고야 말았다. 밑에는 내가 CORS 오류를 해결하기 위해 시도했던 방법들이다. 해결 ) Spring boot 의 경로를 잘 확인해야 한다. 매우 중요!! 이것 때문에 2시간을 낭비했다.무슨 말이냐고 하면 @SpringBootApplication 은 자기 자신이 위치한 패키지부터 하위 패키지들만 자동으로 스캔을 한다. ex) BoardBackApplication 의 경로가 com/example/board_back 인 경우       login의 경로가 com/login 인 경우 인식을 하지 못한다.       config의 또한 com/config 로 경로가 상위 에 존재했기 때문..

1. node -v https://nodejs.org/ko  Node.js — 어디서든 JavaScript를 실행하세요Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.orgnode 가 없는 경우 설치2. npm create vite@latest Board -- --template react3. cd Board 이동4. npm install -g pnpm5. pnpm install6. pnpm run dev정상적으로 화면이 돌아가는 것을 확인 할 수 있다.

네트워크의 기본 구조 : 그래프 형태 *Node(정점) : 네트워크에서 하나의 개체(장비나 지점)을 의미한다.*Edge(간선) : 노드와 노드를 연결하는 선, 즉, 통신 경로(연결선) 정리하면 정보를 주고 받을 수 있는 모든 컴퓨터 장비를 Node 라고 하며,  ex) 노트북, 테스크탑, 스마트폰, 서버, 공유기(Router), 스위치(Switch)    ㄴ 이런 것들이 모두 하나하나 Node가 되는 것이다. Node와 Node 를 연결해주는 선, 즉 (Edge)통신 경로이다. ex) 이더넷 케이블(컴퓨터 - 공유기), wifi 연결(스마트폰 - 라우터), 광케이블(서버 - 서버)..  ㄴ 이런 연결들이 Edge 에 해당한다.가장 자리 Node이 Node와 Edge 사이에서 우리가 사용하고 있는 컴퓨터 ..