분류 전체보기
개인 프로젝트 - Randomly (~ 2023.02.13)
⬅️ 이전 개발 일지 https://bmy1320.tistory.com/entry/%EA%B0%9C%EC%9D%B8-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-Randomly-20230209 개인 프로젝트 - 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 📖 주제 스터디 bmy1320.tistory.com 📖 주제 스터디를 진행하면서 필요한 기능들을 구현한 프로젝..
개인 프로젝트 - 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..
NC Soft 홈페이지를 보고
오늘 우연찮게 NC Soft 홈페이지를 들어가봤는데, 메인 홈 화면의 애니메이션을 보고 울컥했다.... (거짓말이 아니라 정말 눈물 흘릴뻔....) 와... 이렇게 구현한 페이지를 사람들에게 보여준다는게 얼마나 멋진일인지가 느껴져서 한참을 보고 있었다. OST도 한 몫 한듯 하다. 이런 웹페이지를 만들면 얼마나 좋을까 라는 생각이 많이 들었다. 내가 진정해보고 싶은 일이 뭔지를 다시 한 번 느꼈다. 페이지의 완성도 뿐만 아니라 구현한 페이지를 많은 사람들이 접해볼 수 있고 느낌을 받을 수 있다는 점이 너무 멋져 보인다. 나도 꼭 이렇게 멋진 웹페이지에 기여를 해보고 싶다.
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 할 수 있고, 다른 타입으로 이루어져 있다면 조건으로 또 추가를 해야한다. 만약, 어떠한 값이 들어..