DEV LOG
개발 공부 및 개발자 이야기를 올리는 블로그입니다.
Posts
Next.js 에는 라우터가 두 개 ?Next.js 를 처음 공부하면 제일 먼저 헷갈리는 부분"pages 폴더로 하라는 강의도 있고, app 폴더로 하라는 강의도 있는데…?"둘 다 맞다.Next.js 에는 Page Router (pages 폴더) 와 App Router (app 폴더) 두 가지 방식이 존재한다.같은 집을 리모델링 했다고 생각하면 편하다.주소(URL) 는 그대로인데, 방 배치(폴더 구조) 와 배관(데이터 페칭) 이 싹 바뀌었다.(SSR , CSR 개념이 헷갈린다면 이전 글 SSR vs CSR 을 먼저 보고 오면 좋습니다)Page Router (구옥)Next.js 13 이전부터 쓰던 방식pages 폴더 안의 파일명이 곧 주소가 된다.pages/ ├─ index.tsx → / ├─..
map 과 forEach 차이const data.forEach((item) => { return item + 2;})const data.map((item) => { return item + 2;})forEach 는 반환이 없는 반면 map 은 새로운 배열을 반환함 선언형 프레임워크선언형 프레임워크의 경우 실제 html 을 내가 작성하여 변수 선언을 함기존 자바스크립트의 경우 명령형으로 메서드를 통해 html 을 그려서 만듬 리액트 {items.map(item => ( {item} ))}기존 방식const ul = document.createElement("ul");items.forEach(item => { const li = document.createElement("li");..
인덱스란 ?데이터를 빠르게 찾기 위한 도구 오라클에서 자동 생성 또는 개발자가 직접 생성 단, 인덱스 또한 생성의 개념이므로 디스크 공간을 차지함 -> 의미 없는 인덱스를 많이 만들면 오히려 안 쓰는게 더 빠름이점 ?where 조건 검색시에 속도가 빠름정렬 속도가 향상됨 (order 절)중복 제거 속도 향상 (DISTINCT , GROUP 절)단점 ?insert , update, delete 의 경우 오히려 더 느려짐 인덱스 생성 -> 디스크 공간 차지로 이어짐 (느려지는 문제로 이어짐)인덱스는 언제 쓸까 ??조회 중심의 테이블인 경우 조인 조건으로 걸리는 컬럼 where 조건 절에 자주 들어가는 컬럼 인덱스 유의 사항UPPER 쓰면 인덱스가 동작 안 해요... (프론트단에서 해결해줘야해요)LIKE 절의..
it국비지원교육 이전의 나나는 공대는 나왔지만, 전기공학과를 졸업했다. (당시엔 재학 중)그 중에서도 반도체와 임베디드 과목들을 주로 수강을 했었다.어쩌면 당연한 거다 삼성, 하이닉스 같은 반도체가 주력인 나라에서 반도체를 공부한게 특별하진않다. 맨날 8대 공정에 박막이 어쩌고 공부는 하지만 실제 어떻게 돌아가는지 볼 수는 없었다 (학교엔 반도체 장비 시설만 있었다) 공부할수록 뭘 하고 있는지 상상력으로 공부하는 느낌에 임베디드쪽으로 고개를 돌렸고,코딩이 재밌어 질 무렵 부품이 하나 고장 나면 진행할 수 없는 게 싫었던 나는 소프트웨어쪽으로 또 눈을 돌렸다. 그때 본 게 국비지원교육이다..it국비지원교육나는 역삼역 쪽 쌍용교육센터에서 국비교육을 받았다. (23년 12월 ~ 24년 6월)교육 받기 전 ..
상태관리 ?리액트에서 상태란 useState 를 통해 관리를 함 문제는 useState 발생마다 리렌더링이 동작 , 상태 공유가 복잡해짐 , 성능 저하useState 만으로는 상태관리가 어렵다 판단하여 등장한 전역 상태관리 도구Redux (지배의 악마)구조적이고 강력한 상태관리 툴액션 , 리듀서 , 디스패치 , 미들웨어 등등 기능이 다양함 (오히려 이게 요즘 단점)상태관리를 편하게 하고자 쓰는 기술이 오히려 더 복잡해지는 경우가 존재 상태 추적 가능 너무 많은 기능에 오히려 통제가 강함Zustand (시골쥐)기존 상태관리 툴에서 복잡한 기능들 제거 , 가벼운 툴로 등장 Hook 을 활용하여 직관적임useStore 로 set , get 모두 가능 코드가 짧고 직관적임상태 추적에선 불리 미들웨어 같은 작업은..
웹 개발의 변화jsp의 경우 SSR 방식 (서버에서 html 만들어 보냄) React의 경우 CSR 방식 (브라우저에서 JS로 화면 그림)Next의 경우 SSR 방식 (서버에서 html 만들어 보냄) ??SSR(Server Side Rendering) 이란 ?서버에서 HTML 을 만들어서 클라이언트에게 보내는 방식첫 로딩이 빠름SEO에 유리 (검색 크롤링)페이지 바뀔때마다 새로고침 필요서버 부하(예시 : PHP , JSP , Next.js)CSR(Client Side Rendering) 이란 ?빈 HTML 에 JS 가 DOM 을 만드는 형식 사용자 경험 중심 SPA 처럼 화면 전환이 자연스러움 초기 로딩 느림SEO 불리 (크롤링에서 불리)(예시 : React , Vue , Angular)서로가 불리한..
Next.js 에는 라우터가 두 개 ?Next.js 를 처음 공부하면 제일 먼저 헷갈리는 부분"pages 폴더로 하라는 강의도 있고, app 폴더로 하라는 강의도 있는데…?"둘 다 맞다.Next.js 에는 Page Router (pages 폴더) 와 App Router (app 폴더) 두 가지 방식이 존재한다.같은 집을 리모델링 했다고 생각하면 편하다.주소(URL) 는 그대로인데, 방 배치(폴더 구조) 와 배관(데이터 페칭) 이 싹 바뀌었다.(SSR , CSR 개념이 헷갈린다면 이전 글 SSR vs CSR 을 먼저 보고 오면 좋습니다)Page Router (구옥)Next.js 13 이전부터 쓰던 방식pages 폴더 안의 파일명이 곧 주소가 된다.pages/ ├─ index.tsx → / ├─..
map 과 forEach 차이const data.forEach((item) => { return item + 2;})const data.map((item) => { return item + 2;})forEach 는 반환이 없는 반면 map 은 새로운 배열을 반환함 선언형 프레임워크선언형 프레임워크의 경우 실제 html 을 내가 작성하여 변수 선언을 함기존 자바스크립트의 경우 명령형으로 메서드를 통해 html 을 그려서 만듬 리액트 {items.map(item => ( {item} ))}기존 방식const ul = document.createElement("ul");items.forEach(item => { const li = document.createElement("li");..
인덱스란 ?데이터를 빠르게 찾기 위한 도구 오라클에서 자동 생성 또는 개발자가 직접 생성 단, 인덱스 또한 생성의 개념이므로 디스크 공간을 차지함 -> 의미 없는 인덱스를 많이 만들면 오히려 안 쓰는게 더 빠름이점 ?where 조건 검색시에 속도가 빠름정렬 속도가 향상됨 (order 절)중복 제거 속도 향상 (DISTINCT , GROUP 절)단점 ?insert , update, delete 의 경우 오히려 더 느려짐 인덱스 생성 -> 디스크 공간 차지로 이어짐 (느려지는 문제로 이어짐)인덱스는 언제 쓸까 ??조회 중심의 테이블인 경우 조인 조건으로 걸리는 컬럼 where 조건 절에 자주 들어가는 컬럼 인덱스 유의 사항UPPER 쓰면 인덱스가 동작 안 해요... (프론트단에서 해결해줘야해요)LIKE 절의..
it국비지원교육 이전의 나나는 공대는 나왔지만, 전기공학과를 졸업했다. (당시엔 재학 중)그 중에서도 반도체와 임베디드 과목들을 주로 수강을 했었다.어쩌면 당연한 거다 삼성, 하이닉스 같은 반도체가 주력인 나라에서 반도체를 공부한게 특별하진않다. 맨날 8대 공정에 박막이 어쩌고 공부는 하지만 실제 어떻게 돌아가는지 볼 수는 없었다 (학교엔 반도체 장비 시설만 있었다) 공부할수록 뭘 하고 있는지 상상력으로 공부하는 느낌에 임베디드쪽으로 고개를 돌렸고,코딩이 재밌어 질 무렵 부품이 하나 고장 나면 진행할 수 없는 게 싫었던 나는 소프트웨어쪽으로 또 눈을 돌렸다. 그때 본 게 국비지원교육이다..it국비지원교육나는 역삼역 쪽 쌍용교육센터에서 국비교육을 받았다. (23년 12월 ~ 24년 6월)교육 받기 전 ..
상태관리 ?리액트에서 상태란 useState 를 통해 관리를 함 문제는 useState 발생마다 리렌더링이 동작 , 상태 공유가 복잡해짐 , 성능 저하useState 만으로는 상태관리가 어렵다 판단하여 등장한 전역 상태관리 도구Redux (지배의 악마)구조적이고 강력한 상태관리 툴액션 , 리듀서 , 디스패치 , 미들웨어 등등 기능이 다양함 (오히려 이게 요즘 단점)상태관리를 편하게 하고자 쓰는 기술이 오히려 더 복잡해지는 경우가 존재 상태 추적 가능 너무 많은 기능에 오히려 통제가 강함Zustand (시골쥐)기존 상태관리 툴에서 복잡한 기능들 제거 , 가벼운 툴로 등장 Hook 을 활용하여 직관적임useStore 로 set , get 모두 가능 코드가 짧고 직관적임상태 추적에선 불리 미들웨어 같은 작업은..
웹 개발의 변화jsp의 경우 SSR 방식 (서버에서 html 만들어 보냄) React의 경우 CSR 방식 (브라우저에서 JS로 화면 그림)Next의 경우 SSR 방식 (서버에서 html 만들어 보냄) ??SSR(Server Side Rendering) 이란 ?서버에서 HTML 을 만들어서 클라이언트에게 보내는 방식첫 로딩이 빠름SEO에 유리 (검색 크롤링)페이지 바뀔때마다 새로고침 필요서버 부하(예시 : PHP , JSP , Next.js)CSR(Client Side Rendering) 이란 ?빈 HTML 에 JS 가 DOM 을 만드는 형식 사용자 경험 중심 SPA 처럼 화면 전환이 자연스러움 초기 로딩 느림SEO 불리 (크롤링에서 불리)(예시 : React , Vue , Angular)서로가 불리한..