김기지의 코딩노트

🪝 useRef() 레퍼런스를 사용하기 위한 훅 더보기 📌 리액트에서 레퍼런스란? 특정 컴포넌트에 접근할 수 있는 객체를 의미한다. useRef()훅은 레퍼런스 객체를 반환한다. 레퍼런스 객체에는 .current라는 속성이 있는데 이것은 현재 레퍼런스(참조)하고 있는 엘리먼트를 의미한다. const 주소값을_담는_그릇 = useRef(참조자료형-> 초기값) 📍 useRef()훅을 사용하면 파라미터로 들어온 초기값으로 초기화된 레퍼런스 객체를 반환한다. 만약, 초기값이 null이라면 .current의 값이 null인 레퍼런스 객체가 반환된다. 반환된 레퍼런스 객체는 컴포넌트의 라이프타임 전체에 걸쳐서 유지된다. (컴포넌트가 마운트 해제 전까지는 계속 유지된다는 뜻) ➡︎ uesRef()훅은 변경 가능한 ...

1. Styled Components CSS를 컴포넌트화 시키는 라이브러리 CSS-in-JS라는 개념이 대두되면서 나온 라이브러리로 CSS-in-JS라이브러리를 사용하면 CSS도 쉽게 JavaScript안에 넣어줄 수 있다. ⇒ HTML + JS + CSS 까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발할 수 있게된다. CSS-in-JS 라이브러리 중 가장 인기 있는 라이브러리가 Styled Component이다. CSS를 컴포넌트화 시키면 CSS코드를 다룰때 느꼈던 불편함을 해결해준다. class, id 이름을 짓느라 고민할 때 CSS 파일 안에서 내가 원하는 부분을 찾기 힘들 때 CSS 파일이 너무 길어져서 파일을 쪼개서 관리할 때 스타일 속성이 겹쳐서 내가 원하는 결과가 나오지 않을 때 ⚙..

Component Driven Development (CDD) 컴포넌트 기반 개발 부품 단위로 UI컴포넌트를 만들어 나가는 개발방식이다. → 레고처럼 컴포넌트를 하나씩 조립해가는 상향식 개발이다. ➰ CDD를 하는 이유? 더보기 재사용할 수 있는 컴포넌트의 필요성때문 하나의 페이지를 만든 후 추가적으로 다른 페이지를 만들때, 앞서 만들었던 버튼을 후의 버튼으로 똑같이 사용하도록 요청 받은 경우 CDD방식으로 개발을 진행한다면 먼저 만든 버튼을 다시 새로 만들지 않아도 된다. 이는 디자인과 개발 단계에서부터 재사용 할 수 있는 UI컴포넌트를 미리 디자인하고 개발하기 때문이다. 실제 CDD방법을 활용하여 UI를 구축하는 사이트도 많다. ex) BBC, UN 📍 구조적인 CSS작성 방법의 발전 (CSS in ..

🗓️ 공휴일을 알려주는 Holiday Calendar 한 줄기의 빛같은 공휴일만 보고 달려가는 사람들 모여~ 슬라이더의 배경 이미지는 햄뿡이님의 배경을 사용했다. https://grafolio.naver.com/wallpaper/605525 재미없는 회사PC 배경화면 (어두운 배경 추가수정!) grafolio.naver.com 🌱 이 주제를 정한 이유 처음에는 날짜별 달의 모양을 알려주는 '천문 달력'을 만드려했다. api활용신청을 하고 막상 데이터를 받아보니 내 예상과는 많이 달랐다. 물론 유용한 정보는 많았지만 내가 만들고자 하던 결과물에는 적합하지 않아 다른 주제에 대해 생각을 하게 되었다. 그러다 한국천문연구원에서 제공하는 다른 open api를 발견하였다. 천문달력 보다는 유용성 측면에서 훨씬 ..

📌 UI (User Interface, 사용자 인터페이스) 사람들이 컴퓨터와 상호작용하는 시스템 화면상의 그래픽 요소 외에도 키보드, 마우스 등 물리적 요소도 UI이다. 휴대폰의 경우 숫자버튼, 방향버튼 등 다양한 물리적UI가 있는 형태였지만 스마트폰이 대중화되면서, 화면 터치를 통한 상호작용의 비중이 높아졌다. 따라서 물리적UI는 볼륨, 전원버튼 정도만 남게 되어 그래픽UI가 매우 중요해졌다. 컴퓨터 또한 마우스의 등장 이후로 꾸준히 그래픽UI가 중요한 요소이다. 터미널과 같은 CLI(Command Line Interface)와 키보드를 이용해 텍스트로 컴퓨터와 상호작용하는 것보다는 직관적이고 간편하기 때문이다. 현재 많이 사용화되고 있는 스마트 워치, 키오스크, 터치 스크린 안내판 등에서 찾아볼 수 ..

React.js 자바스크립트의 라이브러리 => 자바스크립트를 알아야함 + 동작환경인 Node.js를 다룰 수 있어야함 (이전에 배웠던 내용은 따로 정리하지 않고 새로 배운 내용을 위주로 정리함) 📍 배열 내장함수 1. 배열을 순회하는 내장함수 // for문 대신 배열을 순회하는 방법 let arr = [1,2,3,4]; arr.forEach((el)=>console.log(el)) // [1,2,3,4] // arr의 요소가 콜백함수의 인자로 하나씩 들어가 새로운 배열을 만들어냄 여기서 새로운 배열 newArr에 arr의 요소에 *2를 한 값을 요소로 넣어주려면? // newArr에 arr요소에*2한 값을 요소로 넣기 const newArr = []; arr.forEach((el)=>newArr.push..

부트캠프에서 만나게된 페어분께서 '친구가 추천해 준 강의'가 있다며 나에게 공유해주셨다..(당신.. 혹시 천사?) 지금 하고있는 스터디에서도 리액트로 프로젝트를 만들고, 지난 아고라스테이츠 그룹 회고 시간에서도 한 교수님께서 '리액트로 만드는건 도전해보는게 좋아요' 라고 말씀하셨다. 그래서.. https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!, ..

◉ HTTP Hyper-Text Transfer Protocol 서버와 클라이언트가 메세지를 교환하기 위한 프로토콜 더보기 🔍 프로토콜 서로 다른 하드웨어 기기간의 데이터 동신 규약 즉, HTTP는 인터넷상의 커뮤니케이션에 시용되는 형식들 중 하나이다. 구글에 검색어를 입력할 시, URI를 보면 아래와같이 입력되어있다. https://www.google.com/search?q=http 이는 'www.google.com/search?q=http' 를 HTTPS형식으로 보낸다는 의미이다. ◉ HTTPS 기존의 HTTP에 Secure(보안)이 추가된 것 HTTPS는 기존의 HTTP보다 안전하다는 것을 의미한다. 어떤 부분에서 안전한걸까? 1. 사용자가 사이트에 보내는 정보들을 제 3자가 보지 못하게한다. 더보..

📍 window.localStorage localStorage속성은 현재 도메인의 로컬 저장소에 접근할 수 있게 도와주는 속성이다. 로컬 저장소는 웹 브라우저에서 각 도메인에 대해 할당해주는 저장공간으로, 데이터를 영구적으로 보관할 수 있다. 데이터 보관시에는 데이터의 이름(key)과 데이터의 실제 값(value)을 각각 지정하며, 이때 데이터 타입은 문자열 형태만 허용된다. 더보기 🔍 영구적으로 보관한다는 것은? 브라우저를 껐다가 켜거나 페이지를 새로고침해도 해당 페이지에 데이터가 남아있도록 할 수 있다는 것 💡 로컬 스토리지는 어디에서 확인할 수 있을까? 크롬의 경우 개발자도구의 application 하위 폴더에서 Local Storage를 확인할 수 있다. 📍 로컬 스토리지 사용법 로컬스토리지로부터..

수업에서 진행했던 계산기js를 참고하여 계산기를 만들어보았다. (사실 거의 다 보고 베낀 수준이지만..) 계산기 최종 먼저, 내가 구현하고 싶었던 다크모드/라이트모드 와 닫기버튼은 구현해냈다. 다크모드 / 라이트모드 처음에는 단순히 class를 따로 만들어 .dark일때의 css를 따로 설정한 다음 classList.add를 해주면 될 것이라고 생각했다. 하지만 처음에 라이트모드에서 다크모드로 바뀌는건 가능하지만, 반대로 다크모드일때 라이트모드로 다시 변환하는 것은 불가능했다.(첫 번째 고난) 그러다 구글링을 통해 .classList.toggle()을 이용하면 구현이 가능해진다는 것을 알게 되었다. 🔍 element.classList.toggle()이란? -> 클래스 값을 토글링한다. 즉, 클래스가 존재..