분류 전체보기124

• 

  Lifecycle과 useEffect Lifecycle과 useEffect가 뭔데 컴포넌트에도 Lifecycle이라는 개념이 있다. 컴포넌트는 1. 생성이 될 수도 있고 (전문용어로 mount) 2. 재렌더링이 될 수도 있고 (전문용어로 update) 3. 삭제가 될 수도 있다. (전문용어로 unmount) 이걸 왜 배우냐면 생성될 때 실행되는 코드 재렌더링될 때 실행되는 코드 삭제될 때 실행되는 코드 를 설정할 수 있기 때문이다. (이런 코드를 Lifecycle hook이라고 한다.) 또한 useEffect는 컴포넌트안의 html를 렌더링 이후에 동작한다. 그래서 화면에 빨리 뜨게 설정도 가능하다. 그니깐 useEffect는 나중에 실행되도 괜찮은 쓸데없는 것들을 넣어놓는 역할도 한다. // 겁나 느리게 html 렌더링된다. functio.. 개발/React 2023. 8. 18.

• 

  styled-components 라이브러리 설치 및 간단한 사용법 styled-components 왜 쓰는가 컴포넌트가 많아질수록 아래의 문제점이 생긴다. 1. class 만들어놓은걸 까먹고 중복해서 또 만들거나 2. 갑자기 다른 이상한 컴포넌트에 원하지않는 스타일이 적용되거나 3. CSS 파일이 너무 길어져서 수정이 어렵거나 설치법 터미널 열어서 npm install styled-components 쓰고싶은 파일에 import styled from 'styled-components' 끗! 사용법 컴포넌트를 만들때 스타일을 미리 주입해서 만들 수 있다. 를 만들고 싶으면 let 변수명 = styled.div`css` 를 만들고 싶으면 let 변수명 = styled.button`css` import styled from 'styled-components'; let Box.. 개발/React 2023. 8. 18.

• 

  react router 사용법 0. react router를 사용하는 이유 html css js는 html을 하나 더 만들면 그게 새로운 하나의 페이지가 되는데 react는 html파일을 하나만 사용한다. 그래서 react는 다른 페이지를 요청하면 내부에 있는 를 갈아치워서 보여주면 된다. -> 이걸 코드로 짜서 해도되지만 귀찮으니깐 react-router-dom이라는 외부 라이브러리를 설치해서 구현하는게 일반적이다. 1. 설치법 react-router-dom 홈페이지를 보면되지만 그냥 터미널에서 아래의 코드를 적어도된다. npm install react-router-dom@6 그 다음 index.js에 가서 BrowseRouter를 import해와서 App을 감싸면 된다. //index.js import { BrowserRouter.. 개발/React 2023. 8. 16.

• 

  git 커밋컨벤션 설정법 글을 작성하는 이유 커밋을 하면서 협업을 하게 된다면 커밋을 제대로 해야되다는 필요성을 느끼게 되어서 이리저리 알아보았다. [협업] 협업을 위한 git 커밋컨벤션 설정하기 들어가며 어떻게 하면 협업을 더 잘할 수 있을까 고민하며 협업에 필요한 내용들을 계속 정리하고 있습니다. 앞으로 저와 함께 협업하는 팀원분들에게 도움이 되고 싶습니다. 이 글은 Udacity Git C overcome-the-limits.tistory.com 이블로그를 참고해서 작성하였다. 커밋메시지의 구조 구조는 크게 type, subject, body, footer로 구분하여 작성한다. type : 어떤 의도로 커밋했는지 작성한다. subject : 코드 변경 사항에 대한 짧은 요약을 작성한다. body : 어떻게 했는지가 아니라,.. 개발/github 2023. 8. 16.

• 

  간단한 typescript 사용법 type 지정 더보기 타입으로 쓸 수 있는 것들 string, number, boolean, bigint, null, undefined,[], {} string, number, boolean type 지정 let 문자: string = "kim"; let 숫자: number = 50; let 참거짓: boolean = true; // 아래와 같이 코드를 적을 시 에러메세지를 띄워준다. let 이름 :string = 'kim'; 이름 = 123; TS -> JS 자동 변경 터미널에 아래의 코드를 입력하면 TS -> JS로 자동으로 변환해준다. tsc -w 그다음에 html에 아래 코드를 추가한다. array, object type 지정 array와 object 자료는 이렇게 타입지정이 가능하다. let 배.. 개발/TypeScript 2023. 8. 15.

• 

  타입스크립트 설치법 일반 HTML CSS JS 웹개발시 1. Nodejs 최신버전, VScode 에디터를 설치한다. 2. VScode 에디터에서 터미널을 오픈합니다. 상단메뉴 Terminal - New Terminal 로 들어가거나 또는 ctrl + ` 를 누르면 된다. 3. 터미널에서 아래의 코드를 입력한다. npm install -g typescript 더보기 에러시 (1) nodejs 최신버전으로 업그레이드 (2) 윈도우인데 허가되지 않은 script 실행불가 어쩌구 에러가 뜨면 시작 - 검색 - powershell - 우클릭해서 관리자 권한으로 실행한 다음 Set-ExecutionPolicy Unrestricted 입력하셈 그리고 y 선택하면 된다. (3) 맥북인데 보안에러 어쩌구가 뜨면 sudo npm instal.. 개발/TypeScript 2023. 8. 14.

• 

  타입스크립트이란 무엇인가. 타입스크립트의 중요성 웹 개발자 채용공고를 보면 타입스크립트가 항상 보인다. 그만큼 중요하다는 것을 간접적으로 알 수 있다. 아래는 가장 인기있는 언어를 보여준다. TypeScript는 7위로 인기가 없어보이지만 비교적 최근에 나온언어이고 점차 사용자들이 늘어난다는 점에서 타입스크립트의 사용 빈도는 증가하는 추세이고 개발자들이 선호하는 언어라는 것을 알 수 있다. 타입스크립트를 왜 쓰는가 타입스크립트는 자바스크립트의 대용이라고 생각할 수 있다. 자바스크립트의 타입부분을 업그레이드한 것이 타입스크립트이다. 더보기 타입이란? - 기본형 타입(단일 타입)으로는 7가지(string, number, boolean, null, undefined, symbol, bigint)와 유니온 타입(다중 타입, =교집합)과 .. 개발/TypeScript 2023. 8. 14.

• 

  React 기초지식들 React를 사용하는 이유 1. Single Page Application 페이지 전환이 새로고침없이 부드럽게 동작한다. html 파일을 1개만 쓴다. 다른 페이지를 보여주고 싶을 때 html 부분만 샥 갈아치워서 보여준다. 2. html 관리 html을 함수, array, object 이런 곳에 보관하고 재사용할 수 있다. 3. React Native 모바일 앱개발 쌉가능 4. 회사에서 요구해서 취직은 해야지? React 설치 1. nodsjs를 설치한다. 2. 폴더를 만든다. 3. 우클릭 - 서비스 - 폴더에서 새로운 터미널 열기 4. 터미널에 npx create-react-app {폴더명} 적기 5. vscord로 폴더를 연다. 끗! React에서 사용하는 JSX 문법 3개 react에서는 htm.. 개발/React 2023. 8. 14.

• 

  Todo list 만들기 todolist의 기본적인 기능을 만들어 보고자 한다. 로컬스토리지를 통해서 새로고침을 해도 todolist들이 없어지지 않고 삭제 버튼이 누르면 로컬스토리지에서 정보가 사라지는 정보만 만들거다. HTML html은 이런식으로 구성했다. input을 통해 todo를 만들도록 하였고 ul태그를 만들어 놓고 는 자바스크립트로 생성하도록 하였다. JS 아래는 전체코드이다. 이해안된다고 겁 먹지말고 천천히 뜯어보자. const toDoForm = document.getElementById("todo-form"); const toDoInput = document.querySelector("#todo-form input"); const toDoList = document.getElementById("todo-lis.. 개발/개발일지 2023. 7. 18.

• 

  랜덤 명언 만들기 명언 준비 명언을 준비해주고 배열안에 객체 형태로 만들어준다. const quotes = [ { quote: "삶이 있는 한 희망은 있다", author: "키케로", }, { quote: "산다는것 그것은 치열한 전투이다.", author: "로망로랑", }, { quote: "하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다.", author: "사무엘존슨", }, { quote: "언제나 현재에 집중할수 있다면 행복할것이다.", author: "파울로 코엘료", }, { quote: "진정으로 웃으려면 고통을 참아야하며 , 나아가 고통을 즐길 줄 알아야 해", author: "찰리 채플린", }, { quote: "직업에서 행복을 찾아라. 아니면 행복이 무엇인지 절대 모를 것이다", au.. 개발/개발일지 2023. 7. 15.