본문 바로가기

전체 글

 (44)
[포스코x코딩온] 웹개발자 풀스택 과정 12주차 회고 | React : [Lifecycle, useEffect()] + React에서 axios사용법 React Lifecycle React component의 생명 주기 Component가 생성될 때, 업데이트할 때, 제거될 때 어떻게 작동할지 정의할 수 있다. 자주 사용되는 메서드 componentDidMount componentDidUpdate componentWillUnmount Lifecycle 용어 Mount (마운트): DOM이 생성되고 웹 브라우저 상에 나타남 Update (업데이트): props 및 state가 바뀌었을 때 업데이트함 Unmount (언마운트): componenet가 화면에서 사라질 때(제거될 때) 마운트(mount) 될 때 호출되는 메서드 construction render getDerivedStateFromProps componentDidMount 업데이트(update..
[포스코x코딩온] 웹개발자 풀스택 과정 12주차 회고 | React : [State, useState()] React State React에서 앱의 유동적인 데이터를 다루기 위한 개체이며 component의 상태를 나타내는 데이터다. state가 변경될 시 자동으로 view를 다시 렌더링 한다. setState 메서드를 사용하여 state를 변경할 수 있다. props는 부모 component에서 자식 component에 데이터 전달 시 사용되며 state는 특정 component가 갖는 상태(값)이다. component 내부에서 선언되고 내부에서 변경된다. 주의할 점 state는 원칙적으로 클래스형 component에서만 사용이 가능하다. 클래스 안에서 직접 this.state를 변경하지 않고, 항상 setState 메소드를 사용하여 state를 변경한다. setState 메소드는 비동기적으로 동작하므로, ..
[포스코x코딩온] 웹개발자 풀스택 과정 12주차 회고 | React : [Component, Props, Event Handling] React Component React의 핵심 기능 MVC View를 독립적으로 구성해 재사용할 수 있고, 새로운 component도 만들 수 있다. 데이터(props)를 입력받아 View 상태(state)에 따라 DOM Node를 호출한다. UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩이 가능하다. (레고 블록) Component 종류 함수형 Component Vanilla JavaScript와 같은 기본적인 function 구조를 이용해 더 직관적이다. 메모리 자원을 덜 사용한다. function FunctionComponent() { const name = 'hamham'; return ( {name} ); }; export default FunctionCo..
[포스코x코딩온] 웹개발자 풀스택 과정 12주차 회고 | React: [JSX], JavaScript: [map(), filter(), 단축평가] 프레임워크 & 라이브러리 라이브러리 (Library): 라이브러리는 개발자가 필요한 기능을 수행하기 위해 사용할 수 있는 코드 집합입니다. 개발자는 필요할 때 라이브러리의 특정 함수 또는 모듈을 호출하여 사용할 수 있습니다. 라이브러리는 프로젝트의 일부로 사용되며, 개발자가 제어의 주체이며, 라이브러리를 호출하는 방식과 순서를 개발자가 결정합니다. 프레임워크 (Framework): 프레임워크는 개발자에게 애플리케이션 또는 시스템을 구축하기 위한 뼈대나 구조를 제공하는 데 중점을 둡니다. 개발자는 프레임워크 안에서 작업하며, 프레임워크가 정의한 규칙과 구조에 따라 개발합니다. 프레임워크는 개발자에게 일부 제어를 내부적으로 가져가며, 개발자는 프레임워크가 정의한 규칙을 따라야 합니다. 따라서, 라이브러리는 ..
[포스코x코딩온] 웹개발자 풀스택 과정 11주차 회고 | Node.js 웹 서비스 프로젝트 회고 프로젝트 피드백 프로젝트 발표 후 리더님들의 피드백을 정리해 보았습니다. 주제선정 견주들을 위한 커뮤니티 사이트라는 주제는 참신했다. 반응형 서비스의 반응형 처리는 필수다. 기능 모든 기능은 정상적으로 작동했고 시연이 되었다. 아쉬운 점 산책 메이트 찾기 기능일 경우, 사용자가 가입했을 때 입력한 주소 기준이 아닌 사용자의 현재 위치 기준으로 주변 사용자들이 조회되었으면 더욱 좋았을 것이다. 개선 사항 기능구현 및 데이터베이스 설계도 매우 중요하지만 해당 기능들이 어떻게 사용자들에게 보이는지가 프로젝트 전체 완성도에 많은 기여를 하는 것 같습니다. 제가 맡은 산책 메이트 찾기 기능과 친구 추가 및 실시간 채팅은 기능적으로는 문제가 없었으나, 프로젝트 진행 당시 기능 구현에 시간을 너무 많이 할애하여 프론..
[포스코x코딩온] 웹개발자 풀스택 과정 10주차 회고 | Node.js 웹 서비스 프로젝트 프로젝트 주제 여태동안 배운 모든 내용들을 응용하여 5인 1조로 Node.js 기반의 웹 서비스 프로젝트를 진행하게 되었습니다. 개인적으로 저번 프로젝트에서의 피드백 (신선한 주제 선정 및 서비스 존재의 정당성 부여)을 이번 프로젝트에 반영해보고 싶은 마음이 있었고 주어진 2주 동안의 기간 내로 구현이 가능한 주제를 팀원들과 토의를 했지만 모두 만족하는 주제를 찾지 못하고 있었던 상황이였습니다. 바로 주제를 정하는 것보다 주제 선정에 있어서 필요한 기본 조건들을 우선적으로 정해보자는 의견을 내었으며 각자 사용해보고 싶은 라이브러리 및 API를 공유해 보는 시간을 가졌습니다. 그러자 어느 정도 프로젝트 규모의 윤곽이 드러나기 시작했으며 이후 최종적으로 팀원 각자의 관심사들을 모아보자는 의견을 내어 최종 주..
[포스코x코딩온] 웹개발자 풀스택 과정 9주차 회고 | Socket.io Socket.io https://socket.io/ 클라이언트와 서버 간의 짧은 지연 시간, 양방향 및 이벤트 기반 통신을 실시간으로 가능하게 하는 라이브러리다. WebSocket 프로토콜 위에서 구축되었으며 통신 과정을 단순화하고 개선하기 위한 추가 지능을 제공한다. 특징: 이벤트 기반 자동 재연결 Socket.io 기본 이벤트 connection 클라이언트가 서버에 연결되었을 때 발생한다. 클라이언트와의 상호작용을 초기화하거나 초기 데이터를 전달할 수 있다. disconnect 클라이언트가 연결을 해제했을 때 발생한다. disconnecting 클라이언트가 연결을 해제하려는 경우에 발생한다. error 연결 중에 오류가 발생했을 때 발생한다. 사용자 지정 이벤트 // 이벤트를 보내는 쪽 //socke..
[포스코x코딩온] 웹개발자 풀스택 과정 9주차 회고 | Socket TCP/IP TCP/IP는 컴퓨터 네트워크에서 데이터 통신을 하기 위한 프로토콜 스택으로, 네트워크 간의 데이터 교환을 가능하게 해주는 기술이다. 데이터를 분할하여 보낸다. 정확한 전송을 보장하며 데이터의 경로를 지정하는 역할을 한다. TCP (Transmission Control Protocol) TCP는 데이터를 신뢰성 있게 전송하기 위한 통신 규약이다. 특징: 신뢰성: 데이터의 손실이나 손상을 최소화하고, 데이터의 순서를 보장한다. 연결 지향: 데이터를 주고받기 전에 송신자와 소신자 간에 연결을 먼저 한다. 흐름 제어: 데이터의 흐름을 제어하여 수신자가 처리할 수 있는 속도에 맞춰 데이터를 전송한다. 혼잡 제어: 네트워크의 혼잡 상태를 감지하고 조절하여 네트워크 성능을 유지한다. IP (Intern..

티스토리툴바