능히 해낼 수 있다

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). 0. Next.js의 기능 제공 Next.js에선 애플리케이션 개발 및 프로덕션 단계에서 여러기능을 제공하는데, 개발단계에서 TypeScript 및 ESLint통합, 빠른 새로 고침 등을 통해 개발자와 애플리케이션 빌드경험을 최적화한 다. 프로덕션단계에서는 성능과 접근성을 높이기 위해 코드를 변환하는 것을 목표로 해 클라이언트(유저)와 애플리케이션 사용경험을 최적화 한다. 프로젝트를 진행함에 있어 환경 및 사용 목적 등 고려하는 상황이 다르기 때문에 애플리케이션을 개발에서 프로덕션 단의 단계로 넘어가려면 코드 컴파일, 번들링, 경량화 그리고 코드 분할등의 작업이 필요한데, 이 내용은 찬찬히 나온다. 1. ..

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). 0. 타입추론 아래 코드처럼 변수를 선언했다고 해보자 초기 변수값은 'rose'인 문자열로 할당이 되어있는데, 그 변수에 숫자 4를 재할당 함으로서 타입에러를 발생하고 있는 모습이다. 하지만 TypeScript는 flower에 타입을 선언하지 않았어도 에러를 밷고 있는데, 이는 TypeScript가 변수 타입을 추측하기 때문이다. 원래는 이런식으로 let flower: string = 'rose' 작성을 해야하지만 이렇게 하지 않아도, TypeScript는 아래 이미지 처럼 변수에 마우스 호버링을 해보면 flower의 타입을 이미 알고있다. 이를 '타입추론'이라고한다. 1. 기본 타입 종류 살펴보기 //숫..

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). TypeScript를 사용하는 이유? 가령 아래와 같은 JS코드가 있다고 생각해보자 // 숫자를 더하는 add함수를 구현했다고 가정 해 보자 function add(num1, num2) { console.log(num1 + num2); } // 값을 불러올까? add(); add(1); add(1, 2); add(3, 4, 5); // 12?? add('hello', 'world'); 이에 대한 결과들은 Console에서 이렇게 보여준다. 이유가 뭘까? NaN NaN 3 7 "helloworld" function add(num1, num2) { console.log(num1 + num2); } // con..

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). 0. 개념. Next.js는 Vercel에서 만든 웹 애플리케이션을 만들기 위한 빌딩 블록을 제공하는 React 기반 프레임워크로, UI를 구축하기 위한 자바스크립트 라이브러리인 React와 헷갈리면 안된다(역할이 조금 다르다!). Next.js는 React 기반 프레임워크 React는 자바스크립트 라이브러리 프레임워크와 라이브러리 관련글 첨부! 230130 컴퓨터지식: 프레임워크와 라이브러리 차이 ✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). 개발 용어 중에는 결국엔 같은 거를 설명하고 있는거라 할지라도 언어에 따라 달라질 때가 ronieo.com 애..

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). 현재 FE 네 분과 BE 네 분이 함께하는 미니 프로젝트를 진행 중 이다. 프로젝트에서 결정해야 할 여러가지 중 하나인 개발 환경설정하기를 진행 중 zustand와 react-query를 사용하는 부분에 대한 이야기를 하기 위해 각 라이브러리의 장단점과 사용하게 되는 이유 등을 살짝 적어보려 한다. zustand와 react-query를 알아보기전에 우선 client state와 server state 의 개념의 차이를 알아야 한다. client state - 클라이언트 상태 웹 애플리케이션에서 브라우저 측에서 유지되는 상태를 의미한다. 브라우저는 사용자 인터페이스를 렌더링하고 사용자의 입력 및 이벤트를 ..