FrontEnd 49

[React] Hooks 사용하기 - useEffect (업데이트, 마운트 시 함수 실행)

혹시 Hooks을 처음 사용한다면? 앞의 강좌를 먼저확인해주세요 https://ordinary-code.tistory.com/120 [React] 함수형 컴포넌트 상태관리 Hooks useState 사용법 알아보기 🍟React Hooks이란? Hooks은 리액트 16.8 버전에서 새로 도입된 상태 관리 기능이다. 기존의 함수형코드에서는 관리하지 못했던 상태 관리가 Hooks을 통해서 가능해졌다. React Native의 경우에는 0.59 버전 ordinary-code.tistory.com useEffect란? Hooks 기능 중 useEffect는 컴포넌트가 랜더링 될 때 특정 작업을 수행하게 한다. useEffect는 class 생명주기에서 componentDidMount와 componentDidUpd..

FrontEnd 2021.10.21

[React] 함수형 컴포넌트 상태관리 Hooks useState 사용법 알아보기

🍟React Hooks이란? Hooks은 리액트 16.8 버전에서 새로 도입된 상태 관리 기능이다. 기존의 함수형코드에서는 관리하지 못했던 상태 관리가 Hooks을 통해서 가능해졌다. React Native의 경우에는 0.59 버전부터 Hook을 지원한다고 한다. React에서는 함수형 컴포넌트와 Class형 컴포넌트 두 가지 형태로 코드를 작성하는데, 기존의 함수형 컴포넌트에서는 React State의 생명주기 기능을 이용할 수 없었다. 하지만 hooks 기능이 추가되면서 이제는 함수형 컴포넌트에서도 생명주기 기능을 연동할 수 있게 된다. Hooks은 클래스형 컴포넌트에서는 동작하지 않는다. hooks 업데이트 이후에도 클래스형 컴포넌트는 그대로 사용이 가능 때문에, Hooks의 기능을 위해서 기존 코..

FrontEnd 2021.10.20

[react 간단 예시] input box에 focus 후 초기화 하는 방법 (리액트 ref 이용하기)

react Ref 이용하기 react에서 직접 DOM에 접근해서 작동시켜야하는 때가 있다. 오늘 가져온 경우는 input에 focus를 줘보는 예시를 만들어보았다. react의 ref를 사용하면 컴포넌트 내부에 있는 DOM에 직접 접근을 할 수 있다. 예시 코드 가장 기본적인 App 컴포넌트를 하나 만들어주었다. 이름을 입력받을 input과 버튼을 클릭하면 input 내용을 초기화한 뒤 포커스를 해주는 버튼을 만들어 보도록 하겠다. import {Component} from "react"; class App extends Component { constructor(props) { super(props); this.state = { name:'이름' } } inputFocus = () =>{ this.se..

FrontEnd 2021.09.15 (2)

[Javascript] 자바스크립트 표현식 비구조화할당(Destructuring assignment) 이해하기

ES6에서 등장한 자바스크립트 비구조화 할당이 추가되었다. 오늘은 배열과 객체에서 중복을 없애주고 좀 더 간편하게 값을 이용할 수 있는 비구조화할당에 대해서 알아보겠다. 🔗비구조화 할당이란? 배열이나 객체 속성을 해체하여 개별 변수에 값을 담을 수 있는 JavaScript 표현식을 말합니다. 또는 구조 분해 할당이라고 명칭 합니다. 기본 문법 비구조화 할당의 기본 구조는 좌측에는 변수, 우측에는 해당 변수에 넣어지는 값을 표현합니다. 배열의 경우 []를 사용하고, 객체의 경우 {}를 사용한다. 아래처럼 선언하면 결과는 동일하게 나오게 된다. let [x,y] = [1,2]; console.log(x); console.log(y); let {x,y} = {x: 1, y:2}; console.log(x); ..

FrontEnd/Javascript 2021.09.12

[HTML/iframe] 웹 홈페이지 페이지에 구글 지도 연동 하는 방법

홈페이지를 만들다 보면 지도를 연동해야 되는 일이 있을 때가 있다. 지도에서 다양한 마커를 지정한다던지 지도에서 특정 기능을 넣어야 된다고 하면 카카오 지도처럼 API를 이용해서 홈페이지에서 지도를 연동해서 사용해도되지만, 가장 간단하게 그냥 주소 위치 정도만 보여주면 된다고 한다라고 하면 구글 지도를 이용하면 매우 간단하게 홈페이지에 지도를 표시할 수 있다. 🧭구글 지도 웹 홈페이지에 넣어주는 방법 구글 지도 정보 가져오기 https://www.google.com/maps Google Maps Find local businesses, view maps and get driving directions in Google Maps. www.google.com 먼저 구글 맵 사이트에 접속해서 내가 원하는 위치..

FrontEnd 2021.09.03

[node-sass] 노드 Sass 오류 해결하기 (no such file or directory, scandir '/PROJECT_PATH/node_modules/node-sass/vendor')

node 버전과 node-sass 호환 버전 요즘 들어서 node-sass 버전으로 문제가 자꾸 생기고 있다. node -v을 현재 쓰고 있는 버전은 v.14.17.3을 사용하고 있고, 해당 node-sass 가 요즘 node버전에 따라서 호환이 잘되고 있지 않고있다.😥 각자 사용하는 node 버전에 따라서 node-sass 버전을 맞춰서 사용해주자. 버전별로 적용되는 버전이 너무 달라서............매우귀찮지만, 한번씩은 확인해주자. no such file or directory, scandir '/PROJECT_PATH/node_modules/node-sass/vendor' node와 node-sass버전을 맞췄지만 추가적으로 아래와 같은 오류가 발생할때가 있다.🤬 ENOENT: no such..

FrontEnd 2021.08.23

node run server 시 Unexpected token function 해결할 때 ( Node version 오류)

🚫Node.js run sever 오류 Unexpected token function 프로젝트를 다른 서버에 올려서 run sever를 돌려봤는데, 멀쩡한 프로젝트에서 오류가 발생했다. 오류 발생 코드는 Unexpected token function 아니.. 잘 돌던 프로젝트가 갑자기 왜 문제가 되었는가 아무튼 바로 구글 신님에게 검색을 하고 확인해보니, 해당 프로젝트를 배포한 서버의 노드 버전이 6 버전이 설치되어있었다. node 버전 확인 명령어 node -v ✅Unexpected token function 해결하기 해결방법은 Node.js 버전을 올려주면 된다. Node 홈페이지에 들어가서 LTS 버전을 새로 설치해주면 바로 해결된다. 설치는 Node 공식 홈페이지에서 바로 다운로드하여서 설치하면 ..

FrontEnd 2021.08.19

css @supports 를 이용해서 브라우저에 지원 여부에 따라서 코드 적용시키기 (Can I use)

css의 특정 기능들은 브라우저에 따라서 지원을 하는 브라우저와 없는 브라우저들이 있다. 특히 최근에 레이아웃을 구성하는 grid, flex 등의 코드 들은 익스플로러 낮은 버전이라던지 낮은 버전의 브라우저를 사용하면 동작을 안 할 수 도있다. Can I use 이용하기 Can I use라는 사이트를 이용하면 해당 css가 어떤 브라우저에서 동작하는지를 알 수 있다. https://caniuse.com/ Can I use... Support tables for HTML5, CSS3, etc caniuse.com flex를 확인해보면 IE6에서 9 버전을 이용하면 flex가 적용하지 않는다는 것을 수 있다. @supports css의 @supports 기능을 이용하면 해당 css기능을 브라우저에서 지원하는..

FrontEnd/css 2021.08.17

[css] 레이아웃 구성 시 position fixed 와 sticky 차이 알아보기

스마트폰이 요즘 많이 보급되면서 PC 홈페이지의 레이아웃 중 스크롤이 강조된 레이아웃들이 많이 등장하고 있다. 그중 스크롤을 내리면서 나타나는 애니메이션 효과도 점점 발전하고 있다. 오늘은 간단한 예시 중 특정 위치에 특정 엘리먼트를 고정할 수 있는 position 속성 중 fixed와 sticky 차이를 알아보려고 한다. 💡 fixed란? position:fixed 위 속성을 적용하게 되면 일반적인 문서 요소 순서에 따라 배치되는 것이 아니라 페이지 화면 내 절대적인 위치에 고정시킬 수 있다. 스크롤과 상관없이 항상 해당 위치에 고정된다. 대표적인 예로 스크롤과 상관없이 계속 위 상단에 고정되는 Header들이 fixed 속성에 해당된다. fixed 예시 코드 Header content .header ..

FrontEnd/css 2021.08.16

css 선택자 반복 코드를 줄여주는 :is 사용 방법 (css 코드 줄이기)

css를 이용하다보면, 공통적으로 사용하는 코드들이 발생된다. 이러한 경우 어쩔수 없이 불필요한 코드가 늘어나는 경우가 있다. 이럴 경우 코드를 줄여주는 방법중 하나가 가상클래스를 이용하는 방법이다. 오늘은 가상클래스 중 :is 에 대해서 정리해보려고 한다. Depth가 깊은 엘리먼트에 CSS를 적용할 경우 만약 li에 color를 red로 지정해주고 싶다고하자. 하지만 그 li의 조건이 div 안에 들어있는 li일 경우, header안에 있는 li일 경우가 조건이라고 하자. 그럼 코드는 위 처럼 작성된다. div ul li, div ol li, header ul li, header ol li { color:red; } 해당 조건에 맞춰 코드를 작성하다보니 css가 4줄이 넘어가게 된다. Depth 선택..

FrontEnd/css 2021.08.14