emayom.log

벨로퍼트와 함께하는 모던 리액트를 참고하며 todo-list를 만들었다! 바닐라 자바스크립트로 로컬 스토리지에 저장한 todo-list를 제작해봤지만 리액트를 사용한 것은 처음이다! styled-components는 CSS in JS 관련 리액트 라이브러리와 dispatch 함수를 사용했는데 처음 사용해봐서 그런지 너무 신기했다ㅎㅎㅎㅎㅎ 당분간 조금 더 자세히 코드를 뜯어볼 예정이다!!!!! 3장. 멋진 투두리스트 만들기 · GitBook 3장. 멋진 투두리스트 만들기 이번 장에서는 리액트를 사용하여 멋진 투두리스트 (미리보기) 를 만들어보겠습니다. 이번 투두 리스트 앱을 만드는 과정에서, 우리가 지금까지 배운 다양한 개념 react.vlpt.us ⚠️ 아래 내용은 모두 개인적인 참고 / 기록을 위한 용..

" 자바스크립트에서는 함수가 1급 시민이기 때문에, 자바스크립트가 함수형 프로그래밍을 지원한다고 말할 수 있다. " -러닝 리액트 [2판] " props는 읽기 전용입니다. props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다. " - 리액트 공식 문서 여기서 얘기하는 '함수형 프로그래밍 - 순수 함수'에 대해 알아보자?! 🤔 함수형 프로그래밍 ? 자바스크립트는 함수형 프로그래밍만을 위한 언어는 아니지만! 함수형 프로그래밍을 지원하는 언어이다. 함수형 프로그래밍은 부수 효과가 없는 순수 함수를 추구하며, 모듈화를 통한 함수 간의 조합성을 강조하는 프로그래밍 방식이다. (즉, 외부 환경으로부터 독립적이며 주어진 것들로 정해진 작업을 하기 때문에 부수 효과로부터 자유로울 수 있다.) 순수 함수 (Pur..

리액트 v16.8 이후에 등장한 Hook, 지난 포스팅에서 전박적인 컴포넌트에 대해 알아보았다면 오늘은 함수형 컴포넌트와 Hook에 대해 알아보자 🤔 클래스 컴포넌트 ? 함수형 컴포넌트 ? 리액트의 컴포넌트는 ① 클래스 컴포넌트와 ② 함수형 컴포넌트 두 가지로 나눌 수 있다. 둘은 작성하는 방식도 다르지만 내부적인 기능에도 차이가 존재한다. 먼저 클래스 컴포넌트부터 알아보자. class로 정의하고 React.Component 슈퍼 클래스를 extends하게 된다. 중요한 것은 *** render() 통해 JSX를 리턴하게 되는 것이다!!! //클래스 컴포넌트 class ClassComp extends React.Component { render() { return ( Class style componen..

🔥 Warning: Each child in a list should have a unique "key" prop. 🔥 익숙한 워닝이다 ,,,! 리액트에서 map을 사용해서 엘리먼트를 하나씩 만들어낼 때 키 값을 주지 않으면 항상 보게 되는 문구이다. 리액트에서 key는 도대체 왜 중요한 것일까? Key ( index ❌ ) 리액트에서 key는 꽤 중요한 듯 보인다. 경우에 따라 키를 줬을 때와 안 줬을 때의 리렌더링에는 큰 차이가 있다. 배열이니까 key를 편하게 index로 주면 안 되나? 어차피 자기들끼리 다르면 유니크한 것 아닌가라고 생각했다 ㅎㅎㅎ 결론은 아니다! 그렇게 사용하면 안 된다. 예를 들어 아래와 같이 카드가 다른 순서로 섞인 배열의 패가 있다고 했을 때, 이것을 1초마다 카드를 섞듯..

이전 포스팅에서 함수 선언식과 표현식에 대해 알아봤다! 함수 표현식을 이용해서 함수를 보다 가독성 있게 표현할 수 있었다. 하지만, 화살표 함수를 사용하면 표현식을 좀 더 간결하게 표현할 수 있다. 🤔 (그럼 선언식은 ?????) 이전 포스팅에서 알아본 함수 표현식을 다시 한번 확인해보자. 함수 선언식과 비교해보면 음 나름 가독성 있는 ? 코드처럼 보인다. //함수 선언식 //function 키워드로 단독으로 함수를 선언한 것! function sum (a, b) { return a + b; }; //함수 표현식 //변수를 함수에 할당한 것 const sum = function(a, b) { return a + b; }; 화살표 함수 ? 익명 함수 ? 화살표 함수는 ES6에 새로 추가된 유용한 기능으로 ..

간단한 미니 게임을 만들었다! random-word-api를 활용해서 랜덤 단어들을 가져오고 10초 안에 타이핑한 만큼 점수를 얻을 수 있는 게임이당ㅎㅎㅎㅎ 인간적으로 10초는 너무 짧은 것 같긴 하다 ㅎㅎㅎㅎㅎㅎ해보니 2점 맞았다. axios를 npm으로 인스톨하지않고 처음 CND으로 넣어서 써봤는데 다른 영상들을 보면 fetch 대신 axios를 사용하시는 분들이 많았다... 아직 그 이유는 자세히 잘 모르겠어서 한 번 포스팅해봐야겠다 ㅎㅎㅎㅎ typing-master 남은시간: 10초 획득 점수: 0점 emayom.github.io

오늘은 조금 긴 글이 될 것 같다,,,! 웹 개발을 위한 웹 접근성에 대해 제대로 알아보자. 🤔 접근성 ? 접근성이라는 말 되게 자주 듣고 산다. 사전적으로 정의하기를 사용자가 어떤 제품이나 서비스 등에 편리하게 접근, 이용할 수 있는 정도를 의미한다. 웹 접근성 ? 그렇다면 웹 접근성이란 정확히 뭘까? '어떠한 사용자가 어떠한 기술 환경에서도 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것'으로 즉, 모든 사용자가 모든 기기에서 웹에 접근할 수 있도록 하는 것을 의미한다. 더보기 예를 들어 시각 장애를 가지신 분들은 청각, 촉각과 같은 다른 감각을 통해서 정보를 파악하게 되는데 이때 '스크린 리더 '라는 보조기기를 사용하여 웹에 보이는 이미지, 글씨를 음성으로 듣고..

자바스크립트에서는 함수를 만들 때 사용할 수 있는 여러가지 문법이 있다. 오늘은 함수 선언식과 함수 표현식의 차이점에 대해 알아보자. 🤔 함수 선언식(Function Declarations) ? 함수 선언식은 자주 보게되는 기본적인 형태를 띄고 있다. 함수 선언 또는 함수 정의는 function 키워드로 시작한다. 그 뒤로 함수의 이름을 적고, 중괄호 사이에 함수의 기능?을 적게된다. function handleIt() { console.log("I can handle it!!"); } handleIt(); 함수 표현식 (Function Expression) ? 함수를 만드는 다른 방법으로 함수 표현식이 있다. 유연한 자바스크립트의 특징을 활용한 선언 방식으로 함수 표현식은 익명 함수를 만들며, 변수에 ..

오늘은 강의를 들으면서 새롭게 알게 된 점을 작성하려고 한다! 🤔 useState()를 이용해 입력값을 업데이트하고 message로 valid 한 지 여부를 알려주는 예제를 진행했다. startsWith(0)을 phoneNumber으로 검사하려고 했는데 아래 예제를 진행하다 보니 useState()로 상태를 변경한다고 해서 즉시 업데이트가 되지 않는다는 특성을 확실히 알 수 있었다 ,,,!!!! 그렇기 때문에 0으로 시작하는지 여부와 길이를 확인하기 위해서는 event.target으로부터 받은 value를 이용하여 직접 확인해야 했다! 그리고 html 버튼에는 disabled를 줄 수 있었다 1!! disabled={true} 이면 버튼을 누를 수 없도록 만드는 속성이었다. 마지막으로 input의 val..

리액트 공부를 하다 어쩌면 당연할 수도 있지만 생각지도 못했던 엥? 싶었던 부분이 있어서 글을 남겨보려고 한다. 🤔 form 태그 중 을 사용할 때 id와 name 속성을 지정하는데 name과 id 둘 모두 element를 식별? 참조하기 위해 사용된다. 여기서 name 속성은 form이 제출될 때 서버에 폼 값을 넘겨주기 위해 사용한다. (굳이 서버로 넘기지않은 값에는 name을 생략해도 무방하다,,!) 당연히 id는 유일한 값으로 사용되어야 하기 때문에 중복이 안되고, name은 중복이 가능한 값이다. 바로 여기서 오늘 적어보려는 주제가 등장한다! (아래 코드는 리액트 공부를 하며 작성하던 코드라 조금 다르다,,,!) const root = document.getElementById("root"); ..