분류 전체보기

TIL #10 - 쿠키와 세션 로그인처리, GitHub 복구하기, TIL 작성법

TIL #10 - 쿠키와 세션 로그인처리, GitHub 복구하기, TIL 작성법 🧑‍💻 오늘 나는 무엇을 배웠는가? 쿠키와 세션을 이용한 로그인 처리 GitHub 복구하기 우선, 쿠키와 세션이 생긴 배경에 대해 알아봅시다. HTTP는 클라이언트 서버 구조로서 비연결성, 비상태성의 특징을 가지고 있습니다. 클라이언트가 서버와 요청을 주고 받고 나면 요청이 끊어지고, 클라이언트가 다시 요청을 하게 되면 서버는 이전 요청을 기억하지 못합니다. 이렇게되다보니 재요청임에도 불구하고 매번 새로운 사용자로 인식하게되는 문제점이 생겼습니다. 이를 보완하기위해 나온 것이 바로 쿠키와 세션입니다. 쿠키란 ❓ 브라우저에서 서버로 요청을 보내고 이에 대한 응답을 쿠키로 받습니다. 브라우저는 응답 받은 쿠키를 PC의 쿠키저장소..

TIL #9 - git branch 전략

TIL #9 - git branch 전략 📜 목표 git branch 전략의 개념에 대해 이해한다. 어떠한 git branch 전략을 어떠한 상황에 적용하면 좋은지에 대해 이해한다. Git Branch 전략이란? 여러명의 개발자가 하나의 저장소를 사용하면서 개발을 진행할 때 생기는 문제점이나 불편한 점들을 해소시킬 수 있는 방법이다. 당장, 팀프로젝트만 하더라도 branch가 하나밖에 없는 상황이라면 내가 개발한 코드와 같은 팀원이 개발한 코드가 뒤죽박죽 엉켜버리게 된다. 따라서, 개발 환경에 맞는 각각의 독립적인 branch를 가지고 이를 나중에 합치는(merge)식으로 진행하게되면 이러한 문제점들을 해결할 수 있게 된다. 한직선으로만 이루어져있는 flow를 가진 방식이 아닌 여러 flow의 과정들로 ..

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) 객체 지향 프로그래밍 : 데이터를 추상화 시켜 상태와 행위를 가진 객체를 만들고 그 객체들 간의 유기적인 상호작용..