분류 전체보기 (109) 썸네일형 리스트형 리액트일지001 | 리액트 메뉴바 클릭시 글자 색상 변경하기 | 변경하고 글자 색상 유지하기 | 리액트 NavLink 에러로그 사이드 프로젝트로 쇼핑몰 구현 중에 아래 이미지와 같이 사이드 메뉴바 클릭시에 글자 색상과 굵기를 변경하고 해당 페이지에 머무를 때에 변경된 글자 스타일을 유지하게 구현하고 싶었다. 나의 멋진 해결 처음에는 useState를 사용하여 상태관리를 하려했는데 좀 더 간단하게 구현할 수는 없을까 찾아보다가 NavLink를 알게 되었다. NavLink는 현재 경로와 to 로 설정한 Link의 경로가 일치하는 경우 특정 스타일을 적용할 수 있는 컴포넌트이다. 코드먼저 //MyPageMenu.tsx import React from 'react'; import { Link, NavLink } from 'react-router-dom'; import * as S from './style'; export con.. 깃허브로 협업하기 | 깃 협업순서 | 깃 협업 준비 과정 | 깃허브 팀프로젝트 | Fork, Clone, Remote, Branch생성, Push, PullRequest 최근 백엔드와 협업하는 팀 프로젝트를 진행하였는데 그 과정에 있어 프론트 팀도 깃허브를 사용하여 프로젝트를 진행했다. 이에 프로젝트 시 깃허브 사용법에 대해 나의 경험을 토대로 짧게 정리해보려한다. 평소 깃 협업에 대해 자신은 없었지만 역시 최고의 공부는 프로젝트라고 이론공부 + 개인실습 때보다 더 확실하고 더 임팩트있게 깃 공부도 경험한듯하다. 1. 리파지토리 생성하기 우선 프로젝트 시작에 앞서 리파지토리를 생성해야한다. 대표자 한 명이 리파지토리 생성 후 공동작업권한을 부여하기 위해 GitHub Collaborator를 추가해야하는데 아래와 같이 리파지토리 내의 Settings -> Collaborators 에서 공동작업자를 초대할 수 있다. 2. 리파지토리 포크(Fork) 하기 각각의 작업자가 작업.. 패스트캠퍼스) KDT 핀테크 서비스 프론트엔드 과정 2기 TIL | 국비지원교육 | 핀테크 프론트엔드개발자 ## 220812 Day Today I Learned React Router React Router 특정한 주소와 컴포넌트를 연결시켜주고, 주소 이동을 통해 다른 컴포넌트 화면을 보여줄 수 있도록 하는 기능을 제공하는 라이브러리 라우터 설치하기 터미널에서 아래와 같은 명령어를 작성 yarn add react-router-dom@6 라우터 사용하기 사용하기 앞서서 index.js 에서 app 을 BrowserRouter 로 감싸주어야 해당 앱에서 브라우저 라우팅 기능의 사용이 가능 const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); Routes 포함하는 주소 변경을 감지하고 일치하는 Route 를 찾아서 표시해.. 패스트캠퍼스) KDT 핀테크 서비스 프론트엔드 과정 2기 TIL | 국비지원교육 | 핀테크 프론트엔드개발자 ## 220805 Today I Learned porps props props 는 properties 의 줄임말로 상위 컴포넌트에서 하위 컴포넌트로 값/변수를 전달하기 위해서 사용됨 컴포넌트 태그 안에다가 변수명 = 값 형태로 적어면 해당 변수를 그대로 해당 컴포넌트 내부에서 쓸 수 있다. import First from './components/First'; function App() { return ( ); } export default App; props의 장점 props 를 쓰는 것이 좋은 이유는 하위 컴포넌트를 마치 백지수표처럼 쓸 수 있다는 점 틀은 유지한 채로 값만 우리가 원하는대로 바꿔서 여러 개의 수표를 만들어 놓을 수 있다 props를 받아올때는 변수를 분해하면서 받아오는 비구조할당을 .. 패스트캠퍼스) KDT 핀테크 서비스 프론트엔드 과정 2기 TIL | 국비지원교육 | 핀테크 프론트엔드개발자 ## 220729 Today I Learned React Component JSX React Project React Meta (전 Facebook) 에서 2011년에 만든 프론트엔드 라이브러리 (프레임워크) 현재 2006년에 처음 등장한 유서깊은 jquery 보다도 훨씬 많이 쓰는 프레임워크가 되었다. Component React 는 component 라는 것을 작성해서, 조합하는 방식으로 코딩을 진행한다. 컴포넌트는 하나의 html 페이지에서 요소들을 잘게 나눈 것이라고 생각하면 쉽다. 컴포넌트의 장점 팀으로 하나의 페이지를 작성할 때 요소 별로 나눠서 작업할 수 있다. 복잡한 페이지의 코드를 조금 더 직관적으로 볼 수 있는 등 다양한 장점이 존재한다. JSX JSX 는 react 에서 쓰이는 자바스.. 패스트캠퍼스) KDT 핀테크 서비스 프론트엔드 과정 2기 TIL | 국비지원교육 | 핀테크 프론트엔드개발자 ## 220511 Day Today I Learned IP Quiz IP Quiz 1. 변수const에 대한 설명으로 틀린 것을 고르세요. 재할당이 가능하다 호이스팅이 불가능하다 유효범위는 블록레벨이다 전역등록이 불가능하다 const는 재할당 불가 2. 반복문에 해당하지 않는 구문은? do-while문 for문 continue문 if문 if문은 조건문 이다. 3. console.log(a.z)의 출력 값은? 캡션 없는 이미지 { a: 4, b: 6} [ 2, 7 ] { a: { }, b: 6 } { a: { 4 }, b: 6 } 참조형 데이터는 똑같이 생겨도, 새로운 메모리에 형성된다 4. console.log(typeof typeof 1); 다음 코드를 콘솔 창에서 출력하면 결과값은? string nu.. 패스트캠퍼스) KDT 핀테크 서비스 프론트엔드 과정 2기 220504 TIL | 국비지원교육 | 핀테크 프론트엔드개발자 ## 22 Day Today I Learned IP Quiz IP Quiz 문제 1.다음 중 자바스크립트의 데이터타입 중 원시형이 아닌것은? 불린 숫자 문자 객체 정답. 4) 객체 해설. 객체는 참조형 데이터타입이다. 문제 2. 다음중 연산자의 기호와 의미가 다르게 연결된 것은? == : 동등 != : 부등 !== : 불일치 === : and 정답. 4) === : and 해설. ===는 일치를 의미한다.. 패스트캠퍼스) KDT 핀테크 서비스 프론트엔드 과정 2기 220427 TIL | 국비지원교육 | 핀테크 프론트엔드개발자 ## 22 Day Today I Learned IP Quiz IP Quiz 1. ‘값이 할당되지 않은 상태’를 의미하는 데이터는? 1) Boolean 2) String 3) Undefined 4) Null 해설 1) Boolean : true, false 두 가지 값밖에 없는 논리 데이터 2) String : 따옴표를 사용하는 문자 데이터 3) Undefined : 값이 할당되지 않은 상태를 의미하는 데이터 4) Null : 값이 의도적으로 비어있음을 의미하는 데이터 2. css 속성 중 가상클래스 속성이 아닌것은? 1) focus 2) active 3) hover 4) before 해설 before는 가상 요소 선택자이며 요소의 내부 앞내용을 삽입해준다. 3. 주 축의 정렬 방법을 설정하기 위해선 어떤.. 이전 1 2 3 4 5 ··· 14 다음
