누가봐도 인생 1회차의 기록장

개발공부 75

리액트 훅(React Hook) - 1

리액트 16.8 에서 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다. (이전에는 상태를 관리하기 위해 class 기반 컴포넌트를 작성해야 했다. => 함수형에 비해 유지보수 복잡) ※ 왜 class형 컴포넌트를 쓰지 않고 Hook과 함수형 컴포넌트를 쓸까? class형 컴포넌트의 길어지는 코드 길이 문제, 중복 코드, 가독성 문제 등을 해결하기 위해 useState React에서 import 컴포넌트에서 상태를 관리 const [data, setData] = useState(data의 초기값) // 원래는 이런 형태지만 배열 비구조화 할당을 통하여 각 원소를 추출해준 것 const numberState = useState(0); const number = numbe..

개발공부/React 2022.07.12

자주 사용하는 배열 함수 10가지

출처 : 드림코딩 https://www.youtube.com/watch?v=3CUjtKJ7PJg&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=9&ab_channel=%EB%93%9C%EB%A6%BC%EC%BD%94%EB%94%A9 배열함수 1. 주어진 배열을 문자열로 변환 : join() , toString() ⇒ join은 구분자를 넣을 수 있음, 기본은 콤마 const fruits = ['apple', 'banana', 'orange']; fruits.join(',') // 'apple,banana,orange' 2. 주어진 문자열을 배열로 변환 : split() ⇒ 구분자 전달 필수, 기본 구분자는 콤마 const fruits = '🍉,🍊,🍋,🍌'; fruits..

모던 자바스크립트 Deep Dive #17-1 (프로토타입)

자바스크립트는 명령형imperative, 함수형functional, 프로토타입 기반prototype-based 객체지향 프로그래밍OOP;Object Oriented Programming을 지원하는 멀티 패러다임 프로그래밍 언어다. 자바스크립트는 객체 기반의 프로그래밍 언어이며 자바스크립트를 이루고 있는 거의 "모든 것"이 객체다. 원시 타입primitive type의 값을 제외한 나머지 값들(함수, 배열, 정규 표현식 등)은 모두 객체다. 객체 지향 프로그래밍 객체지향 프로그래밍은 프로그램을 객체object의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 말한다. 객체지향 프로그래밍은 실세계의 실체(사물이나 개념)을 인식하는 철학적 사고를 프로그래밍에 접목하려는 시도에서 시작한다. 실체는 특징이나 ..

useEffect 에러 (useMemo)

에러코드 React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render. 해결방법 공식문서 : Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any early returns. => 반복문, 선언문, 중첩된 함수 내에서 훅을 사용하지 말자! (return문을 사용하면 안됨) Hook을 최상위에 선언하자! (useEffect 뿐 아니라 useMemo 등..

[클린코드] TIL 10장 클래스

오늘 TIL 3줄 요약 클래스는 작을 수록 좋다 하나의 클래스는 하나의 책임만! 응집력 있는 클래스를 만들어라 책에서 기억하고 싶은 내용 변수목록 : 정적static 공개 public 상수 > 정적 비공개 private 변수 > 비공개 인스턴스 변수 변수목록 다음에는 공개함수가 나오고 비공개 함수는 자신을 호출하는 공개 함수 직후에 넣는다. 즉 추상화 단계가 순차적으로 내려감 클래스를 설계할 때도, 함수와 마찬가지고 '작게'가 기본 규칙 클래스 이름은 해당 클래스 책임을 기술해야 한다. (실제로 작명은 클래스 크기를 줄이는 첫번째 관문) 클래스 이름이 모호하다면 클래스 책임이 너무 많아서다. [단일 책임 원칙 (SRP : Single Responsibility Principle) ] 단일 책임 원칙 : ..

[클린코드] TIL 9장 단위테스트

오늘의 TIL 3줄 요약 * 테스트 코드는 실제 코드만큼이나 중요하다 * 테스트 코드는 실제 코드의 유연성, 유지보수성, 재사용성을 보존하고 강화한다 * 테스트코드의 표현력을 높이고 간결하게 정리하자 책에서 기억하고 싶은 내용 1. 실패하는 단위 테스트를 작성할 때까지 실제 코드를 작성하지 않는다 2. 컴파일은 실패하지 않으면서 실행이 실패하는 정도로만 단위 테스트를 작성한다 3. 현재 실패하는 테스트를 통과할 정도로만 실제 코드를 작성한다 * 테스트 코드는 실제 코드 못지 않게 중요하다. 실제 코드 못지않게 깨끗하게 짜야 한다. * 단위 테스트 코드는 유연성, 유지보수성, 재사용성을 제공한다. * 테스트 케이스가 없다면 모든 변경이 잠정적인 버그다. * 깨끗한 테스트 코드를 만들려면? 가독성을 위해 명..

[클린코드] TIL 7장 오류처리

오늘 TIL 3줄 요약 깨끗한 코드와 오류 처리는 확실히 연관성이 있다 오류코드보다는 예외를 사용하라 오류 처리를 프로그램 논리와 분리하면 독립적인 추론이 가능해지며 코드 유지보수성도 크게 높아진다 책에서 기억하고 싶은 내용 깨끗한 코드와 오류 처리는 확실히 연관성이 있다. 상당수 코드 기반은 전적으로 오류 처리 코드에 좌우된다. (여기서 좌우된다는 표현은 코드 기반이 오류만 처리한다는 의미가 아니라 여기저기 흩어진 오류 처리 코드 때문에 실제 코드가 하는 일을 파악하기가 거의 불가능하다는 의미) 오류 코드보다 예외를 사용하라 Try-Catch-Finally문부터 작성하라 미확인unchecked예외를 사용하라 예외에 의미를 제공하라 (예외를 던질 때는 전후 상황을 충분히 덧붙인다) 호출자를 고려해 예외 ..

[클린코드] 6장 객체와 자료 구조

오늘 TIL 3줄 요약 객체는 동작을 공개하고 자료를 숨긴다. 자료를 세세하게 공개하기 보다는 추상적인 개념으로 표현하는 것이 좋다. 객체지향 코드에서 어려운 변경은 절차적인 코드에서 쉬우며, 절차적은 코드에서 어려운 변경은 객체지향 코드에서 쉽다. 책에서 기억하고 싶은 내용 변수를 비공개private로 정의하는 이유 : 남들이 변수에 의존하지 않게 만들고 싶어서 변수를 private으로 선언하더라도 각 값마다 조회get 함수와 설정set 함수를 제공한다면 구현을 외부로 노출하는 셈 구현을 감추려면 추상화가 필요하다! 개발자는 객체가 포함하는 자료를 표현할 가장 좋은 방법을 심각하게 고민해야 한다. 아무 생각없이 조회/설정 함수를 추가하는 방법이 가장 나쁘다 객체지향 코드에서 어려운 변경은 절차적인 코드..

☕ 문벅스 카페 메뉴 앱 만들기 #03 (웹서버 띄우고, API요청하여 메뉴판 관리)

90년생 HTML과 웹 웹의 고향 스위스 1990년도 웹의 등장 Tim Bernes-Lee 가 만들었음 효율적으로 정보를 주고 받기 위해 탄생 1990.10 세계 최초의 웹 페이지 에디터 1990.11 세계 최초의 웹브라우저 (www) 1990.12 세계 최초의 웹서버 (info.cern.ch) - 웹의 시작 Q. 왜 웹서버가 필요할까? A. 콘텐츠 관리 : 웹에서 다양한 컨텐츠를 불특정 다수에게 공개할 때 여러 곳에 분산되어 있으면 업데이트를 파악하기도 어렵고 동시 갱신이 어렵고 비용도 많이 듦 -> 웹서버컴퓨터 하나에 정보를 모아두자 => 데이터 상태를 효율적으로 관리하고, 변경된 데이터를 클라이언트에게 효율적으로 공유하기 위해 1. 요구사항 분석 2. 웹서버 실행시키기 fetch('url', opt..

[클린코드] TIL (5장 형식맞추기)

오늘 TIL 3줄 요약 코드는 중요한 의사소통의 일환이다. 올바른 형식을 지키서 코드를 짜자(가로, 세로) 팀 규칙은 개인의 선호보다 우선! 책에서 기억하고 싶은 내용 코드 형식은 중요한 의사소통의 일환이다. 오늘 구현한 코드의 가독성은 앞으로 바뀔 코드의 품질에 지대한 영향을 미친다. 신문 기사처럼 작성하라 (이름은 간단하면서도 설명이 가능하게, 이름만 보고도 올바른 모듈을 살펴보고 있는지 아닌지를 판단할 정도로 신경써서 짓기. 아래로 내려갈수록 의도를 세세하게 묘사) 개념은 빈 행으로 분리하라 세로 밀집도 (서로 밀접한 코드 행은 세로로 가까이 놓여야 함) 수직 거리 (같은 파일에 속할 정도로 밀접한 두 개념은 세로 거리로 연관성을 표현한다. 여기서 연관성이란 한 개념을 이해하는 데 다른 개염이 중요..