본문 바로가기
728x90
반응형

TIL147

Hook & Props & State 기초 Hook : 갈고리 클래스 컴포넌트에서만 사용할 수 있었던 상태관리와 라이프 관리 기능을 함수 컴포넌트에서도 사용할 수 있도록 연동해주는 함수 때문에 훅이라는 이름이 붙었고 이런 훅들의 모음을 hooks 라고 한다 hook 등장 배경 리액트 초창기에는 클래스 컴포넌트만 사용했지만 함수 컴포넌트가 선언하기 편하고 직관적이고 메모리 자원을 덜 사용하는 등의 장점이 있어 이를 쓰고자 hook이 등장하게 되었다. hook 의 특징 함수 컴포넌트에서만 사용 가능하다 이름은 반드시 use- 로 시작한다 내장 hook이 존재한다 (useState, useEffect 등) 직접 만들어 사용할 수 있는데 이를 'custom hook' 이라고 한다 hook의 규칙 hook은 함수 컴포넌트 내부와 custom hook 내부.. 2022. 8. 6.
React 정의와 특징 react 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 ui 즉 사용자 인터페이스를 구축하는데 사용할 수 있는 Js 라이브러리 선언형 컴포넌트 기반 절차적/ 선언적 절차적 - 원하는 결과를 만들기 위해서 어떻게 해야하는지에 중점을 두는 방식 : 원하는 결과를 만들기 위한 절차를 프로그래밍하는 방식 ex) 택시 탈 때 : 앞으로 두 블록 하다가 우회전~ 다음 블록까지 직진~ -> 복잡, 생산성 저하 : 자바스크립트로 직접 DOM을 조작하는 방식 ( DOM에서 ul tag를 찾고 li 태그를 만들고 p 태그를 만들고 자식으로 추가하고 등등) 선언적 - 원하는 결과가 무엇인지 중점을 두는 방식 : 원하는 결과가 무엇인지 선언하는 형태로 프로그래밍을 원하는 방식 ex) 택시 탈 때 : 위코드로 가주세.. 2022. 8. 1.
인스타 main page 클론 인스타 클론 과제 드디어 메인창 포스팅! 🔥🔥🔥 메인창 클론은 👆 위 페이지를 만드는 것이 과제였다 댓글 기능은 필수 구현 사항! (저작권 때문에 다 가려놨더니... 잘 안 보여서 당황 😅) 그리고 나는 👆 이렇게 구현했다 댓글 기능까지만 구현함! 👆너무 길고 방대해서... html 기능 구현한 부분만 가져옴 (css는 더 길다) html, css 몽땅 flexbox 써서 css 만들었고 옆 부분은 사이드 박스들은 복붙했다 ㅎ 인스타 특성상 헤더는 픽스 되어야할 거 같아서 무작정 positon : sticky 를 줬는데 생각해 보니 그럴 필요는 없었을 거 같다... 어차피 페이지 안 내리니까 😅 다소 뚝딱이는 페이지지만 나름 만족은 하고 있다. + 😅 문제점 class를 너무 주어서 가독성이 너무 떨어진.. 2022. 8. 1.
react, Node.js 와 NPM react 의 탄생 배경 초기의 웹사이트는 웹 사이트를 보여주고 다른 페이지를 이동해서 정보를 보여주는 기능이 전부였다면 이젠 웹 안에서 모든 것을 할수 있게 되었다. 사용자가 별도의 응용 소프트웨어(어플리케이션)을 설치하지 않아도 웹 브라우저를 통해서 기능들을 이용할 수 있도록 만들어진 서비스를 웹 어플리케이션이라고 한다. 현재 만들어진 웹서비스들은 '웹사이트'라 칭하기 보단 '웹 어플리케이션' 이라는 단어로 표현한다. 초기 웹사이트는 바닐라 자바스크립트로 개발하기에 충분했지만, 웹 개발이 복잡해짐에 따라 한계를 느꼈다. 이에 제이쿼리(라이브러리)가 등장했지만 DOM을 직접 조작해야하는 방식에서 벗어나지 못해 어려움을 느껴 이런 배경을 통해 새로운 라이브러리와 프레임워크의 필요성이 대두되었고 그 결과 .. 2022. 8. 1.
인스타 login page 클론 Day3 인스타 login page 클론 Day3 전 기록들 👇👇👇👇👇👇👇👇 인스타 login page 클론 Day1 https://0119eunji.tistory.com/15 인스타 login page 클론 Day2 https://0119eunji.tistory.com/17 인스타 login page 클론 Day3 🎉 👆 찐 결과물! ID PW 창에 1글자라도 들어가면 활성화된다 (둘 중 하나만이라도 들어가서 활성화되는 건 🙅‍♀️) 멘토님 강의를 듣고 Code Refactoring 겸 내 코드도 손을 봤다. html 은 시맨틱 요소를 좀 더 넣었고 css도 불필요하거나 중복되는 tag들 지우고 width height display text 순서로 맞추었다 html css 는 검색 엔진에 글을 잘 걸리게 하고 .. 2022. 7. 31.
git & github 사용법 git : 프로젝트의 버전관리를 도와주는 시스템 git version 어떤 프로그램을 수정 ,개선하여 완성한 것 이전과 약간씩 다른 변화들을 구분하는 표시 version 관리 이유! 수정할 때마다 파일을 새로 만들면 관리가 힘들다. 하지만 version 별로 관리하면 언제든 이전 버전의 코드로 돌아갈 수 있기 때문에 편리하다. 이력을 남길 목적으로도 쓰인다. github Git을 사용한 프로젝트의 저장소, 버전관리들을 한 프로젝트들을 관리하게 해주는 호스팅 서비스 개발자들의 social Network 하나의 프로젝트를 두고 여러명의 개발자들이 협업할 수 있기 때문에 명령어 git init : git 시작 (해당 폴더 들어간 상태에서 해야 함! 바탕화면에서 할 경우 내 모든 파일이 다 보인다 😂) git .. 2022. 7. 31.
인스타 login page 클론 Day2 (수정본) insta 클론 관련 wrap up 수업 듣고 쓰는 포스팅 🤗 html / css 👉 멘토님의 전체적인 구조 웹 접근성을 높이기 위한 시맨틱 태그를 강조하셨다. 무작정 를 쓰면 가독성면도 떨어진다고..! 가까운 예를 들어서 버튼 만들 때 를 주면 버튼 생성이 가능하다. 하지만 button 자체를 주어야 좀 더 시맨틱하다. 2022. 7. 30.
replit 중간 시험 (js) 위코드 수료 2주차! 🫠 그 동안 html, css, js 기본 문법을 익히고 인스타 클론을 진행했는데 다음 주 react 들어가기 전 간단한 중간고사를 보았다 문제는 총 다섯 문제로, 이를 포스팅하며 다시 정리해보려한다 문제 1 👆내 정답 if 문을 써서 조건문 나머지 값으로 돌렸다. 사실 너무 오랜만에 써서 그런지... num % 0 해놓고 왜 안 되지? 하며 열 냄 😅 그리고 이 식을 간단하게 바꿔보고 싶어서 여러개 시도해봤다 1. if 문에 else문을 빼고 적어도 무방하다. return 꼭 적어줘야 실행된다 2. 삼항자로도 적어보았는데 true false 값에 return 주든 안 주든 실행이 안 되어 놀랐다. return이 아예 함수 전체를 감싸야 실행됐다. 🤔 사실 이 문제 틀렸다 계속 nu.. 2022. 7. 29.
인스타 login page 클론 Day1 이 페이지를 클론 하는 시간을 가졌다 ☺️ weegle 페이지를 한번 만들었던 터라 (weegle 만드는데 이틀 걸림) 나름 재밌게 만들었는데 그래도 꼬박 하루는 걸렸다 과제는 사진으로 주었지만 사실 인스타 클론이기 때문에 개발자도구를 이용해서 레이아웃은 쉽게 잡을 수 있었다 개발자 도구 -> dont show again 밑 이 아이콘을 누르고 페이지에 커서를 대면 적용한 코드가 나온다 하지만 저 코드를 다 가져다 쓸 순 없으니 (게다가 class 이름도 이상하다) 🥹 레이아웃과 가져올 수 있는 아이콘만 가져와 썼다 그리고 👇 구현한 페이지 css는 그럴싸하다 감동 받음... 🥺 과제 미션은 ID창과 PW창에 글자를 입력하면 로그인 버튼을 비활성->활성하는 것이였고 그게 맞게 js 코드를 짰다 👇 코드 .. 2022. 7. 28.
728x90
반응형

티스토리툴바