디자이너 노트

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

공부 계기 📚- 지금까지 Netlify를 통해서만 프로젝트를 배포했는데, Vercel을 통해 배포할 수 있다고 하여 공부하게 되었다.- 니꼬쌤 수업 중 정리. 개념 📃  .module.css배포전, CSS를 만들어 보자.여기에서 중요한 건 .module.css를 붙이는 것이다.  그리고 이 파일을 import 해주고, 적용하고자하는 곳에 class이름을 적용한다.import styles from "../styles/navigation.module.css"   이렇게 하면 class간의 이름 겹침 충돌을 예방할 수 있다. css파일 내에서는 클래스나 id명이 반드시 들어가야만 적용이 된다.다른 configuration은 필요 없다. 단지 파일 명을 명확히 작성하고, 임포트 후 클래스명을 지정해주면..

공부 계기 📚본격적인 프로젝트에 들어가기 앞서, next.js로 data feting하는 방법에 대해 공부해보자. 개념 📃data를 Fetching하는 동안 화면에 아무것도 나오지 않기 때문에 Loading 페이지를 보여준다. 활용 예시 🪄기존에 했던 data fetching 방식"use client";import { useEffect, useState } from "react";export default function Page() { const [isLoading, setIsLoading] = useState(true); const [movies, setMovies] = useState([]); const getMovies = async () => { const response = a..

사실 지금까지 잘 이용해왔는데 Next.js를 공부하기로 했다.   개념 📃Next.js는 프레임워크다. 프레임워크는 우리의 코드를 호출한다. 우리가 Next JS를 호출하는 것이 아니다. 우리가 올바른 폴더에 코드를 작성하면, 올바른 이름을 가진 폴더 안에 정확한 이름의 파일이 들어가 있으면, NextJs 우리의 코드를 사용해서 웹사이트를 만들어준다. Next js 사용 시 변화1. react-router를 사용하지 않는다. 내가 직접 url을 적지 않아도 된다.  Client Side Rendering의 문제점1. SEO에 적합하지 못하다.html에 웹사이트에 유용한 데이터가 들어있어야 한다.2. 사용자가 첫 화면을 보기까지 로딩이 오래 걸린다 Server Side Rendering의 재등장1. 자..

공부 계기 📚개인 프로젝트 원더렌즈 개발 중, 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..

개념 📃타입스크립트란?타입스크립트란 Typed JavaScript로, 자바스크립트를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어이다. 자바스크립트는 동적 타입의 인터프리터 언어로 런타임에서 오류를 발견할 수 있다. 하지만 타입 스크립트는 정적 타입의 컴파일 언어이며 타입스크립트 컴파일러 또는 Babel을 통해 자바스크립트 코드로 변환된다. 장점코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고, 미리 타입을 결정하기 때문에 실행 속도가 빠르다는 장점이 있다. 단점코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다는 단점이 있다.  활용 예시 🪄npm install -g typescript 타입스크립트를 설치한다.  app.ts 파일에 다음..

개념 📃Vanilla JS를 능숙하게 다루기 위해서는 DOM을 조작하는 방법을 알아야 한다.   활용 예시 🪄 00:00:00 Start Stop Reset   getElementById()const myStart = document.getElementById('start'); 이 메서드는 전달된 이름 id가 포함된 엘리먼트를 반환. id는 고유해야하기 때문에 원하는 요소를 가져오는 데 매우 유용.  getElementByClassName()const myContainer = document.getElementByClassName('container'); 이 메서드는 전달된 특정 이름 클래스를 포..

공부 계기 📚'카공여지도' 프로젝트에서 Styled-component를 사용했었다. 당시 기분 좋게 프로젝트 배포 후, 아이폰 사파리로 확인하는데 우리가 의도하지 않은 폰트 색상이 화면에 떴다. 알고보니 프로젝트 세팅 초반에 CSS reset을 하지 않아 생긴 문제였다. 개념 📃크로스 브라우징이란?브라우저마다 HTML 시멘틱 태그에 대한 기본값이 다르다. 크로스 브라우징은 이토록 다양한 웹 브라우저에서 웹 페이지가 일관되게 표시되고 기능하도록 만드는 기술이다. 이를 통해 크롬, 파이어폭스, 사파리 등 어떤 브라우저에서도 개발자가 의도한 대로 이용하게 만들 수 있다.  CSS Reset을 통해 브라우저간 스타일의 일관성을 확보할 수 있다. Styled-component은 기존에 있는 패키지를 통해 CS..

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

.env 파일 gitignore에 추가하기 멘토님께서 코드를 봐주시다 .env파일은 gitignore에 넣어야 한다고 말씀해주셨다. 사실 gitignore가 어떤 것인지 제대로 알 지 못하고 써왔다. .gitignore 파일은 Git 저장소에서 추적하지 않을 파일이나 디렉토리를 지정하는데 사용되는 파일. 이 파일에 명시된 파일, 디렉토리는 Git에 의해 무시되며, 변경사항이 추적되거나 커밋되지 않는다. 즉, staging Area에 올라가지 않아 tracking 되지 않는다. 우리 프로젝트에서는 쇼핑몰API와 지도API가 .env에 들어가 있다. 참고로 우리 팀은 이 사실을 뒤늦게 알아서 .gitignore에 뒤늦게 넣었다. 이미 커밋이 되었다면 다음과 같은 방법을 취한다. git rm filename ..