본문 바로가기

분류 전체보기162

[React] assets image 폴더 리팩토링 안녕하세요. 제니입니다! 요즘 초기 셋팅부터 작업을 쭉 하다보니 코드 리팩토링까지 자율적으로 할 수 있는 기회가 많아서 동료분의 조언을 받아 진행 된 image 폴더 리팩토링을 정리해보려고 하는데요! 그 동안은 이렇게 assets안에 페이지나 컴포넌트별 폴더를 만들어서 이미지를 보관하고 있었는데요! 나름 생각하면서 정리하고 있었는데 재사용성이나 import 할 때의 이슈가 있었어요. 같은 폴더안에 넣어두어도 import의 문제가 있었고 나중에 다른 페이지에 추가될 때 재사용성에도 다시 찾아야하는 번거로움이 있었습니다! 1-1. image 폴더 내 index.ts 파일 추가 이렇게 image로 사용하는 폴더 내 index.ts 파일을 만들어두고 위 사진처럼 export를 모두 해줄 건데요 export { .. 2024. 3. 22.
[React, Vite, TS] Vite alias 절대 경로 설정 안녕하세요. 제니입니다! 오늘은 vite 환경에서 alias 절대 경로 설정하는 법을 정리해보려고 합니다. 이런 식으로 기존에 경로가 길었던 것을 @/ 절대경로화 하는 과정인데요! 1-1. vite.config.ts 셋팅 먼저 vite.config.ts 파일을 셋팅해주어야합니다! 위에는 완성된 코드의 일부 예시 캡쳐입니다. // vite.config.ts export default defineConfig(({ mode }) => { return { base: '/embed/', build: { manifest: true, }, plugins: [react()], resolve: { alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }], .. 2024. 3. 22.
[React] 화면 저장, 캡쳐 기능 구현하기(TypeScript) 안녕하세요, 제니입니다! 오늘은 화면 영역을 저장 및 캡쳐하는 기능을 정리해보려고 합니다. 굉장히 간단하고 추후에 계속 사용할 수 있는 영역이라 한 번 정리해두면 유용할 것 같아요! 1-1. 저장 버튼 만들기 어떤 모양으로 만드셔도 상관 없고 일단 버튼 하나 심플하게 만들어주세요. 저는 디자이너님의 icon 이미지로 적용했습니다. 1-2. html2canvas javascript로 canvas 영역을 잡아서 캡쳐하는 방법도 있는데 여러가지 문제점이 발생되더라구요. 영역 width, height를 잘 잡아주어도 잡히지 않거나 화면 영역이 까맣게 나오는 현상들이 발생되어서 제가 정착한 방법은 html2canvas 라이브러리 입니다! 1-2-1. html2canvas 다운 yarn add html2canvas.. 2024. 2. 26.
2024.01.16 공부 일기 - 코딩 & 코딩 & 코딩 안녕하세요. 제니입니다! 저번주 화요일에 앞으로 프로그래머스 캘린더에서 제공해주는 코딩테스트 5개를 꼭 풀어보겠다고 다짐했는데, 회사 업무도 사알짝 바빳고 운동을 다니느라 정신이 없어서 오늘은 이틀치를 풀어봤어요! 매주 화요일은 퇴근하구 집에 가지 않고 카공을 하고 있다보니 그래도 꾸준히 공부시간은 지켜져서 다행입니다 ㅎㅎ 원래 개발일지를 따로 쓰지 않구 공부한 내용을 정리하는데 오늘은 다행이 정리할 내용이 없더라구요! 확실히 공부하면 할수록 적응되는 것 같아요(코테 공부는 시작한지 얼마 안 됐지만...) 매주 알고리즘 강의 1강도 프로그래머스거로 듣고 있는데 생각보다 도움은 되지 않지만, 익숙해지기 위한 과정으로 생각하고 있습니다! 오늘 회사에서 그래프를 모듈화해서 개발하는 과정에 drag기능을 추가하.. 2024. 1. 16.
[JS] 문자열 겹쳐쓰기 안녕하세요. 제니입니다! 프로그래머스로 코딩 테스트를 연습하면서, 꾸준하게 문제를 풀어보고 있었는데 화면 오른쪽에 이런 캘린더가 있더라구요! 어떤 걸 풀어야지 고민할 필요없이 주어진 Day를 할 수 있어서 편했고 꾸준하게 매일 5개를 풀 수 있을 것 같아서 해당 캘린더로 시작하기로 했습니다! 그 중 오늘은 문자열 겹쳐쓰기 부분에 대해 정리가 필요해보였어요. 1-1. 문제 결국, s부터 시작해서 overwrite_string 글자로 덮어 씌우는 문제인데, 여러 가지를 고민하면서 풀었거든요. 그런데 또 다른 풀이를 참고하면서 보니, 제가 자주 사용하던 splice() 문법을 사용해서 풀더라구요! 저랑 가장 적합한 방법인 것 같아서, 정리하려고 합니다. 왜 맨날 사용하던 문법을 잊어버리는가..! 사실 개발을 .. 2024. 1. 9.
[JS] 뒤에서 5등까지 안녕하세요. 제니입니다! 오늘은 일요일~~ 코딩 연습겸 프로그래머스를 풀어보며 또 한 번 놓친 개념을 정리하려고 합니다! 1-1. 오름차순, 내림차순 배열을 arr 이라 하면 오름차순 // arr.sort((a,b) => a-b); 내림차순 // arr.sort((a,b) => b-a); 이렇게 구현할 수 있습니다. 오늘 또 놓친 방법은 sort((a,b) => a-b); 이 방법인데, 알면서 놓치는 건 항상 아쉽네요...! 구글링 없이도 익숙해지도록 연습연습 1-2. 가장 작은 5개의 수 가장 작은 수부터라는 의미가 결국 오름차순이고 5개의 수를 찾는 방법은 slice 를 사용할 수 있습니다. slice(0,5)를 하게 되면 0번째부터 4번째까지 5개를 추출 할 수 있어요! function soluti.. 2024. 1. 7.

티스토리툴바