profile
계속해보겠습니다.
post-thumbnail

[개발회고록]강남구 따숨쉼터

강남구 따숨쉼터언제까지나 만들고 싶은 것만을 만들수는 없다.그렇기 때문에 이 취업준비시간이 불안하지만 참 좋은 시기라고 생각한다.내가 좋아하는 것을 하며, 나를 발전시킬 수 있는 시간. api를 이용하여 승강기를 이용하는 노약자를 위한 빠른환승 서비스를 만들고 싶었는데

2022년 12월 8일
·
0개의 댓글
·
post-thumbnail

Git - Git Bash이용하여 프로젝트 업데이트 & 리액트 사이트 배포

GITGit Bash가 설치 되어야 함.Git Hub 가입 & repository 만들기public으로 설정Add a README file 체크 X제어판 -> 자격증명관리자 -> window자격증명$ git config --list:qnetlify회원가입하여 진행.

2022년 12월 7일
·
0개의 댓글
·
post-thumbnail

220809[한국타이어 벤치마킹]가상요소

가상요소에 hover효과를 주고 싶다면, 가상요소의 부모에 주기.a태그의 before에 hover 효과 주고 싶다면,a태그의 before요소에 hover를 주었을 때, 가 아닌a태그에 hover 했을 때, a태그의 가상요소로 가정하고 작성해야 함. img태그 등 닫는

2022년 12월 6일
·
0개의 댓글
·

활용해 볼 CSS 속성

원하는 속성만 transition 주기원하는 속성만 따로 transition효과를 줄 수 있음비디오, 이미지 등 크기 채우기img video 등 고유 크기를 갖는 요소들의 크기 지정 후 object-fit : fill; 속성을 주면, 그 크기에 맞게 요소 채우기 가능.

2022년 12월 6일
·
0개의 댓글
·
post-thumbnail

220809[한국타이어 벤치마킹]img태그와 가상요소

img태그에 ::before를 추가하여 hover시 다른 이미지로 덮어쓰기를 시도했지만 실패했다. img 태그 밑 가상요소가 나타나지 않음.가상요소 영역이 어둡게 되어있음.요인 : img는 닫는 태그가 없는 태그이기 때문에, 가상요소를 쓸 수 없음. 닫는 태그가 없기

2022년 12월 6일
·
0개의 댓글
·

width요소(outerWidth & innerWidth & width)

※여러줄 주석 처리주석 구역 드래그 후, Alt + Shift + A요소의 순수 너비 + padding + border= 300px + 100px + 20px = 420pxouterWidth + margin= 420px + 100px = 520px요소의 순수 너비 +

2022년 12월 6일
·
0개의 댓글
·
post-thumbnail

Git - Git Bash이용하여 프로젝트 업데이트 & 리액트 사이트 배포

GITGit Bash가 설치 되어야 함.Git Hub 가입 & repository 만들기public으로 설정Add a README file 체크 X제어판 -> 자격증명관리자 -> window자격증명$ git config --list:qnetlify회원가입하여 진행.

2022년 12월 6일
·
0개의 댓글
·

React - scss연동, ...rest props

watching하여 css파일을 별도로 만들지 않고, react의 scss를 실행해보자특정 값이 true/false임에 따라 클래스명을 추가하거나, 추가하지 않을 수 있다.key(class명) : value형태로 value가 true 혹은 false로 평가됨에 따라 스

2022년 12월 6일
·
0개의 댓글
·

React - PostCSS(CSS Modul)

className 부여하여 버튼에 스타일 주기..CSS 클래스가 중첩되는 것을 완벽히 방지.CSS Module 사용시, CSS 파일의 확장자 :.module.css리액트 컴포넌트 파일에서 해당 CSS 파일을 불러올 때 CSS 파일에 선언한 클래스 이름들이 고유해짐.

2022년 12월 6일
·
0개의 댓글
·

React - ClassComponent

최근 잘 사용하지 않는 컴포넌트 형태.render() 메서드를 이용하여 렌더링, JSX 반환.props를 조회해야 할 때에는 this.props를 조회.button 클릭시 count되는 프로그램을 클래스형 컴포넌트 이용하여 구현React에사 생성자 목적this.stat

2022년 12월 6일
·
0개의 댓글
·

React - Context API

컴포넌트를 여러개 거쳐서 전달하는 상황 -> Context API를 이용하여 간단하게 구현 할 수 있음.프로젝트 안에서 전역적으로 사용할 수 있는 값을 관리함.context 객체 생성createContext 함수 호출 시 Provider와 Consumer 컴포넌트 반환

2022년 12월 6일
·
0개의 댓글
·

React - useReducer, 커스텀 hook

useState의 대체 함수.(state, action) => newState의 형태. reducer를 받고 dispatch의 메서드와 짝의 형태로 현재 state를 반환.useReducer사용하여 active 사용자 count하기반복되는 로직을 쉽게 재사용 하기 위해

2022년 12월 6일
·
0개의 댓글
·

React - useMemo, useCallback

메모이제이션(memoization)된 값을 반환함수형 컴포넌트 - 렌더링 -> Component함수 호출 -> 모든 내부 변수 초기화= 호출하는 함수가 무거운 함수라면, 매우 비효율적 --> useMemo가 해결useMemo - 렌더링 -> Component함수 호출

2022년 12월 6일
·
0개의 댓글
·

React - 가위 바위 보

출처 : Object.keys()

2022년 12월 6일
·
0개의 댓글
·

React - To do list

App.jsx const [todoList, setTodoList] = useState([]); //todoList에 빈 배열[]이 만들어짐. setTodoList([...todoList,inputValue]) // 기존의 아이템을 유지하며, 새로운 아이템(input

2022년 12월 6일
·
0개의 댓글
·

React - input, useRef

input에 글을 입력하면 문자로 출력하기 + 초기화 시키기2개의 input 이용하기react에서 제공하는 hook 중 하나..current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref객체 반환반환된 객체는 component에서 유지.

2022년 12월 6일
·
0개의 댓글
·

PRE - React 조건부 렌더링, state

React version 16.8부터 추가된 상태값과 여러 React 가능을 사용할 수 있는 요소함수 컴포넌트에서 React state와 생명주기 기능을 연동 할 수 있게 해주는 함수.React에서 제공하는 내장 Hook 중 하나. 현재의 state값과 이 값을 업데이

2022년 12월 6일
·
0개의 댓글
·

PRE - React 기본구조, 문법

body - id가 root인 div와 index.jsx를 호출하는 srcipt를 명시index.jsx 또는 main.jsximport ReactDOM from 'react-dom/client' : 서버와 상관없이 내 컴퓨터 안에서만 작동(reload)import Ap

2022년 12월 6일
·
0개의 댓글
·

PRE - react(frequently used javascript code)

react 공부하기 앞서.. 자주 쓰이는 자바스크립트 코드들을 익혀보기동치구문출처 : mdn web docs

2022년 12월 6일
·
0개의 댓글
·
post-thumbnail

React - 환경설정, 확장프로그램

환경설정 yarn설치 yarn이란? Facebook에서 만든 자바스크립트 패키지 매니저. npm으로 react 환경설정 하는 것보다 작은 용량으로 react환경설정 할 수 있음. powershell, cmd, vs terminal 중 설치 되는것을 골라 명령하면 됨

2022년 12월 6일
·
0개의 댓글
·