react 썸네일형 리스트형 [React] Warning: Each child in a list should have a unique "key" prop. 현재 나는 오픈소스 컨트리뷰톤 githru 팀에서 활동하고 있다. 컨트리뷰톤을 진행하면서 PR로써 주고 받은 내용들 + 나도 조금 더 생각해볼만한 주제도 많아서 쓸 수 있는 만큼 최대한 자료를 조사해서 내 스스로의 기준을 만들어보려고 한다. nanoid 라이브러리를 추가하게 된 경위 key props 추가 내가 3주 동안 맡아서 구현한 파트는 Summary 부분인데 이 부분을 구현할 때 데이터를 가공해 map으로 span 태그를 뿌려주다보니 key없이 뿌려질 경우 콘솔에서 key prop을 전달해달라고 에러를 뿜는 것이었다. Warning: Each child in a list should have a unique "key" prop. 그렇다면 key props를 왜 지정해줘야하는 것일까? 이 포스트에 .. 더보기 [Typescript] Expected to return a value at the end of function 'read' * 상황 - 현재 React, Typescript, Eslint(airbnb), Prettier을 사용하고 있다. 나는 한 개의 데이터를 가지고 D3로 라인차트를 뿌려주고 싶다 ! 현재의 로직은 ts 파일에서 데이터 가져오기, url에서 csv 데이터 가져오기 이 두 가지이다. * 원인 - read 마지막에 return이 없었다. * 해결방안 - read 마지막에 return을 추가해줬다. 더보기 토스 SLASH 21 - Micro-frontend React, 점진적으로 도입하기 후기 면접에서도 MSA라는 이야기를 많이 들었는데 MSA란 마이크로 서비스 아키텍처의 준말이다. MSA가 출현하게 된 배경으로는 모놀리틱 아키텍처 형태가 있는데 이는 모듈별로 개발을 하고 개발이 완료된 웹 어플리케이션을 하나의 결과물로 패키징하여 배포되는 형태를 말한다. 모놀리틱 아키텍처의 경우 소규모 프로젝트에서는 충분히 사용해도 괜찮지만 일정 규모 이상의 서비스, 혹은 수백명 이상의 개발자가 투입되는 프로젝트에서는 한계를 나타낸다. 부분 장애가 전체 서비스 장애로 확대될 수 있고, 한 프레임워크와 언어에 종속적이다. 또 서비스 변경이 어렵고 수정하면 장애의 영향도 파악이 어렵다. 이런 문제점들을 보완하기 위해 MSA가 출현하게 되었다. 이처럼 대규모 프로젝트를 진행하는 곳에서는 Micro하게 프로젝트를 관.. 더보기 토스 SLASH 21 - 실무에서 바로 쓰는 Frontend Clean Code 후기 작년 자료긴 하지만 프론트엔드에서도 클린한 코드를 구현해야 나뿐만 아니라 다른 개발자도 코드를 읽고 바로 기능을 이해할 수 있기 때문에 생산성을 더 높일 수 있다고 생각한다. 특히 좋은 개발자의 기준 중 하나로써 빠른 생산성을 강조하는 몇몇 포스팅을 본 적이 있는데 기업 입장에서도, 팀 입장에서도 업무에 교착상태없이 원활하게 업무를 진행하려면 팀원의 생산성 속도를 적절히 조절할 수 있어야 한다. 그러기 위해서는 우선 빠르게 생산성을 올릴 수 있는 방법부터 고안해봐야한다. 빠르게 하는 걸 느리게 하기는 쉬워도 느리게 하는 걸 빨리 하기는 어렵기 때문이다. 토스에서는 이런 생산성을 위해 프론트엔드에서도 클린 코드를 지향했다고 하는 강연이 있어서 보게 되었다. 이번 강연을 보면서 클린 코드의 개념과 의의를 다.. 더보기 토스 SLASH 21 - 프론트엔드 웹 서비스에서 우아하게 비동기 처리하기 후기 최근 기술면접 스터디에서 비동기와 동기 처리에 대해 계속 이야기가 나오고 있기도 하고 프로젝트를 하기에 앞서 React를 프론트엔드에서 사용할 생각이라 이런 내용도 알고 있으면 구현하는 데도 도움이 될 것 같아 이번주 세미나는 이 세미나로 결정했다. React를 사용하면서 비동기 처리를 고려해서 구현한 적이 많이 없었던 것 같고 왜 그렇게 구현해야하는지 주의 깊게 공부하지 못했던 것 같아 이번 세미나가 나에게는 비동기라는 개념에 대해서도 알 수 있고, 어떻게 비동기를 우아하게 처리할 수 있는지 방법까지 공부할 수 있는 세미나였다. 현재 토스의 상황 토스에서는 React, Next.js, Typescript를 현재 사용하고 있다. 웹 서비스에서 가장 다루기 어려운 부분은 비동기 프로그래밍 비동기 프로그래밍.. 더보기 [React] You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. * 상황 - 열심히 리액트에 라우트 설정 다 해줬는데 실행이 안되는 것이다 ! * 문제점 - footer.js에 아무 내용 안넣어줘서 그런 것이었다. 정확히는 footer.js에서 export 한 게 없어서 그런 것이었다. * 해결방법 - footer.js에 아무 내용이라도 넣고 export default footer; 추가 해줬더니 잘 돌아갔다. 더보기 react native 가운데 정렬 * 상황 - 로그인 화면을 구현하는데 가운데 정렬하고 싶어졌다. * 해결 import React, { Component } from "react"; import { Text, View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ login: { flex: 1, justifyContent: "center", alignItems: "center" } }); class Login extends Component { render() { return ( Login ); } } export default Login; 위와 같이 코드를 지정해주면 됨. - alignItems : 가로 가운데 정렬 - justifyContent : 세로 가.. 더보기 20190910 1. String to int, int to String 형변환하는 거 잊음. String to int String f="123"; int t=Integer.parseInt(f); int to String int f=123; String t=Integer.toString(f); https://nota.tistory.com/49 2. int값 여러 개 받는 거 잊음. Scanner sc = new Scanner(System.in); int a=sc.nextInt(), b=sc.nextInt(); https://limkydev.tistory.com/170 3. 포맷 형태로 출력하는 거 잊음. int age=10; System.out.printf("%d%n",age); https://keep-cool.tist.. 더보기 이전 1 다음
