본문 바로가기

Side_Project/크롬 시작화면3

[크롬 시작화면] 스타일 설정 및 구조 변경 프로젝트 명: 나만의 크롬 시작 화면📆 작업 기간: 2024.06.05 ~ (진행 중)💻 Tech Skill- 💻 Skill: TypeScript, React- 🖌 Style: styled-componentsGithub Repository: https://github.com/Rayched/MyChrome_custom_page1. 작업 내용① styled-components 선정 이유 북마크 바 구현을 좀 수월하게 진행하기 위해서, 크롬 시작화면에 CSS Style을 설정하기로 했다.처음 프로젝트를 계획했을 때는 웹 페이지의 스타일을 css 파일로 통합 관리하려고 했었지만 예전에 주간 박스오피스를 보여주는 웹페이지 개발을 진행하면서전체적으로 코드가 한눈에 보이지 않고, '. jsx' 파일과 'sty.. 2024. 6. 29.
[크롬 시작화면] 2일차: 검색창 구현하기 프로젝트 명: 나만의 크롬 시작 화면작업 기간: 2024.06.05 ~ (진행 중)사용 스킬: TypeScript, ReactGithub Repository: https://github.com/Rayched/MyChrome_custom_page1. 작업 내용이번에는 크롬 시작화면의 검색창을 구현하는 작업을 진행하였다.먼저 'SearchBar.tsx' 파일을 생성하고, 본격적으로 검색창 Component의 구현을 시작하였다.① 검색어를 Console에 출력하기상단의 이미지는 작년에 개발을 완료하고, 현재 사용 중인 크롬 시작화면의 검색창이다. 기본적인 알고리즘은 검색창에 검색어를 입력하고, 키보드의 Enter 키를 누르면해당 검색어에 대한 구글 검색 결과를 보여주는 식이다. 이를 구현하려면 제일 먼저 검색.. 2024. 6. 11.
[크롬 시작화면] 1일차: 오늘 날짜 및 현재 시간 표시하기 프로젝트 명: 나만의 크롬 시작 화면작업 기간: 2024.06.05 ~ (진행 중)사용 스킬: TypeScript, ReactGithub Repository: https://github.com/Rayched/MyChrome_custom_page0. 프로젝트를 시작하게 된 이유위의 이미지는 작년에 개발을 마치고 현재 노트북에서 사용하고 있는 크롬 시작화면이다.VanillaJS로만 구현한 프로젝트이며 내게 있어서 처음으로 완성까지 한 사이드 프로젝트이다. 사이드 프로젝트를 마치고, 자택에 있는 데스크톱에선 사용하지 않고코딩용으로 쓰고 있는 노트북에서 주로 사용을 하고 있는데 막상 쓰다 보니깐 고치고 싶은 부분이 많이 생겼다. 예를 들어서 검색창을 클릭했을 때 이전 검색 내역이 나오는 기능을 추가하거나북마크 .. 2024. 6. 5.