전체 글452 면접대비 질문 정리: Next.js 면접질문 참고Next.js - 면접 단골 질문프론트엔드 개발자 면접 질문 1. Next.js의 SSR과 CSR의 차이점은 무엇인가요? ✅ 답변 SSR (Server-Side Rendering): 서버에서 HTML을 렌더링하여 클라이언트에 전달하는 방식입니다. 클라이언트는 서버로부터 완전히 렌더링된 HTML을 받아 바로 표시할 수 있습니다. 초기 로딩 속도가 빠르며, SEO에 유리한 방식이라는 특징이 있습니다.CSR (Client-Side Rendering): 클라이언트에서 JavaScript를 사용해 렌더링을 처리하는 방식입니다. 초기 페이지 로드 시, 클라이언트는 최소한의 HTML과 함께 JavaScript 번들을 받아 브라우저에서 직접 렌더링을 수행합니다. 이는 사용자와의 상호작용이 중요한 SPA(S.. 2024. 8. 26. [유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 1기 - 사전직무교육 2주차 후기 벌써 2주차 후기라니 시간이 너무 빠르다.일주일이 어떻게 흘렀는지도 모를만큼 빠른 진도였다.정신차리고 수업 따라가는 데만 해도 많은 에너지를 썼다.한 주 동안 배운 내용드디어 리액트를 마무리하고 Next.js 파트로 넘어갔다.솔직히 리액트 심화 부분도 어려운데(메모이제이션 부분ㅠ) Next를 따라갈 수 있을까 걱정했는데 생각보다 그렇게 어렵지는 않다. 물론 생각보다 어렵지 않다는 거지 모든 게 이해간다는 건 아니다...강사님께서 Next의 꽃인 라우팅 부분에 대해서 오랜 시간을 들여 가르쳐 주셨다. 이전에 Next.js 살짝 찍먹해 봤을 때는 app 라우터보다는 page 라우터가 대세여서 page 라우터로 Next.js를 배웠는데, 불과 5개월만에 대세가 완전히 바뀌었나 보다. 강사님께서도 이제는 최신 .. 2024. 6. 10. [유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 1기 - 사전직무교육 1주차 후기 우연한 기회에 Next.js 일경험 프로그램에 참여하게 되었다.서류작성을 하고 면접까지 본 뒤 바로 3주 간의 사전직무 교육에 참여하게 됐는데, 이제 막 한 주차 학습이 끝나서 관련 내용을 회고해 볼 생각이다. 한 주 동안 배운 내용우선 한 주 동안 강의를 들으며 노션에 필기한 내용.한 주 만에 `자바스크립트 -> 타입스크립트 -> 리액트 기초`까지 진도가 나갔다.자바스크립트는 처음에 변수와 표현식부터 시작했는데,var num1 = 10 + 20; //표현식30; //값 (이런 거...) 이틀만에 렉시컬 환경이나 자바스크립트 동작 원리에 대한 이야기까지 수업이 진전되었다. 자바스크립트 렉시컬 환경, 콜스택 등은 여러 번 들어도 이해가 쉽지 않다. 강의 자료를 참고해서 더 공부해 봐야겠다...그 외에도.. 2024. 6. 2. [에이블런] TIL(24.05.22): 자바스크립트 2 전위/후위 연산자 (++i와 i++)1. `x = ++i;` => 전위 연산자i = i + 1;x = i;2. `x = i++;` => 후위 연산자x = ii = i + 1;연산자 우선순위i++ ⇒ i = i + 1대입 연산자 `x = (1, 2)`: 쉼표 연산자, 각각의 피연산자를 왼쪽에서 오른쪽 순서로 평가하고, 마지막 연산자의 값을 반환된다. 뒤의 값이 x에 대입된다. 즉 `x = 2``x = y = 1`: 가장 뒤의 숫자를 대입한다.`const`, `let`은 메모리의 더 빠른 부분에 위치하기 때문에, `var`보다 `const`, `let`을 먼저 찾아간다. (서랍의 가장 상단에 const, let / var과 같은 전역 객체는 가장 하단의 서랍에 위치한 이미지를 떠올리기) Env Record스.. 2024. 5. 22. [에이블런] TIL(24.05.20): 자바스크립트 1 오늘 배운 내용프로그래밍 언어`컴파일러 언어`: ISA(어셈블리) ⇒ CPU가 이해할 수 있는 코드, 컴파일 후 한번에 바로 실행 (TypeScript: 트랜스파일러 )`인터프리터 언어`: 실행을 먼저 함 (node, phython - a.js, a.py…) ⇒ 실행을 하면 컴파일 과정(평가, 실행)이 반복해서 이루어진다. (컴파일러 언어와 달리, 한 단계를 더 거친다 → valuable context / valuable table를 거쳐야 함) ⭐ 자바스크립트 언어의 interprete 과정Memory 구조kernel (os)code (mc)data (전역/정적) — null, undefinedstack (primitive) — 변수 테이블 존재Heap (Reference)var i = 0;// 평가.. 2024. 5. 20. [React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: styled-components 잘 사용해 보기 (스타일 코드 리팩토링) 보호되어 있는 글 입니다. 2024. 5. 19. [유데미 | Maximilian] Next.js 강의 내용 정리 (섹션 1: 시작하기) 보호되어 있는 글 입니다. 2024. 5. 19. [React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 커뮤니티 게시글 검색 기능 구현 보호되어 있는 글 입니다. 2024. 5. 19. [에이블런] TIL(24.05.16): Git 2 오늘 배운 내용Gitgit config -l: 유저 정보가 나옴git config -l | grep user: user라는 단어가 나오는 내용만 추출rcp, rsync: 과거에 웹서버에 접근하던 방법ssh: 현재에 웾 서버에 접근하는 방법DevOps: 개발을 operation한다ctrl + shift + f: 돋보기 단축키 → 추가 단축키는 찾아보기ctrl + p: 창 열기git ls-files: 파일의 현재 상태 확인하기-u: 이 뒤로는 origin main 작성할 필요가 없다.git branch other / git checkout otherswitch branch명 / git checkout -c namename(새로운 브랜치 생성 및 이동)git checkout branch명 / git check.. 2024. 5. 18. [에이블런] TIL(24.05.14): Git 오늘 배운 내용Gitgit commit: 메모리에 올라와 있는 데이터를 실제 저장소에 write하는 것형상관리 툴 사용 이유remote repository 때문에 → remote repository가 살아있어야 데이터가 사라지지 않는다.여러 명이 동시에 코드를 작성하기 위함히스토리 확인stage: 임시 저장공간, 작업본stage가 필요한 이유충돌방지실수 방지repository: 실제 저장소, 최종본branchmain: head branch파일이 커밋될 당시의 버전을 의미브랜치의 커밋 버전과 파일의 커밋 버전은 서로 다른 것git rm : tracked → untracked로 변경됨, 지우는 명령어git clean : untracked된 파일을 삭제하는 명령어git ignore: 삭제도 적용. 삭제 명령어.. 2024. 5. 18. [에이블런] TIL(24.05.09): 컴퓨터 구조 오늘 배운 내용컴퓨터 구조block: 데이터를 그룹화 해놓은 것페이지: 여러 개의 데이터를 한번에 묶어서 옮김. 이 단위를 페이지라 함. 페이지의 사이즈는 유동적.버퍼: 데이터를 한 곳에서 다른 한 곳으로 전송하는 동안 일시적으로 그 데이터를 보관하는 메모리의 영역. 데이터를 이동시키는 바가지 개념. 버퍼의 사이즈는 유동적. 개발자가 정할 수 있음. 보통 8k 단위.⇒ 메모리를 적게 사용하기 때문에 메모리 입장에서는 버퍼를 사용하는 것이 유리하다.여러 개의 버퍼를 지칭하는 용어로도 페이지를 사용한다.데이터의 순서가 무조건 선입선출은 아니지만 어떻게든 데이터가 이동하기는 함 ⇒ 스트리밍스트리밍 방식을 사용하지 않고 한번에 데이터를 받는 것 ⇒ 다운로드 TCP/IP이동하는 데이터의 순서 보장(넘버링을 통해).. 2024. 5. 18. [에이블런] TIL(24.05.08): 웹개발 기초 (컴퓨터구조, 컴파일러, 자바스크립트 기초) 오늘 배운 내용컴퓨터 구조Memory Data 영역Data 영역에는 const(상수)가 저장된다. (타입 크기 변경의 여지가 없음)전역변수: 전역 + 상수정적변수: 변하지 않는 상수 Memory code 영역function (함수) 존재 ⇒ 단위 시간당 n번 이상의 호출이 있다면 캐시 메모리로 이동 OS프로세스 개수만큼 PCB 생성 (컨텍스트 스위칭이 일어남) 타임스탬프: 유닉스 타임 기준 순수함수: 입력값에 따른 출력값이 항상 동일한 함수자바스크립트는 쓰레기값을 싫어한다! ⇒ 언어는 브라우저 내에서 돌기 때문에, 브라우저에는 이미 쓰레기값이 많다function add (a, b) {} ⇒ 매개변수(parameter)add(1, 2) ⇒ 인수(argument)컴파일러렉시컬일종의 문화. 어떤 문맥인지.. 2024. 5. 8. 이전 1 2 3 4 ··· 38 다음 반응형
