웹개발
-
Week02 리액트/Next.js 기초 3.5 React Hooks (1) - 상태 훅웹개발/React 2023. 12. 31. 16:39
React Hooks는 훅(Hook)을 통해 함수 컴포넌트 안의 상태나 라이프 사이클을 다루기 위한 기능이다. 잘 와닿지 않는데 HTML과 Vanila JS를 사용 할 줄 안다는 가정하에 훅이 무슨 역할인지 이해해보자. 유저가 input을 입력하고 submit버튼을 누르면 유저의 입력값이 나타나는 코드를 작성한다고 가정해보자. Java script 파일에 작성해야 할 점을 생각해본다면 3가지로 추릴 수 있다. 1. submit버튼 클릭시 input에 들어와 있는 값을 가져와야한다. 2. submit버튼에 클릭 시 어떤 행동을 하라는 (이 경우에는 input값을 가져와 입력값을 출력하는) 이벤트 리스너를 달아야 한다. 3. input값에 들어가 있던 값을 어느 엘리먼트에서 프린트 할 것인지 가져와야 한다...
-
Week01 리액트/Next.js 기초 3.1-3.4웹개발/React 2023. 12. 31. 16:26
3.1 리액트 입문 터미널에서 아래의 코드를 실행해 타입스크립트를 사용하는 최신 리액트 기본 앱을 만들 수 있다. $ npx create-react-app@latest react-sample --template typescript npx가 없다면 npm을 이용해 설치해 주고 npm이 없다면 node js를 설치해줘야 한다. $ cd react-sample $ npm run start 만들어진 react-sample 프로젝트로 작업 디렉토리 변경 후 서버를 실행해 준다. 서버가 실행될 때 동작하는 코드에 대해 자세히 알아보자. 사전지식) tsx, jsx는 return 값으로 html의 element를 준다. 그리고 return element를 export한다. const Hello = () => { ret..
-
React study 시작웹개발/React 2023. 12. 31. 15:45
Vue2.0->3.0에서 바뀌는 점이 많아지면서 기존의 vue 2.0으로 개발해 왔던 프로젝트를 React로 뒤엎기로 결정했다. react로 알음알음 찾아가며 바꿔가고 있지만, 기본적인 개념에 대해 더 확실히 짚고넘어가자는 의미로 파트내에서 스터디를 만들어 진행하기로 했다. 진행하면서 배운점들을 정리할 예정이다. 교재 : 타입스크립트, 리액트, Next.js로 배우는 실전 웹 애플리케이션 개발 강의 : Udemy - React 완벽 가이드 with Redux, Next.js, TypeScript
-
왜 프론트에서 바로 DB에 접근하면 안될까?웹개발 2023. 3. 23. 21:27
introduction 처음 풀스택 토이프로젝트를 시작하고 DB를 먼저 작성했다. 이후, 프론트 코드를 작성하며 필요한 DB쿼리들을 바로 받아오면 되겠다는 생각을 했다. 즉, 프론트엔드↔데이터베이스 통신을 생각하고 개발을 진행한 것이다. 대다수의 레퍼런스를 찾아보며 프론트에서는 주소(API)에 접근을 하지 쿼리를 작성하진 않는다는 것을 깨달았다. CS에서 2계층, 3계층(tier, layer)라고 불리는 구조와 관련된 내용이다. Concept 가장 간단하고 직관적인 방식으로 유저(클라이언트)는 데이터베이스에 직접 접근할 수 있다. 앞서 말한 프론트엔드 소스코드에서 query문을 작성하는 경우이다. 이 경우를 2-tier 구조라고 부른다. 1. 클라이언트 2. Database 두 가지로 구성된다. 2-ti..