간단하다! 컴포넌트를 리랜더링 시키고 싶으면 useEffect를 사용하면 된다. 처음 코드를 작성했을 시 전반적인 Link 연결상태가 좋지않아 제대로 확인하지 못했던 문제점을 수정했다. const url = window.location.href; const lastIndex = url.lastIndexOf("/"); const urlNumber = url.substring(lastIndex + 1); 위 코드는 현재 url의 게시글 index번호를 불러오는 코드이다. (서버와 연결하지 않은상태라 임의의 데이터로 작업중) 게시글 목록중 하나의 게시글을 선택했을때, 그에맞는 상세 내용이 떠야하는데. 처음랜더링 된 게시글이 계속해서 뜨는 오류가 발생하고 있었다. 따라서 컴포넌트가 호출될때마다 리랜더링해주며 그..
https://www.youtube.com/watch?v=UADiwl9SHss 처음 리더가 된 사람들을 위한 영상 전 메타(META) 수석팀장 크리스 채님입니다. 리더십의 핵심은 팀원들에게 방향을 제시하고 목표를 설정하는 것이다. 팀원들의 역략을 최대한 활용하고 지속적인 개선을 이룰 수 있도록 하기 위함이다. 팀원들과 소통을하며, 팀원들의 역략을 파악하고 그에 따른 업무 분배와 지원을 제공해야 한다. 리더는 소통능력, 문제해결 능력, 적극적인 태도, 상황판단 능력등 다양한 자질이 필요하다. 팀원들에게 예의와 존중을 보여줘야 하며, 적극적으로 배우고 성장해야한다. https://seungdols.tistory.com/979 처음 리더가 된 사람들을 위한 조언 - 전 Meta 수석팀장 (크리스 채) http..
https://engineering.linecorp.com/ko/blog/demaecan-2nd-recode-kmm-to-flutter 멀쩡한 앱을 Flutter 앱으로 다시 짠 이유 - 일본 1위 배달 앱, 두 번째 Recode 안녕하세요, LINE+ ABC Studio에서 앱을 개발하고 있는 김종식, 남상혁입니다. 저희 팀은 현재 일본에서 운영하는 배달 서비스 '데마에칸(Demaecan, 出前館)' 프로덕트를 개발하고 있습니다. '데마에칸( engineering.linecorp.com 일본 1위 배달앱은 KMM (Kotlin Multiplatform Mobile)을 사용하여 iOS와 Andorid 앱을 동시에 개발했지만, 해당 기술의 한계를 느끼고 Flutter로 다시 개발하기로 결정했다. KMM (..
REST API란? 쉽게 설명하면 REST API는 인터넷에 연결되어 있는 애플리케이션 과 서버가 통신하기 위해 정해놓은 규칙이다. 형식에 맞춰 정보를 요청하면 그에 해당하는 정보를 받아올 수 있게 도와주는 통신을위한 아키텍처 스타일 중 하나이다. Rest API는 Representational State Transfer API의 약어로, REST 아키텍처 스타일을 따른다. GET, POST, PUT, DELETE 등 표현의 개념을 사용하여 클라이언트와 서버간의 통신을 설계한다. 비슷한 용어로 RESTful API가 있다. RESTful API란? RESTful API는 쉽게말해 REST API를 더욱 엄격하게 지키는 API를 이야기 하며, 표현 뿐만 아니라 HTTP 상태 코드사용, 캐싱등의 RESTfu..
MVC (Model - View - Controller) 소프트웨어 개발에서 많이 사용되는 소프트웨어 디자인 패턴중 하나로, 애플리케이션의 구성 요소를 세가지 역할로 나누어 관리함으로써 개발의 유지보수성과 확작성을 높이는 모델이다. Model 애플리케이션의 데이터를 관리하는 역할을 담당 데이터의 구조와 접근 방식을 정의, 데이터 변경에 따른 로직도 포함 View 애플리케이션의 사용자 인터페이스를 담당 데이터의를 보여주는 역할을 하며 UI와 데이터의 상호작용도 포함됨. Controller Model과 View 간의 상호작용을 관리하는 역할을 담당함 사용자의 입력에 대한 처리와 Model의 데이터 업데이트 등을 수행함. Flux 패턴 Facebook에서 개발된 소프트웨어 아키텍처 패턴중 하나로, React와..
React의 SPA 란? SPA (Single-Page-Application)는 어플리케이션을 단일 페이지로 구성하는 것을 의미한다. 처음 웹페이지 전체가 한번만 로드되고, 이후에 사용자 인터페이스가 동적으로 변경되면서 필요한 데이터만 서버에서 가져오는 방식으로 동작한다. React 의 SPA는 여러개의 컴포넌트를 조합하여 구성되는데 각각의 컴포넌트는 독립적으로 작동하며, 필요에 따라 다른 컴포넌트와 상호작용 한다. 쉽게 설명하면 Web에서 변경되어야할 부분(컴포넌트 단위)만 리 랜더링 되는것을 말한다. Android의 fragment와 차이점 이러한 컴포넌트들은 어플리케이션의 fragment와 비슷한 개념이지만, 더욱 동적이고 재사용성이 높은 방식으로 작동한다. React의 SPA는 React Rout..
태그와 태그는 모두 클릭 가능한 요소이지만, 차이점이 존재한다. 태그 태그 목적 하이퍼링크 생성 클릭 가능한 버튼 생성 탭 순서 탭 키를 이용한 포커스 이동 시 고려됨 탭 키를 이용한 포커스 이동 시 고려되지 않음 전달되는 값 href 속성을 이용하여 다른 페이지 또는 문서로 이동 클릭 이벤트를 처리하기 위해 자바스크립트 함수 또는 폼 제출 사용 스타일 밑줄과 파란색으로 기본 스타일 지정됨 기본 스타일이 없으며, 개발자가 스타일을 직접 지정해야 함 Anchor 태그 Anchor 태그는 어디론가 이동할 수 있는 링크나 페이지내의 특정 영역으로 이동할 때 사용한다. 엔터키로 동작하며 내부엔 text contents 가 있어야한다. 또한 href 가 없이 javascript로 작동하게 하면 안된다는 특징이 있..
https://n.news.naver.com/mnews/article/138/0002143577?sid=105 [MWC23결산]② 망사용료 놓고 통신사 vs. 콘텐츠사 날선 공방 “대형 트래픽을 유발하는 회사들은 망 투자에 기여를 해야 한다.” vs “망사용료는 콘텐츠 투자를 줄이고 결국 소비자 편익을 해칠 것이다.” 지난 2월27일부터 3월2일(이하 현지시간)까지 스페 n.news.naver.com 통신사의 입장 망 사용량이 급증함에 따라 인프라 확대 및 망 분산화 등의 추가 투자가 필요하며, 이에 따른 비용 부담이 발생한다. 따라서 콘텐츠사 등의 대규모 데이터 전송 서비스 이용 시 추가적인 망 사용료를 부과하는 것은 합리적인 조치라고 주장한다. 통신사는 망 사용량 제한을 도입하거나 대량 데이터 전송 ..
Hook Hook 이란 함수 컴포넌트에서 상태관리 및 라이프사이클과 관련된 작업을 사용할 수 있도록 하는 리액트의 API이다. 이전에는 클래스 컴포넌트에서만 React의 라이플 사이클을 관리하고 사용할 수 있었는데 Hook의 등장으로 함수 컴포넌트 에서도 같인 기능의 작업을 수행할 수 있게 되었다. React에서 제공하는 Hook중 useState, useEffect, useContext 등을 알아보자. useState 상태를 관리하기 위해 사용되는 것으로 초기값을 인자로 받으며, 배열 형태로 현재 상태값과 해당 상태값을 업데이트 하는 함수를 반환한다. 예제 export default function Home() { //useState를 이용하여 초기 값을 설정함 const [count, setCount..
CRA (Create React App) Facebook에서 제공하는 React 애플리케이션을 더 쉽게 생성하고 설정할 수 있는 도구로 React를 사용하여 웹 애플리케이션을 개발할 때, 초기 설정을 수동으로 수행해야 하지만, CRA를 사용하면 초기 설정을 자동으로 수행할 수 있다. CRA를 사용하면 React 애플리케이션을 생성하고, 빌드하고, 개발 서버를 실행할 수 있다. 이를 통해 사용자는 빠르게 React 애플리케이션을 개발할 수 있으며, Webpack과 Babel과 같은 도구의 설정을 수동으로 수행할 필요가 없어 초보자인 경우에는 어려운 환경설정을 대신해서 간편하게 React 개발을 시작할 수 있게 해준다. CRA는 React 애플리케이션을 시작하는 데 좋은 선택이며, 초기 구성이 간단하고 사용..