영최의 개발켈로그

✅ 깃허브 주소 https://github.com/Cosmopolitan777/Cosmopolitan GitHub - Cosmopolitan777/Cosmopolitan Contribute to Cosmopolitan777/Cosmopolitan development by creating an account on GitHub. github.com ✅ 전체 시현 영상 ✅ 피드백 1. 깃 리드미 - 추천알고리즘 설명 보완 2. 페이지네이션 기능 추가 요함 3. 게시판 수정 및 삭제 권한 추가 요함 ✅ 느낀점 1. Nginx로 서버 배포할 때 계속 cors에러가 떠서 정말 힘겨웠었다. 분명 서버단에서 설정을 했는데도 불구하고 계속 떴다. 해결 방법은 .env.development파일에 따옴표를 모두 제거하고 ..

✅ 1 ~3 일차 : 주제 선정 우리 조는 칵테일을 소개하는 사이트를 주제로 선정했다. 페이지 구현 예시는 아래와 같다. ✅ 4 일차 처음에 react-slick 기능으로 구현하려고 했는데 내부의 카드를 사용할 때 부트스랩이랑 호환이 잘 안되었다. react-slick 만든 태그 중에 클래스 이름이 없는 태그가 있어서 css 적용이 안되었기 때문이다. 그래서 스와이퍼로 변경하였고 해당 코드는 아래와 같다. import {Swiper, SwiperSlide} from "swiper/react"; import {EffectCoverflow, Navigation, Mousewheel} from "swiper"; import "swiper/css"; import "swiper/css/effect-coverflo..

1.Sass란? Syntactically Awesome Style sheets의 약자로, CSS 전처리기를 이용해서 복잡한 작업을 보다 쉽게 한다. CSS 전처리기란? 자신만의 특별한 문법을 가지고 CSS를 생성하는 프로그램으로, 변수, 함수 개념을 사용하여 재활용성과 가독성을 높인다. 가.확장자 종류 .sass: 세미 콜론(;)과 중괄호({})를 사용하지 않고 탭(tab)을 이용해서 스타일을 정의한다. .scss: 기존의 .css파일과 비슷한 문법을 이용하지만 부모 { 자식{}} 관계로 상하관계를 표현가능하다. 또한 sass보다 더 넓은 범용성과 css와의 호환성이 좋기 때문에 아래에서 scss를 사용하는 방법을 소개하고자 한다. 나.설치 방법 버전 문제로 인해 npm install node-sass에..

1.Hooks란? 함수형 컴포넌트에서 React의 state와 lifecycle을 연동할 수 있게 해주는 함수이다. 즉, 클래스형 컴포넌트의 기능을 함수형 컴포넌트에서 사용할 수 있도록 해주는 기능으로, 이 기능이 있기에 이제 클래스형 컴포넌트를 함수형 컴포넌트가 완전히 대체할 수 있게 되었다. 가.사용 규칙 공식 문서에 따르면 Hook의 사용 규칙은 두가지이다. https://ko.legacy.reactjs.org/docs/hooks-rules.html#explanation Hook의 규칙 – React A JavaScript library for building user interfaces ko.legacy.reactjs.org ✅ 첫번째, 함수형 컴포넌트에서만 Hook를 사용할 수 있다. 당연하다...

1.Life Cycle Life Cycle이란 수명 주기를 의미한다. 그럼 누구의 수명 주기인가? 컴포넌트의 수명 주기이다. 그럼 어떨 때 사용하는가? 보통 컴포넌트의 수명은 페이지에 렌더링 되기 전에 시작하여 페이지에서 사라질 때 끝난다. 이 라이프사이클을 사용하면 컴포넌트를 처음 렌더링할 때 어떤 작업을 처리하거나, 컴포넌트를 업데이트하기 전 어떤 작업을 처리해야할 때 사용한다. 가.분류 라이프사이클은 총 세가지 카테고리로 나뉘는데 마운트, 업데이트, 언마운트가 있다. 마운트: DOM이 생성되고 웹브라우저 상에 나타남 업데이트: props나 state가 바뀌었을 때 등등 업데이트함 언마운트: DOM에서 컴포넌트가 제거될 때 위와 같이 각각의 수명 주기일 때에 맞추어 어떤 작업을 끼워넣는다고 생각하면 ..

1. ref란? Refenrence의 약자로, render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법이다. HTML에서 요소를 선택할 때 아래와 같이 id를 지정해서 요소를 선택하지만 내용 리액트의 경우 컴포넌트가 중복되면 id 또한 중복될 수 있다는 문제점이 있다. 그러나 이 ref를 사용한다면 컴포넌트 내부에서만 작동되므로, 문제가 되지 않는다. 즉, DOM을 직접적으로 건드려야할 때 ref를 사용한다. (예를 들면, input 태그에 focus를 주거나, cusor:pointer로 지정할 때) 그러나 남용하기보다는 만약 state를 지정할 수 있다면 state를 사용하자. 그 이유는 리액트에서는 랜더링할 때 ref의 current 값을 알 수 없기 때문이다. ref의 경우 ..

1.map() 어떤 배열 -> 새로운 배열로 만들고자 할 때 map()함수를 사용한다. map()함수의 인자는 callback함수이다. arr.map(callback(currentValue[, index[, array]])[, thisArg]) 이 콜백함수의 인자는 currentValue: 처리할 현재 요소 index: 현재 요소의 인덱스 - optional array: map()을 호출한 배열 - optional 으로 총 3가지의 인자를 가진다. thisArg 는 callback을 실행할 때 this로 사용되는 값이다. 아래의 예시를 확인해보자 let numbers = [1, 4, 9]; let doubles = numbers.map((num) => { return num * 2; }); doubles..

1. 리액트에서의 이벤트 핸들링 이벤트를 통해서 사용자와 웹 브라우저는 서로 상호작용을 할 수 있다. 이벤트 핸들러는 "어떠한 사건에 대한 동작을 다룬다" 라는 의미이다. 리액트에서의 이벤트 핸들러와 html에서의 이벤트 핸들러는 아래와 같이 몇개의 차이점이 있다. 리액트에서는 객체로 전달해야하고, html에서는 괄호()까지 작성해야 동작하는데, 작동 방식의 차이라고 생각하면 될 것 같다. 아래 주의 사항을 통해 더 자세히 알아보도록 하자. 가.React의 Event 주의점 1)카멜표기법 첫번째로, 이벤트 이름은 카멜표기법으로 작성해야한다. 예를 들면 onclick -> onClick / onkeyup -> onKeyUp으로 작성한다. 2)함수 자체를 객체로 전달 두번째로, 실행할 자바스크립트 코드를 전..