Intro 앞서 렌더링 방식을 공부하면서 알게된 개념인 TTV와 TTI. 개발자에게 있어서 정말 중요한 포인트인데 너무 늦게 알게 된 것은 아닌지.. 🤔 프론트 개발자로서 염두하고 신경써야하는 부분인 TTV와 TTI에 대하여 정리해보기로 한다.

Intro Next.js 프로젝트를 본격 진행하기 전에 빌드 결과를 분석해보려고 한다. create-next-app 을 사용하여 프로젝트를 만든 후 app 폴더구조를 사용한 정적 라우팅 설정까지만 하고 빌드를 진행해보았다. 빌드 전 dev 모드에서 테스트할 때는 라

Intro 실시간 화상 채팅에 필요한 화이트보드 기능을 React-Konva 라이브러리를 사용해 구현을 하게 되었다. Konva 공식문서에는 여러가지 Demo가 있어, 이를 기반으로 디벨롭 할 수 있었고 원하는 기능과 비슷한 Free Drawing Demo를 참고하

멋쟁이사자처럼을 1월에 수료하고 벌써 5월도 막바지를 향해 달려가고있다.뭔가 지금까지 쉬지않고 이런 저런 기회가 닿으면 도전하며 시간을 보냈다고 생각했는데,내가 과연 5개월 동안 얼마나 어떤 성장을 이루었는지 의문이들었다.최근 도전한 새싹톤은 아쉽게도 2차 아이디어 과

내가 이해하기 편하려고 간단하게 정리하는 글 ✨

22년 말 Next.js 13이 출시되고 많은 변화가 생겼다고 한다.물론 나는 13출시 후에 Next.js를 처음 사용해봤기 때문에 다시 공부해야하는 불편함은 없었지만, 현재 진행중인 Cake project(가제)에 Next.js를 사용하고 있으므로 Next.js13의

MBTI 기반 Cake-project Question 컴포넌트를 구현한 후에 테스트를 진행하다 버그를 발견해버린다. p요소 를 클릭해도 handleAnswerSelection 함수가 실행되어 첫번째 li 요소가 클릭되고 다음 question으로 넘어가버리는 것이였다.

지난 포스팅으로 뷰 로직과 비즈니스 로직을 분리하는 아키텍처에 대한 글을 작성하며 디자인패턴을 공부해봐야겠다고 생각했다.이번에 친한 디자이너와 함께 개인 프로젝트를 하게 되는데 디자인 패턴을 적용해보려고 한다.

또 이 둘은 어떻게 구분해야할까?A sphere of knowledge, influence, or activity. The subject area to which the user applies a program is the domain of the software.

리액트의 모든 UI의 업데이트는 상태변경으로부터 발생해야한다.그러나 입력폼의 경우 내부적으로 상태변경이 발생하지 않아도 바로 UI가 변경된다.이를 uncontrolled component 즉 통제되지 않는 컴포넌트라고한다.

👉 불변성 을 유지해야한다.👉 새로운 참조값을 만들어줘야한다. (상태의 내부 값을 직접적으로 수정 ❌)👉 '새로운 값 or 새로운 객체 or 새로운 배열' 만들기리액트는 새로운 참조값이 만들어져야 상태가 변경되었다고 인지해서 update 한다.참조값이 동일한(기존

Vue.js는 선언적 접근 방식을 사용하여 UI를 구성한다. 작성한 템플릿 코드를 기반으로 UI를 생성한다는 것을 의미하는데, 선언적 접근 방식이 뭘까?

두근두근 Vue.js 스터디 시작!공식문서를 살펴보니 뷰 컴포넌트는 두 가지의 API 스타일로 작성할 수 있다.data, methods, mounted와 같은 옵션 객체를 사용하여 컴포넌트의 로직을 정의한다.옵션으로 정의된 프로퍼티는 this로 노출되며, this는 내

Mock Data 👉 mock: 거짓된, 가짜의 👉 mock data: 가짜 데이터, 샘플 데이터 Youtube 오픈 API 를 이용해서 리액트로 클론코딩 프로젝트를 진행하였다. 이번 프로젝트를 진행하면서 실제 API 에서 받아온 데이터가 아닌 샘플로 만

Youtube 클론코딩 Project를 시작했고 Youtube의 오픈 API를 사용하게 되었고 key를 발급받았다.네트워크 통신 코드를 짜는 과정에서key를 그대로 코드상에 노출해도 될까?👉 절대절대 안된다!!! ❌보안에 매우 취약해지기때문에 아래와 같은 방법으로 저

드디어 내가 React를 배우고 있다니 신난다 ! 우와아 🔥그래서 시작을 하긴 했는데.. 처음에는 복잡한 파일구조를 보고 조금 당황스러웠다.이 많은 파일들은 다 뭘까? 제대로 알지 못한 상태로리액트를 배우기 시작하니 대 혼동이었다..!그래서 이 포스팅에서는,리액트의

자바스크립트로 만든 쇼핑리스트 화면이다. 여기서 쓰레기통 버튼을 누르면 해당 리스트가 삭제되도록 구현해야하는데, 새로 만들어지는 리스트마다 이벤트를 전부 등록하게된다면 효율적이지 않다 ! -> 그래서 이벤트 위임을 적용해보게 된다 😙 이벤트 위임을 위해리스트의

멋사 회고조에서 매일 코딩테스트 스터디를 진행중이다! 오늘의 문제는 [프로그래머스 LV.1 - 문자열 내 p와 y의 개수] 였다. 그렇다면 나는 ! 정규표현식으로 문자열 내 p와 y를 찾아서 length를 비교해주어 간단하게 문제를 풀 수 있을거라고 생각했다! 그리