분류 전체보기158 [RN] 기초 개념 이해하기 1. StyleSeet를 사용하지 않아도 css 적용은 가능. 하지만 사용하면 자동완성이 되어 사용하기 훨씬 편하다. 2. React Native는 이전에 제공하는 API와 Components가 훨씬 많았다. 하지만 유저 관리와 업데이트 및 빠른 속도를 위해 최소화하였고 필요한 컴포넌트들은 커뮤니티 라이브러리를 사용해야한다. 그래서 버그가 있거나 업데이트가 늦은 라이브러리가 많을 수 있다. (React Native와 Expo에서 기본제공하는 것 먼저 사용할 라이브러리 찾아보기!) 3. 리액트 네이티브에서는 flex가 기본적으로 column 값을 가지고 있다. 행 나열을 하기 위해서는 flexDirection:"row"를 주면 된다. 4. 레이아웃을 그릴 때에는 width나 height 값을 사용하지 않는.. 2025. 1. 20. Redux 사용법 Redux의 핵심 개념Store : 애플리케이션의 전역 상태를 보관Action : 상태를 변경하기 위한 "의도"를 나타내는 객체Reducer : Action에 따라 상태를 업데이트하는 순수 함수Dispatch : Aciton을 Store로 보내는 메서드Selector : 상태를 조회하기 위한 함수 Redux 사용법1. Redux 설치npm install @reduxjs/toolkit react-redux @reduxjs/toolkit은 Redux를 쉽게 사용할 수 있도록 도와주는 공식 도구 2. 간단한 예제 Store 설정// src/store/counterSlice.tsimport { createSlice } form '@reduxjs/toolkit';const counterSlice = createS.. 2025. 1. 12. [모던 리액트 Deep Dive] 4장 서버 사이드 렌더링 4.1 서버 사이드 렌더링이란?4.1.1 싱글 페이지 애플리케이션의 세상 싱글 페이지 애플리케이션이란?렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식을 의미한다.최초에 첫 페이지에서 데이터를 모두 불러온 이후에는 페이지 전환을 위한 모든 작업이 자바스크립트와 브라우저의 history.pushState와 history.replaceState로 이뤄지기 때문에 페이지를 불러온 이후에는 서버에서 HTML을 내려받지 않고 하나의 페이지에서 모든 작업을 처리하므로 싱글 페이지 애플리케이션이라고한다. 실제로 소스 보기로 HTML 코드를 봤을 때는 내부에 아무런 내용이 없다. 이는 사이트 렌더링에 필요한 내부의 내용을 모두 자바스크립트 코드로 삽입한 이후에 렌더링하기 .. 2025. 1. 10. (퀵/병합) 정렬 개념 정리 정렬의 종류1. 버블 정렬 (Bubble Sort)가장 기초적인 정렬시간복잡도: O(n²)구현이 쉽지만 비효율적 2. 선택 정렬 (Seletion Sort)가장 작은/큰 원소를 선택해서 정렬시간복잡도: O(n²)버블정렬보다 실제 교환 횟수가 적음3. 삽입 정렬 (Insertion Sort)작은 데이터셋에서 효율적시간복잡도: O(n²)거의 정렬된 데이터에서 매우 효율적4. 퀵 정렬 (Quick Sort)실제로 가장 많이 사용되는 정렬평균 시간복잡도: O(nlogn)분할 정복 방식5. 병합 정렬 (Merge Sort)안정적인 정렬 알고리즘시간복잡도: O(nlogn)추가 메모리 공간 필요퀵 정렬과 병합 졍렬을 학습하면 좋은 점분할 정복(Divide and Conquer) 패러다임의 대표적인 예시재귀적 문제 해.. 2025. 1. 8. 힙 개념 정리 힙이란?완전 이진 트리 형태의 자료구조이다.우선순위가 있는 데이터를 저장하고 관리하는 특별한 트리다. 완전 이진 트리란?모든 레벨이 왼쪽부터 차례대로 채워진다.마지막 레벨을 제외한 모든 레벨이 완전히 채워져 있어야 한다.앞 줄부터 왼쪽에서 오른쪽에서 차례대로 앉은 것처럼, 노드들이 순서대로 채워진다. 힙의 종류최대 힙: 부모 노드가 자식 노드보다 항상 큰 힙 자료구조 (부모 > 자식)최소 힙: 부모 노드가 자식 노드보다 항상 작은 힙 자료구조 (부모 힙의 특징항상 완전 이진 트리 형태를 유지부모 - 자식 간의 대소 관계만 중요(형제 노드 간의 관계는 상관 없음)배열로 구현하면 쉽게 관리 가능최소 힙 예시// 배열[0, 1, 2, 3, 4, 5, 6]// 배열 -> 힙 변환 그림 0 .. 2025. 1. 7. 해시 개념 이해하기 해시 자료구조란?데이터를 효율적으로 저장하고 검색하기 위한 데이터 구조로 주로 키-값 쌍으로 데이터를 저장한다. ex) Object, Map 객체 등키를 해시 함수에 입력하여 해시 값을 얻고, 이 해시 값을 통해 데이터를 저장하거나 검색한다.마치 도서관에서 원하는 책을 찾을 때 도서 분류 번호로 찾으면 빠르게 찾을 수 있는 원리와 같다. 예시//간단한 해시 테이블 구현class SimpleHashTable { constructor() { this.table = {}; } //데이터 저장하기 set(key, value) { this.table[key] = value; } //데이터 가져오기 get(key) { return this.table[key]; }}//사용 예시const phoneBook .. 2025. 1. 6. [프로그래머스 Lv.1] 문자열 나누기 function solution(s) { let answer = 0; // 분리된 문자열 개수 let aCount = 0; // 첫 글자(x)의 개수 let bCount = 0; // 첫 글자가 아닌 글자의 개수 for (let i = 0; i 2025. 1. 4. png 파일 img 태그로 불러와서 쓸 때 png 파일 색상 변경하는 법 https://codepen.io/sosuke/pen/Pjoqqp CSS filter generator to convert from black to target hex colorAdded License 2022-07-15; this is retroactive for whatever help that is. 0-clause Free BSD License Permission to use, copy, modify, and/or distribute...codepen.io여기서 원하는 색상 입력하고 나온 결과값을 css style로 class 적용해주면 된다 2024. 12. 26. [모던 리액트 Deep Dive] 마지막 15장 15.1 리액트 프로젝트를 시작할 때 고려해야 할 사항15.1.1 유지보수 중인 서비스라면 리액트 버전을 최소 16.8.6에서 최대 17.0.2로 올려두자중요한 대규모 업데이트가 있었전 리액트 16.8버전에 맞춰 라이브러리 등 원활한 지원을 위해 16.8.6이상으로 맞추는 것이 좋다.또 앞으로 새로운 기능 출시 및 호환성이 깨지는 변경 사항을 최소화하기 위해 17버전으로 가는 것 또한 좋다.하지만 굳이 클래스 컴포넌트에서 함수 컴포넌트로 변경할 필요는 없다. 15.1.2 인터넷 익스플로러 11 지원을 목표한다면 각별히 더 주의를 기한다.다음은 인터넷 익스플로러 11 을 지원하지 않는 대표적인 라이브러리다.리액트: 리액트는 18버전부터 인터넷 익스플로러 11 을 지원하지 않기로 했다.Next.js: Nex.. 2024. 12. 26. [모던 리액트 Deep Dive] 14장 웹사이트 보안을 위한 리액트와 웹페이지 보안 이슈 14.1 리액트에서 발생하는 크로스 사이트 스크립팅(XSS) 웹사이트 개발자가 아닌 제3 자가 웹사이트에 악성 스크립트를 삽입해 실행할 수 있는 취약점을 의미한다.script 가 실행될 수 있다면 웹사이트 개발자가 할 수 있는 모든 작업을 함께 수행할 수 있으며, 쿠키를 획득해 사용자의 로그인 세션 등을 탈취하거나 사용자의 데이터를 변경하는 등 각종 위험성이 있다. 14.1.1 dangerouslySetlnnerHTMLprop특정 브라우저 DOM 의 innerHTML을 특정한 내용으로 교체할 수 있는 방법이다.dangerouslySetlnnerHTML은 오직 __ html 을 키를 가지고 있는 객체만 인수로 받을 수 있으며, 이 인수로 넘겨받은 문자열을 DOM에 그대로 표시하는 역할을 한다. 그러나 이 .. 2024. 12. 24. [이벤트참여][항해99] 내가 심은 잔디로 기부를 할 수 있다고?! 커밋 남발해서 얻은 내 잔드덜 ......ㅎㅎㅎ 9월에 쉬느라 뻥 뚫린거 보며 마음 아파가지구 열심히 채우고 있었는데 드뎌 잔디의 쓸모를 찾았다 ! https://hanghae99.spartacodingclub.kr/campaign 개발자 커리어 개척 캠프 항해99 | 잔디 기부 캠페인세상의 성장에 기여하세요hanghae99.spartacodingclub.kr항해99에서 진행하는 기부 캠페인으로12월31일까지 진행하는데 깃허브 계정 연동하면 내 잔디를 자동으로 가져와서 잔디 수만큼 기부된다고 한다! 기부하면 이렇게 기부증서라며 파일도 다운로드된다 ㅋㅋㅋㅋ 기획력 넘모 좋고만렙은 몇일까? 내 잔디갯수 나쁘지 않은데?ㅎㅎㅎ참여하신 다른 분들도 짱짱맨 짱짱걸 ~ 연말에 블로그쓰랴 스터디하랴 프로젝트하랴.. 2024. 12. 23. [모던 리액트 Deep Dive] 13장 웹페이지 성능을 측정하는 다양한 방법 13.1 애플리케이션에서 확인하기13.1.1 create-react-appreportWebVitals .ts 파일의 reportWebVitals 함수는 웹에서 성능을 측정하기 위한 함수다. 각각 누적 레이아웃 이동( CLS) , 최초 입력 지연(FID) , 최초 콘텐츠풀 페인트(FCP) , 최대 콘텐츠 페인팅 (LCP) , 첫 바이트까지의 시간(TTFB)을 측정하는 용도로 사용된다. 이러한 지표의 측정을 가능케 하는 것은 web-vitals 라이브러리 덕분이다. PerformanceObserver 라는 API 를 사용하는데 브라우저에서 웹페이지의 성능을 측정하기 위해 사용된다. ReportHandler는 단순히 성능 객체인 Metric 를 인수로 받는 함수 타입으로， Metric 을 원하는 대로 다룰.. 2024. 12. 21. 이전 1 2 3 4 5 ··· 14 다음
