프론트엔드✏️/코드캠프

React - Hooks : prev state

prev state setState()와 prevState()는 리액트에서 컴포넌트의 상태를 변경하는데 사용되는 Hooks다. setState는 이벤트나 서버 응답에 대하여 UI를 다시 업데이트 하기 위해서 사용되곤 한다. prevState는 컴포넌트의 이전 상태를 기반으로 한다. // Next.js는 react import를 생략한다. export default function CounterPage() { const [count, setCount] = useState(0); const onClickButton = () => { setCount(count + 1); }; return ( {count} ) } count라는 state를 만들고 카운터를 올릴 수 있는 함수를 만든다. 버튼을 누르면 화면의 {..

React - event

이벤트(event) 사용자가 웹에서 DOM 요소들과 상호 작용하는 것 리액트에선 카멜 표기법(onclick->onClick)으로 작성한다. DOM 요소에만 이벤트를 설정할 수 있다. - div, button, form, span 등(직접 만든 컴포넌트엔 설정할 수 없다. props 전달은 가능) 이벤트 종류 Keyboard, Touch, Focus, Mouse, Image, Animation, Transition, Form, Composition 등 이벤트를 다루는 함수 이름은 handle____ 로 많이 짓는다. 객체 안에서 key를 [ ]로 감싸면 그 안의 레퍼런스가 가리키는 실제 값이 key 값으로 사용된다. const name = '찐빵'; const object = { [name]: 'value..

CSS 이름 짓는 규칙

CSS 이름 짓는 규칙 App.css 를 보면 '컴포넌트 이름 - 클래스 형태'로 지어진 것을 볼 수 있다. 이는 클래스 이름에 컴포넌트 이름을 포함시킴으로써 다른 컴포넌트에서 중복되는 것을 막기 위해서다. BEM 네이밍이란 것도 있는데, 이는 CSS 방법론 중 하나로 이름을 지을 때 해당 클래스가 어디에서 어떤 용도로 쓰이는지 명확하게 쓰는 방식을 말한다. (ex. card__title-primary) 김민준, ⌜리액트를 다루는 기술⌟, 길벗, 2019

220527 프론트엔드 부트캠프 19일차 : 깊은 복사, 얕은 복사, Infinite-scroll

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_imagesㄴ 배경 이미지 크기 조정하기 - CSS: Cascading Style Sheets | MDN CSS 배경 이미지의 기본 설정값에서는 원본 이미지가 크기 변화 없이 바둑판식으로 배열됩니다. background-size 속성에 가로와 세로 크기를 지정해 크기를 바꿀 수 있습니다. developer.mozilla.org 눈이 괴로워지는 페이지, 재밌당 객체와 배열이 복사가 이상해 → Shallow-Copy / Deep-Copy 스크롤 형태의 페이지네이션 만들자 → Infinite-Scroll freeboard 리뷰 개발환경에선 처음..

알고리즘 - substr

임의의 양의 정수 n에 대해, n이 어떤 양의 정수 x의 제곱인지 아닌지 판단하려 합니다. n이 양의 정수 x의 제곱이라면 x+1의 제곱을 리턴하고, n이 양의 정수 x의 제곱이 아니라면 -1을 리턴하는 함수를 완성하세요. n은 1이상, 50000000000000 이하인 양의 정수입니다. // str에 있는 op의 개수 찾기 ~~ function finder(str, op) { console.log(str.split('')); console.log(str.split('').filter((el)=> el === op).length) return } finder('+-*%+', '+'); // 임의의 문자열 입력받아 각 글자로 만들 수 있는 길이 2의 문자열들을 모두 확인하여 새로운 배열에 담아 반환하는 함..

220526 프론트엔드 부트캠프 18일차 : pagination, state Lifting

freeboard 리뷰 로고 누르면 메인페이지 가게하기! 마지막 페이지를 계산, 그 페이지가 StartPage + 10(다음에 이동할 페이지)보다 클 때만 이동 허락 스테이트 끌어올리기 부모 컴포넌트 아래 자식 컴포넌트1, 자식 컴포넌트2가 있다고 할 때... 자식 컴포넌트 1에 있는 state, setState를 자식2에서도 쓰고 싶다면? (형제 간에 어떻게 넘길 것인가) state를 부모쪽으로 끌어올리고 props로 넘겨주면 된다. 보드, 페이지네이션을 나란히 두었을 때, useQuery(FETCH_BOARDS)에서 나오는 정보가 가 필요하다면 어느 한 쪽에서만 사용하는 것이 아니라 부모로 끌어올려서 사용한다. 그리고 여기서 나오는 data, refetch를 각 자식에 props로 내려주면 된다. 더..

알고리즘 - Set

Set - 중복 제거하기 배열을 대체해서 사용할 수 있다. 타입은 객체 형태를 가진다. (typeof 해보면 'object')( Array.isArray() 하면 false ) 고유한 데이터만 저장할 수 있다. - 중복되는 데이터가 없다. let array = [ 1, 3, 1, 2, 4] Array.from(new Set(array)); // [1, 3, 2, 4] arr1 = new Set(); arr2 = []; // 데이터 추가 arr1.add(1) arr2.push(1) arr1.add(1) // 들어가지 않음(중복) // 데이터 조회 arr1.has(1) // 1이 있나? true/false 반환 arr2.includes(1) // 길이 arr1.size arr2.length // 데이터 삭제..

220525 프론트엔드 부트캠프 17일차 : Layout, font

freeboard 리뷰 onChangeYoutubeUrl onChangeAddressDetail onClickAddressSearch - setIsOpen이 true로 (모달 visible) onCompleteAddressSearch setAddress, setZipcode, setIsOpen value를 지워보면, state에는 들어가 있는데 화면엔 보이지 않음 직접 입력을 한 적이 없어. 입력을 하면 밸류값에서 꺼내서 가지고 오는 것 밸류라는 속성을 입력하게 되면, 밸류값이 거기로 들어가. address,zipcode는 props로 넘겨줘야 한다. 그리고 value에 바인딩 시켜줘야 한다. value = { props.zipcode } value = { props.address } defaultval..

알고리즘 - 콜라츠 추측, while

콜라츠 추측 1937년 Collatz란 사람에 의해 제기된 이 추측은, 주어진 수가 1이 될때까지 다음 작업을 반복하면, 모든 수를 1로 만들 수 있다는 추측입니다. 작업은 다음과 같습니다. 1-1. 입력된 수가 짝수라면 2로 나눕니다. 1-2. 입력된 수가 홀수라면 3을 곱하고 1을 더합니다. 2. 결과로 나온 수에 같은 작업을 1이 될 때까지 반복합니다. 예를 들어, 입력된 수가 6이라면 6→3→10→5→16→8→4→2→1 이 되어 총 8번 만에 1이 됩니다. 위 작업을 몇 번이나 반복해야하는지 반환하는 함수, solution을 완성해 주세요. 단, 작업을 500번을 반복해도 1이 되지 않는다면 –1을 반환해 주세요. //콜라츠 추측 function solution(num) { var answer =..

220524 프론트엔드 부트캠프 16일차 : husky, modal, prevState

freeboard 리뷰 📺 Youtube - 아직 안 함(5/24) youtube state를 만들어서 onchange, defaultvalue 추가한다. 그리고 패치보드에서 유튜브 url도 가져와야한다! width, height를 라이브러리에서 자체제공해서 emotion에선 수정 불가능하기 때문에 presenter에서 값을 수정해준다. 🔧 수정 아무 수정도 하지 않고 누르면 수정한 내용이 없습니다, alert early exit 패턴을 쓴다. 작성자 변경을 백엔드에서 막아놨음에도 불구하고 수정 페이지에선 수정이 가능, 못하게 하기 1. presenter의 input 태그에 readOnly(색깔 흰색, 클릭해서 바꾸는 것 불가능)를 props.isEdit에 따라 바뀌게 하기 2. 패치보드에서 받아온 작성..

알고리즘 - reverse, sort, 삼항연산자로 return

자연수 뒤집어 배열로 만들기 function solution(n) { let array = []; let answer = []; array = String(n).split(''); console.log(array) for (let i = 1; i parseInt(v)); // 숫자풀이 var arr = []; do { arr.push(n%10); n = Math.floor(n/10); } while (n>0); return arr; } 초면 : reverse(), paseInt() arr.push(n%10); ----*-*-*-*-*---- 나누어 떨어지는 숫자 배열 function solution(arr, divisor) { console.log(arr, divisor) var answer = []; ..

220523 프론트엔드 부트캠프 15일차 : 이벤트 버블링, 라이브러리 사요요

말도 안돼 벌써 15일이라니 3️⃣주차 - 라이브러리, 프리보드에 살 붙이기 1. 😫클릭이 이상해 -> 이벤트 버블링, 이벤트 위임(event delegation) 2. 🥰이미 만들어놨다고? 땡큐 ^^ -> Library 3. UI의 전체적인 구조 -> Layout 4. 다른 페이지도 보여줘! -> Pagination/Infinite-Scroll 5. 스테이트 나눠줘! 댓글 수정하기, 스테이트 끌어올리기 -> Lifting-State-Up 😫🥰 오늘 할 거 포트폴리오 리뷰 컴포넌트는 접속 대상이 아니다. index 통해서 들어가야 한다. 댓글 - 게시글 목록이랑 비교하면 조금 비슷하다. 데이터가 비동기로 넘어오기 때문에 data?: any; (처음엔 undefined 상태) useQuery에서 백엔드로 ..