profile
사람도 사랑도 계획적으로

[JS/Programmers] 조이스틱 - Greedy 알고리즘 활용하기

문제: 조이스틱 해결 과정 최종 답안 Greedy 알고리즘

2025년 12월 5일
·
0개의 댓글
·

Debounce란? 목적과 활용 예시

Debounce란, 굉장히 짧은 시간에 발생되는 작업들이 아닌, 일정한 시간 간격을 두고 그동안 일어난 모든 결과들을 한 번의 호출로 처리하는 것을 의미한다.일반적으로 많은 양의 데이터가 있고 이를 브라우저 상의 사용자가 탐색하는 과정이 있다면, 순간 순간의 탐색마다

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

[JS/Programmers] 문자열 겹쳐쓰기 - splice()와 그 활용

주어지는 my_string을 배열로 바꾸기splice()를 이용하여 배열화된 my_string의 s번째 문자부터, overwrite_string의 길이만큼 바꿔주기배열화되어 쪼개진 문자들을 .join을 통해 다시 이어주기원래 배열의 특정 부분에 요소를 추가하거나 제거할

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

Content-visibility를 활용한 가상 스크롤 적용해보기

Playus 서비스를 개발하는 중, 커뮤니티 게시글을 보여주는 과정에서 문제가 발생했다.이전부터 다른 프로젝트에서도 나왔던 QA 사항이었는데, 아이템의 목록을 보여줄 때 아이템의 양이 너무 많은 경우, 혹은 용량이 너무 많은 경우에는 데이터 렌더링에 있어서 너무 오랜

2025년 6월 13일
·
0개의 댓글
·
post-thumbnail

<HTML/CSS> ARIA란 무엇일까?

Playus 프로젝트를 진행하면서 페이지 디자인을 작성하던 도중, 프론트엔드 레포지토리에 Pull Request를 하기 위해 Approve를 하다가 CodeRabbit으로부터 새로운 Refactor Suggestion을 받았다.이 ARIA 속성이라는 단어를 이전의 개발

2025년 5월 6일
·
0개의 댓글
·
post-thumbnail

.module.css를 .css 대신 사용해보자

modules.css를 사용할 때의 장점

2025년 4월 22일
·
0개의 댓글
·

DB에 Base64로 인코딩된 이미지를 React에서 출력하기

프로젝트를 진행하면서, DB에 저장된 텍스트와 이미지를 불러와야 하는데, 텍스트는 정상적으로 출력되지만 이미지가 출력되지 않는 이슈가 발생했다.문제는 텍스트의 경우 Unicode 형식 그대로 MongoDB에 저장되어 있었지만, 이미지의 경우 Flask 서버에서 Base

2025년 3월 6일
·
0개의 댓글
·

FlexBox란?

Flexible Box Module, 즉 한 번에 하나의 행 또는 열을 다루어 박스 내 아이템 공간 배분 및 정렬을 유도하는 레이아웃 모델이다.View에서 Flex display를 설정할 때, 이미 모든 View는 기본값이 Flex Container이기 때문에, 일일이

2024년 10월 1일
·
0개의 댓글
·

RN의 여러가지 규칙들

RN은 웹사이트가 아니므로 HTML을 사용하지 않는다. 따라서 대신 를 import하여 사용한다.모든 텍스트는 컴포넌트 안에 들어가야 한다.StyleSheet.create({object}) = RN에서 css의 역할을 하는 것. 굳이 사용하지 않아도 css의 적용

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

React-Native의 작동 원리에 대해.

react-native-works.png컴포넌트를 이용해 HTML 생성 → ReactJS를 이용해 JavaScript화 → 브라우저를 이용해 실행운영체제와 개발자 사이의 ‘인터페이스’. 우리가 코드를 만들면 IOS나 안드로이드 자체의 코드로 ‘번역’되도록 그들에게 요청

2024년 10월 1일
·
0개의 댓글
·

React 응용하기: 메모장 만들기

왼쪽 사이드바에서는 현재 등록된 메모의 목록이, 오른쪽 메모 편집에서는 제목과 내용을 수정할 수 있는 입력 폼.사이드바 구조: SideBarHeader, MemoList(MemoItem), SideBarFooter메모 편집 구조: MemoContainer(MemoTit

2024년 10월 1일
·
0개의 댓글
·

React 환경설정

브라우저 밖에서도 서버 구축 등의 javascript를 실행할 수 있게 해주는 런타임 환경.오픈소스 Javascript 엔진인 Chrome V8을 기반으로 동작.Single-Thread의 non-blocking I/O 이벤트 기반의 ‘Async’ 방식. 즉 시간이 오래

2024년 10월 1일
·
0개의 댓글
·

이벤트 핸들링하기

React는 JavaScript처럼 Camel Case 형태로 함수를 전달해줌.HTML의 경우에는 Camel Case가 아닌, 소문자 onclick에 실행함수를 넣는다.onClick: 마우스 버튼을 ‘클릭’했을 때 발생 (Down + Up)onMouseDown: 마우스

2024년 10월 1일
·
0개의 댓글
·

Hook의 사용과 렌더링

Hook: 여러 컴포넌트 중 function이 class를 사용할 수 있도록 도와주는 기능.useEffect: useEffect(() ⇒ {함수}, state or data값)의 형태로, 렌더링 때마다 특정한 작업을 하게 도와준다.=⇒ 페이지를 렌더링(mount)할 때

2024년 10월 1일
·
0개의 댓글
·

Component

한 페이지를 구성하게 되는 작은 구성요소.장점:코드의 양이 줄어듦개발 시간이 줄어듦유지보수가 간편해짐예시: hello와 world라는 component로 App.js를 구성하기props: 부모 component에서 자식 component로 전달되는 ‘읽기 전용’의 입력

2024년 10월 1일
·
0개의 댓글
·

JSX의 기본 형식과 구문

jsx의 기본형식:형태와 같이, java + HTML의 형태를 구사하고 있다. 마지막 줄의 ‘export default App;’이라는 구문을 통해 App함수를 추출하고, 메인 렌더링을 담당하는 index.js를 비롯한 다른 여러 component 소스들에서 이 Ap

2024년 10월 1일
·
0개의 댓글
·

Router의 종류 비교

페이지의 새로고침 없이도 주소의 변경이 가능하고, 현재 주소의 정보들을 props를 통해 활용이 가능하다.pushState, replaceState, popstate event 등, HTML5의 History API를 사용하여 URL과 UI를 동기해줌위 코드에서는 컴

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

[Android] INSTALL_FAILED_BAD_PERMISSION_GROUP 해결하기

팀플용 앱을 만들기 위해 열심히 코딩 연습을 하던 도중, 앱을 실행하려는데 갑자기 이런 에러가 발생하면서 앱이 실행되지를 않는다. 분명 어제까지만 해도 잘 실행됐는데..? 하면서 코드를 다시 한 번 천천히 뜯어봤다. 그런데 java 코드에서도 딱히 오류도 없는 듯 하고

2024년 5월 22일
·
0개의 댓글
·