본문 바로가기

전체 글

[TIL-127] 위코드 27일차: React JS - useRef() 훅스 useRef는 특정 DOM을 선택할 때 쓰는 건데, useRef()를 어떤 변수에 할당해놓고 그 변수를 선택될 DOM 요소의 ref attribute에 주면 그 변수로 ref 받은 요소를 불러올 수 있다. import React, { useState, useRef } from 'react'; const pwInput = useRef(); const focusPw = event => { if (event.code === ‘Enter’) { pwInput.current.focus(); } }; ---- [React] ref통한 input 태그 커서/포커스 조정 (class component와 hooks에서 비교) https://velog.io/@ju_h2/React-ref%ED%86%B5%ED%95%9C-i.. 더보기
[TIL-126] 위코드 26일차: 코드 카타 const getPrefix = strs => { let prefix = ""; if (strs.length) { const firstStr = strs[0]; let isBreak = false; for(let j = 0; j < firstStr.length; j++) { if(isBreak) {break} let compareStr = firstStr.charAt(j) // console.log(firstStr, compareStr); for (let i = 1; i < strs.length; i++) { // console.log(strs[i].charAt(j)) if (strs[i].charAt(j) !== compareStr) { isBreak = true; break } if (i === st.. 더보기
[TIL-125] 위코드 25일차: 코드 카타 / git merge master, git rebase master 코드 카타 주어진 문자열 뒤집기 내 답안 const sameReverse = num => { // num을 문자열로 바꾸어 글자별로 잘라서 array에 저장한다 let array = String(num).split(""); // array를 뒤집는다 let reverse = array.reverse() // 하나의 문자열로 다시 붙여서 newNum에 저장한다 let newNum = reverse.join("") // 문자열이 된 num과 newNum을 비교한다 if(String(num) === newNum) { return true; } else { return false; } } git merge/rebase master 개념 로컬에서 branch를 만들어 작업하고 있다가, 원격의 master에 변경사.. 더보기
[TIL-124] 위코드 24일차: 코드 카타 코드 카타 주어진 문자열 내에서 중복되지 않고 이어지는 가장 긴 문자열의 길이 구하기 내 답안 const getLengthOfStr = str => { let arr = []; let maxLength = 0; let alphabet = ""; for (let j = 0; j < str.length; j++) { for (let i = j; i { let countMax = 0; let countString = “”; for(let i = 0; i < str.length; i++) { let indexOfStr = countString.indexOf(str[i]); if (indexOfStr !== -1){ countString = countString.substr(indexOfStr + 1); } co.. 더보기
[TIL-122~123] 노마드코더 ReactJS #3.0~#3.5 #2 State state 안 좋은 예시 컴포넌트 안에 변수를 포함시킬 땐 {변수명}으로 함. "onClick" 이벤트에 함수를 넣을 때 {countUp}의 형태로 ()를 붙이지 않음. 더보기
[TIL-123] 위코드 23일차: React Router & Sass ReactJS props 개념 properties라는 뜻으로, 함수형 컴포넌트에 객체를 인자로 전달해서 함수 안에서 변수처럼 사용할 수 있다. 응용 dal_nim 10분 전 byeol_nim hae_dal_byeol님 외... 팔로우 [문제상황] 유사한 구조의 두 profile 를 컴포넌트로 바꾸었다. 그런데 서로 다른 텍스트가 들어가거나 태그가 필요할 때 그런 점들을 구현하기 힘들다. 속성 : alt와 src 속성의 값을 상황에 따라 바꾸어야 한다. 어려운 점은 텍스트 형식에 props와 일반 텍스트를 결합해야 한다는 점이다. 태그의 content : 상황에 따라 user의 닉네임을 props로 받아서 담아야 한다. 태그 : 팔로우 버튼이 필요한 경우에만 포함되어야 한다. style을 위한 클래스 : .. 더보기
[TIL-122] 위코드 22일차: ReactJS / 코드 카타 ReactJS Component의 Props 개념 참고 https://www.daleseo.com/react-button-component/ https://react.vlpt.us/basic/05-props.html 코드 카타 더한 값이 target이 나오는 nums 배열의 두 숫자 조합 문제 nums 배열과 특정한 수인 target을 인자로 받는 twoSum 함수는, nums 배열에서 두 숫자를 뽑아 더한 값이 target이 되는 조합의 두 index를 요소로 갖는 배열을 반환한다. 코드 const twoSum = (nums, target) => { for (let i = 0; i < nums.length; i++) { let firstnum = nums[i]; for (let j = i+1; j < .. 더보기
[TIL-121] 노마드코더 ReactJS #1.0~#3.0 #1 React 기초 * 구현사항 : 태그를 클릭하면 클릭한 횟수를 보여주는 태그 1. Vanilla Javascript ver. Total clicks: 0 Click me HTML에 태그들을 만들고, JS로 addEventListener를 붙여 동적인 상호작용을 구현함. 2. ReactJS ver. CDN 링크를 사용해서 임시로 React와 React-DOM을 import 함. https://ko.reactjs.org/docs/cdn-links.html 생성한 요소들이 들어갈 태그를 HTML 안에 만듦. 자바스크립트 DOM으로 root 태그를 가져옴. React.createElement()로 요소들을 생성함. 과 , 그리고 이 두 요소들을 담을 컨테이너 . React.createElement("태그명.. 더보기

티스토리툴바