조각조각 노트 정리

[merge된 브렌치가 있는 경우 Rebase하기] 1. b 개발자는 main으로 checkout을 해서 'git pull origin main'명령어로 merge된 코드를 받아온다. 2. b개발자가 개발하던 브랜치로 다시 checkout한 다음 3. 'git rebase -i main'을 통해 rebase를 진행한다. 4. 커밋정리 시작! 가장 오래된 commit을 pick으로 놓고, 나머지를 squash 한다. 해당 commit의 pick을 s로 변경하면 된다. ESC -> :wq로 창을 빠져나온다. 5. 수정용 에디터가 또 나옴! 놀라지 말고 불필요한 커밋 내용을 지우고 최종적으로 보여질 커밋을 작성한다. ESC -> :wq로 창을 빠져나온다. 6. 커밋 메세지가 잘 수정됬는지 확인! 'git lo..

1. 반응형 웹이란? 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동을 변하는 웹사이트를 의미한다. IT 기기의 종류가 많아짐에 따라 디스플레이의 크기에 맞게 유동적으로 반응하는 반응형 웹을 구현하는 것이 더욱 중요해졌다. 2. Media Query 반응형 웹을 구현하는 방법중 하나인 Media Query에 대해 설명하고자 한다. media query란 반응형 웹을 구현하는 CSS 기술이다. '@media'라는 문법으로 작성하며, 특정 조건에서 어떤 CSS를 적용하는 규칙을 적용할 수 있다. @media : 미디어 쿼리를 시작할 때 쓰는 키워드이다. only screen : 어떤 디바이스에서 적용하는지 알려준다. and (max-width : ...

박스를 클릭했을 때 원하지 않는 테두리가 생기는 것을 볼 수 있다. 이 테두리를 없애고 싶다면 :focus 의사클래스를 사용해야한다. :focus 의사클래스란? 입력 폼을 클릭한 상태를 의미한다. 따라서 클릭되었을 때 테두리를 없애고 싶으면 outline 속성을 none으로 작성해주면 된다. input:focus {outline:none;} 클릭했을 때 테두리 색상 변경하기 input:focus {outline:2px solid #aaa;}

사용자의 위치를 받아와서 날씨 정보를 뿌려주는 작업을 하면서 외부 API를 사용하게 되었다. 개인 github이지만 publish 레파지토리에 올릴 코드라서 해당 API key를 숨기는 작업을 하고자했다. 한줄만 숨기려고 했기 때문에 .env나 node.js를 사용하지 않고, gitignore 파일을 생성해 git에 추가되지 말하야 되는 파일을 정의하였다. 1. apikey.js 파일을 만들어 key 값을 객체에 넣는다. const config = { apikey : ~API key~ } 2. index.html 에 해당 apikey.js 파일 연결 3. API 값이 쓰이는 파일의 코드에 상수로 할당. const WEATHER_API = config.apikey; 4. .gitignore 파일을 생성하고..

자바스크립트의 메서드 중에 현제 사용자의 위치 좌표를 가져오는 메서드를 알게 되었다. navigator.geolocation.getCurrentPosition( Success, Error, [options] ); 해당 메서드의 첫번째 인자로 GPS 동의 시 실행할 함수, 두 번째 인자는 에러함수, 세 번째 인자는 옵션을 받는다. 옵션 값 - enableHighAccuracy : 더 정확한 위치를 찾는대신 배터리를 더 소모함. - timeout : 주어진 초 시간 안에 찾지 못하면 에러 발생 - maximumAge : 한번 찾은 위치 정보를 해당 초만큼 캐싱 위치 동의를 받으면 position 객체를 반환한다. 위치를 찾기위해 주로 사용하는 값 - latitude : 위도 - longitude : 경도 -..

자바스크립트의 내장함수중에 비동기함수인 setTimeout()과 setInterval()에 대해서 알아보고자 한다. 1. setTimeout() 특정 코드를 바로 실행하지 않고, 일정시간을 기다린 후 실행하는 함수이다. setTimeout() 함수는 2개의 인자를 받는다. 첫번째 인자는 실행할 코드를 담는 함수를 받고, 두번째 인자로 지연되는 시간을 밀리초(ms) 단위로 받는다. setTimeout(()=>console.log("2초 뒤에 실행"), 2000); 세번째 인자의 자리 부터는 가변 인자를 받는다. 첫번째 인자로 넘어온 함수가 인자를 받는 경우, 이 함수에 넘길인자를 명시해주기 위해서 사용한다. 예시) 두개의 인자를 더한 값을 출력하는 add함수에 필요한 2개의 값을 세번째와 네번째 인자 자리..

현제 레파지토링 주소를 끊고, 새로운 레파지토리 주소로 연결하고 싶은때 git remote 명령어를 사용해서 연결을 끊고 재연결을 할 수 있다. git remote -v : 해당 명령어를 사용하면 현제 연결되어있는 원격 레파지토리를 확인할 수 있다. git remote remove : 옵션을 추가해서 명령어를 입력하면 해당 이름으로 연결되어 있는 저장소를 끊을 수 있다. git remote add : 저장소와 연결을 끊은 뒤 다시 연결을 하고 싶다면 해당 옵션을 사용하면 된다. ↓그외 다양한 관리 명령어들 더보기 NAME git-remote - Manage set of tracked repositories SYNOPSIS git remote [-v | --verbose] git remote add [-t..

> 제품 & 카테고리 검색 기능 검색기능 커스텀 훅으로 정의한 디바운스 함수를 import해서 검색 하고자 하는 단어가 담긴 useState의 변수를 파라미터로 넣었고, 디바운스의 변수와 쿼리스트링을 사용하여 통신. 해당 단어가 포함된 제품 혹은 카테고리의 데이터를 받아와 보여주는 방식으로 검색 기능을 구현하였다. import useDebounce from '../../pages/Main/Debounce'; const [search, setSearch] = useState(''); const debounceValue = useDebounce(search); useEffect(() => { fetch( `http://주소/search?limit=10&offset=0&keyword=${debounceValu..

> 무한스크롤 - 이용하는 유저들의 제품에 대한 집중도를 올리기 위해 페이지네이션 기능들 중 무한스크롤로 구현하기로 했다. > 기능구현 무한스크롤 기능을 구현함에 있어 다양한 방법이 있었다. 라이브러리를 사용하는 방법, 화면의 top포인트와 보이는 화면의 높이를 더한 값이 실제 콘텐츠 높이보다 같거나 클 때 함수가 실행되게 하는 방법, Intersection Observer API를 활용하는 방법, 찾아본 방법은 3가지였는데 나는 두 번째 방법을 선택해서 구현을 하고자 하였다. 이 방법을 사용한 이유는, 일단 라이브러리를 사용하지 않고 직업 코드를 쳐서 구현하고 싶었고, 검색 기능을 구현하면서 커스텀한 디바운스 훅을 이용해서 무한스크롤을 제작하고 싶었다. //스크롤이 화면의 하단에 닿았을 때의 값 con..

> 메인페이지 (제품나열) - 다중필터 - 이용하는 엔드 유저들의 높은 제품 이해도를 고려하여, 제품를 자세하게 거를 수 있게 필터 기능을 다중필터로 구현하였다. - 백엔드분과의 소통을 통해, 필터링 되는 값을 API로 받아 그려주기로 결정. > 백엔드에서 보내주는 endPoint와 데이터 형식 endPoint http://주소/products?limit=10&offset=0&sort=review&sortorder=desc&ageId=1 limit=10&offset=0 : 무한스크롤시 받아올 아이템의 limit와 offset의 값 sort=review : 카테고리 분류 sortorder=desc : 해당 카테고리의 오름차순 내림차순 정렬 값 ageId=1 : 나이, 난이도의 key와 id value 데..

>두 번째 프로젝트 시작하기에 앞서.. 첫번째 프로젝트가 마무리되고, 두 번째 프로젝트로 들어가기 전에 대략 3~4일 정도의 med term기간이 있었다. 이 기간동안 아마존 웹 서비스(AWS)의 S3를 이용하여 배포를 해보았고, 다음 프로젝트에서 사용하게 될 Custom Hook과 styled component 그리고 Git의 Workflow와 Rebase에 대해서 공부하는 시간을 가졌다. 다음 프로젝트에서는 라이브러리와 외부 API를 사용하여 진행되는 등 다양한 변화가 있을 예정이라는데, 많은 변화 속에서 정신없이 진행될 프로젝트를 생각하니 마음다짐을 안 할 수가 없었다. 그렇게 약간의 긴장되는 마음과 함께 2차 프로젝트가 시작되었다. 👤 팀 구성 팀명 : DREAM 팀 인원 : 프론트엔드 3명 / ..

프로젝트기간 동안 너무 정신 없이 달려와서 꼭 기록해야되는 기능을 구체적으로 남기고자, 좀 늦었지만 기억을 되살려 글을 작성하고자한다. 별 아이콘이 든 버튼 태그 빈 배열을 이용하여 반복 대상인 별 맵핑 별을 클릭했을때 해당 클릭 값 만큼 별 아이콘의 색상 변화 큰 진행 흐름은 이렇게 3단계로 나뉘어져 있다. 1단계 : 별 아이콘이든 버튼태그 구현 import React from 'react'; import { Star } from 'react-feather'; import './StarRating.scss'; const StarRating = () => { ); }; 리턴 되는 값으로 별 아이콘을 담는 버튼 태그를 작성, 2단계 : 빈배열을 이용한 map함수 이용 import React from 're..

const [open, setOpen] = useState(false); const [check, setCheck] = useState(''); const returnOpen = () => { // if (open === false) { // setOpen(true); // } else if (open === true) { // setOpen(false); // } // open ? setOpen(ture) : setOpen(false); setOpen(prev => !prev); }; return ( ); 토글기능을 구현하면서 작성한 첫번째 조건부 함수가 아주 기초적으로 작성한 코드였기에, 맨토님의 도움으로 삼항연산자와 그보다 더 짧게 표현할 수 있는 함수식을 알게 되었다. < if문 - 일단 아주아주..

#프로젝트 소개 가구 이커머스 홈페이지를 모티드로 홈페이지 제작 이케아의 가족친화적인 기업 이미지와 오프라인의 강점을 고려하며 제작을 진행하였다. #프로젝트 기간 2023.04.03~2023.04.14 #프로젝트 멤버 팀명 : 🦄uniC5n 인원 : 프론트앤드 2명/ 백앤드 3명 #기술 스택 Git,Github HTML / CSS / JavaScript Sass React #협업 도구 Slack : 비대면 소통 및 공유 Trello : 일정관리, 작업현황(티켓관리) Notion : 팀 회의록, 코드 공유, 통신 자료 공유(엔드포인트 및 req 정리) #프로젝트의 products 팀원들과 프로젝트의 초반에는 기능을 중심으로 구현을 진행했다. 팀원들과 여러 회의를 하면서 products의 중요함을 느끼고 후..

sideEffect와 useEffect에 대해서 알아보고자 한다. 1. sideEffect 란?? side Effect 단어를 풀어서 설명하자면 다음과 같다. 1-1. 단어의 의미 Side Effect === 부작용 : 부작용(부수적인 작용), 따라오는 효과 부작용의 단어가 부정적인 결과를 유발하는 경우가 많기에 부정적인 뉘앙스로 인식되지만, 용어 자체에서는 부정적 의미를 내포하고 있지 않는다. 단지 주요 효과 이 외의 부수적으로 발생하는 효과를 의미하는 단어이다. 그렇다면 프로그래밍에서는 어떤 방식으로 적용이 될까? 프로그래밍에서의 부작용은 코드가 의도한 주요 효과 이외에 추가적으로 발생하는 효과라고 할 수 있다. 그렇기 때문에 프로그램을 이루는 가장 작은 단위인 함수에서 쓰이는 용어이다. side e..