성장기록

개인 프로젝트 - Randomly (2023.02.09 ~)

개인 프로젝트 - Randomly (2023.02.09 ~) ⬅️ 이전 개발 일지 https://bmy1320.tistory.com/entry/%EA%B0%9C%EC%9D%B8-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-Randomly 개인 프로젝트 - Randomly 개인 프로젝트 - Randomly 📖 주제 스터디를 진행하면서 필요한 기능들을 구현한 프로젝트 🏠 배포 주소 https://randomly.pages.dev/ React App randomly.pages.dev 🛠️ 사용 기술 - React - Redux - TypeScript - CSS in JS bmy1320.tistory.com 📖 주제 스터디를 진행하면서 필요한 기능들을 구현한 프로젝트 🏠 배포 주소 http..

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

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

기존 리액트 프로젝트에 타입스크립트 적용

기존 리액트 프로젝트에 타입스크립트 적용기 📌 적용 이유 당연히 해야하는 일이라 생각했다. 이제는 타입스크립트의 시대. 타입스크립트를 적용해본 프로젝트가 제대로 없었다. 이 경험을 시작으로 많은 경험을 쌓고 싶다. 🙈 적용전 이미 프로젝트가 배포도 된 상태이고 기능 구현이 어느정도 되어서 타입스크립트 변환으로 생길 오류들때문에 약간 걱정되기도 했다 얼마나 많은 오류를 뱉어낼지... 😋 그리고 배포에도 문제가 생길까봐 두렵기도 했지만, 어차피 넘어야할 산 하루 빨리 넘어보자. 누가 이기나 해보자 아주. 📌 기존 파일들 🤣 기존 패키지 파일들이다. 이 파일들을 이제 하나씩 jsx => tsx 로 변경시켜줘야 한다. 📌 설치 npm install --save typescript @types/node @type..

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

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

개인 프로젝트 - Randomly (2023.01.18 ~ .02.09)

개인 프로젝트 - Randomly 📖 주제 스터디를 진행하면서 필요한 기능들을 구현한 프로젝트 🏠 배포 주소 https://randomly.pages.dev/ React App randomly.pages.dev 🛠️ 사용 기술 - React - Redux - TypeScript - CSS in JS (Styled-Components) - Firebase - CloudFlare 🏠 저장소 https://github.com/soohyun-dev/Randomly 📜 개발 기록 타입스크립트 스터디에서 기술면접 스터디를 추가적으로 진행하면서 한 주간 20문제를 공부해온 뒤, 한 명을 골라 질문을 하는 식으로 처음엔 정하였엇다. 하지만, 한 주에 한명만 대답하는 것은 이 스터디의 목적과는 맞지 않다는 생각이 들었다..

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의 과정들로 ..