햄버거 맛집 햄버거 맛집

SOJU 2기 🍾

• 🍾 redux 기초를 잊지 않기 위해 쓰는 글

  SOJU 2기 🍾 2023. 9. 19. 23:22

  redux를 사용하는 이유는, 1. props 문법에서 벗어나기 위해서 리액트에서 내가 원하는 데이터를 원하는 컴포넌트에 건네주기 위해서는 props문법을 사용하여 한 단계씩 하위로 내려주어야 한다. 컴포넌트가 한두개 ... 적은 숫자면 괜찮겠지만 수십 개, 수백 개, 수천 개(!)가 되어버린다면 어떻게 해야 할까? 상상만 해도 끔찍하다. redux를 비롯한 상태관리 라이브러리들을 사용하면 이 문제를 좀 더 간단하게 해결할 수 있다. 2. 상태관리를 위해서. 상태 관리란 무엇인가... 상태... 즉, state를 관리한다. state가 변경되고 전달되고 어쩌고 저쩌고... 수많은 일들을 한데 모아서 관리할 수 있게 해 준다. 이것도 프로젝트가 커지면 커질수록 관리는 어렵고, 어디서 출발한 문제인지 확인하..

  Read More
• 🍾 React + TS 환경에 Supabase 연결하기

  SOJU 2기 🍾 2023. 8. 8. 21:53

  스터디에서 추천을 받고 사용해 보자!! 냅다 도전해본 supabase 아직 리액트, 타입스크립트 환경에 익숙치 않고 영어... 의 장벽으로 연결하는 것부터 애를 먹었다 🤪 언젠가 또 연결할 ... 미래를 위해 기록해 둔다. supabase 페이지 new project 생성 로그인을 하고 들어가면 dashboard(대시보드) 페이지로 이동 New project를 클릭 후 프로젝트를 생성한다. 알잘딱깔센으로 작성 후 Create new project !! Table 생성 프로젝트 페이지로 들어가면 여러 가지 메뉴를 확인할 수 있다. 그중에서 Table editor로 들어가서 Table을 생성한다. id, created_at 은 수정하지 않는다. 원하는 칼럼을 추가한다. 잘 보면 Type이나 Default V..

  Read More
• 🍾 react에서 Tailwind css 사용하기

  SOJU 2기 🍾 2023. 7. 25. 21:50

  Tailwind를 react에서 사용하는 방법에 대해 기록해 둔다. 나중에 또 다른 프로젝트에서도 이 게시물을 유용하게 사용할 수 있기를! Tailwind? Tailwind는 CSS프레임워크로 마치 부트스트랩처럼 사용할 수 있다. CSS 코드를 작성하지 않아도 정해져 있는 스타일 즉 유틸리티들을 class 속성에 추가해 주는 것만으로도 간편하고 쉽게 사용할 수 있다. 단점? 예시 코드를 보면 알 수 있듯 가독성이 좋지 않다는 인상을 준다는 것이 가장 큰 단점. 실제로 개발자들 사이에서 호불호가 갈리는 프레임워크라고 한다. React에서 사용하기 🔗공식문서 Taiwind 설치 초기화 및 tailwind config 파일 생성 tailwind config 파일 설정 config 파일은 기본 스타일, 플러그인..

  Read More
• 🍾 React의 상태관리 툴 맛보기! : redux, recoil, react query

  SOJU 2기 🍾 2023. 7. 3. 16:26

  상태관리 툴을 사용하는 이유? React로 웹 애플리케이션을 만들 때 개발자는 수많은 컴포넌트들을 만들어내고, 컴포넌트들은 부모-자식 관계가 생긴다. 이때 내가 원하는 데이터를 내가 원하는 컴포넌트까지 보내주기 위해서는 부모->자식->자식->자식... 혹은 자식->부모->부모->... 식으로 수~많은 부모 혹은 자식 컴포넌트를 연결시켜주지 않으면 안 되는 상황을 마주하게 된다. React는 props를 통해 데이터를 연결시켜주는데 앱이 복잡하고 커질수록 이게 도대체 어디서부터 시작된 데이터인지 알기 힘들어진다. 그때 사용하는 게 바로 상태관리 툴이다. 끝없이 이어진 컴포넌트들을 연결, 연결, 연결... 하는 방법이 아니라 내가 원하는 데이터를 내가 원하는 컴포넌트에서 사용할 수 있게 해 준다. 상태관리 ..

  Read More
• 🍾 TypeScript ! 타입스크립트 기초 뿌수기 🕺

  SOJU 2기 🍾 2023. 6. 20. 20:06

  대망의 타입스크립트주차가 시작됐다. 타입스크립트 강의를 학습한 내용을 기록해 둔다. TypeScript 왜 쓰는 걸까? 컴퓨터 언어는 Javascript 같은 동적언어(런타임에 타입이 결정되거나 오류를 발견한다)와 Java, TS와 같은 정적언어(컴파일 타임에 타입이 결정되거나 오류를 발견한다)로 나뉜다. TS는 정적인 언어로 오류를 잡아내기 쉽다는 장점을 가진다. 또한 타입을 미리 결정하기 때문에 더욱 명시적인 코드를 작성하게 되고 후에 본인 혹은 다른 개발자가 확인하기에 용이한 코드를 작성하게 된다.\ function add(num1:number, num2:number) { ... } 위 코드는 기본적인 예시이다. 만약 type을 설정하지 않으면 any type으로 설정된다. TS의 기본 사용법 ✍️..

  Read More
• 🍾 React : Router, Navigate, build?

  SOJU 2기 🍾 2023. 6. 10. 18:40

  Router 🧑‍💻 react router dom ✍️ 페이지 전환에 이용하는 라이브러리이다. (내가 원하는 경로로 보낸다!) ✍️ 예제 (v6 기준) ✍️ index : index page를 뜻한다. 말그대로 Web app 가장 먼저 나오는 페이지. ✍️ path : path="" 안의 값이 / 다음의 주소가 된다. 값을 넣고 이동했을 때 해당 element가 반환된다. ✍️ :postId : :다음에 오는 값의 경우, 동적으로 변하는 파라미터를 뜻한다. useParams Hook을 사용한다. Navigate 🧑‍💻 react router dom 에서 제공하는 Hook인 useNavigate() ✍️ 페이지 이동하는 데에 사용한다. ✍️ 예제 function SampleNavi(props) { cons..

  Read More
• 🍾 React 학습 기록 - 스타일링 ✨

  SOJU 2기 🍾 2023. 5. 30. 22:04

  Sass? Syntactically Awesome Style Sheets. ✍️ 복잡한 작업을 쉽게, 코드 재활용성 높이고, 코드의 가독성을 높여준다! ✍️ 두 가지 확장자 .sass / .scss 를 사용한다. (.scss 문법이 더 많이 사용된다.) Sass -> CSS Sass를 CSS 파일로 변환하는 라이브러리 node-sass를 설치한다. npm install node-sass 변수 선언 $변수명: 값; 마찬가지로 $변수명을 사용하여 적용할 수 있다. lighten() / darken() 색상을 더 밝게 / 더 어둡게 만드는 유틸함수. lighten(색상, 숫자%) darken(색상, 숫자%) 가상선택자 CSS에서는 밖으로 빠져나와 새로 설정해주어야 하지만 Scss 문법에서는 그렇지 않다. ...

  Read More
• 🍾 React 기초 학습 기록 ~세팅부터 서버까지~

  SOJU 2기 🍾 2023. 5. 23. 20:15

  코딩앙마님의 리액트 강의, 리액트 공식문서로 리액트 기초 내용을 학습한 내용을 기록한다. ✨ React 프로젝트 세팅하기 ~사전준비~ 1. node.js 설치 2. vs code 설치 npx create-react-app 프로젝트명 ⚠️ npm 이 아니라 npx라는 점을 주의하자. 🧑‍💻 생성된 node_modules 폴더와 그 안의 파일은 수가 너무 많고, 크기도 크므로 github에 업로드하지 않는다. 대신 package.json 을 업로드한다. (이 파일을 보고 필요한 파일을 다운로드한다!) 🕺 프로젝트 시작하기 npm start HMR (Hot Module Replacement) 페이지의 리로드 없이 변경사항을 바로 적용해 준다. 📝 start : "react-scripts start" -> 개발..

  Read More