본문 바로가기

분류 전체보기56

2023 상반기 회고 0. 지금까지의 이야기 1. 리액트네이티브로 컴온 모바일 개발을 끝냄 3~4개월 정도 걸린것 같다. 리액트 네이티브 배포까지 했다. 좋은 경험이었다. 기술부채가 좀 있어서 나중에 차차 없애야겠다. 2. 회사에 취업, 도메인 지식 배우는 중 현재로선 부동산 도메인 지식을 쌓는거에 최선을 다하고 있다. 3. 포켓몬 알바로 사람들을 많이 만남 종종 만나서 이야기 하고싶다. 개발자가 많다. 4. 4개월동안 코딩테스트 스터디, 골드 3 찍음 취업을 하면서 코딩테스트 스터디를 마무리했다. 골드 3 이지만 대충 기초는 쌓아서 나중에 언제든 다시 시작할 수 있을 것 같다. 1. 현재 1. 블로근황 스터디 (1주 2포스팅) 블로그 글도 꾸준히 써야지, 1주 2포스팅을 하되 되도록 양질의 콘텐츠를 올리자. 2. 반응형 웹.. 2023. 7. 2.
반응형 웹제작을 위한 핵심기술 -1 반응형 웹이란? pc,tv,내비게이션,스마트 기기등 기기마다 또는 환경마다 최적화된 웹사이트를 제공하는것을 말한다. 반응형 웹을 만들때는 모든요소를 %로 계산한다고 한다. 화면에 보이는 영역인 뷰포트, 화면의 크기와 환경을 감지하여 구조를 바꿀 미디어쿼리 ViewPort 스마트 기기는 기본 설정값이 자동으로 보이는 영역으로 설정되기 때문에 스마트기기에선 화면의 크기를 정확하게 감지하지 못한다. 그래서 미디어쿼리가 기기의 화면 크기를 정확하게 감지할 수 있도록, 뷰 포트라는 기술을 사용한다. 디바이스 기기에 따라 가로세로가 설정되도록 메타태그를 넣어준다. 미디어 쿼리가 화면의 사이즈를 감지해 스타일을 적용시킨다. 각각 320px, 768px, 960px 이상일때 배경색을 변경한다. 가변그리드 공식 (가변크.. 2023. 7. 2.
Webpack 번들링 : 각각 나눠진 파일들 (ex) 자바스크립트 파일) 등을 하나로 모아서 묶어주는 작업을 뜻함 webpack의 등장 웹개발이 발전하면서 다양한 모듈의 도입으로 애플리케이션이 커졌다. 조각난 모듈들의 의존성을 파악하여 번들링 해 주는 webpack이 등장하였다. 장단점 장점 : 1. 성능 최적화 & 자동화 코드축소, 사용하지 않는 코드를 제거하는 tree shaking을 사용, http 요청 수를 감소시켜 웹사이트 성능을 향상시킴 2. 번들러가 제공하는 편의성 css가 아닌 Sass나 Stylus등을 사용할 경우, 또는 typescript 사용시, 번들러가 컴파일 과정에서 필요 플러그인을 추가하고 번들러를 실행해줌 3. CodeSplitting 을 통해 필요할 때만 스크립트를 로드 할 수 있다. 시시.. 2023. 6. 29.
Expo ReactNative Storybook 도입시 Constants.expoConfig.extra.storybookEnabled === undefined in windows 발단 : ReactNative 로 스토리북 연습하려고 했을 시 Constants.expoConfig.extra.storybookEnabled === undefined 오류 windows유저들은 억울하다 공식문서를 보고 https://dev.to/dannyhw/how-to-swap-between-react-native-storybook-and-your-app-p3o How to swap between React Native Storybook and your app How to use expo constants and environment variables to swap between storybook and your app dev.to 위의 링크를 따라했는데도 undefined가 나오는 세상에서 살고있기 .. 2023. 6. 18.
no patch files found patch-package로 커스텀한 라이브러리를 덮어씌울때 나는 오류입니다. 저희는 src 밑에 폴더정리한다고 patches도 옮겼는데 patches는 루트디렉토리 밑에 있어야 합니다. 2023. 6. 16.
Come_On_Web 리팩토링하기 기능완성이 완료 됐을 무렵쯤 리팩토링을 하기 시작했어요! 코드를 어떻게 보기좋게 리팩토링 할까 고민하면서 리팩토링을 시작했는데요 그럼 지금부터 리팩토링 하는 과정을 적어보겠습니다!텍스트 공용함수 모듈화 ~~ 위 함수는 file을 ObjectUrl로 바꿔주는 함수다. 이런식으로 따로 빼서 만들어주고 export 합니다~ ~~ 이런식으로 모듈을 import해서 바로 사용할 수 있습니다! Style theme으로 재설정 프로젝트에 사용한 style들을 모아놓은 theme을 생성한 후 나중에 스타일 변경 시, 편하게 수정할 수 있도록 합니다. 급해서 하나하나 지정한 스타일등을 theme으로 지정해놓은 값으로 수정해줍니다 이렇게 하면 나중에 디자인이 수정되도 지정해놓은 theme값만 바꾸면 알아서 수정되니 편하겠.. 2023. 6. 16.
RTKQuery로 전역으로 이미지 저장하기 전역 상태로 이미지를 전역상태로 저장해야 하는 경우가 생겼습니다! 자 다같이 함께 해결해봅시다!🔥 상황설명 사용자가 업로드한 이미지를 다른 페이지에 전달해야 하는 일이 생겼습니다. 보통의 경우엔 API로 전송하고 페이지 이동을 했겠지만, 아차차! 저희 프로젝트는 데이터를 원기옥처럼 모아서 마지막에 저장하는 로직을 선택했습니다. 그래서 우리는 전역으로 이미지 데이터를 전역으로 저장한 후, 다른 페이지에서 불러와서 써야합니다. 자 가볼까요 🔥( •̀ ω •́ )🔥(휘리릭) 두가지 방법에 대해 알아보도록 하겠습니다! 1. file=> objectUrl =>file 2. file => base64 => file blob객체가 뭘까요? blob은 (Binary Large Object)의 약자로 바이너리 형태로 용.. 2023. 6. 16.
2022 소문난 주니어 해커톤 후기 앨리스 커뮤니티 디스코드에 올라온 주니어들을 위한 해커톤! 해커톤이 너무너무 해보고 싶었던 나는 묻고 따지지도 않고 바로 지원~ 주니어 + IT업계 종사 희망자들을 위한 네트워킹 + 개발 시간을 가질 수 있었다. 주제도 너무 귀여운 얼레벌레 크리스마스였다. 티켓은 정말 순식간에 팔렸다! 운영진 분들이 정말 적극적이였는데, 해커톤 시간이 짧은 걸 대비해 미리 네트워킹을 위한 슬랙 채널도 만들어주셨다. 슬랙채널에서 디자이너, 기획자, 개발자 다양한 직군들이 모여서 서로 소개하는 시간을 가졌는데 다들 뭔가 열정열정(!!)한게 시작 전부터 보여서 너무 기대됐다. 아이스 브레이킹 시간이 너무 재밌었는데, 엄청난 운영진 분들의 에너지로 차가웠던 분위기가 금방 풀렸던 것 같다. 전체적으로 순두부 마냥 순둥순둥한 분위.. 2023. 6. 16.
velog -> tistory로 블로그 이전하는 이유 바꾸는 이유 1. 지저분한 메뉴바 - velog의 글들은 왼쪽에 태그를 기준으로 표시되는데 글이 많아질 수록 너무 지저분해져서 보기 안좋았습니다. 2. 통계가 불편하다. - 글 하나하나를 눌러서 통계를 볼 수는있지만 일일 방문자 수라던가 전체 통계를 볼 수 없어서 아쉬움이 남았습니다. 3. 커스텀기능 - 뭔가 이렇게 저렇게 꾸며보고 싶은데 커스텀 기능이 없어서 아쉬웠습니다. velog의 장점 1. 너무 편한 마크다운 - 글 쓸때 마크다운으로 쓸 수 있는게 너무 편했습니다.. 벌써 생각납니다 2. 깔끔한 인터페이스 - 기본 양식이 깔끔하고 시리즈물로 볼 수 있어서 좋습니다. 이번에 소프트 스킬이란 책을 읽고 개발 블로그를 좀 더 정성껏 해보고 싶다는 마음이 들었습니다. 기존에 쓰던 velog가 있지만 전체.. 2023. 6. 16.
Day10_Effective Typescript 29~31 2022년 12월 28일 글입니다. ITEM 29. 사용할 때는 너그럽게, 생성할 때는 엄격하게 작성하라 요약 : 매개변수는 너그럽게 받고, 반환값은 엄격하게 반환하라 interface CameraOptions { center?: LngLat; zoom?: number; bearing?: number; pitch?: number; } type LngLat = { lng: number; lat: number; } | { lon: number; lat: number; } | [number, number]; type LngLatBounds = {northeast: LngLat, southwest: LngLat} | [LngLat, LngLat] | [number, number, number, number]; .. 2023. 6. 16.

티스토리툴바