전체 글64 9월 넷째 주 주간회고 배운 것 - JSX 회고 리액트를 배운면서 JSX는 단순히 html에 javascript를 사용할 수 있도록 하는 방법이라고만 생각했다. 이번 강의를 들으면서 JSX가 만들어진 이유와 JSX가 없을 때 리액트가 어떻게 리액트 엘리먼트들을 만들어 내는지 알 수 있었다. 이전 부트캠프에서 강의를 들었을 때 대충 넘어갔던 이야기들을 배울 수 있었다. 'VDOM이 DOM 보다 단순히 빠르다' 라고 배웠던 것은 그렇지 많은 않고, 선언적으로 UI를 만들고 상태값과 html을 같이 사용한 컴포넌트를 만들 수 있도록 도와줌으로 유지보수를 쉽게 만들어 주는 것이 JSX와 VDOM 이라고 생각이 들었다. 이렇게 단순히 기술을 사용만 하는 것이 아니라 원리까지 이애할 수 있게 되어서 좋았다. 2023. 9. 24. 9월 셋째 주 주간회고 퇴사를 한 지 2주가 지났다. 9월에는 가장 큰 목표는 '습관을 만들기' 다. 공부를 비롯해서 책읽기, 운동하기, 잠자는 시간 까지 좋은 습관들을 만드려고 노력중이다. 아직 2주차 까지는 완벽하지 않아도 그럭저럭 잘 지키는 중이다. 배운 것 - 프로젝트 환경 세팅하기 회고 메가테라의 프론트엔드 생존코스 1주차가 시작되었다. 나는 내가 부지런하지 않다는 것을 알기에 신청한 수업(?) 이다. 1주차는 프로젝트를 세팅하는 환경들과 그 기술들에 대한 간단한 사용법과 정의들을 공부했다. 1년 조금 넘게 프론트엔드를 공부하면서 프로젝트를 처음부터 세팅해본 적은 없는 것같다. 너무나도 편하게 한 번에 세팅을 해주는 방법들이 있었으니까 세팅하는 방법을 생각해 본 적도 없었다. 프로젝트 세팅을 처음부터 하면서 배운 것은.. 2023. 9. 17. websocket과 라이브러리 websocket webSocket은 TCP 연결에서 클라이언트와 서버 사이에 지속적인 완전 양방향 연결 스트림을 만들어 주는 기술입니다. webSocket의 특징 양방향 통신 (Full-Duplex) 방식 클라이언트와 서버가 서로에게 데이터를 주고 받을 수 있음 일반적인 Http통신은 client가 요청을 보내는 경우에만 server가 응답하는 단방향 통신 실시간 네트워킹(Real Time-Networking) 웹 환경에서 연속된 데이터를 빠르게 노출 ex) 채팅, 주식 여러 단발기에서 빠르게 데이터를 교환 최초 접속에서만 http프로토콜 위에서 handshaking을 하기 때문에 http header를 사용한다. Socket.io Socket.io는 node.js를 지원하고, websocket을 기반.. 2022. 4. 28. 불변성은 왜 지켜야할까? 불변성 (Immutability) 불변성은 값이나 상태를 변경할 수 없는 것을 의미합니다. 프로그래밍에서 불변성은 데이터 원본의 훼손을 막는 것을 의미합니다. 간단히 말하자면, 어떤 값을 직접적으로 변경하지 않고 새로운 값을 만들어내는 것입니다. 자바스크립트에서는 원시타입은 불변성을 지니지만, 객체타입은 값이 변할 수 있습니다. 원시 타입 원시 타입에는 Boolean, Number, String, null, undefined, Symbol이 있습니다. 먼저 코드를 보겠습니다. let str = "example1"; str = "example2"; console.log(str) // example2 위에서는 원시타입은 값을 변경할 수 없다고 했는데 위와 같은 결과가 나왔습니다. 사실, 위 과정은 값이 변경.. 2022. 4. 27. 함수 스코프와 블록 스코프 스코프 변수나 함수가 선언되어 사용할 수 있는 유효 범위를 말합니다. 스코프는 크게 전역 스코프와 지역 스코프로 나누는데, 지역 스코프에 오늘 정리할 함수 스코프와 블록 스코프가 있습니다. 전역 스코프 : 어디든지 변수에 접근이 가능 지역 스코프 : 정해진 범위 안에서 접근이 가능 함수 스코프 자바스크립트는 함수 스코프를 기본으로 사용합니다. 함수 스코프는 새로운 함수가 생성될 때마다 새로운 스코프가 발생되는데, 함수에서 선언한 변수는 해당 함수 내에서만 접근 가능하다는 걸 의미합니다. function sayHello() { var hello = 'hello'; } hello; //ReferenceError 위 코드를 보면, sayHello라는 함수가 생성된 것을 볼 수 있습니다. hello라는 변수가 .. 2022. 4. 24. TCP 와 UDP 는 무엇이 다를까? TCP와 UDP TCP와 UDP는 전송계층에서 데이터를 보내기 위해 사용되는 프로토콜입니다. 전송계층은 송신자와 수신자를 연결하는 통신서비스를 제공하는 계층으로, 쉽게 말해 데이터의 전달을 담당합니다. TCP는 Transmission Control Protocol의 약자이고, UDP는 User Datagram Protocol의 약자입니다. 두 프로토콜은 모두 패킷을 한 컴퓨터에서 다른 컴퓨터로 전달해주는 IP 프로토콜을 기반으로 구현되어 있지만, 서로 다른 특징을 가지고 있습니다. 패킷(Packet)이란? 인터넷 내에서 데이터를 보내기 위한 경로배정(라우팅)을 효율적으로 하기 위해서 데이터를 여러 개의 조각들로 나누어 전송을 하는데 이때, 이 조각을 패킷이라고 합니다. 그림을 보면 왼쯕은 TCP, 오른쪽.. 2022. 4. 22. css의 position 이번 글에서는 CSS의 position 속성에 대해서 알아보겠습니다. position position 속성은 HTML에서 요소가 배치되는 방식을 결정합니다. 모든 경우는 아니지만, position 속성은 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 많이 사용됩니다. position: static position 속성을 별도로 지정해주지 않으면 기본값인 static이 적용됩니다. static은 요소들이 HTML에 작성된 순서대로 브라우저 화면에 표시가 됩니다. top, left, bottom, right 속성값은 position 속성이 static일 때는 무시됩니다. position: relative relative는 요소를 원래 위치를 기준으로 상대적(rel.. 2022. 4. 22. [React] 렌더링 성능 개선하기 먼저, 컴포넌트가 리렌더링되는 경우는 다음과 같습니다. 컴포넌트의 state가 변경되었을 때 부모 컴포넌트에서 받은 props가 변경될 때 부모 컴포넌트가 리렌더링 될 때 위와 같은 특성은 필요없는 렌더링을 일으키기도 합니다. 부모 컴포넌트의 state가 바뀌면 props를 받은 자식 컴포넌트와 변경된 state를 받지 않은 자식 컴포넌트 모두 렌더링 됩니다. 이러한 불필요한 렌더링을 줄이고 성능을 높이는 방법을 설명하겠습니다. useMemo useMemo는 React에서 CPU 소모가 심한 함수들을 캐싱하기 위해 사용됩니다. useMemo를 사용하면 복잡한 계산식의 계산한 값을 재사용할 수 있습니다. 만약, 컴포넌트의 어떤 함수가 값을 리턴하는데 하나의 변화에도 많은 시간을 소요한다면, 리렌더링될 때마.. 2022. 4. 19. async/await은 왜 쓰는가? 이번 글에서는 Promise와 async/await의 차이에 대해서 공부해보겠습니다! 동기 / 비동기 특징 동기의 (대략적인) 특징 동시에 여러 작업을 수행할 수 없다. 흐름을 예측하기 쉽다. 먼저 수행되고 나중에 수행되는 것들이 명확하다. 비동기의 (대략적인) 특징 동시에 여러 작업을 수행할 수 있다. 흐름을 예측하기 어렵다. (무엇이 먼저 완료될 지 보장할 수 없다.) Promise Promise는 자바스크립트에서 비동기 처리에 사용되는 객체입니다. 코드는 실행 되었지만 결과를 아직 반환하지 않은 객체라고 설명할 수 있습니다. Promise는 3가지 상태가 있습니다. Pending(대기) Fulfilled(이행) Rejected(실패) 비동기 처리를 아직 수행하는 단계인 Pending, 비동기 처리가.. 2022. 4. 18. 이전 1 2 3 4 5 ··· 8 다음
