전체 글143 REST 아키텍처, RESTful API란 1. RESTREST (Representational State Transfer)웹 상의 서버와 클라이언트 간 통신을 위한 아키텍처 등장 배경1. 사용자 인터렉션의 증가 (정적 웹 -> 동적 웹)초기에는 정적웹이 대다수였지만 시간이 지나면서 인터렉션으 증가하고 동적웹이 많아졌다.따라서 API 호출의 빈도도 많아졌으며, 이에 따른 아키텍처의 필요성이 높아졌다.2. 데이터 양 증가데이터의 양이 증가하면서 동적으로 데이터베이스에 접근하여 데이터를 사용하게 되면서, 통신을 위한 아키텍처의 필요성이 높아졌다.3. 다양한 기기(스마트폰, 태블릿 등)의 등장스마트폰과 태블릿과 같은 여러 기기들이 등장하면서, 브라우저 웹 뿐 아니라 다양한 기기에서 공통적으로 사용할 수 있는 통신 아키텍처가 필요하였다.4. 개발자 편의.. 2024. 6. 3. React에 대한 전반적인 이해 우리는 React를 사용하기 전 React가 무엇이고 왜 사용하는가에 대한 이해먼저 할 필요가 있다. 다음 순서대로 React에 대한 전반적인 이해를 해보려고한다.1. React가 무엇인가?2. React가 왜 등장했는가?3. React의 주요 특징이 무엇인가?4. 대체할 수 있는 다른 라이브러리나 프레임워크가 있다면 그 차이는 무엇인가?1. React가 무엇인가? 공식문서에서 확인한 React의 개념은 다음과 같다.React는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리 즉, 기본적으로 React는 UI 즉 View를 개발하기 위한 프론트엔드 라이브러리이다.2. React가 왜 등장했는가?React의 등장 배경을 설명하기 위해서는 이전의 프론트엔드(view) 개발에 대한 기본.. 2024. 5. 30. 개발자 회고 - 취업 및 이후 커리어 준비 2024년 2월 부트캠프를 수료했다. 결과는 좋았다. 최종 프로젝트 1위라는 성과를 거둘 수 있었다.실력 좋은 팀원분들과 함께하여 많은 것을 배울 수 있는 좋은 계기이기도 했다. 2월 중순부터 본격적인 취업 준비를 시작했다. 먼저 가장 중요한 이력서를 작성했다. 처음에는 정말 막막하였지만 계속해서 지원해주었던 스파르타 코딩클럽과 튜터님들의 도움으로 완성 이력서를 만들 수 있었다. 이후 계속해서 지원을 하였지만 성공률은 높지 않았다. 그래서 나는 메타인지부터 다시 시작하려고 한다.1. 현재 나의 위치웹 프론트 개발자로서 나의 현위치를 생각해보자. 기술스택 - HTML/CSS, Javascript, Typescript, React, NextJS 정말 정석적인 기술스택을 가지고 있다고 생각한다.프론트엔드 개.. 2024. 5. 29. CRA(Create React App) 직접 구현하기 (2) - 구현 바벨과 웹펙에 대하여 CRA(Create React App) 직접 구현하기 (1) - 바벨과 웹팩이란CRA(Create React App)은 React App을 구현하기 위해 필요한 여러 보일러플레이트를 자동으로 설정해주는 도구이다.자동으로 설정되기 때문에 Webpack과 Babel의 지식이 없어도 개발을 진행할 수 있도록 도audtjqxx.tistory.com 1. npm initReact App에서는 npm을 통한 모듈 의존성 관리를 한다. 따라서 npm init 이라는 명령어를 통해 의존성 관리를 도와주는 pakage.json 파일을 생성한다. (-y를 통해 빠르게 생성하자) 위와 같이 package.json 파일이 자동생성된 것을 알 수 있다.그렇다면 package.json은 무엇일까?pack.. 2024. 5. 22. CRA(Create React App) 직접 구현하기 (1) - 바벨과 웹팩이란 CRA(Create React App)은 React App을 구현하기 위해 필요한 여러 보일러플레이트를 자동으로 설정해주는 도구이다.자동으로 설정되기 때문에 Webpack과 Babel의 지식이 없어도 개발을 진행할 수 있도록 도와준다. 하지만 이러한 CRA를 직접 구현한다면, 기본적인 Webpack, Babel에 대한 지식 뿐만아니라 React 어플리케이션에 이해에도 도움이 될 것이다. CRA를 하면서 자동으로 구성되는 요소에 대해서 먼저 알아보자. 1. 바벨 (Babel)바벨은 자바스크립트의 컴파일러이다. 즉 자바스크립트 코드를 변환시킨다는 이야기이다.그렇다면 스크립트 언어인 자바스크립트를 왜 컴파일 시켜야하는가?바로 자바스크립트에는 여러가지 버전이 있기 때문이다.특히 자바스크립트는 ECMAScrip.. 2024. 5. 21. useState란 무엇일까 (feat. 클로저) useState는 함수형 컴포넌트에서 상태를 관리하기 위한 react hook useState는 리액트 개발을 처음 배울 때 가장 먼저 배우는 개념이라고 할 수 있다. 이러한 useState에 대하여 더 자세하게 알아보면서 개발하면서 느꼈던 의문점들을 해결해보고자 한다. 다음은 클래스형 컴포넌트의 구성 예시이다. import {Component} from 'react' interface State{ count:number } class CountComponent extends Component { private constructor(){ this.state={ count:1, } } private handleClick = () => { const newValue = this.state.count + 1 .. 2024. 3. 21. 이전 1 2 3 4 ··· 24 다음
