성장기록/TIL

TIL #14 - 깃허브 레포지토리 대표 언어 변경

TIL #14 - 깃허브 레포지토리 대표 언어 변경 👨‍💻 오늘 나는 무엇을 배웠는가? 깃허브 레포지토리 대표언어 변경법 아니 어느순간 깃허브를 보니 타입스크립트 프로젝트의 대표언어가 HTML인 것이다. 이게 무슨.... TypeScript 를 공부하고 파일을 작성해서 올리는 곳인데, 기본으로 제공되는 html 파일들이 많다보니 이런 불상사가... 아... 불편하다 불편해.... 다행히 이 비극을 해결할 수 있다! 어떻게 ❓ 레포지토리 루트 경로에 .gitattributes 파일을 생성한다. 이후 다음과 같이 작성한다. 나는 레포지토리 언어에 ts, html, css 밖에 없다 따라서 위 3개만 작성하면되는데 이 부분은 각자의 레포지토리에 따라 다르니 참고만 하자. linguist-detectable=t..

TIL #13 - section과 article 의 차이, SEO - og태그 적용, 이미지 스프라이트

TIL #13 - section과 article 의 차이 🧑‍💻 오늘 나는 무엇을 배웠는가? section과 article 의 차이 SEO (검색 엔진 최적화) 이미지 스프라이트 ❓ section과 article의 차이 ✔️ section - 서로 관계있는 문서를 분리하기 위해 사용됨. - 페이지와 같은 관련 문서들을 모음. 만약 section을 사용하려는 공간이 논리적인 관계가 없다면 div로 대체할 수 있음. ✔️ article - 독립적이고 홀로 사용가능한 문서에 사용됨. - 주로 뉴스 기사, 댓글, 블로그 글, 게시판 영역 같은 곳에 사용됨 🐳 이렇게 적용해볼거에요 나는 지금 하는 프로젝트에서 큰 단위로 묶을때 section을 사용했다. 게시판 글 같은 경우도 그런데 이런 곳에는 article을 ..

TIL #12 - props, props drilling 해결법, redux를 사용하는 이유

TIL #12 - props, props drilling 🧑‍💻 오늘 나는 무엇을 배웠는가? props props drilling redux를 사용하는 이유 ❓ props 란? props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달해주는 객체이다. props를 활용하면, 컴포넌트를 분리하여 사용함으로써 재사용성이 높아져 더 효율적인 코드 작성이 가능해진다. props에는 중요한 특징들이 있는데, 다음과 같다. 단반향 데이터로 한 방향으로만 흘러야 한다. 자식 컴포넌트는 전달받은 props를 직접 수정해서는 안된다. 순수함수처럼 작동. props 전달 props는 위와 같이 전달하고 받을 수 있다. 비구조화 할당 비구조화 할당을 통해 props를 전달 받으면 더 깔끔한 코드작성이 가능해진다. *문자열..

TIL #11 - 제네릭, 리액트 빈화면 에러 해결, git PR merge Conflict, 라이브러리와 프레임워크의 차이

TIL #11 - 제네릭, 리액트 빈화면 에러 해결, git PR merge Conflict, 라이브러리와 프레임워크의 차이 🧑‍💻 오늘 나는 무엇을 배웠는가? 타입스크립트 제네릭 라이브러리와 프레임워크의 차이 리액트 빈화면 오류 해결 PR Merge Conflic 해결 ❓제네릭이란 제네릭 타입은 인터페이스, 클래스, 함수, 타입 별칭 등에 사용되는 기능으로 각 타입을 미리 지정하지 않고 상황에 맞게 타입을 대응하기 위해 사용되어진다. 만약 이렇게 주어지는 배열의 length를 return 하는 함수가 있다고 하자. 위 처럼 선언하게 되면 number와 string으로만 이루어진 배열의 길이만 return 할 수 있고, 다른 타입으로 이루어져 있다면 조건으로 또 추가를 해야한다. 만약, 어떠한 값이 들어..

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..