전체 글 검색 결과
27 개의 검색 결과가 있습니다.
개발 공부/DevOps

[Kafka 기초] 아파치 카프카 간단하게 살펴보기

요즘 회사에서 아파치 카프카를 사용할 일이 있어서 공부하고 있습니다. 오늘은 제가 confluent 유튜브에 올라온 강의로 공부한 내용을 키워드로 정리해서 올리려고 합니다. 아주 간단하게 정리식으로만 다루고 있으니 더 자세한 내용을 원하시는 분들은 apache kafka 공식 홈페이지를 참고하시길 바라겠습니다. Kafka 아파치 카프카는 이벤트 스트리밍 플랫폼이다. 카프카는 토픽이라는 곳에 이벤트를 로그의 형태로 저장한다. Event 이벤트란 비즈니스 상에서 일어나는 모든 현상을 의미한다. 카프카에서는 이벤트는 key, value pair로써 나타낸다. Topic 아파치 카프카에서 토픽이란 비슷한 이벤트들을 담고있는 컨테이너이다. 토픽을 큐라고 오해하는 경우가 있는데 이는 사실이 아니다. 오히려 로그라고..

2022. 4. 24. 01:00
개발 공부/WEB

[React] <></>에 key props 추가하는 방법

안녕하세요. 코딩하는 곰돌이입니다. 이전에 작성했던 글 중 리액트에서 map을 이용해 배열을 렌더링 할 경우 key props가 왜 중요한지에 대한 글이 있었습니다. [React] 배열 렌더링 시 key props를 사용하는 이유 안녕하세요. 코딩하는 곰돌이입니다. 오늘은 리액트에서 map()을 사용해 배열을 렌더링 할 경우 key props가 필요한 이유에 대해서 정리해보고자 합니다. 우선 예시 코드부터 살펴보겠습니다! 예시 snurf.tistory.com 이어서 오늘은 어떻게 리액트 fragment 태그()에 key props를 추가할 수 있는지 알아보도록 하겠습니다. 에 key props를 추가해야 하는 경우 저는 코딩을 하다 아래와 같은 상황에 마주친 적이 있었습니다. import React, {..

2022. 3. 30. 20:00
개발 공부/WEB

[React] 배열 렌더링 시 key props를 사용하는 이유

안녕하세요. 코딩하는 곰돌이입니다. 오늘은 리액트에서 map()을 사용해 배열을 렌더링 할 경우 key props가 필요한 이유에 대해서 정리해보고자 합니다. 우선 예시 코드부터 살펴보겠습니다! 예시코드 import React, { useState } from "react"; export default function TodoSample() { const [todos, setTodos] = useState([]); const [todoInput, setTodoInput] = useState(""); const onInput = (e) => { setTodoInput(e.target.value); }; const onAdd = () => { setTodos([todoInput, ...todos]); set..

2022. 3. 27. 18:32
개발 공부

[주니어 개발자의 퇴근 후 글쓰기] 리팩터링의 중요성

안녕하세요. 이제 주니어 개발차 5개월차가 된 코딩하는 곰돌이(코곰...)입니다. 한동안 일에 치여서 글을 안쓰다가 요즘 일을 하면서 반복적으로 느끼는 것이 있어 그것에 대한 주제로 얘기를 해봐야겠다는 생각에 글을 쓰기 시작했습니다. 제가 오늘 얘기할 주제는 리팩터링입니다. 리팩터링이란 깊게 들어가면 정의하기 복잡할 수 있지만 주니어 개발자의 시선으로 간단하게 이해한 바로는 코드를 깨끗하게 정리하는 것이라고 볼 수 있습니다. 여기서 말하는 깨끗한 코드란 무엇일까요? 이것에 대해서도 사실 여러가지 의견이 있을 수 있지만 저는 깨끗한 코드란 간단하게 말해서 '유지보수하기 쉬운 코드'라고 생각합니다. 사실 프로젝트 초기에만 해도 리팩터링이 어렴풋이 알고만 있었지 깊이 공감하지는 못했습니다. 그리고 리팩터링은 ..

2022. 3. 21. 22:36
개발 공부/WEB

[React] setState가 바로 적용되지 않는 이유

안녕하세요. 오늘은 react의 useState가 반환하는 setState(다른 이름일 수도 있지만 useState가 반환하는 setter 메서드를 통칭해서 setState라 하겠음...)에 대해서 알아보도록 하겠습니다. 정확히 말하자면 setState를 호출했을 때 react component의 state는 어느 시점에 변경되는지 알아보도록 하겠습니다. 비동기적으로 동작하는 setState 모르시는 분들도 있으셨겠지만 setState 함수를 비동기적으로 작동합니다. '비동기'라는 말의 의미를 잘 모르시는 분들을 위해 풀어서 설명하자면 setState 함수를 사용한다고 componente의 state가 setState에 넘겨준 인자값으로 바로 변경이 적용되는 것이 아니라는 것입니다. 예시 코드를 보면서 ..

2022. 2. 12. 22:41
개발 공부/WEB

[Next.js] Data Fetching을 하는 4가지 방법

요즘 프로젝트를 Next.js로 진행하고 있어서 새롭게 Next.js를 공부하는 중입니다. 전에는 React나 Vue로 CSR(Client Side Rendering)만을 했었는데 Next.js로 SSR(Server Side Rendering)을 하자니 헷갈리는 부분들이 많았습니다. 특히 Next.js는 SSR 뿐만 아니라 CSR도 지원하기 때문에 각 부분이 SSR로 동작하는지 CSR로 동작하는지 구분이 모호해서 개발을 할 때 많이 해맸습니다. 그래서 이 부분에 대해 확실히 정리하고자 내용을 정리하며 공부했고 지금부터 쓸 내용은 나름대로 제가 정리한 내용을 글로 쓴 것입니다. CSR과 SSR에서 화면에 렌더링 될 데이터를 어떻게 받아올 것이냐에 초점을 맞추는 것이 둘을 구분하는데 도움이 되겠다는 생각을 ..

2021. 12. 21. 12:25