안오늘의 devlog

분류 전체보기

• [React] 버튼 기능개발, 리액트 state 변경하기

  🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 12. 10:20

  좋아요 버튼 만들기 span 태그를 누르면 숫자가 1씩 증가하게끔 해야한다. 기존에 JavaScript로 구현할 때, addEventListener나 onclick 메소드를 사용했었다. 리액트에서도 onClick={클릭될때 실행할 JS}를 사용할 수 있다. 주의사항은 click을 적을 때 대문자로 적어야하고, JS를 { 함수() } 괄호로 감싸주어야 한다! 익명함수도 가능하다! { () => {} }이런식으로 적으면 된다. let [따봉, 따봉변경] = useState(0); return ( { 따봉변경(따봉 + 1) }}>👍🏻 {따봉} ) 위와 같이 state변경함수로 변경해야 재렌더링이 잘 일어난다. 스무스~! 단순히 함수 이름을 넣을 때 onClick = { 제목바꾸기() } 하면 함수가 바로 실행..

  Read More
• [React] useState로 데이터바인딩하기

  🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 12. 09:47

  1. 데이터바인딩할때 state에 보관하거나, 변수에 보관하는 방법이 있다 App.js 맨 위에 import React, { useState } from 'react'; 를 추가한다. 리액트에 있는 내장함수를 쓰겠습니다. 라는 뜻이다! useState함수를 사용할 수 있다. 2. 리액트의 데이터 저장공간 state 만드는 법 useState('운동화 추천'); 실행하면 array가 나오는데, array 안에는 a, b가 있다. [a, b] a: 진짜 데이터 b: 운동화 추천 state 정정해주는 함수 [state데이터, state데이터 변경함수] let [글제목, 글제목변경] = useState('운동화 추천'); 정리 state는 1. 변수 대신 쓰는 데이터 저장공간이며, 2. useState()를 이..

  Read More
• null 병합 연산자를 이용해 코드 개선하기, reduce 함수 구현해보기

  🍓𝗪𝗲𝗯/𝖩𝖺𝗏𝖺𝖲𝖼𝗋𝗂𝗉𝗍 2021. 9. 9. 23:30

  콜백함수를 이용하여 나만의 reduce함수 만들기 reduce는 initialValue가 있으면, initialValue를 처음으로 하여, reduce를 해간다. accumulator = initialValue initialValue가 없으면, array의 첫번째 원소값을 처음으로 하여, reduce를 해간다. accumulator = array[0] 이 부분을 코드로 처음 구현했을 때는 아래와 같았다. 삼항연산자나 null 병합 연산자를 사용하라는 코드리뷰를 받고 개선해보았다! null 병합연산자는 처음 알게 되었다. null 병합연산자 ?? ??는 null 병합연산자로, 짧은 문법으로 여러 피연산자 중 값이 확정되어있는 변수를 찾을 수 있다. a ?? b의 경우 a가 null도 아니고 undefine..

  Read More
• Git branch를 활용해 코드리뷰 받기

  👾𝗚𝗶𝘁 2021. 9. 9. 21:31

  1. 저장소 clone 2. git checkout -b 브랜치이름 나의 경우 git checkout -b lucy/sprint1 브랜치 생성후 작업을 진행한다. 3. git add . 작업한 것들을 올린다. 4. git commit -m 커밋내용 5. git push origin lucy/sprint1 원격 lucy/sprint1으로 올린다. 6. 코드리뷰 쓩쓩 받는다. 7. 수정한 것은 다시 커밋날리면서 코드리뷰를 반영한다. 8. 스터디장이 나만의 원격브랜치 lucy에 Merge한다. 나의 경우 lucy라는 브랜치를 만들어서 Merge해주셨다. main으로 작업하지 않고 각각의 브랜치를 따로 두셨다! 원래 협업할 때는 main에다가 했었는데, 코드리뷰였기에 차이점이 있었던 것 같다! 9. git pu..

  Read More
• [React] JSX로 HTML 코딩하기

  🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 2. 12:00

  1. App.js 필요없는 것들 다 지운다. JSX란? JS함수인데, HTML 작성할 수 있다. 평소에 웹 만들 때처럼 HTML을 여기에 코딩하면 된다. React는 HTML 대신 JSX를 사용한다. 2. 태그에 클래스를 설정할 때, className를 사용한다. 일종의 JavaScript이기 때문에, class라는 예약어가 있어서 className으로 설정한다. css로 설정하기 위한 클래스이다. 3. React가 쌩 HTML보다 편한 이유 데이터 바인딩이 쉽다. React, Angular, Vue는 데이터바인딩을 쉽게 하게 도와주는 라이브러리이다. 전통적으로는 아래와 같이 진행하며, HTML에 넣는 식으로 진행한다. let data = '배고프다'; // 서버에서 받아온 데이터 document.get..

  Read More
• [React] create-react-app으로 리액트 프로젝트 생성하기

  🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 2. 11:23

  1. node.js 최신 설치 2. npx create-react-app blog 터미널에 npx create-react-app blog하여 blog라는 이름의 리액트 프로젝트를 생성한다. create-react-app은 리액트가 셋팅이 완료된 환경이다. npx 명령은 node.js가 설치되어 있으면 할 수 있는 명령이다. 3. npm start || yarn start 미리보기 띄워보고 싶으면 npm start를 입력한다. yarn은 1.xx버전을 설치하는 것이 좋다. (인터넷에 yarn1로 검색하면 됨!) yarn이 npm이나 npx보다 더 빠르게 설치해주는 고마운 툴이다! 설치 후에 yarn --version으로 잘 설치되었는지 확인하면 된다. 👍🏻 4. App.js 메인페이지에 들어갈 HTML을 ..

  Read More
• [백준/그래프탐색] 1743번. 음식물피하기(JavaScript)

  🧠𝗔𝗹𝗴𝗼𝗿𝗶𝘁𝗵𝗺/💛 백준 2021. 8. 30. 20:36

  문제설명 https://www.acmicpc.net/problem/1743 2667번 단지번호붙이기와 비슷하게 푸는 DFS문제이다. 문제풀이 const fs = require("fs"); let input = fs.readFileSync("../test.txt").toString().split("\n"); let NMK = input.shift().split(' ').map(el => parseInt(el, 10)); const N = NMK.shift(); const M = NMK.shift(); const K = NMK.shift(); let graph = Array.from(new Array(N), () => new Array(M).fill(0)); for (let i = 0; i < K; i++)..

  Read More
• [회고록] 제3회 이노베이션 해커톤 운영진 활동 후기

  🔥𝗔𝗰𝘁𝗶𝘃𝗶𝘁𝘆/✍🏻𝗗𝗶𝗮𝗿𝘆 2021. 8. 30. 16:45

  약 3달 간의 긴 여정을 마무리하다. 오늘 약 3달간 (2021년 5월 31일부터 8월 27일까지) 열심히 기획하고 준비했던 2박 3일 전남대학교 제3회 이노베이션 해커톤 운영이 끝이 났다. 총 40명의 참가자로 기획자 1, 디자이너 1, 개발자 2명이 한팀이 되어 진행되었다. 나는 에코노베이션 동아리원으로서 해커톤 운영진에 참여할 기회가 있었고, 지금까지 해커톤에 참여해봤는데 운영은 한번도 해보지 않았어서 해커톤 경험을 바탕으로 아쉬웠던 점을 개선한 해커톤을 기획해보는, 졸업전에 해볼 수 있는 값진 경험일 것 같아 운영진에 합류하게 되었다. 해커톤은 기획팀, 운영팀, 홍보및디자인팀으로 나누어서 활동했고, 총 11명으로 각 4, 4, 3명으로 나누어 진행했다. 나는 기획팀을 하고 싶었다. (이렇게나 일이..

  Read More