Today Hailie Learned

사이즈 용량 줄이기가 아니라 svg 크기 줄이기 방법입니다. 기존 svg 코드 preserveAspectRatio="none" 을 넣고 width와 height를 수정하면 됩니다. svg 관련 추천 사이트 코드 입력시 svg 를 볼 수 있습니다. https://www.svgviewer.dev/

1. git log로 히스토리를 확인합니다. git log ♣tip 확인하고 나올때는 :wq를 입력 2. 고치고 싶은 커밋이 위(HEAD)에서부터 어디에 위치한지 확인합니다. git rebase -i HEAD~3 → 위에서 3번째 커밋을 수정하고 싶다! 3. 수정하고 싶은 커밋의 pick을 reword로 수정합니다. ♣tip 수정은 i로 시작하고 수정완료시 esc를 누르고 :wq를 입력 4. reword를 입력했던 부분의 커밋 내용이 나오는데 여기서 수정할 수 있습니다. ♣tip 수정은 i로 시작하고 수정완료시 esc를 누르고 :wq를 입력 위의 내용은 push 하기 전 상태의 commit message 수정할 수 있는 방법입니다. ♣tip 마지막 Commit 메시지 수정하는 방법은 아래 명령어로 간단하..

✔️ 환경 변수 파일이란? 애플리케이션이 실행될 때 특정 값을 넘길 수 있는 변수를 의미합니다. .env 파일에 정의된 변수를 의미하고, 미리 정의된 값을 애플리케이션에서 활용하고 싶을 때 사용합니다. ✔️ 환경 변수 파일을 왜 사용할까? 👉보안과 유지보수에 용이하기 때문에! port, db 관련 정보, API_KEY 등 오픈소스에 올리면 안되는 값을 dotenv 패키지(환경변수 파일)를 사용해서 소스코드 내에 하드코딩하지 않고 사용할 수 있다는 장점이 있습니다. ✔️ 사용 방법 ▶ .env 내에서 환경변수 적는 방법 REACT_APP_FIREBASE_API_KEY = "" REACT_APP_FIREBASE_AUTH_DOMAIN = "" ▶ 환경변수 가져와서 사용하는 방법 apiKey: process.e..

git branch -r 👉 clone 받은 레파지토리의 전체 브랜치 확인하기 git switch origin/[브랜치명] 👉 원하는 브랜치로 이동하기 (checkout이 switch로 바뀜) git switch -c [새로운 브랜치명] 👉 새로운 브랜치 만들고 바로 거기로 이동하기 git branch -d [브랜치명] 👉 원하는 브랜치 삭제하기 (원 브랜치과 비교해서 변경사항이 없을때만 가능하다. ) 삭제하려는 브랜치에서 사용 불가! 다른 브랜치에서 삭제가능 git branch -D [브랜치명] 👉브랜치를 강제로 지우기 삭제하려는 브랜치에서 사용 불가! 다른 브랜치에서 삭제가능 git branch -m [브랜치명] 👉브랜치 이름 변경 이름 변경하려는 브랜치에서 사용!! git mv [기존폴더명] [임시..

✔️ 3주차 과제에서 피드백 받은 내용과 배운 내용 ■ 처음 랜더링이 되고나서 해당되는 데이터가 어느 데이터인지 색으로 표시해야한다. 해결방법 => 서버에 보내주는 데이터가 index 0부터 시작하니까 서버에 요청하는 데이터 역시 index 0부터 시작해야한다. ■ 서버에서 받은 데이터 중에 [object Object]로 나타는 문제가 있었는데 그 문제가 초기 상태를 빈 객체로 설정해서 나온 문제였다. (실제로는 '문자열'임) 만약 서버에서 받은 데이터가 실제로 객체 형태라면 JSON.stringfy로 묶어주면 된다. ■ input 태그에서 value와 defaultValue의 차이 역할은 같다. value는 값이 변하지 않을 때 사용. value를 사용한다면 readOnly 속성을 true로 설정하면 ..

✔️ 2주차 과제에서 피드백 받은 내용 차트를 chart.js 파일로 컴포넌트로 따로 관리한 점이 좋음. html/css로 구성된 파일을 리액트로 구현할 때 class를 className으로 꼭 바꾸기!! 기존의 a 태그에 있던 html 경로를 기본 경로인 /로 바꾸기. ✔️ 3주차 실무 PT 주제 동적 화면 구현을 위한 React의 state/props + useState와 useEffect ✔️ 이번 주 수업을 통해서 배운 점 ■ State와 Props state - 컴포넌트 안에서 관리 되고, 바뀌는 동적인 데이터 (= 변수) 변하는 값은 상태에, 변하지 않는 값은 그냥 변수로 선언해서 사용하는 것이 좋다! Props - 컴포넌트 간에 전달되는 데이터 (부모->자식 단방향 흐름) 자식에서 부모 컴포..

✔️ 1주차 과제 refactoring 요구사항이 한 페이지로 구성된 애플리케이션이지만 혹시 모를 페이지 확장성을 염두하였고, components 폴더에 한번에 파일을 추가하는 것보다 자주 쓰이는 컴포넌트를 common 폴더에 넣고, 그 외 추가될 페이지마다 폴더를 생성해서 컴포넌트를 정리하면 더 깔끔한 폴더구조를 가질 수 있다고 생각해서 수정하였습니다. ✔️ 2주차 실무 PT 주제 React 스타일링 방법과 반응형 웹 적용 ✔️ 이번 주 수업을 통해서 배운 점 ✦ 요구사항 정의서 요구사항 정의서를 작성할 때는 데이터를 주고 받는 부분을 자세하게 적어주어야한다. 1. 클라이언트 단에서 어떤 버튼을 누르면 데이터를 받아올건지 추가해주기 2. 어떤 데이터가 어디에 쓰이는지 적어주기 ✦ CSS 모든 HTML ..

🤓배움 요약하기 프록시 캐시가 무엇인가요? 프록시는 클라이언트와 서버 사이에 대리로 통신을 수행하는 것을 가리켜 프록시(Proxy)라고 하고, 그 중계 기능을 하는 서버를 프록시 서버라고 한다. ✔️ 프록시 캐시 한국에 있는 클라이언트가 미국에 있는 서버에서 데이터를 요청할 때 실제로 미국에 있는 원서버까지 가서 요청하지 않는다. 시간도 오래걸리고 효율적이지 않다. 그래서 한국 어딘가에 프록시 캐서 서버라는 걸 도입한다. (CDN 서버라고도 한다. ) 한국인들이 잘 보지 않는 유튜브를 보면 로딩속도가 느리다... 이게 바로 프록시 캐시 서버..!! 한국 클라이언트가 최초 요청시에는 느려도, 두번째 유저부터는 빠르다. 😃 이 시리즈는 '모든 개발자를 위한 HTTP 웹 기본 지식' 강의를 듣고 정리하였습니다..

부트캠프를 통해 프로젝트를 경험했지만, 더 나은 코드를 위해 고민하는 시간이 길었습니다. 폴더 구조를 어떻게 나누면 좋을지, 클린 코드는 어떻게 짜면 될지 이 해답을 위해서 다른 분들의 레파지토리를 참고하기도 했습니다. 그리고 제가 짠 코드를 리뷰를 받고 싶은 마음에 코멘토 실무PT를 신청했습니다. 진행은 현직 프론트엔드 개발자 멘토님이 준비한 내용을 수업 형식으로 듣고 과제를 하고 제출한 뒤 피드백을 받는 식으로 진행됩니다. 기간은 총 4주로 4번의 강의와 3번의 과제로 진행됩니다. ✔️ 1주차 실무 PT 주제 React로 기획의도 맞는 기능 구현하기 ✔️ 이번 주 수업을 통해서 배운 점 ✦ 개발 플로우 기획 문서 작성 👉 화면설계서, 플로우차트 (시스템 흐름도), 프로세스 정의서 디자인 문서 작성 👉..

기업 과제를 하거나 프로젝트 후 리드미를 꾸미는 건 개발자의 필수 역량이라는 말을 듣고 리드미 작성하는데 관심이 생겼습니다. 그래서 다른 분들의 프로젝트 리드미를 구경하다가 프로젝트 파일 구조를 보기 쉽게 작성하신 분들이 많다는 걸 알았고, 저도 그 방법에 대해서 궁금했습니다. 저는 최근에 비지니스 로직과 뷰 로직을 분리하는 것에 관심이 생기기도 했고, react-query를 사용한 프로젝트에서 데이터를 관리하는 로직을 hook으로 만들어서 사용한 간단한 프로젝트가 있었는데 내가 관심사 분리를 했다고 다른 사람들에게 자랑하고 싶은 마음이 컸습니다. 그래서 발견한 vscode의 익스텐션! file-tree-generator ⚡️file-tree-generator ⚡️사용방법 트리 구조로 시각화하고 싶은 파..