티스토리

햄버거 맛집

검색하기

블로그 홈

햄버거 맛집

hyem-burger.tistory.com/m

엉망진창 천방지축 좌충우돌 개발자 도전기

구독자: 1

방명록 방문하기

주요 글 목록

🍾 redux 기초를 잊지 않기 위해 쓰는 글 redux를 사용하는 이유는, 1. props 문법에서 벗어나기 위해서 리액트에서 내가 원하는 데이터를 원하는 컴포넌트에 건네주기 위해서는 props문법을 사용하여 한 단계씩 하위로 내려주어야 한다. 컴포넌트가 한두개 ... 적은 숫자면 괜찮겠지만 수십 개, 수백 개, 수천 개(!)가 되어버린다면 어떻게 해야 할까? 상상만 해도 끔찍하다. redux를 비롯한 상태관리 라이브러리들을 사용하면 이 문제를 좀 더 간단하게 해결할 수 있다. 2. 상태관리를 위해서. 상태 관리란 무엇인가... 상태... 즉, state를 관리한다. state가 변경되고 전달되고 어쩌고 저쩌고... 수많은 일들을 한데 모아서 관리할 수 있게 해 준다. 이것도 프로젝트가 커지면 커질수록 관리는 어렵고, 어디서 출발한 문제인지 확인하.. 공감수 0 댓글수 0 2023. 9. 19.
🍾 React + TS 환경에 Supabase 연결하기 스터디에서 추천을 받고 사용해 보자!! 냅다 도전해본 supabase 아직 리액트, 타입스크립트 환경에 익숙치 않고 영어... 의 장벽으로 연결하는 것부터 애를 먹었다 🤪 언젠가 또 연결할 ... 미래를 위해 기록해 둔다. supabase 페이지 new project 생성 로그인을 하고 들어가면 dashboard(대시보드) 페이지로 이동 New project를 클릭 후 프로젝트를 생성한다. 알잘딱깔센으로 작성 후 Create new project !! Table 생성 프로젝트 페이지로 들어가면 여러 가지 메뉴를 확인할 수 있다. 그중에서 Table editor로 들어가서 Table을 생성한다. id, created_at 은 수정하지 않는다. 원하는 칼럼을 추가한다. 잘 보면 Type이나 Default V.. 공감수 0 댓글수 0 2023. 8. 8.
🍾 react에서 Tailwind css 사용하기 Tailwind를 react에서 사용하는 방법에 대해 기록해 둔다. 나중에 또 다른 프로젝트에서도 이 게시물을 유용하게 사용할 수 있기를! Tailwind? Tailwind는 CSS프레임워크로 마치 부트스트랩처럼 사용할 수 있다. CSS 코드를 작성하지 않아도 정해져 있는 스타일 즉 유틸리티들을 class 속성에 추가해 주는 것만으로도 간편하고 쉽게 사용할 수 있다. 단점? 예시 코드를 보면 알 수 있듯 가독성이 좋지 않다는 인상을 준다는 것이 가장 큰 단점. 실제로 개발자들 사이에서 호불호가 갈리는 프레임워크라고 한다. React에서 사용하기 🔗공식문서 Taiwind 설치 초기화 및 tailwind config 파일 생성 tailwind config 파일 설정 config 파일은 기본 스타일, 플러그인.. 공감수 0 댓글수 0 2023. 7. 25.
🍾 React의 상태관리 툴 맛보기! : redux, recoil, react query 상태관리 툴을 사용하는 이유? React로 웹 애플리케이션을 만들 때 개발자는 수많은 컴포넌트들을 만들어내고, 컴포넌트들은 부모-자식 관계가 생긴다. 이때 내가 원하는 데이터를 내가 원하는 컴포넌트까지 보내주기 위해서는 부모->자식->자식->자식... 혹은 자식->부모->부모->... 식으로 수~많은 부모 혹은 자식 컴포넌트를 연결시켜주지 않으면 안 되는 상황을 마주하게 된다. React는 props를 통해 데이터를 연결시켜주는데 앱이 복잡하고 커질수록 이게 도대체 어디서부터 시작된 데이터인지 알기 힘들어진다. 그때 사용하는 게 바로 상태관리 툴이다. 끝없이 이어진 컴포넌트들을 연결, 연결, 연결... 하는 방법이 아니라 내가 원하는 데이터를 내가 원하는 컴포넌트에서 사용할 수 있게 해 준다. 상태관리 .. 공감수 0 댓글수 0 2023. 7. 3.
🍾 TypeScript ! 타입스크립트 기초 뿌수기 🕺 대망의 타입스크립트주차가 시작됐다. 타입스크립트 강의를 학습한 내용을 기록해 둔다. TypeScript 왜 쓰는 걸까? 컴퓨터 언어는 Javascript 같은 동적언어(런타임에 타입이 결정되거나 오류를 발견한다)와 Java, TS와 같은 정적언어(컴파일 타임에 타입이 결정되거나 오류를 발견한다)로 나뉜다. TS는 정적인 언어로 오류를 잡아내기 쉽다는 장점을 가진다. 또한 타입을 미리 결정하기 때문에 더욱 명시적인 코드를 작성하게 되고 후에 본인 혹은 다른 개발자가 확인하기에 용이한 코드를 작성하게 된다.\ function add(num1:number, num2:number) { ... } 위 코드는 기본적인 예시이다. 만약 type을 설정하지 않으면 any type으로 설정된다. TS의 기본 사용법 ✍️.. 공감수 0 댓글수 0 2023. 6. 20.
🍾 React : Router, Navigate, build? 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.. 공감수 0 댓글수 0 2023. 6. 10.
🍾 React 학습 기록 - 스타일링 ✨ Sass? Syntactically Awesome Style Sheets. ✍️ 복잡한 작업을 쉽게, 코드 재활용성 높이고, 코드의 가독성을 높여준다! ✍️ 두 가지 확장자 .sass / .scss 를 사용한다. (.scss 문법이 더 많이 사용된다.) Sass -> CSS Sass를 CSS 파일로 변환하는 라이브러리 node-sass를 설치한다. npm install node-sass 변수 선언 $변수명: 값; 마찬가지로 $변수명을 사용하여 적용할 수 있다. lighten() / darken() 색상을 더 밝게 / 더 어둡게 만드는 유틸함수. lighten(색상, 숫자%) darken(색상, 숫자%) 가상선택자 CSS에서는 밖으로 빠져나와 새로 설정해주어야 하지만 Scss 문법에서는 그렇지 않다. ... 공감수 0 댓글수 0 2023. 5. 30.
🍾 React 기초 학습 기록 ~세팅부터 서버까지~ 코딩앙마님의 리액트 강의, 리액트 공식문서로 리액트 기초 내용을 학습한 내용을 기록한다. ✨ 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" -> 개발.. 공감수 0 댓글수 0 2023. 5. 23.
🍾 Javascript DOM, Event 학습 기록 서론 대망의 4주 차(1) 과제! 이번주에는 DOM, EVENT에 대해 강의로 학습하고 오 이런 것도 있었구나 / 있었지 싶은 것들을 기록했다. 역시 자바스크립트는 알면 알수록 재미있다 🤓 * DOM Document Object Model (문서 객체 모델) html 문서의 각 요소들을 트리로 표현해 준다. 자바스크립트를 이용해 생성, 수정, 삭제 등이 가능하다. 트리에서 하나의 개체를 Node라고 부른다. 모든 html 태그는 객체이고, 자바스크립트를 이용하여 객체에 접근할 수 있다! * .querySelectorAll() / getElementsByTagName() not Array! node list! 이터러블 객체이기 때문에 for of를 사용할 수 있지만, array가 아니기 때문에 array .. 공감수 0 댓글수 0 2023. 5. 9.
📝 JavaScript 기초 강좌 기록 (+) 📝 서론 3주 차(2)의 과제! 자바스크립트 비교적 짧은! 기초 강의를 들으며 기초부분을 다시 훑는 작업이다. 강의를 들으며 잊기 쉬운 것(하지만 중요한 것), 새롭게 알게된 것 등을 기록했다. 약 2주동안 자바스크립트 기초 공부를 하면서 this, callback, promise 가 어려웠기 때문에... 개인적으로도 공부를 하고 있다. 먼지가 쌓인 나의 유데미 강의를 ... 드디어 들을 때야 ~ ! 👉 함수 (Function) 기본적인 주의사항 1. 한 번에 한 작업에 집중하도록 만든다. (하나의 함수에 많은 기능을 집어넣으려고 하지 말자.) 2. 읽기 쉽고 어떤 동작인지 알기 쉽게 네이밍 한다. 👉 함수에 매개변수가 입력되지 않았을 때 let 변수 = 매개변수(이때 false 이면) || “defa.. 공감수 1 댓글수 0 2023. 4. 29.
📝 JavaScript 기초 강좌 기록 (하) 서론 (하)편은 10강부터 18번째까지의 강의를 듣고 새롭게 알거나 잘못 알고 있었던 것 등 정보들을 기록했다. 📝 HTTP 브라우저 위에서 동작하고 있는 웹사이트, 웹 어플래케이션 같은 Client 들이 아땋게 Server 와 통신할 수있는지를 정의한 것. 어떻게 이 Hyper Text 를 서로 주고받을 수 있는지를 규약한 프로토콜의 한 종류 이다. HTTP는 클라이언트가 서버에게 데이터를 요청(request)할 수 있고 Server는 클라이언트가 요청한 것에 따라 그에 맞는 응답(response)을 보내준다. Hyper Text 는 링크 뿐만아니라 웹사이트에서 쓰여지고 있는 문서, 이미지파일들을 모두 아우르는 의미로 쓰임. 📝 AJAX Asynchronous JavaScript And XML 웹페이지.. 공감수 1 댓글수 2 2023. 4. 25.
📝 JavaScript 기초 강좌 기록 (상) 서론 3주 차(1)가 밝았다! ☀️ (상) 편은 1강부터 9강까지의 강의를 듣고 새롭게 알거나 잘못 알고 있었던 것 등 정보들을 기록했다. 자바스크립트의 역사 자바스크립트의 역사는 ECMAScript 문서의 등장부터 흥미로워진다. (ECMAScript : 언어의 문법적인 사항들을 정리해 둔 문서) 1997년 초판을 시작으로 1년마다 새 판이 출판되다가 2000년도 당시 점유율 95%를 차지하던 IE, 마이크로소프트사가 표준안 참가를 거부하게 되면서 표준안 작업이 더뎌지게 된다. 그러던 와중 2004년 모질라 사에서 Firefox 브라우저를 출시. 마이크로소프트 - 모질라 - 넷스케이프 3사가 표준안을 두고 엎치락뒤치락하게 된다. 그 사이 개발자들은 ... 표준안이 정해지지 않았으니 한 프로그램을 만들 때.. 공감수 0 댓글수 0 2023. 4. 25.
🍾 HTML, CSS 복습 (2) 콘텐츠 모델, 시멘틱 마크업 ~이어서~ (1)에 이어서 콘텐츠모델, 시멘틱 마크업에 대해 학습한 내용을 기록한다. 콘텐츠 모델 ? 요소들이 가지고 있는 성격에 따라서 종류를 정의하는 규칙들이 존재한다. 요소는 이 규칙들을 준수해야 한다. 그리고, 반드시 HTML5 권고안을 따라야 한다. 규칙들을 기준으로 비슷한 성격의 요소들끼리 그룹화한 것을 콘텐츠 모델이라고 한다. 각각의 요소들은 하나 혹은 여러 개의 콘텐츠 모델에 속하게 된다. Metadata 콘텐츠의 스타일, 동작을 설정. 다른 문서와의 관계 등 정보를 포함하는 요소들이 포함되어 있다. 메타 태그, 타이틀 태그, 스타일 태그, 링크 태그 등 ... 안에 들어간다는 특징을 가진다. “ base, link, meta, noscript, script, style, title “ F.. 공감수 1 댓글수 0 2023. 4. 10.
🍾 HTML, CSS 복습 (1) 서론 스터디 2주 차(1)를 맞이했다. 이번 주차에서는 HTML, CSS 를 공부한다. 예전에 강의로 HTML, CSS 를 공부한 적이 있는데 그건 👉 여기 이번은 내가 머리로는 알고 있고 실제로 쓰기도 하지만! 말로 표현을 잘 못하는 것들 혹은 한 번 더 짚고 넘어갈 것들을 간단하게 정리했다. HTML? Hyper Text Markup Language Hyper Text 👉 웹 페이지 특정 부분과 연결할 수 있는 기능을 가진 텍스트 (= 링크) Markup Language 👉 정보를 구조적, 계층적으로 표현 가능한 프로그래밍 언어 정보를 공유한다는 목적을 가졌다. 태그, 요소 내용 내용을 포함한 태그 전체를요소 Element라고 한다. HTML 은 태그들의 집합이다. 브라우저가 html 파일 안의 태그.. 공감수 0 댓글수 0 2023. 4. 10.
Git, Github 기초 뽀개기 👊 (2) 서론 스터디 1주 차(2)를 맞이했다. 1주 차(1)에서는 init, add, commit, push ... github 연동까지 알아봤었다. 이번에는 pull, branch, switch, merge, reset ... 등등에 대해 공부했다. 읽어도 읽어도 뭔 소리야 .. 싶은 경우가 많았기 때문에 아래 사이트를 이용하여 실습했다! Git 공식문서 Git / GitHub 안내서 브랜치 연습하기! 역시 실제로 해봐야 이해도 되고 늘기도 하는구나. 그래도 역시 협업을 해보며 부딪혀 보고 싶다는 생각이 들었다. 실습, 공부하며 새롭게 알게된 (이해한) 지식들을 까먹지 않기 위해!! 적어둔다. branch ? 나무에서 여러 갈래로 나누어지는 가지들을 떠올리면 이해가 쉽다. 여러 사람이 동시에 여러 작업을 진행.. 공감수 0 댓글수 0 2023. 4. 1.
Git, Github 기초 뽀개기 👊 🍾 서론 그동안 깃허브를 사용하지 않은 건 아니지만, 확실히 잘 모르고 사용해 왔다. add, push, commit ... 등등등등 여러 용어를 단 하나도 제대로 알지 않은 채 '레포지토리 복제'라는 기능으로 사용해 왔다. 공부해야지!! 하면서도 다른 게 바쁘다는 핑계로 미루기를 몇 달째... 드디어 했다. 깃, 깃허브 기초 공부! Git ? 버전을 편리하게 관리할 수 있도록 도와준다. => 즉, 작업하는 파일들을 원하는 순간으로 다시 돌아갈 수 있게 해 준다. workflow 0. git 초기화 (+ 삭제) 프로젝트의 시작에는 언제나 git을 초기화해주어야 한다. git init + git을 삭제해야 할 때는 git 이 설정되어 있는 디렉토리에서 아래 명령어, 옵션을 사용한다. rm -rf .git .. 공감수 0 댓글수 0 2023. 3. 26.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.