본문 바로가기

분류 전체보기107

CSR vs SSR - 로드되는 HTML 파일의 내용 비교 CSR과 SSR의 차이를 공부할 때, CSR 방식은 초기에 서버로부터 빈 껍데기의 HTML 파일을 받아오고 동적으로 컨텐츠를 채운다고 배웠고, SSR 방식은 렌더링 준비가 어느정도 된 상태의 HTML 파일을 받아온다고 배웠다.  실제로 그런지 확인해보고자 내가 참여한 프로젝트(CSR)와 SSR 방식으로 구축된 서비스의 HTML 파일을 비교해보았다 😋 CSR 웹사이트 [개발자 도구 - 네트워크 탭 - HTML 파일] 선택HTTP 헤더 포함 다양한 정보들이 나온다.   우클릭하고 [소스 패널에서 열기] 클릭 그럼 소스(Source) 탭으로 이동해서 서버로부터 받은 HTML 파일 내용이 보이는데 진짜 껍데기만 있다. 태그 안에 초기 컨텐츠가 없는 것이 특징이다. 이는 리액트가 클라이언트에서 실행되어 UI를 .. 2024. 4. 26.
JavaScript | 실행 컨텍스트 (3) - 클로저 인터넷에서 클로저의 정의를 둘러보다보면 잘 이해가 가지 않는다. 굉장히 모호하게 서술되어있기 때문이다. 개념 자체가 모호해서 그런 것일 거다. 내가 책에서 이해한 방식대로 한번 정리하는 것이 필요할 것 같다. 클로저를 활용하는 방식은 다양한데, 솔직히 말하면 내가 아직 거기까지 다루기엔 시기상조인 것 같다. 그래서 이번에는 클로저가 어떤 개념인지를 명확히 이해하는 것에만 초점을 맞추려고 한다. 클로저(Closure)란? 클로저에 대한 서술은 저자마다 상이한데, 코어 자바스크립트 저자에 따르면 그나마 다음 문장들이 잘 정의한 것에 가깝다고 한다. 클로저는 함수를 선언할 때 만들어지는, 유효범위가 사라진 후에도 호출할 수 있는 함수 - , p116 클로저는 이미 생명 주기상 끝난 외부 함수의 변수를 참조하는.. 2024. 3. 29.
JavaScript | 실행 컨텍스트 (2) - This 바인딩 앞서 실행 컨텍스트의 구성 요소 중 ThisBinding도 있다고 하였다. 이는 this 키워드가 무엇을 가리킬지를 나타내는 정보이다. 코드를 짜다보면 지금 내가 호출하는 this가 무엇을 가리킬지가 머릿속에 그려져야 하는데, 자바스크립트의 this를 공부해보면 참 줏대가 없는 놈이라고 느낀다. 많은 사람들이 그럴 것이다. 특정 함수가 호출될 때 실행 컨텍스트가 형성되는데, 이때 어떤 상황이냐에 따라서 this에 다른 대상이 바인딩된다. 그 패턴에 대해서 알아보자. 선정리 후설명 전역 공간에서의 this 전역 객체를 가리킨다. (브라우저 환경에서는 window 객체, Node.js 환경에서는 global 객체) 메서드 호출에서의 this 메서드가 적용되는 객체를 가리킨다. (즉, 점(.) 앞에 붙어있는 .. 2024. 3. 29.
JavaScript | V8 엔진의 메모리 관리 처음 JavaScript를 공부했던 1월에 자바스크립트의 동작 구조를 간단히 살펴본 바 있다. 직전 포스팅에서는 실행 컨텍스트 개념을 정리하였다. 그리고 최근에는 가비지 컬렉션(Garbage Collection)의 기본적인 개념에 대해서 살펴보았다. 이 두 개념에서 조금 더 나아가서, JavaScript에서 메모리 관리가 어떻게 이루어지는지를 전반적으로 알아보도록 하자! (잠깐 복습) 기본적으로 콜 스택(Call Stack)은 현재 실행 중인 함수의 실행 컨텍스트들을 쌓는 공간이다. [실행 컨텍스트 복습] 각 함수 호출은 실행 컨텍스트(Execution Context)라는 단위로 콜 스택에 쌓이게 된다. 실행 컨텍스트는 해당 함수의 실행에 필요한 모든 정보를 포함하는데, 여기에는 - 변수 환경(Varia.. 2024. 3. 27.
JavaScript | 실행 컨텍스트 (1) - 실행 컨텍스트, 호이스팅, 스코프 1. 실행 컨텍스트(Execution Context) 실행 컨텍스트란? 흔히 JS의 동작원리를 그릴 때 콜 스택에 함수가 쌓이는 식으로 표현하는데, 그 쌓이는 것이 실행 컨텍스트이다. 지금 실행할 스크립트에 대한, 여러가지 필요한 정보(환경)를 객체에 담은 것이라고 보면 된다. 각 실행 컨텍스트는 변수 객체(Variable Object), 스코프 체인(Scope Chain), 그리고 this에 대한 정보를 포함한다. 실행 컨텍스트는 자바스크립트 엔진의 가장 핵심적인 부분 중 하나로, 스코프, 호이스팅, 클로저 같은 자바스크립트의 주요 동작 원리의 기반이 되는 개념이다. 실행 컨텍스트의 생성 실행 컨텍스트는 우선 1) 전역 실행 컨텍스트(Global Execution Context), 2) 함수 실행 컨텍.. 2024. 3. 26.
[자바의 정석 스터디] Ch3. 연산자/ Ch4. 조건문과 반복문 연산자와 피연산자연산자: 연산을 수행하는 기호 (+, -, *, /)피연산자: 연산자의 연산수행 대상모든 연산자는 연산결과를 반환한다.즉, 연산결과를 반환하지 않으면 연산자가 아니다.예를 들어, () 괄호는 연산자가 아니다. </p.. 2024. 3. 25.
가비지 컬렉션(Garbage Collection) 최근 면접에서 가비지 컬렉션에 대한 질문을 받았다. 동적 메모리 할당을 공부할 적에 잠깐 본 적이 있는 주제라 기초적인 수준의 답변은 했으나, 짧은 경험상 GC에 대해서 제대로 들여다본 적이 없었다는 생각이 들어 아쉬웠다. 특히 '자바스크립트에서도 GC가 존재하는가?' 라는 질문을 주셨을 때, 자바스크립트를 다뤘으면서도 한번도 이를 고민해본 적이 없다는 점을 반성하게 되었다. '코드를 짜면서 free를 해준 기억은 없기에 엔진 내부적으로 GC가 동작하지 않을까 생각한다' 정도의 답변을 했으나, 이 기회에 제대로 알아야겠다는 생각을 하게 되었다. 해당 내용은 아래 포스팅에 마저 기록! JavaScript | V8 엔진의 메모리 관리 1. 가비지 컬렉션이란? 가비지 컬렉션(GC)은 동적 메모리 관리의 한 형.. 2024. 3. 24.
리액트에서 useEffect를 처리하는 과정 (프로젝트 교훈) 이번 프로젝트에서 어려웠던 점 중 하나는 리액트 내부의 코드 실행 순서를 제대로 이해하지 못하고 있다는 것이었는데, 그로 인해 겪은 시행착오 덕에 여러가지를 배울 수 있었다. 나름 유의미했던 러닝포인트 하나를 기록해두고자 한다. 문제 상황 우리 프로젝트는 사용자가 작업실을 만들고 그 안에서 플레이하는 형식이기 때문에, API 통신이나 소켓 통신을 활용하는 많은 기능에서 사용자가 어떤 작업실에서 요청을 하는지를 식별해야 했다. 때문에 spaceId(해당 작업실의 UUID)를 요청시 함께 주는 방식으로 설계하였다. 그런데 간헐적으로 HTTP 통신과 소켓 통신을 이용하는 몇몇 기능들이 동작하지 않는 문제가 발생하였고, 확인해보니 spaceId에 계속 null 값이 담겨서 서버에 가는 현상이 있었다. 당시 내 .. 2024. 3. 15.
[자바의 정석 스터디] Ch.2 변수 변수의 종류는 클래스 변수, 인스턴스 변수, 지역 변수가 있다.지역변수는 0으로 초기화되지 않기 때문에, 읽기 전에 값을 꼭 초기화해야 한다.직관적으로 표현하면, 지역변수에 값을 할당하지 않고 출력하거나 호출하면 에러가 발생. 클래스나 인스턴스 변수는 특정 값을 할당해주지 않고, 선언만 한 다음 바로 불러도 0으로 초기화 된 상태.<l.. 2024. 3. 8.
크래프톤 정글 수료 후기 개발자가 되겠다며 독학을 6개월, 그러다가 크래프톤 정글이라는 곳을 알게되었고 운명(?)을 느꼈다. 그게 작년 여름이었고, 당시에는 정글에 합류한다는 것 자체가 꽤나 막막했다. 물론 합격 당시에는 정말 간절했고 기뻤지만! (2023년 10월부터 2024년 2월까지니까 대충 한번의 겨울인데, 낯선 장소에서 5개월을 유배하기엔 이제는 예전같지 않아..) 그래도 어쩌다보니 겨울은 지나가고, 나는 다시 사회에 나왔다.👏👏 이렇게 또 하나의 챕터가 끝이 났네👏 개인적인 회고는 매 커리큘럼마다 적어왔다. 1주차 회고 (알고리즘, 자료구조 1) 2주차 회고 (알고리즘, 자료구조 2) 3주차 회고 (알고리즘, 자료구조 3) 4주차 회고 (RB-Tree Lab) 5주차 회고 (Malloc Lab) 6주차 회고 (Prox.. 2024. 3. 5.
Week 14-18. 최종 프로젝트(나만무) 회고 2/24(토)에 나만무 최종 발표를 했다. 그동안 잠시 휴식도 취하고, 이력서 초안도 작성하느라 뒤늦게 후기를 작성한다. 결론부터 얘기하자면, 나만무는 정글 생활 중 가장 기억에 남을 하이라이트 기간이었다. 정말 힘들었고 가끔은 외면하고 때려치고도 싶었지만, 꽤 그럴싸한 프로그램이 탄생했을 때의 보람과 최종 발표 후의 뿌듯함은 정말.. 이루 말할 수 없다. 그리고, '당분간 몇 년은 개발자로 살아도 되겠네!' 라는 확신을 갖게 해준 고마운 과정이었다. 감사해요 정글~ 아직 제대로된 프로젝트 경험도 없고, 백엔드/프론트엔드 조차 결정하지 않았던 나는 나만무 직전에 '사람에 대한 이해가 중요한 직군'이라는 동기의 말에 이끌려 프론트엔드를 선택하게 되었다. 그리고 이번 프로젝트를 경험하면서 프론트엔드에 큰 .. 2024. 2. 29.
Week 12~13. 기술스택 학습 기간 회고 이번 기수부터 추가된 '실력 다지기' 기간이 끝났다. 해당 기간은 프론트엔드/백엔드에 주로 쓰이는 웹 프레임워크를 2주동안 자율적으로 학습하는 시간이다. 나는 프론트엔드에 흥미를 느꼈기 때문에 HTML, CSS에 대한 복습부터 자바스크립트, 리액트에 대한 학습을 진행했다. 하루에 대략 15~16시간을 학습했지만, 그럼에도 2주라는 기간이 이 지식들을 충분히 익히기에는 많이 부족하다고 생각한다. 그래서 어떻게 하면 이 기간을 의미있게 쓸 수 있을까에 대해서 많이 고민했다. 결국 2주간 최대한 이해도를 높여서 프로젝트에 들어가는 것이 목적이었기에, 노레퍼런스/노기획/노디자인의 CRUD 게시판을 만들면서 리액트 프레임워크 활용법에 대해 고민하고 익숙해지는 것에만 대부분의 에너지를 썼다. 결과물로 나온 게시판.. 2024. 1. 10.

티스토리툴바