본문 바로가기

📚 FrontEnd -Study68

리스트에서 검색한 항목 다시 돌아와도 그대로 유지하기 처음에는 이 부분을 놓치고 단순히 목록 버튼이나 수정 버튼을 누르면 router.back()으로 동작하게 하였다.그러다보니 이전에 리스트에서 만약 100페이지를 보고 있으면 해당 글 누르고 다시 돌아오면 다시 1페이지로 돌아오는것이다. 이게 데이터가 점점 많아지니 너무 불편하다는 것을 깨달았다. 그래서 리스트에서 아카이브 디테일 페이지에 들어갈 수 있는 모든 경로에 route와 router를 사용하여필요한 데이터를 넘겨주고 받아서 그전에 봤던 페이지수와 검색어 등을 유지하여 이전에 봤던 리스트와 똑같게 불러올 수 있게끔 수정하였다. 여러 페이지를 많이 수정하였는데 그 중 하나의 페이지만 예를 들어 보겠다.우선 공개관리 페이지에서 꼭 넘겨줘야할 값들은 아래와 같다.prevPage(페이지경로)pageNum(.. 2024. 10. 29.

부모, 자식 컴포넌트 v-model 연동 부모 컴포넌트(form태그)와 자식 컴포넌트(input태그) 사이에 v-model 연동을 하고 싶었다.. 어떻게 해야할까? v-model의 개념 - v-model은 template에서 각 엘리먼트가 사용하는 data 값이다. - v-model은 부모 - 자식 관계가 없는 컴포넌트에서는 자유롭게 사용이 가능하다. 그러나 부모-자식 간 관계가 있는 컴포넌트에서 자식 컴포넌트가 부모 컴포넌트의 값을 가져와 v-model로 사용하면 아래와 같은 에러가 난다고 한다. vue.runtime.esm.js:1888 Error: [vuex] do not mutate vuex store state outside mutation handlers. 그렇기 때문에 자식 컴포넌트가 부모의 값을 핸들링하면 v-model이 아닌 :.. 2024. 4. 3.

Vue에서 드롭다운 메뉴 바깥 클릭시 메뉴 닫기 외부 영역 인식하기 1. refs 속성으로 dom 요소 접근하기 우선 외부 영역 클릭을 인식하기 위해서 요소에 직접 접근할 수 있도록 해주는 refs 속성을 사용해야 한다. ref="참조명" 위와 같이 접근 가능 2. eventListener로 클릭 이벤트 처리하기 앞에서 참조할 요소 지정했으면, dom요소가 클릭되었는지를 감지하기 위해 eventListener를 사용해야 한다. window.addEventListener('click', this.onClick); dom에 클릭이벤트 발생했으면 onClick 함수 실행한다. onClick(e){ if(e.target.parentNode !== this.$refs.card){ // 결과창 닫기 } } {{ dropDown }} {{ item }} dropd.. 2024. 3. 30.

TypeScript React에서 useRef의 3가지 정의 ✅ UseRef? useRef는 React Hook의 일종으로, 인자로 넘어온 초깃값을 useRef 객체의 .current 프로퍼티에 저장합니다. DOM 객체를 직접 가리켜서 내부 값을 변경하거나 focus() 메소드를 사용하거나 하는 때에 주로 사용하고, 변경되어도 컴포넌트가 리렌더링되지 않도록 하기 위한 값들을 저장하기 위해서도 사용됩니다. (이는 useRef가 내용이 변경되어도 이를 알려주지 않기 때문입니다. .current 프로피터를 변경시키는 것은 리렌더링을 발생시키지 않고, 따라서 로컬 변수 용도로 사용할 수 있습니다.) 📦 본질적으로 useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 “상자”와 같습니다. 위의 말은 useRef의 반환 타입인 MutableRefObject와.. 2024. 1. 24.

IntersectionObserver 개념 포트폴리오를 만들면서 여러 포트폴리오를 찾아볼 기회가 있었습니다. 굉장히 멋있는 작품들이 많았습니다. 그중에서도 스크롤을 내리면서 애니메이션들이 동작하는 포트폴리오들이 있었는데 이것들이 정적일 수 있는 웹사이트를 지루하지 않게 만들었습니다. 또한 보기에도 상당히 멋있더군요.. 처음엔 framer motion이라는 라이브러리를 사용할 계획이었지만 Intersection Observer => 요 녀석을 추후에 사용할 계획이 많을 것 같기도 하고 정확한 개념을 배우고 싶은 생각이 들어 이번 프로젝트 계기로 훑어볼 계획입니다. Intersection Observer mdn에서 설명되어있는 글은 다음과 같습니다. 교차점 관찰자 API의 IntersectionObserver 인터페이스는 대상 요소와 상위 요소 또는.. 2024. 1. 24.

[Tailwind] 자식 / 형제 요소에게 hover 효과 주기 이번 프로젝트에서 아무래도 Tailwind를 처음 사용하다 보니 기존에 금방 할 수 있는 작업이여도 구글링 해서 찾아보는 일이 많은 것 같습니다. 😅 그래도 Tailwind를 점점 적응이 되다 보면 Styled-Components보다 더 빠르게 코드를 작성할 수 있어 좋은 점도 있는 것 같습니다. import ClickButton from './ClickButton'; const ProjectCard = ({ svgFile, projectTitle, }: { svgFile: string; projectTitle: string; }) => { return ( {projectTitle} ); }; export default ProjectCard; 위에 코드에서 부모 태그 div에 hover하면 img가 포함.. 2024. 1. 9.

[TS] 지정된 데이터 객체에 대한 ~유효한 키인지 TypeScript가 추론할 수 없기 때문에 발생합니다. Element implicitly has an 'any' type because expression of type 'keyof AboutSecondPageDetailType' can't be used to index type '{ agency: string; date: string; subtitle: string; detail: string[]; } | { agency: string; date: string; subtitle: string; detail: string[]; } | { agency: string; date: string; detail: string[]; }'. Property 'education' does not exist on type '{ agency: string; date: stri.. 2024. 1. 3.

[React] Link로 데이터 전달 프리프로젝트를 진행하다가 각 질문에 대한 질문을 클릭할 때, 질문 상세페이지에 해당 질문 데이터들을 넘겨주고 싶었습니다. 컴포넌트에 props로 데이터를 넘겨주기는 많이 하였는데, react-router-dom의 Link 태그로 감싸져 있는 태그는 어떻게 전달해야 할지 궁금했습니다. React Router 공식문서에서 보면 Link 혹은 Navigate을 사용할 수 있는데 이번에 나는 Link로 전달하는 방법을 알아보겠습니다. state state 속성을 사용하여 히스토리 상태 내에 저장되는 새 위치에 대한 상태 값을 설정할 수 있습니다. 이 값은 나중에 useLocation()을 통해 액세스 할 수 있습니다. let { state } = useLocation(); 위의 방법으로 사용하면 쉽게 데이터를 .. 2023. 6. 18.

[typescript 열거형,인터페이스,type,class] 열거형 enum NumberColor { RED = 0, GREEN = 1, BLUE = 2, }; enum StringColor { RED = 'red', GREEN = 'green', BLUE = 'blue', }; 인터페이스 // Todo 인터페이스를 작성합니다. interface Todo { id: number; content: string; isDone: boolean; } // Todo 인터페이스를 타입으로 받는 todos를 완성합니다. let todos: Todo[] = []; // Todo 인터페이스를 타입으로 받는 addTodo를 완성합니다. function addTodo(todo: Todo) { todos = [...todos, todo]; } // Todo 인터페이스를 타입으로 받는 .. 2023. 5. 31.

[typescript 타입] 1. 기본 타입 interface kimcoding { name: string; age: number; } interface parhacker { name: string; age: string; } function printAge(person: kimcoding | parhacker) { let age; if (typeof person.age === 'number' || typeof person.age === 'string') { age = person.age.toString(); } console.log(`${person.name}의 나이는 ${age}살 입니다.`); } const kimcoding = { name: '김코딩', age: 30, }; const parhacker = { name: '박.. 2023. 5. 30.

[typescript 프로젝트 환경 구축] TypeScript 환경 구성 1. 프로젝트를 생성합니다. mkdir (폴더명) cd (폴더명) 2. 프로젝트 폴더를 생성하고 폴더 안으로 이동한 뒤, 터미널에서 npm init -y 명령어를 실행해 새로운 프로젝트를 초기화 합니다. npm init : 새로운 Node.js 프로젝트를 시작할 때 사용 -y : 모든 질문에 대해 자동으로 기본값인 "yes"로 응답하게 된다. 즉, 사용자의 입력 없이 빠르게 초기화된 package.json 파일을 생성할 수 있습니다. 3. 프로젝트 내부에서 npm 을 사용할 준비가 되었으므로, 이제 TypeScript를 설치합니다. npm install typescript --save-dev npm install [패키지명] --save-dev : package.json 파.. 2023. 5. 30.

useState 동작원리 프로젝트를 하면서 react에 대한 기본기가 많이 부족하다고 느꼈다. 기본 개념들을 다시 한번 정리해보자. useState useState로 상태값을 변경할 때 사용한다. const [state, setState] = useState(initialState) 첫 번째 요소에는 두 번째 요소에는 나는 setState가 state 를 변경시킨다고 생각하였다.. 하지만 const로 선언하였으니 값이 변경될 리는 없다. 🤨 그럼 어떻게 상태가 변경되는걸까? import {useState} from 'react' 우리는 useState를 사용할 때 react 모듈에서 useState를 named import 해서 사용한다. 🔽 default / named 참고할 글 더보기 https://medium.com/@_d.. 2023. 5. 25.

코드 분할(Code Spliting) / React.lazy()와 Suspense React v18 최근 React가 18 버전을 업데이트되면서 많은 부분이 바뀌었다. 가장 빠르게 볼 수 있는 변화는 콘솔창에 경고문이 보인다. => 이제 더 이상 ReactDOM.render를 지원하지 않는다는 내용이다. React v18 이전 index.js const rootElement = document.getElementById('root'); ReactDOM.render(, rootElement); React v18 index.js import {createRoot} from "react-dom/client"; const rootElement = document.getElementById("root") const root = createRoot(rootElement); root.render(.. 2023. 5. 23.

[ OAuth ] OAuth 현재 우리가 자주 사용하는 소셜 로그인 인증 방식은 OAuth 2.0 기술로 구현됨. OAuth는 인증울 중개해 주는 매커니즘. => 사용자 정보를 가지고 있는 웹 서비스 (Naver, Google, Kakao ...)에서 사용자의 인증을 대신 해주고, 접근 권한에 대한 토큰을 발급한 후, 이를 이용해 서버에서 인증이 가능 OAuth 주체 Resurce Owner 사용자 Application 사용자가 소셜 로그인을 활용해 이용하고자 하는 새로운 서비스 Resurce Server & Authorization Server 사용자의 정보를 저장하고 있는 서버를 Resource Server라고 부른다. 이미 사용 중인 서비스의 서버 중 인증을 담당함는 서버를 Authorization Server라 한.. 2023. 5. 4.

TIL - [Token/JWT] 토큰 등장배경 세션 기반 인증이 가지고 있던 한계를 극복하고자 고안됨. => 따라서 서버의 부담을 줄이기 위해 클라이언트에 사용자 인증 정보 저장. 그래서 토큰은 클라이언트에 인증 정보를 보관하여 서버가 각각의 클라이언트가 누군지 구별할 수 있도록 암호화한 데이터. 토큰 인증 방식 흐름 토큰에는 여러 종류가 있는데 그중에서 개방형이고 웹에서 널리 쓰이는 JWT가 있다. JWT (Json Wep Token) json 객체에 정보를 담고 토큰으로 암호화하여 전송할 수 있다. 구성 Header : HTTP 헤더처럼 토클 자체를 설명하는 데이터가 담겨 있다. 토큰의 종류, 시그니처를 만들 때 사용할 알고리즘이 저장 { "alg": "HS256", "typ": "JWT" } Payload : 전달하려는 내용물을 .. 2023. 5. 4.

이전 1 2 3 4 5 다음

728x90

티스토리툴바