TIL

위의 코드를 간단하게 설명하면 로컬에 있는 comments.json이라는 파일에서 정적 생성방식으로 데이터를 받아와 클라이언트 컴포넌트의 props로 넘겨주는 코드이다.여기서 궁금했던 점은 정적 생성이란 쉽게 말해 미리 데이터를 만들어놓고 컴포넌트에게 전달해주는 것인데

유데미 NextJS 강의를 듣던 중 context api를 이용해서 앱 전반 상태를 작업하는 코드를 보았다. 이전까지 단순히 context를 생성하여 provider를 통해 컴포넌트들에게 전달하고 useContext 훅을 사용해서 context를 받아오는 단순한 과정을

다음 코드는 axios에서 post 메서드를 이용해서 서버에 데이터를 보내는 코드이다. 이렇게 되면 서버 측에서 request.body를 통해 내가 보낸 데이터를 확인할 수 있게된다.하지만 delete 메서드인 경우에는 서버 측에서 request.body로 데이터를 확

데이터를 URL을 통해 전달하는 방식에는 두 가지가 있다.쿼리 스트링은 URL의 끝에 ? 문자로 시작하여 'key=value'의 형태로 데이터를 전달하는 것을 말한다. 흔히 구글에 무언가를 검색하고 URL을 확인하면 다음과 같은 형태로 되어있다.쿼리 스트링으로 서버에

화살표 함수는 자신의 this, arguments, super, new.target을 바인딩하지 않습니다. 대신, 화살표 함수는 자신이 생성된 스코프의 해당 값을 상속받습니다.위 예제에서 myFunction은 obj 객체에 메서드로 할당되었으므로, obj 객체를 thi

this 바인딩은 함수 호출 방식에 따라 동적으로 결정된다.여기서 짚고 넘어가야할 점은 상위 스코프를 결정하는 렉시컬 스코프와는 결정시기가 다르다는 것이다. 렉시컬 스코프는 함수가 정의되어 함수 객체가 생성되는 시점에서 상위 스코프가 결정되지만 this 바인딩은 호출

NextJS를 활용한 동적 렌더링 페이지를 만들었다. 서버 api를 통해 받아온 데이터를 컴포넌트의 props로 전달할 계획이였다.하지만 데이터를 모든 컴포넌트에게 일일히 props로 전달하기가 번거로웠다. 그래서 생각한 것이 데이터를 전달하는 provider 컴포넌트

else 문에서 s=num을 return하게 되면 else 블럭 내부는 그 시점에 종료되게된다. 따라서 밑에 s를 출력하는 코드와 slice 메서드를 실행하는 코드는 실행되지 않는다.해당 코드를 slice 메서드가 있는 곳까지 실행시키기 위해서는 return으로 els

주목해야할 부분은 gameSection에 이벤트 리스너를 등록하는 부분이다.리스너 콜백함수로 클래스 내부함수인 onClick을 설정했다.하지만 onClick은 호출되는 순간 클래스 내부의 정보를 잃어버리게된다. 왜냐하면 콜백함수로 전달되는 순간 this는 클래스의 인스

특정 키의 빈도를 포함하는 객체를 만드는 코드이다.이 코드에서 \[it.age] 부분과 acc\[it.age]||0의 부분이 이해가 되지 않았다.\[it.age]는 객체 프로퍼티의 이름 즉, 키값을 동적으로 생성하는 방법이다.먼저 스프레드로 기존의 배열을 풀어쓴 뒤,

고차함수의 활용주로 데이터를 다룰 때 배열 데이터를 많이 다뤘다. 배열에서 사용하는 고차함수에 대해서 어떤 상황에서 사용해야할지 열심히 공부하자.또한 항상 배열데이터에 국한되지말자. 필요한 경우에는 객체로 변형도 하면서 어떻게 하면 문제를 유연하게 풀지 사고하자.기능

관련 포스팅은 따로 공부했으니 간단하게 과정만 짚고 넘어가보자.브라우저는 HTML, CSS 리소스 등을 파싱하여 DOM트리, CSSOM트리를 생성하고 둘을 합쳐서 Render트리를 만든다. 그 후에 레이아웃(reflow)와 페인팅을 거쳐서 사용자에게 보여지게된다.여기서

MVC 패턴이란 영역을 Model, View, Controller로 나누어 작업하는 디자인 패턴을 의미한다. 중요한 포인트는 각각의 영역에 맞는 역할을 명확하게 부여해야한다는 점이다.Model은 데이터와 비즈니스로직에 관련된 영역이고 View는 레이아웃과 화면을 다루는

리액트에서 컴포넌트를 만드는 방법은 다음과 같은 과정을 거친다.UI를 컴포넌트 계층구조로 나누기정적 UI 생성최소한의 완전한 UI state 찾기여기서 state는 최소한의 변화하는 데이터 집합기존의 state를 통해 구할 수 있는 값들은 state가 아님state가

해당 코드에서 parseInt($li.dataset.id)로 적은 이유는 data-id와 같은 커스텀 어트리뷰트는 string 타입이기 때문에 숫자로 변환해서 비교해야한다. ===은 타입까지 비교하기 때문이다.이거 때문에 몇 분동안 삽질을 해서 잊지 않기위해 메모해둔다

private와 protected 그리고 static을 언제 사용해야하는지그리고 객체지향에 맞게 상태와 메서드를 구현해보기 위해서 간단한 커피머신 만들기를 직접 구현해보았다.이렇게 엉망이지만(?) 간단한 다이어그램을 만들어보았다.먼저 커피머신 클래스이다. 커피머신 클래

바닐라 자바스크립트로 컴포넌트를 만들어보는 연습을 하고 있었다.해당 코드는 App.js 모든 컴포넌트의 상위 컴포넌트에서 SearchInput 컴포넌트와 SearchHistory 컴포넌트를 주입받아 사용하고 있는 부분이다.유저가 입력한 검색어가 searchHistory

참고자료IOC는 제어역전이라는 의미이다. 용어 그대로 코드의 흐름이 일반적인 흐름이 아닌 역전이 되었다는 뜻이다.참고자료에서 나온 것처럼 택시를 탈 때 우리는 기사님에게 몇 키로로 어디 지역을 지나서 등등 세부적인 명령을 내리지 않는다.집으로 가주세요. 라는 말만하면

참고 사이트 : ("https://minoo.medium.com/%EB%B2%88%EC%97%AD-jest-mocks%EC%97%90-%EB%8C%80%ED%95%9C-%EC%9D%B4%ED%95%B4-34f75b0f7dbe")Mocking은 테스트를 독립시키

sort함수를 사용해서 데이터를 정렬하는 문제를 자주 보았다.고차함수를 활용하면 콜백함수를 문제에 맞게 정의한 후 전달할 수 있기 때문에 데이터 정렬에 편리하다는 느낌을 받았다.이렇게 배열이 있고, 점수가 큰 순서대로 내림차순으로 정렬하고, 점수가 같으면 이름의 순서대

splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다.splice()와 slice()의 차이점은 기존 배열의 변경 유무에 있다.splice()는 기존 배열을 변경하지만 slice()는 기존 배열을 복사한 새로운 배