728x90 반응형 TIL147 이미지 public에 넣기 vs src에 넣고 import하기 ++ 이미지 suspense로 감싸서 가져오기 개발 진행할 때 svg파일 움직일 필요가 있다면 src에 넣고 import 해서 사용했었다만약 다른 분이 public에 이미 넣어두셨다면 그냥 나도 public에 넣고 썼었음이미 public에 넣고 쓰시는데... svg 파일을 import해서 가져오려면 설정이 따로 필요했을 뿐더러 이미지 파일 옮기는 것도 일이라 그냥 했음 public에 넣으면 따로 압축 과정 안 거치고 빌드 파일에 포함된다는 것까진 알았는데... 그럼 이미지 public에 넣기 vs src에 넣고 import하기뭐가 더 좋고 어떤 상황에 맞춰서 써야할까? chat jpt가 알려준 결론부터 말하자면 이렇게 됨작은 프로젝트 => public큰 프로젝트 => src public 파일에 넣으면 파일 손대지 않고 그대로 빌드되니 추가적.. 2024. 6. 24. cra 없이 webpack 개발 환경 설정하기 cra 없이 webpack 설정하는 법은 시중에 많이 나와있음참고한 블로그 추가함https://webpack.kr/concepts/ https://velog.io/@tnehd1998/CRA%EC%97%86%EC%9D%B4-ReactTypeScript-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0 하고 싶은 거1. react + ts + scss2. webpack으로 development / product 서버 나누기3. 코드 스플리팅 사용 만났던 오류 1. 간단하게 설정하고 서버 킬 때 나온 메세지 (실행 불가 상태는 x) 번들 파일 무거우니까 코드 스플리팅하라는 경고 메세지근데 이제 서버 켰는데 왜 무거운건지... 이미 압축되어서 가벼워졌는데.. 2024. 6. 23. 이산수학 필기노트 점수는... 문제 푸는 게 짱...행렬 넘 어려웠다 ------------------------------------------------------- 2024. 6. 10. 컴퓨터의 이해 필기노트 1학기 기말고사 준비하면서 씀...단순 백업용이기 때문에 검색으로 들어오신 분들은 그냥 참고만하시는 걸 추천드립니다 (틀린 거 있을 가능성 농후) + 없는 장들은 원래 없습니다 2024. 6. 2. 리액트 기초 https://velog.io/@hyunjine/Thinking-in-React#reconciliation%EC%9E%AC%EC%A1%B0%EC%A0%95 그냥 위의 글 보고 공부한 거임 dom (document object model)브라우저가 html(string)을 파싱해서 객체 형태로 만든 거임 html은 문자열임문자열은 다루기 어려운데 이걸 다루기 쉬운 객체 형태로 바꿔주는게 dom임프론트엔드 개발자는 이 dom을 조작해서 개발함 dom을 직접 조작하는 데 문제점 html 파싱해서 돔 트리 만들고 css 파싱해서 dom + css -> 렌더트리 -> reflow -> 페인팅 dom 하나 수정될 때마다 dom 전체트리 변경사항 수정해야 됨글자랑 위치 죄다 계산해야하는 거임 => 렌더링 부.. 2024. 4. 25. 리액트 컨택스트 컨텍스트 리액트 16.3 버전부터 제공하기 시작함이때 useContext 훅이 도입됨 이거랑 useState, useReducer 쓰면 전역 상태 관리 가능함 근데 리액트는 이거 전역으로 쓰는 거 별로 안 좋아했음상태 하나 바뀔떄마다 모든 컨텍스트가 죄다 리렌더링 되어서 불필요한 리렌더링이 발생하기 때문 ------------------------------------------------------------------------------- const CountStateContext = creatContext({count:0,setCount: ()=>{}}){children}export const useCountStateContext = () => .. 2024. 4. 15. 기초1 컴퓨터 -> 정의된 방법에 따라 입력된 데이터를 자동으로 처리하여 정보를 생산하는 기계 -> 외부로 받아들이는 입력 기능, 내부 장치 조정하는 제어 기능, 입력된 데이터를 저장(저장,기억), 연산 기능, 출력 기능 비트, binary digit : 두 개의 상태를 갖는 (on off) 가장 작은 단위임 컴퓨터는 트랜지스터를 통해 2진법 숫자로 데이터를 표현함 아날로그 / 디지털 아날로그 : 연속적인 물리량 값 디지털 : 이산적인 값으로 근사하여 표현함 아날로그 시계는 초침이 지날 때 중간 과정이 있지만, 디지털 시계는 1->2 단순히 값을 표헌함 아스키 코드 각 문자를 7비트로 표현함 2^7 = 128개 표현 1. string -> char(string) 2. char => 아스키 코드 (char -> .. 2024. 4. 11. 리액트 지역 상태 전역 상태 자바스크립트 함수는 순수 함수 / 비 순수 함수로 나뉨 순수 함수는 인수에만 의존함 동일한 인수를 받으면 동일한 값을 반환함 순수 함수 예 const addOne = (n) => n + 1 이는 전역 변수에 의존할 수 있음 let base = 1 const addOne = (n) => n + base 외부에서 함수 작동 방식을 변경할 수 있어서 좋긴하지만 외부 변수에 의존한다는 사실을 모르고 다른 곳에서 사용했다간 오류 날 수도 있음 또, base 는 싱글턴 형태라 재사용성이 떨어지기도 함 const createContainer = () => { let base = 1 const addOne = (n) => n + base const changeBase = (b) => base = b return { a.. 2024. 4. 11. strategy template 패턴 스트래티지 패턴(Strategy Pattern) 객체지향 디자인 패턴 알고리즘군을 정의하고 각각을 캡슐화하여 교환할 수 있도록 만드는 패턴 클라이언트는 알고리즘을 독립적으로 선택, 알고리즘의 변경에도 영향을 최소화 // 오름차순 정렬 함수 const ascending = (a, b) => a - b; // 내림차순 정렬 함수 const descending = (a, b) => b - a; // 정렬 함수를 인자로 받아 배열을 정렬하는 함수 const sortArray = (arr, compareFn) => arr.slice().sort(compareFn); // 예시 배열 const numbers = [5, 2, 8, 3, 1]; // 오름차순 정렬 const sortedAscending = sortAr.. 2024. 4. 11. 이전 1 2 3 4 5 6 ··· 17 다음 728x90 반응형
