성장기록

TIL #8 - 로컬 스토리지 객체 값 사용하기

TIL #8 - 로컬 스토리지 객체 값 사용하기 📜 목표 로컬 스토리지 객체 값 사용하기 로컬 스토리지에 객체를 저장한 뒤 다른 컴포넌트에서 그 값을 사용할 일이 생겼다. 분명 나는 이 상태로 저장을 했는데 다른 컴포넌트에서 localStorage.getItem 을 사용하여 꺼내보니 이렇게 값이 나왔다. 이걸 인덱스로 접근하는건가? 싶었는데 그러면 그냥 문자열 처럼 작동하게 된다. 사실 로컬스토리지는 텍스트 자료만 저장 가능하다. 그래서 저장해놓고 불러오게 되면 이렇게 표시되는 것. 그러면 저장할 때 JSON형태의 문자열로 저장을 하면 되겠다! 바로 JSON.stringfy와 JSON.parse 를 이용하는 법이다. 객체를 저장하는 장소에서는 JSON.stringfy를 사용하여 로컬스토리지에 객체를 저장..

TIL #7 - SPA와 MPA

TIL #7 - SPA와 MPA 📜 목표 SPA와 MPA의 개념에 대해 이해한다. SPA와 MPA의 각 장단점에 대해 이해한다. SPA와 MPA란❓ SPA Single Page Application : 한 개의 Page로 구성된 Application 하나의 HTML을 한번만 받아와서 JS를 이용하여 Contents만 변경하는 방식 처음에만 페이지를 받아오고 이후는 동적으로 DOM을 구성 CSR 방식 (SPA === CSR 은 아니다 ❌) 요청이 있을경우 필요한 데이터만 다운로드됨. (페이지 구성에 필요한 모든 파일 다운로드 ❌) AJAX와 REST API로 서버에 데이터를 요청 및 JSON으로 응답받음. 사용자는 여러 페이지가 존재한다는 경험을 할 수 있다. MPA Multiple Page Applica..

TIL #6 - SSR과 CSR

TIL #6 - SSR과 CSR 📜 목표 SSR,CSR에 대한 개념에 대해 이해한다. SSR,CSR의 차이점에 대해 이해한다. SSR,CSR은 각각 어떤 상황에 사용해야할지 이해한다. SSR과 CSR이란? 브라우저 렌더링은 크게 '서버 사이드 렌더링(SSR)'과 '클라이언트 사이드 렌더링(CSR)'로 나누어진다. SSR (Server Side Rendering) ➡️ 렌더링이 서버측에서 이루어지는 방식을 말한다. 🏃‍♂️ 과정 유저가 Website 요청을 보낸다. 서버는 렌더링에 사용될 HTML파일들을 생성하여 클라이언트로 전달한다. 클라이언트는 받은 HTML파일들을 우선 렌더링 하는데 보여지는 것만 가능하고 조작은 불가능하다. 클라이언트는 JS파일을 다운로드한다. 유저는 화면 내용을 볼 수 있고 유저의..

TIL #5 - fork 한 레포지토리 잔디 심기

TIL #5 fork 한 레포지토리 잔디 심기 📜 목표 fork 한 레포지토리에서 작업할 때 잔디가 심어지게 해보자. 최근 팀프로젝트 작업을 하고 있는데 초반에 레포지토리를 하나 파가지고 fork 하는 식으로 했더니 잔디가 안심어졌다. 열심히 작업을 하는데 잔디가 안심어지면 뭔가 좀 아쉽지 않은가? 이 부분을 한 번 원하는 방식으로 바꿔보자. 📌 우선 git hub 에 잔디가 남겨질려면 조건이 두 가지가 있다. ✔️ GitHub 계정과 Commit한 이메일의 계정이 동일해야 함. ✔️ Commit이 fork한 repository가 아닌 개인 repository에서 이루어져야 함. 나 같은 경우 2번 부분에서 fork 한 레포지토리로 커밋을 하기 때문에 잔디가 심어지지 않는 것 같다. 그러면 해결법은 fo..

TIL #4 - CSS-in-JS 란?

TIL #4 - CSS-in-JS 란? 📌 오늘 공부 내용 🔱 CSS-in-JS 개념 📜 목표 CSS-in-JS 에 대해 이해한다. CSS-in-JS 의 장단점에 대해 이해한다. CSS-in-JS에는 어떠한 것들이 있는지에 대해 이해한다. 요즘 CSS를 적용하는 방법으로 CSS-in-JS가 많이 사용된다고 한다. 최근에 멘토링 해주셨던 멘토님들도 모두 강조하신게 꼭 CSS-in-JS를 사용해보라 하셨는데, 오늘 이 CSS-in-JS에 대해 정리를 해볼까 한다. ❓ CSS-in-JS란 CSS-in-JS는 이름 그대로 알 수 있듯이 CSS 파일을 따로 생성하지 않고 JS 파일 내부에 CSS를 정의하는 것입니다. 정확히 말하면 JavaScript로 만든 컴포넌트 내부에 CSS를 적용하는 방법이죠. JSX 문법..

TIL #3 - 함수형 프로그래밍이란?

TIL #3 - 함수형 프로그래밍이란? 📌 오늘 공부 내용 🔱 함수형 프로그래밍 개념 📜 목표 함수형 프로그래밍 개념에 대해 이해한다. 함수형 프로그래밍 특징에 대해 이해한다. 함수형 프로그래밍의 장단점에 대해 이해한다. 왜 함수형 프로그래밍이 뜨고 있는지에 대해 이해한다. 요즘 유행하고 있고 자바스크립트, 타입스크립트를 한다면 반드시 알아야 하는 개념인 함수형 프로그래밍이란 무엇일까? 프로그래밍 패러다임 우리는 프로그래밍 패러다임에 대해서 먼저 알아야 한다. 명령형 프로그래밍과 선언형 프로그래밍이 있는데 그 차이에 대해 이해해보자. ✔️ 명령형 프로그래밍 : focus ➡️ 어떻게(How) 객체 지향 프로그래밍 : 데이터를 추상화 시켜 상태와 행위를 가진 객체를 만들고 그 객체들 간의 유기적인 상호작용..

TIL #2 - React Life Cycle (생명 주기)

TIL #2 - React Life Cycle (생명 주기) 📌 오늘 공부 내용 🔱 리액트 라이프 사이클 📜 목표 리액트 라이프 사이클에 대해 이해한다. 어떠한 메서드들이 있는지 알아둘 것 이 개념이 왜 중요한 지에 대해 안다. 🗨️ 라이프 사이클이란? 단어의 뜻으로 유추해봐도 알 듯이 어떠한 것의 태어나고 죽는 그 과정을 말한다는 것을 얼핏 알 수 있다. 그러면 이 용어가 리액트에서 어떻게 사용 되는걸까? 리액트는 컴포넌트 단위로 개발을 진행한다. 클래스형 컴포넌트, 함수 컴포넌트를 사용하게 되는데 컴포넌트들은 자신만의 생명주기를 가지고 태어나고 소멸하게 된다. 이 각 컴포넌트의 라이프 사이클을 이해하고 다루는 것은 개발을 진행함에 있어 매우 중요하다. 그러기 위해서는 컴포넌트 생명주기에 관여하는 대표..

TIL #1 - 자바스크립트 이터러블/이터레이터 프로토콜

TIL #1 - 자바스크립트 이터러블/이터레이터 프로토콜 목표❗ 📌 이터러블/이터레이터 프로토콜에 대해 설명할 수 있다. 📌 for...of 문의 순회 과정을 설명할 수 있다. ES6 이전에는 위와 같이 인덱스로 접근하여 배열을 순회하였었다. 하지만 ES6부터는 이렇게 for...of 문을 통하여서 순회가 가능해졌다. 이게 어떻게 가능해지게 된 것일까? 이것을 알기위해선 이터러블/이터레이터 프로토콜에 대한 이해가 필요하다. 이터러블이란❓ 이터러블 프로토콜을 준수한 객체 Symbol.iterator 가 구현된 객체 for...of 을 사용할 수 있는 객체 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용 가능한 객체 위와 같이 설명할 수 있다. 즉, Symbol.iterator 가 구현되어 있다면 순..