이 글은 KUIT Web 부원분들을 대상으로 쓴 글입니다.1. React Hook이란?함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리 규칙1. 최상위에서만 Hook을 호출해야한다.→ 반복문이나 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안된다. 규칙2. 리액트 함수 내에서만 Hook을 호출해야 한다.→ Hook은 일반적인 js 함수에서는 호출하면 안된다. 출처: https://choijying21.tistory.com/60 React Hooks = 독립적인 state 데이터 조작 API useState = 독립적으로 데이터를 관리할거야useEffect = 독립적으로 side-effect를 관리할거야useMemo = 독립적으로 데이터 캐싱을 관리할거야useCallback = ..
이 글은 KUIT Web 부원분들을 대상으로 쓴 글입니다.6주차 영상을 올리고 나서, OOO 파트장님이 제가 올린 코드들을 리팩토링해주셨습니다 XD그리고 파트장님이 어떤 부분이 리팩토링해주셨는지 전부 비교 분석해서 알려주셨습니다!! 그러면 코드가 어떻게 바뀌었는지, 전후 코드들을 비교해보면서 같이 살펴볼까요? 1. InputBar 컴포넌트에 product props를 내려주는 이유?비어있는 product 객체를 생성하고 이를 사용해서 값을 채워주려고 만든 것 같은데, 이렇게 하면 확장에 유연하지 못하다.구현체가 아니라 인터페이스를 기반으로 구현하는 것이 바람직하다(객체지향 기본 원칙) 그리고 이 구현체를 FilterableProductTable에서 생성해서 내려줄 이유가 없어보인다. 응집도 측면에서 In..
이 글은 KUIT Web 부원분들을 대상으로 쓴 글입니다. 1. 클래스형 컴포넌트가 함수형 컴포넌트로 대체된 이유class ProfilePage extends React.Component { showMessage = () => { alert(`${this.props.user} 를 팔로우 했습니다`); } handleClick = () => { // const {user} = this.props; 이렇게 미리 할당해둬서 해결은 가능 // setTimeout(() => this.showMessage(user), 3000); setTimeout(this.showMessage, 5000); // this.showMessage 대신 user 넣으면 해결 가능 } render() { return Fol..
이 글은 KUIT Web 부원분들을 대상으로 쓴 글입니다.DefinitelyTypedDefinitelyTyped 프로젝트는 일종의 자원봉사 프로젝트→ 여러 개발자들이 자발적으로 자바스크립트 모듈의 타입을 추가해주고 있다.→ 이렇게 추가된 타입은 npm 을 통해 다운받을 수 있다.→ IDE 에서 자바스크립트 모듈에 대한 타입 지원이 가능해진다. 출처: https://jake-seo-dev.tistory.com/209@types 라이브러리@types 라이브러리는 TypeScript를 사용하여 JavaScript 라이브러리를 사용할 때 필요한 타입 정의를 제공하는 라이브러리→ JavaScript 라이브러리의 API에 대한 타입 정보를 TypeScript에 제공하여, TypeScript 컴파일러가 타입 검사를 ..
(※ 이 내용은 아직 정확하게 구현되는지 검증되지 않았습니다! 백엔드와 소통없이 프론트에서 독단적으로 작성한 것이니 참고만 해주세요!!!) 로그인을 구현할 때, 1. 단순히 백엔드한테 구글로부터 받은 인가코드를 보내면 2. 받은 토큰을 localStorage에 저장하는 방식으로 구현했었다. 하지만 이 방식은 보안을 고려했을 때 좋은 방법이 아니다. localStorage에 토큰을 저장하는 것은 권장되는 방법이 아니다. 따라서 아래와 같은 방법으로 수정하려 한다. 로그인을 하면 서버는 클라이언트한테 Access Token과 Refresh Token을 받음 Access Token은 전역 변수로 관리(Zustand 활용), RefreshToken은 httpOnly 쿠키로 서버로 부터 받음(이 때 서버와 클라이..
오늘 GDSC에서 주최한 'kprintf'라는 행사를 다녀왔다. 디스코드에서 kprintf라는 행사가 열린다는 것을 확인하고 무슨 주제에 대한 강의가 열리는지 살펴봤다. 다양한 주제들이 있었는데 그 중에 React에 대한, 정확히는 React 버전이 19로 업데이트되면서 어떻게 바뀌는지 알려주는 강의가 있길래 바로 신청했다. React를 사용해본 적은 꽤 있지만 버전이 몇인지, 또 최신 기능은 무엇인지에 대한 관심은 갖지 않았었다. 이번 세션을 통해 React에 대하여 더 깊은 이해도를 가질 수 있기를 기대했다. 이번 학기에(사실 저번학기도) 신공학관에서 수업을 듣지 않기에 정말 오랜만에 신공학관을 방문한 것 같다. 입장권 QR코드를 체크하고 학번과 이름을 작성했다. 그리고 위 사진과 같이 경품을 받았다..
이 글은 KUIT Web 부원분들을 대상으로 쓴 글입니다. 프로토타입 자바스크립트 객체는 Prototype이라는 내부 프로퍼티가 존재한다. 거의 모든 객체가 생성 시점에 이 프로퍼티에 null이 아닌 값이 할당된다. 객체 내부에 없는 프로퍼티를 호출하게 되면? → 해당 프로퍼티를 찾지 못하면 바로 [[Prototype]]링크를 따라가 프로퍼티를 탐색한다. 모든 일반 객체의 최상위 프로토타입 연쇄는 내장 Object.prototype이고 이 지점에서도 찾지 못하면 탐색이 종료된다. (undefined 반환) 두 객체를 서로 연결짓는 가장 일반적인 방법은 함수 호출 시 new키워드를 앞에 붙이는 것이다. new키워드는 일반 함수 호출 + "객체" 생성이라는 잔업을 더 부과하는 지시자이다. const f = ..
이 글은 KUIT Web 부원분들을 대상으로 쓴 글입니다. HTML 문서의 각 엘리먼트들은 계층적으로 이루어져 있습니다. → 이런 계층적 구조 특징 때문에 HTML 요소에 이벤트가 발생하면 연쇄적 이벤트 흐름이 일어나게 됩니다! 이런 이벤트 전파(Event Propagation)은 크게 버블링과 캡처링으로 나뉩니다. 버블링: 자식 요소에서 발생한 이벤트가 바깥 부모 요소로 전파(기본값) 캡처링: 자식 요소에서 발생한 이벤트가 부모 요소부터 시작하여 안쪽 자식 요소까지 도달 즉, 버블링은 자식→ 부모, 캡처링은 부모→ 자식으로 방향이 정반대인 것을 알수 있습니다. 이벤트 전파 흐름은 3가지 단계가 있습니다. 캡처링 단계: 이벤트가 하위 요소로 전파되는 단계 타깃 단계: 이벤트가 실제 타깃 요소에 전달되는 ..
이 글은 KUIT Web 부원분들을 대상으로 쓴 글입니다. 이번 주부터 저희는 JavaScript에 대해서 배우게 됩니다! 강의 도중에 실행 컨텍스트라는 개념에 대해서 배우게 되는데요. 이와 관련해서 좋은 글을 발견해서 같이 공유하려 합니다. 글 링크 : https://velog.io/@hyumapr/JavaScript-Sean103024 JavaScript의 핵심 원리 탐구: 실행 컨텍스트관점으로 보는 클로저, this, 그리고 호이스팅 여러 면접을 거쳐오면서 기술면접 질문들로 자주 받는 내용들인 실행 컨텍스트,클로저,this,호이스팅을 한번에 다뤄볼려고 한다. velog.io 어제 쓰여진 따끈따끈한 글인데요. 이 글에서는 this 바인딩, 클로저, 호이스팅이 무엇인지 알려주고 이 개념들과 실행 컨텍스..
지금까지 헤더는 왼쪽에 제목, 가운데에 검색바, 오른쪽에 로그인(로그인 되있으면 마이페이지 버튼)이 있었다. 그런데 사실 헤더에 버튼들을 더 추가할까 생각 중이었는데, 그렇게 되면 모바일 화면에서는 공간이 좁아서 도저히 보여줄 수 없는 문제가 있었다. 그래서 사이드바를 만들고 싶었다. 사이드바를 만들려면 어떻게 할지 머리가 지끈했다. ‘바 버튼을 누르면 오른쪽으로 쫙 나오는 애니메이션은 어떻게 구현하지?’ 그리고 ‘원래 화면은 살짝 흐릿해져야하는 건 어떻게 만들어야하지?’ 같은 생각들이 머릿 속을 스쳐지나갔다. 그러다 깨달았다. 그냥 라이브러리를 쓰면 되는구나. 분명히 사이드바를 쉽게 구현할 수 있는 라이브러리가 있겠지. 가장 대표적인 라이브러리가 뭐지? → Material UI를 써보자! 옛날에 부트스..
