Written

useState 화면에서 + 버튼을 누르면 0부터 시작해서 15까지 증가하다가 다시 0으로 초기화되는 단순한 UI입니다. useState의 핵심은 상태 값이 변하면, 리렌더링이 일어나는 것 입니다. 그래서 화면에서 동적으로 변하는 컨텐츠를 useState를 사용하여 상태값으로 사용하는 것이죠. 먼저 useState를 import합니다. const [상태변수 , set상태변수] = useState(초기값) 의 형태로 상태변수를 생성할 수 있습니다. set상태변수는 함수입니다. 상태변수의 값을 바꿀 수 있는 함수입니다. 상태변수 = 임의의 값; => 이런 형태로 재할당은 불가능합니다. set상태변수의 함수를 사용하여 상태변수의 값을 변경할 수 있습니다! + 버튼을 클릭하면 onClick의 countPlus함..

Context API란 React로 웹 애플리케이션을 구현할 때, 보통 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 자신이 가지고 있는 상태 정보를 전달합니다. 그런데 자식 컴포넌트들은 또 그들만의 자식 컴포넌트가 존재 할 수 있기 때문에 트리의 뎁스가 깊어진 상태에서 특정 부모의 상태 값을 사용하려 한다면 중간에 있는 컴포넌트는 그 상태값이 필요없음에도 불구하고 계속해서 props를 통해 전달해야하는 효율적이지 못한 상태가 발생하게됩니다. 그래서 React에서 마치 그러한 상태값을 전역 변수처럼 만들어서 필요한 컴포넌트에서 가져다 쓸 수 있게끔 만들어 놓은 기능이 바로 Context API입니다. 현업에서 React를 통해 프로젝트를 진행할 때 보통 전역 상태 관리를 위해 사용하는 도구는 Red..

Props 만약 어떤 물건을 주문제작하려고 하는 상황을 가정해보겠습니다. 그렇다면 내가 원하는 특별한 스펙들이 존재할테고, 물건을 만들어 주는 업체에서는 그러한 스펙을 전달 받아야만 그에 맞게 물건을 주문제작을 해줄 수 있습니다. 위의 예시에서 스펙에 해당하는 것을 리액트의 Props라고 생각하면 좋습니다. 사용하고자 하는 곳에서 스펙을 Props로 전달하면 제작하는 곳에서는 Props에 담긴 정보들을 이용해 사용자가 원하는 결과물을 전달해주기 때문입니다. Welcome이라는 함수 컴포넌트가 h1태그를 만들어줍니다.(화면에 렌더링 해준다는 의미입니다) 그런데 주문제작을 해줍니다. 사용자가 주는 정보를 받아서 (props와 children) 무엇을 전달받느냐에 따라 다른 물건을 만들어줍니다. APP 함수안..

IIFE (Immediately-invoked function expression) 위 처럼 함수를 괄호( )를 사용하여 감싼 후, 뒤에 ()를 붙이는 구문을 IIFE라고 합니다. 함수의 이름과()를 활용하여 호출을 해주지 않아도, 위 구문은 함수를 곧 바로 실행시켜줍니다. 보통 IIFE를 사용하는 경우는 위에서 구현한 함수 내용이 곧바로 실행되기를 바라거나 , 함수 안의 다양한 변수들이 블럭 바깥에 영향을 주지 않기를 바랄 때 사용합니다. 이처럼 블럭 밖에선 value에 접근할 수 없기때문에 값을 알지 못합니다 ! 추가로 맨앞에 세미콜론이 붙는 경우도 존재하는데, 이것은 여러 스크립트들이 호출되었을 때, 선행하는 다른 스크립트 블럭들과 충돌하지 않도록 구분자로 넣어주는 것입니다. 아래는 참조 블로그 u..

JavaScript를 공부하면서 느낀점 굉장히 유연하면서 편리한 점이 돋보이는 프로그래밍 언어라고 느꼈습니다. 또한 코드를 짜보다가 궁금한게 생기면 크롬창에서 개발자도구 콘솔창을 통해 직접 로그를 찍어보면서 공부를 할수 있는것도 굉장히 신선했습니다 :) 알고리즘 문제를 푸는데에 있어서도 기존에 사용했던 C++에 비해 단순하고 간결하다는 생각도 들었습니다. 비록 직접적인 메모리와의 상호작용이 없기 때문에 다소 추상적이고, 어떠한 동작의 예측이나 머리속에 구체적으로 그려지지 않는 부분은 이해하기가 오히려 더 어려울 때도 있었습니다. 하지만 nodeJS를 통해 서버에 대한 개발도 공부 해볼 수 있고 단순히 프론트엔드 분야에 국한되지 않고 다양한 분야에서 쓰이는만큼 가치가 굉장히 높은 언어라고 생각합니다. Ja..

값 복사 , 참조 복사 알고리즘 문제를 풀다가 배열의 복사에 대한 개념을 다시 잡아보았습니다 ! 1 2 3 4 5 6 7 8 let arr = [1,2,3]; let arr2 = arr; arr.length = 0; cosole.log(arr2.length); // 3이 나올거라고 생각했지만 0이 나왔습니다. Colored by Color Scripter cs arr과 arr2가 서로 다른 변수로 각자의 메모리 공간을 따로 가지면서 독립적인 상태라고 생각하여 arr2.length는 3이 출력될거라 생각했지만 , 0이 출력되었습니다. 결국 arr2 = arr이 메모리를 공유(참조)하는 것인지, 단순히 값을 복사하는 것인지 헷갈렸기 때문에 이에 관한 개념을 찾아서 학습한 것을 정리해보려 합니다. 자료형의 값..

유사 배열 객체 배열 처럼 보이지만, 사실은 배열이 아닌 객체를 말합니다. 대표적으로 자바스크립트의 함수에서 사용가능한 argumnets 객체가 있습니다. 1 2 3 4 5 6 7 8 9 10 11 function example(a,b,c) { for (let i = 0; i [1,2,3]의 배열 생성 cs Array.from()의 인자로 arguments를 넣으면 배열 메서드들을 사용할 수 있는 진짜 배열을 만들 수 있습니다. 화살표 함수 화살표 함수는 함수를 간단하게 표현하기 위한 방법입니다. 일반적인 함수와는 다르게 this나 super에 대한 바인딩이 없고 메서드로 사용할 수 없으며 생성자로 사용할 수 없습니다. 함수를 간단히 사용하기 위한 도구로 화살표 함수에 대한 다양하고 자세한 내용은 MDN..

HTML / CSS 공부하면서 느낀점 개념을 이해하는 부분에서는 그렇게 어렵다고 느끼지는 않았습니다. 기존에 프로그래밍 언어를 공부했던 것에 비해서는 분명히 언어 자체의 난이도가 높다고는 생각하지 않았는데, 막상 과제를 진행하려고 생각보다 정말 "많이" 어렵구나 느꼈습니다. 최근 2주동안은 정말 과제에 늪에 빠져 있었습니다..:D 요즘 들어 이렇게 공부에 몰두한 적이 있었나라는 생각이 들정도로 하루에 정말 10시간 가까이 과제를 했던 것 같았습니다. 지금 돌이켜보면 지난 2주가 정말 괴로웠으면서도, 나도모르게 웹페이지를 만드는것에 빠져 즐거웠습니다. 흥미를 느낄 수 있었다는 것에 기쁘기도 했고 문제를 푸는 도중에 막혀서 하루종일 구글링하며 골머리를 앓으면서 괴로워도 했습니다. 그 와중에도 열심히 고민하고..