코딩 기록기

useEffect()란? useEffect() 함수는 React component가 렌더링 될 때마다 특정 작업(Sied effect)을 실행할 수 있도록 하는 리액트 Hook입니다. 여기서 Side effect는 component가 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 뜻합니다. 이러한 기능으로 인해 함수형 컴포넌트에서도 클래스형 컴포넌트에서 사용했던 생명주기 메서드를 사용할 수 있게 되었습니다. componentDidMount: 컴포넌트를 만들고, 첫 렌더링을 다 마친 후 실행. componentDidUpdate: 리렌더링을 완료한 후 실행. 즉 render()가 업데이트될 때마다 실행 compoenntWillUnMount: 컴포넌트를 DOM에서 제거할 때 실행. 기본 형태 u..

오늘 공부한 내용 props 먼저 props("properties"의 줄임말)로 state 와의 간단한 차이는 변할수 없다는 것. 컴포넌트는 상속하는 부모 컴포넌트로 부터 props 를 받고 이 props 는 상속받는 컴포넌트 내에서 수정이 불가능하다. 리액트에서 부모 > 자식 일방향성 상속이라는 특징때문이다 .props 는 컴포넌트가 가지고 있는 다양한 값을 나타내기 위한 존재로'this.props,xxx'로 나타낸다. 읽기전용 부모요소에서 설정하는것 초깃값과 자료형의 유효성 검사가 가능 state 컴포넌트 상태를 나타내며 , props 와 반대로 변할수 있다 . 컴포넌트의 내부에서 선언되기 때문에 이러한 state 는 외부에 공개하지 않고 컴포넌트가 스스로 관리한다. state 로 사용하는 것은 컴포..

오늘 배운 내용 props 먼저 props("properties"의 줄임말)로 state 와의 간단한 차이는 변할수 없다는 것. 컴포넌트는 상속하는 부모 컴포넌트로 부터 props 를 받고 이 props 는 상속받는 컴포넌트 내에서 수정이 불가능하다. 리액트에서 부모 > 자식 일방향성 상속이라는 특징때문이다 .props 는 컴포넌트가 가지고 있는 다양한 값을 나타내기 위한 존재로'this.props,xxx'로 나타낸다. 읽기전용 부모요소에서 설정하는것 초깃값과 자료형의 유효성 검사가 가능 state 컴포넌트 상태를 나타내며 , props 와 반대로 변할수 있다 . 컴포넌트의 내부에서 선언되기 때문에 이러한 state 는 외부에 공개하지 않고 컴포넌트가 스스로 관리한다. state 로 사용하는 것은 컴포넌..

오늘 배운 내용 Ref 란 무엇일까 ? 먼저 뜻이 어디서 파생되었는지 알아보았다. reference의 준말이라고 한다. 한국말로는 참조, 참고 정도의 뜻을 지닌다고 보면된다. 일반적으로 HTML에서 DOM요소에 이름을 달때는 id라는 고유값을 사용한다. 이처럼 리액트에서도 DOM요소에 이름표를 붙이는 방법이 있는데 이를 ref라고 부른다. Ref는 사실 일반 객체이다. Ref를 console.log로 찍어보면 {current: null} current 프로퍼티 하나를 가진 객체가 나타나고 React는 이 객체를 통해 DOM에 직접적인 접근을 가능하게 해준다. Ref 를 사용하는 이유 id는 유일해야 하지만 컴포넌트 재사용을 한다면 중복될 가능성이 있다. ref는 전역적으로 작동하지 않고 컴포넌트 내부에서..

오늘 배운 내용 배열 1개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용, 자바스크립트의 배열은 객체이며 유용한 내장 메소드를 포함하고 있다 유사 배열 (유사배열 객체) 배열이 아닌데 배열인 척 하는 것, 유사배열(Array-Like Object)이란 이름 그대로 배열과 유사한 객체 유사배열은 함수에서 처리 결과로 배열을 반환하고 싶을때 또는, Array에서 기본으로 내포되어있는 기능을 제공 하고 싶지 않거나 Array에 내포되어있지 않은 기능을 제공하고싶을때 사용. JS에서 querySelectorAll이나 document.body.children으로 엘리먼트를 가져오면 유사 배열 객체에 담겨서 옴. 배열을 구성하는 각각의 값을 배열 요소(element)라고 한다 유사배열의 수정 Array.fro..

알고리즘과 레시피 소프트웨어르 설명할 때 음식을 만드는 레시피에 자주 비유하곤 하는데 그건 적절하지 못하다. 그 이유는 레시피에서는 '표면 위에 손바닥을 살짝 올려서 확인하세요.' 라는 표현이 나오는데 살짝이 얼마나 살짝일까? 이런 명확하지 못한 표현들은 소프트웨어에서 사용하면 안된다. 소프트웨어는 요리 레시피보다 납세 신고서에 비유하는 것이 적절하다. 납세 신고서에 무엇을 해야 하는지 극도록 상세하게 설명돼 있다. 완벽힌 비유는 아니지만 요리 레시피보다 계산적 측면을 훨씬 더 잘 담아낸다 그렇지만 이 방법도 좋지가 않다. 납세 신고서도 용어가 항상 명확하지는 않고 설명도 모호하며, 어떤 데이터 값을 사용해야 하는지 불확실할 때가 자주 있다. 알고리즘이란 ? 어떠한 문제를 해결하기 위한 일련의 절차나 방..

향해 시작한지 벌써 2주가 되었다 그동안 많이 배우기도 하고 많은 생각이 들었었다. 2주차에는 프로그래머스 자바스크립트 알고리즘 테스트와 주특기 React 입문 주차가 시작되었다. 우선 알고리즘 때에는 정말 어려웠다. 이 문제를 어떻게 풀어야 하는 지 어떤 문법을 써야 풀어야 하는지 이런 것들을 하나도 모르니까 너무나도 막막했다. 그래도 너무나도 좋은 팀원들을 만나서 실력이 처음 했을때 보다 정말 많이 늘었다 정말 팀원들에게 너무나도 감사했다 내가 어색해서 먼저 말을 걸지 못할때도 먼저 찾아와주셔서 궁금한거 물어보라고 이런 것들이 나는 너무나도 감사했다. 팀원들이 그렇게 잘 가르쳐주셨기 때문에 알고리즘 테스트에서 통과할 수 있었지 않았나 싶다 그리고 React 입문 주차가 시작됐다. 진짜 너무나도 어렵다..

오늘 공부한 내용 라이플 사이클 가상 돔 컴포넌트(Component) 공부하면서 느낀 점, 배운점 라이플 사이클이란 컴포넌트의 라이프 사이클(= 컴포넌트 생명주기)은 정말 중요한 개념이다 ! 컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지가 라이프 사이클이다. 컴포넌트는 생성되고 → 수정(업데이트)되고 → 사라진다 생성은 처음으로 컴포넌트를 불러오는 단계이다 수정(업데이트)는 사용자의 행동(클릭, 데이터 입력 등)으로 데이터가 바뀌거나, 부모 컴포넌트가 렌더링할 때 업데이트 된다 가상 돔이란 DOM은 html 단위 하나하나를 객체로 생각하는 모델입니다. 예를 들면, 'div'라는 객체는 텍스트 노드, 자식 노드 등등, 하위의 어떤 값을 가지고 있다 이런 구조를 트리 구조라고 한다.. DO..

오늘 공부한 것 & 배운 내용 React 기초 강의 자바스크립트 기초 JSX 공부하면서 느낀점 오늘부터는 주특기 입문주차가 시작이다. 오늘 배운 내용은 스파르타 코딩클럽에 있느 React 기초 강의를 들었다 그 중에 수많은 공부 내용이 있었지만 그 중에 중요한 JSX 규칙이 가장 중요한거 같다 React에서 쓰이는 자바스크립트 기초 문법들을 배웠는데 너무 어려웠다.. JSX 규칙 1. 태그는 꼭 닫아주기 2. 무조건 1개의 엘리먼트를 반환하기 3. class 대신 className! 4. 인라인으로 style 주기 이렇게 있다 그리고 오늘 배운 내용은 정말 수도 없이 많지만 여기에 다 쓸려면 시간이 엄청 오래 걸릴 것 같다. 공부 하러 가야하기 때문에 오늘은 여기까지만 써야겠다

오늘 공부한 것 & 배운 내용 프로그래머스 알고리즘 자바스크립트 복습하기 자바스크립트 함수 reverse(), sort(), toUpperCase() 공부하면서 느낀점 오늘은 자바스크립트 테스트가 있는 날이었다. 저번 테스트를 떨어져서 그런지 많이 떨렸었다. 그래도 저번 보다 문제 이해 능력이 많이 늘었으니 이번에 통과할 수 있다는 자신감이 있었다. 어제 문제들을 복습하면서 reverse(), sort(), toUpperCase() 등 많은 함수들을 다시 한번 복습했다 reverse() 배열의 객체를 뒤집어 주는 함수이다 sort() 배열의 요소를 정렬하는 데 사용하는 함수이다 (사용법: arr.sort((a, b) => a - b)와 같이 작성하면 된다. b 가 더 클 때만 a - b의 결과로 음수가 ..