본문 바로가기
  • 바쁜 일상 속 작은 기억

React7

[Next.JS] Next JS 설치하기 React로만 개발하다가 새로운 방식을 좀 알아둬야 할 것 같아서 NextJs를 좀 보기로 했다. 우선 React와 Next의 차이점, 장단점에 대해서는 직접 사용해보고 비교해보려고 한다. 우선 프로젝트 생성부터 해보자. 역시 프로젝트 생성에는 공식문서만한게 없지. https://nextjs.org/docs/getting-started/installation Getting Started: Installation | Next.js We recommend creating a new Next.js app using create-next-app, which sets up everything automatically for you. To create a project, run: Next.js now ships w.. 2023. 5. 22.
[React] safari IOS 낮은 버전에서 flex, height 값 안먹힘 리액트로 웹 반응형 개발하다보면, 크롬, 사파리 등 크로스브라우징을 항상 신경써야한다는것은 다들 알고있을 것이다. 그런데, 이 애플이 참 하루가 멀다하고 버전을 업데이트 시키니 IOS 버전 14에서 무시되는것들이 종종 생기는 것 같다. 현재는 버전 16라인이니...참... 이번 이슈는 모바일 채팅화면에서 발생했다. 채팅 하나 자체가 컴포넌트이며, 프로필이미지, 아이디, 내용 전체를 감싸는 container에 display:flex 로 배치한 것이다. 문제가 발생한 IOS 14 버전 핸드폰을 노트북에 연결해서 관리자 도구로 코드 살펴보며 여러가지 원인을 살펴보았다. 1. margin-top/ margin-bottom으로 잡았던 것이 안먹힌 것인가? 간혹, 이미지 아이콘이나 동일한 것을 나란히 붙여놓을 때 .. 2023. 3. 2.
[React/React Native] Mac 개발환경 세팅하기 시리즈 (2) - Node, yarn, jdk, Watchman 설치하기 지난 포스트에서 Mac 개발환경 세팅에 제일 기본인 Homebrew를 설치해보았다. 이제는 그것을 이용하여 Node, Yarn, jdk를 설치해보겠다. 아직 못봤다?? 아래 링크로 이동하기. https://hellomingure.tistory.com/manage/newpost/25?type=post&returnURL=https%3A%2F%2Fhellomingure.tistory.com%2F25 hellomingure.tistory.com 1. NodeJs 설치하기 ( ver. 16) node 버전 검색하기 brew search node 결과 값 ==> Formulae libbitcoin-node node-build node@14 nodeenv linode-cli node-sass node@16 ✔ nod.. 2022. 7. 30.
[React/React Native] Mac 개발환경 세팅하기 시리즈 (1) - Homebrew 설치하기 회사에서 React Native 개발때문에 환경 세팅하다가 mac북 처음쓰는 나님 노트북 3대정도 날려먹어서 3번 다시 세팅하면서 싹 정리한 자료 공유 갑니다. 1. Homebrew 설치하기 Homebrew는 개발에 필요한 여러가지 패키지관리자를 설치해주는 툴이다. Node, Yarn, jdk 등등 이런거 설치에 필요! : Homebrew 바로가기 Homebrew The Missing Package Manager for macOS (or Linux). brew.sh 1. 아래 코드 Terminal에 붙여넣기 2. 노트북 비밀번호 입력 3. 이부분 보이면 Enter ㄱ 4. 설치완료 확인하기 brew -v 그런데 brew -v 를 해도 내 Homebrew 버전이 나오지 않고 brew를 찾을 수 없다????.. 2022. 7. 30.
[Javascript/React/ReactNative] 딕셔너리 데이터 뽑아오기 구조 복잡한 딕셔너리에서 데이터 뽑아오기 예를들어: 이런 데이터를 가진 dict이 있다고 치자 { {a: {value: 16, type:'dropdown'}, {b: {value: asd, type:'dropdown'}, {c: {value: ddd, type:'dropdown'}, {d: {value: fff, type:'dropdown'}, } 나는 a의 value 값을 뽑아오고싶은데 어떠케 하냐 for ( const key in dict){ console.log(dict[key]) console.log(key, dict[key]) console.log(key, dict[key].value) } 간단. 끝! 2022. 7. 13.
[Git] git push 취소하기 메인페이지에 들어갈 영상이 있어서 작업 후 깃헙에 올리는데 생긴 오류 this exceeds GitHub's file size limit of 100.00MB 영상 S3에 올려서 작업했어야 했는데, 내정신좀보소,,, 결국 위 에러로 계속 영상파일 삭제하고 commit / push 해도 똑같은 에러때문에 제대로 push가 안되는 상황이었음. git git commit 취소하기 // 1. commit 한 히스토리 보기 git log // 2. 취소하고싶은 커밋주소 reset 하기 git reset COMMIT_NAME 2022. 4. 26.
[컨벤션 세팅] React TypeScript Eslint+Prettier 세팅하기 나 혼자 개발할때는 내가 원하는대로 작업하면 되지만, 회사나 프로젝트 협업 할 때에는 정갈한 코드를 위해 컨벤션을 정해서 작업하는게 좋다. 그 작업을 도와주는 툴 중 하나가 ESLint다. 주로 사용하는 Airbnb ESLint 설치를 해보도록 하자. ESLint? ES는 EcmaScript 즉, 자바스크립트를 의미하고, Lint는 '보푸라기'라는 뜻으로 보푸라기가 많으면 옷이 보기 좋지 않은 것 처럼 코드에서도 이런 보푸라기가 많으면 코드의 가독성이 떨어지고 유지보수하기도 번거로운 경우가 생긴다. 예를들어 들여쓰기를 맞추지 않았다고나, 선언한 변수를 사용하지 않은 경우 등,,, 이런 보푸라기를 제거하는 것, 코드의 오류나 버그, 스타일 따위를 점검하는 것을 Lint 혹은 Linter라고 부른다. ESL.. 2022. 3. 28.

티스토리툴바