profile
Detail makes difference.

react 에디터 도입 고민

에디터를 도입하는 이유 제가 이 기능을 개발하는 이유는 충북대학교 각 단과대학, 학과 학생회 임원분들이 공지사항을 '카카오톡'으로 전달하는 것이 아닌 '충림이'를 통해 공지사항을 좀 더 효율적으로 올리기 위함이며 학생들 또한, 전달되는 공지사항들을 한 눈에 빠르고 쉽게

2022년 3월 20일
·
0개의 댓글
post-thumbnail

우아한테크세미나 FE 상태관리

평소 Redux를 사용하다가 RTK의 장점을 깨닫고 이후로 진행하는 프로젝트에서는 RTK를 사용했다. RTK를 사용하며 Redux보다는 코드량이 많이 줄었지만 여전히 api요청하는 코드가 대부분이었고 이게 과연 클라이언트 스토어인가?라는 의문점도 있었다. 또한, 여전히

2022년 2월 22일
·
0개의 댓글
post-thumbnail

useEffect 총정리

Effect는 sideEffect(부작용, 함수 외부에 영향을 주는 행위)을 의미하는데 이 이름이 붙여진 이유는 컴포넌트를 렌더링하는 본래 자신의 일이 아닌, 외부의 상태를 변경하는 작업을 하기 때문입니다.대표적인 부작용 예시로는 API 호출, 이벤트 처리 함수 등록

2022년 1월 1일
·
0개의 댓글
post-thumbnail

React hooks 총정리

먼저, useEffect는 내용이 길어 따로 정리하여 업로드하는 점 미리 당부의 말씀 올립니다.

2021년 12월 29일
·
0개의 댓글
post-thumbnail

Map객체와 Set객체

키가 있는 데이터를 저장한다는 점에서 Object와 유사합니다. 다만, Map은 키에 다양한 자료형을 허용한다는 점에서 차이가 있습니다.new Map() – 맵을 만듭니다.map.size: 요소의 개수를 반환합니다.map.set(key, value): key를 이용해

2021년 12월 28일
·
0개의 댓글
post-thumbnail

history API에 대해 알아보자

SPA 구현이 가능하려면 다음 두 가지 기능이 필요합니다.js에서 브라우저로 페이지 전환 요청을 보낼 수 있다. 단, 브라우저는 서버로 요청을 보내지 않아야 한다.브라우저의 뒤로 가기와 같은 사용자의 페이지 전환 요청을 js에서 처리할 수 있다. 이때도 브라우저는 서버

2021년 12월 23일
·
0개의 댓글
post-thumbnail

SPA란?

쉽게 말해 1개의 페이지만 있는 애플리케이션입니다. 하나의 페이지에서 내용만 바뀌는 것입니다. 서버로부터 새 페이지(html)을 불러오지 않고 현재 페이지를 동적으로 다시 작성하는 웹앱 혹은 웹앱을 작성하는 패러다임, 디자인 패턴입니다. 최초로 한 번 페이지 전체를 로

2021년 12월 23일
·
0개의 댓글
post-thumbnail

Redux Tool kit 총정리

이 글은 공식 문서와 블로그 1, 블로그 2, 블로그 3에 있는 내용을 바탕으로 작성한 글입니다. 아직 공부량이 적어 부족한 점이 많으니 적극적으로 알려주시면 감사하겠습니다. 먼저, 예시로 사용되는 간단한 코드와 제가 직접 구현한 코드를 혼용하여 사용하는 것에 양해 부

2021년 12월 1일
·
1개의 댓글
post-thumbnail

페이지 교체 알고리즘, LRU

요구 페이징 시스템은 프로세스가 특정 페이지를 요구할 때 해당 페이지를 물리 메모리에 로딩합니다.메모리에 필요한 페이지가 있을 때는 잘 진행되지만, 없을 경우에는 문제가 생깁니다. 프로세스가 필요로 하는 페이지가 없는 경우 페이지 폴트(page fault)가 발생하고

2021년 9월 11일
·
0개의 댓글
post-thumbnail

[HTML] 시맨틱 태그(Semantic tag) & 메타 태그(meta tag)

HTML5이 큰 특징 중 하나인 시맨틱 태그를 알아보자시맨틱 요소는 자신의 의미를 브라우저와 개발자 모두에게 명확하게 설명해준다.검색엔진이 HTML을 분석할 때 정확하게 컨텐츠를 식별하기 위해 정한 규약입니다.검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검

2021년 8월 24일
·
0개의 댓글
post-thumbnail

가상 메모리와 페이지 폴트

RAM의 부족한 용량을 보완하기 위해, 각 프로그램에 실제 메모리 주소가 아닌 가상의 메모리 주소를 할당하는 방식입니다. 프로그램 실행에 필요한 메모리 용량 전체를 RAM에서 할당받는 것이 아니라, 최소한의 메모리를 RAM에서 할당받아 저장하고 나머지는 HDD(가상 메

2021년 8월 23일
·
0개의 댓글

동기 vs 비동기

요청과 결과가 한 자리에서 동시에 일어난다. 요청을 하면 처리 시간에 관계없이 요청한 자리에서 결과가 주어져야 한다. 즉, 직렬적으로 업무를 수행한다.A 노드와 B 노드 사이의 작업 처리 단위(transaction)을 동시에 맞춰야 한다.ex - 카페에서 주문을 받을

2021년 8월 23일
·
0개의 댓글
post-thumbnail

메모리 구조

프로그램 실행 순서위 그림과 같이, 프로그램이 실행되기 위해서는 운영체제가 프로그램의 정보를 메모리에 로드해야 합니다.또한, 프로그램이 실행되는 동안 CPU가 코드를 처리하기 위해서는, 메모리가 명령어와 데이터들을 저장해야 합니다.메모리 공간이렇게 프로그램이 운영체제(

2021년 8월 8일
·
0개의 댓글

세마포어 vs 뮤텍스

공유된 자원에 여러 프로세스가 동시에 접근하면서 문제가 발생할 수 있습니다.이때 공유된 자원의 데이터는 한 번에 하나의 프로세스만 접근할 수 있도록 제한을 둬야 합니다. 이를 위하여 고안된 것이 바로 Semaphore 세마포어입니다.

2021년 8월 8일
·
0개의 댓글
post-thumbnail

카프카 개념 정리 #4

토픽 파티션에서 레코드 조회컨슈머 그룹 단위로 파티션 할당파티션 개수보다 컨슈머 개수가 많아지면 컨슈머가 놀게 된다.컨슈머가 많아지는 분산 처리를 위해서는 파티션의 개수를 늘린다.kafka 컨슈머는 쓰레드에 안전하지 않음여러 쓰레드에서 동시에 사용하지 말 것!wakeu

2021년 8월 6일
·
0개의 댓글
post-thumbnail

카프카 개념 정리 #3

send와 sender가 별도로 동작send는 sender가 메시지를 보내는 동안 배치로 모음sender는 배치가 찼는지 여부에 상관없이 차례대로 브로커에 전송배치 사이즈가 너무 작으면 한 번에 보낼 수 있는 메시지의 개수가 줄고 전송 횟수가 많아지기 때문에 처리량이

2021년 8월 6일
·
0개의 댓글
post-thumbnail

카프카 개념 정리 #1

메시지 큐의 구조카프카 브로커는 프로듀서로부터 메시지를 전달받고, 다시 이를 컨슈머로 전달하는 역할을 담당합니다. 이번 글은 카프카를 통해 흘러가는 메시지에 대해 알아보고, 나아가 카프카의 요소인 토픽과 파티션에 대해 개념적으로 살펴봅니다.카프카의 메시지는 key(키)

2021년 8월 5일
·
0개의 댓글
post-thumbnail

카프카 개념 정리 #2

카프카는 프로듀서(메시지 생산), 컨슈머(메시지 소비), 브로커(메시지 저장, 전달)로 구성됩니다.카프카 브로커는 프로듀서와 컨슈머 사이에서 메시지를 중계합니다. 카프카 브로커는 일반적으로 '카프카'라고 불리는 시스템을 말합니다. 프로듀서와 컨슈머는 별도의 애플리케이션

2021년 8월 5일
·
0개의 댓글
post-thumbnail

프로세스 vs 스레드

프로세스와 스레드의 정의 > 프로세스 : 운영체제로부터 자원을 할당받은 작업의 단위. 스레드 : 프로세스가 할당받은 자원을 이용하는 실행 흐름의 단위. 프로그램 -> 프로세스 -> 스레드 프로그램 -> 프로세스 > 프로그램? 파일이 저장 장치에 저장되어

2021년 8월 1일
·
0개의 댓글

AACP 3일 간의 삽질..

사용자가 강좌를 추가할 때, 강좌를 수강하는 학생들도 추가하게 되는데 그 컴포넌트를 작성하였다. 정말 기본적인 CRUD이지만 내맘대로 코딩하다가 이런 사태가 발생했고 map을 통해 해결하였다. 근본적으로 하위 컴포넌트를 상태로 만든 것이 문제였고 이렇게 만들었어도 ma

2021년 7월 27일
·
0개의 댓글