디자이너 노트

공부 계기 📚https://byolsfolio.netlify.app/인터랙티프 포트폴리오를 만드는 중, hover를 하면 데이터에 있는 원하는 배경화면 색상이 나오지 않는 상황이 발생했다. 문제 원인 📃Tailwind CSS 설정은 맞은 상태인데, Tailwind CSS의 ‘hover’상태 클래스는 직접 문자열 템플릿으로 동적으로 추가할 때 원활히 추가되지 않는 경우가 있다. Tailwind CSS가 빌드 과정에서 동적으로 생성되는 클래스를 미리 인식하지 못하기 때문이다. Tailwind CSS는 빌드 시, 사용되는 클래스를 분석하여 CSS를 생성한다. 만약 클래스 이름이 문자열 템플릿이나 동적 변수로 지정된 경우, Tailwind는 이를 감지하지 못하고 CSS를 생성하지 않을 수 있다.  해결 방법..

공부 계기 📚https://lenis.darkroom.engineering/ Lenis를 이용하여 포트폴리오에 부드러운 전체 스크롤을 설치해보자. - 부드럽고, 쾌적한 경험을 제공- 시각적인 인상을 향상시킨다.  활용 예시 🪄설치 방법은 굉장히 심플하다.1. 라이브러리 설치npm i lenis  2. 관련 코드를 메인에 넣기const lenis = new Lenis()function raf(time) { lenis.raf(time) requestAnimationFrame(raf)}requestAnimationFrame(raf)     요즘 영상으로 개발 공부하고 있는데, 막연히 읽는 것보다 확실히 효과가 좋다. 나와 핏이 맞는 선생님을 찾는 것이 중요하다. 영상 + 읽기 + 프로젝트 경험을 잘 버..

공부 계기 📚개인 프로젝트 원더렌즈 개발 중, Home 화면에 구글맵 API를 추가하고자 했다. 1. Google Maps API(구글맵 API) 추가2. 갔던 여행지에 색상 추가 중요 포인트 ✧1. API 키값 발급받아  index.html에 있는 script에 API와 key값을 입력했다. key값은 깃허브에 올렸을 때 노출되지 않기 위해 .env파일에 넣었기에 변수명을 사용했다. 2. 공식 문서에 있는 코드 React로 수정하기초반부엔 당황했지만, 이미 다른 분들이 작성한 코드와 공식문서를 참고하면 맞게 수정할 수 있다.import { useCallback, useEffect, useRef } from "react";const locations = [  { title: "vancouver", po..

오늘 한 것 폴더명 수정 - main, map 등등 하나씩 만들기 styled 컴포넌트 function 바깥으로 빼기 public 절대경로로 수정 (src=”/vite.svg”) Navbar: NavLink 그냥 Link로 수정 개선할 부분 .env 파일에 있는 변수명 활용 (하드 코딩 제거, VITE_CLIENT_ID) 로그인 했는데 메인페이지로 돌아가는 것 개선 개발 데이터 등록: DB Init 추가적으로 등록 나눔스퀘어라운드 폰트 에러 수정 콘텐츠 완성도 높이기 커피(coffee) 1 + 디저트(dessert)1 카페 소개 의미있는 데이터화 코드 리뷰 오늘 코드 리뷰 시간에 선생님으로부터 'useEffect 남용'이라는 말을 들었다. 사실 나는 useEffect를 단순히 '화면에 렌더링 해주기 위해..

플젝 일지 열심히 쓰려고 했는데 어느덧 일주일이 지나버렸다. 편하게 현재 생각기록이라도 남기는 게 좋을 것 같아 블로그에 방문했다. 일단.. 피하고 피했던 react-query와 recoil을 공부했다. 독학일땐 피해도 상관없었지만, 플젝 들어가니 없어선 안될 개념들이었다. 그래도 공부하니 좋긴 하더라. 북마크 기능 구현중인데, recoil 활용해서 내일 마저 구현해볼 예정이다. 이번주까지 북마크 기능은 마무리하고 싶은데 어떻게 될 지 모르겠다. 또, react-query 배운 이후 초반에 만들었던 코드를 리팩토링했다. 훨씬 깔끔하고 보기 좋았다. react-query 쓰니까 데이터 접근이 훨씬 용이한 느낌이었다. 플젝하니까 개발 공부를 더 열심히하는 것 같다. 재밌다기보단 해결하고 싶어서 물고 늘어지는..

TodoList 만들기 - 동적 데이터 관리 및 CRUD 구현 - 배열 형태를 다루는 서비스 개발 핵심 기능 1. 오늘의 날짜 자동 출력 (new Date()활용) 2. Todo 추가, 완료 토글, 삭제 기능 구현 3. 상태 데이터 관리 및 Todo 객체 구조 설계 4. useRef를 통한 Todo 객체 Id 지정 CRUD 1. Create: 투두 추가하기 2. Read: 투두리스트 렌더링 하기 3. Update: 투두 수정하기 4. Delete: 투두 삭제하기 결론 TodoList 개발을 통해 배열 형태의 데이터를 처리하는 방법, 상태 관리, CRUD의 개념과 React Hook 활용 능력을 향상시키고, 웹 개발의 실무 경험을 쌓을 수 있었다. CRUD란 무엇인가? CRUD는 'Create, Read,..

공부 계기 🧚 엊그제 좋은 커밋에 대한 글을 읽었다. '리드미 작성법'이 있는 건 알고 있었지만, 커밋에도 작성법이 있는 건 처음 알았다. 앞으로 협업을 하게 될 것을 대비하여 좋은 커밋 작성법을 구체적으로 정리한다. 좋은 커밋 메세지를 작성하는 방법 🔖 1. 커밋의 종류를 명시한다 - feat : 어떤 특정 어플리케이션에 더할 새로운 feature - fix : 어떤 오류 해결(fix) - style: 스타일과 연관된 feature나 업데이트 - refactor: 코드 베이스의 특정 부분을 재정렬(refactoring) - test: 테스트와 관련된 모든 것 - docs: 문서화에 관한 모든 것 - chore: 정규 코드 유지 보수 2. 제목과 본문 사이 빈칸 한 줄을 띄워 구분한다 3. 커밋 메세지는..

프로젝트 시작 계기 HTML,CSS,JAVAscript의 개념을 어찌저찌 공부하다보니, 프로젝트는 놓치고 있었다. 그 사이, 개념은 여전히 잘 모르겠고, 지난 시간들에 배웠던 것도 잊어가기 시작했다. 실무에서 근무하시는 분께 고민을 이야기하니, 개념에 함몰되지 말아야 한다고 말씀하셨다. 실무를 직접 해보면서 모르는 개념을 익히는 것을 추천하셨다. 이에 HTML, CSS, JAVAscript를 동시에 할 수 있는 미니프로젝트를 진행하기로 했다. 결과물 toggle toggle이란 두가지 상태 사이의 전환을 의미한다. 코드에선 true를 false로, false를 true로 전환하기 위해 사용한다. 예전부터 배경에 야간모드 적용하는 방법을 익히고 싶었는데, 어렵다 느껴서 못했다. 그런데 navbar를 없애고..

픽셀 퍼펙션 지켜주며 제작하기 타이틀, 메인, 태그 모두 일관되게 늘어나게끔 신경쓸 것 이렇게 img태그를 작명하는 것보다 등을 사용하는 걸 권장. 이미지가 여러장이 되었을 때. 같은 경우도 독립된 컴포넌트로 사용할 수 있기 때문에 그냥"hashtag"도 괜찮다. 이번에 작업하면서도 느낀 거지만, space-between은 유지보수 측면에서 예쁘지 않다. 코드리뷰는 이상적인 형태로 보내는 것보다는 치명적인 오류를 잡아주는 쪽. 같은 경우는 하이픈을 사용하는 이유가 명확해야 한다. 무엇을 지향하는 것인지? 팀내에서 약속을 잡을 때, 줄일것인지 말 것인지에 대해서도 이야기 한다. html 내부에서 - 볼드 처리하는 것은 권장하지 않는다. 왜냐하면 b는 단순히 두껍게하는 역할만 한다. 그렇기에 을 권장한다. ..

픽셀 퍼펙션 지켜주며 제작하기 타이틀, 메인, 태그 모두 일관되게 늘어나게끔 신경쓸 것 이렇게 img태그를 작명하는 것보다 등을 사용하는 걸 권장. 이미지가 여러장이 되었을 때. 같은 경우도 독립된 컴포넌트로 사용할 수 있기 때문에 그냥"hashtag"도 괜찮다. 이번에 작업하면서도 느낀 거지만, space-between은 유지보수 측면에서 예쁘지 않다. 코드리뷰는 이상적인 형태로 보내는 것보다는 치명적인 오류를 잡아주는 쪽. 같은 경우는 하이픈을 사용하는 이유가 명확해야 한다. 무엇을 지향하는 것인지? 팀내에서 약속을 잡을 때, 줄일것인지 말 것인지에 대해서도 이야기 한다. html 내부에서 - 볼드 처리하는 것은 권장하지 않는다. 왜냐하면 b는 단순히 두껍게하는 역할만 한다. 그렇기에 을 권장한다. ..