본문 바로가기

TIL17

TIL :: code-kata-js / (5) 문제 숫자3 만큼 0부터 순회하는 함수를 만들고, 순회하면서 주어진 특정한 일을 수행해야 합니다. 순회하는 숫자를 출력하고, 순회하는 숫자의 두배값도 출력해주세요. 작성한 코드 1 function iterate(max, action) { for (let i = 0; i < max; i++) { action(i); } } function numbers(num) { console.log(num); } function doubleNumbers(num) { console.log(num * 2); } iterate(4, numbers); iterate(4, doubleNumbers); 작성한 코드 1 function iterate(max, action) { for (let i = 0; i < max; i++) {.. 2022. 8. 19.

TIL :: code-kata-js / (4) 문제 숫자인 num을 인자로 넘겨주면, 뒤집은 모양이 num과 똑같은지 여부를 반환해주세요. num: 숫자 return: true or false (뒤집은 모양이 num와 똑같은지 여부) 예를 들어, num = 123 return false => 뒤집은 모양이 321 이기 때문 num = 1221 return true => 뒤집은 모양이 1221 이기 때문 num = -121 return false => 뒤집은 모양이 121- 이기 때문 num = 10 return false => 뒤집은 모양이 01 이기 때문 풀이 문자로 만들기 숫자를 배열로 split 하고 배열을 뒤집어서 합치기 num과 같은지 비교하기 작성한 코드 const sameReverse = num => { return num === num.. 2022. 5. 27.

TIL :: Git & GitHub 과정 정리 자신의 github에 justcode 라는 repository를 만든다. 내 컴퓨터에서 practice 폴더 밑에 justcode-test 라는 폴더를 만든다. cd Desktop // cd : 해당 폴더 진입 cd practice // cd : 해당 폴더 진입 mkdir justcode-test //mkdir : 디렉토리 만들기 justcode-test 폴더에서 git을 사용할 수 있도록 초기화 한다. cd justcode-test // cd : 해당 폴더 진입 git init // init : git 레파지토리 생성 (깃 시작) justcode-test 폴더에 test.js 파일을 생성 : vi test.js 혹은 vscode 에서 test.js 파일을 만들어서 디렉토리에 넣기 vi test.js .. 2022. 5. 26.

TIL :: [React] State, Props, Event 학습목표 클래스형 컴포넌트와 함수형 컴포넌트의 특징 및 Hooks의 필요성에 대해 이해한다. props의 개념에 대해 한 문장으로 설명할 수 있다. state의 개념에 대해 한 문장으로 설명할 수 있다. useState 훅을 사용하여 React 컴포넌트의 상태를 관리할 수 있다. state를 이용해서 UI의 변경을 표현할 수 있다. 이벤트를 통해 state를 변경할 수 있다. props의 개념을 이용해 부모 요소의 state를 자식 요소에서 반영시킬 수 있다. props의 개념을 이용해 자식에서 일어난 이벤트로 부모의 state값을 바꿀 수 있다. (State 끌어올리기) * Event : 사용자가 동작할 수 있는 것을 이벤트로 정의해둔 것 브라우저에서 대부분의 사용자가 할 만한 이벤트가 정의되어있다. .. 2022. 5. 26.

TIL :: [React ] 로그인 버튼 활성화 useNavigate를 사용하여 네비게이팅(=라우팅)을 하고자 할 때! 로그인 버튼 클릭 시 main 컴포넌트로 이동 import { Link, useNavigate } from 'react-router-dom'; function LoginSon () { const navigate = useNavigate(); return( { navigate('/main'); }} > 로그인 . . . 로그인 버튼 유효성 검증 ! 로그인 버튼을 눌렀을 때 , id와 password의 조건에 맞춰 넘어 가게 하는 것과 안넘어가게 하는 것 import React, { useState } from 'react'; import { Link, useNavigate } from 'react-router-dom'; functio.. 2022. 5. 26.

TIL :: [React] React Router, Sass 학습목표 SPA가 무엇인지 설명할 수 있다. react-router-dom를 이용해 Router Component를 구현할 수 있다. react-router-dom에서 Routing을 하는 방법 2가지와 차이점에 대해 설명할 수 있다. Component 와 tag 의 차이점에 대해 설명할 수 있다. css 전처리기의 역할에 대해 설명할 수 있다. sass에서 제공하는 문법을 이용하여 css파일을 scss파일로 변환할 수 있다. 1. SPA가 무엇인지 설명할 수 있다. * spa란?(싱글 페이지 어플리케이션) : 멀티플 페이지가 아닌 싱글 페이지이다. 2. react-router-dom를 이용해 Router Component를 구현할 수 있다. * react-router 란? : 리액트의 라우팅 기능을 위.. 2022. 5. 25.

TIL :: code-kata-js / (2) 문제 reverse 함수에 정수인 숫자를 인자로 받습니다. 그 숫자를 뒤집어서 return해주세요. x: 숫자 return: 뒤집어진 숫자를 반환! 예들 들어, x: 1234 return: 4321 x: -1234 return: -4321 x: 1230 return: 321 풀이 숫자를 문자로 변경 - .toString (숫자는 거꾸로가 안됨) 문자의 요소를 배열로 만들기 - .split("") 배열 거꾸로하기기 - .reverse() -가 맨뒤로가니깐 -빼내서 -를 앞으로 보내기 처음 자리에 0이 오면 처음 자리 없애기 분리 되어있던 배열을 조인해주고, 숫자로 변환 작성한 코드 const reverse = x => { // 여기에 코드를 작성해주세요. let string = x.toString().sp.. 2022. 5. 25.

TIL :: code-kata-js / (1) 문제 twoSum함수에 숫자배열과 '특정 수'를 인자로 넘기면, 더해서 '특정 수'가 나오는 index를 배열에 담아 return해 주세요. nums: 숫자 배열 target: 두 수를 더해서 나올 수 있는 합계 return: 두 수의 index를 가진 숫자 배열 예를 들어, nums은 [4, 9, 11, 14] target은 13 nums[0] + nums[1] = 4 + 9 = 13 이죠? 그러면 [0, 1]이 return 되어야 합니다. # 가정 target으로 보내는 합계의 조합은 배열 전체 중에 2개 밖에 없다고 가정하겠습니다. 풀이 nums[0] + nums[1] === target nums[0] + nums[2] === target nums[0] + nums[3] === target nums.. 2022. 5. 24.

TIL :: JavaScript / replit. 25~30 ⁍25. Class ◉ Class 클래스는 객체지향 프로그래밍의 핵심입니다. 객체지향 프로그래밍이란, 프로그램을 객체들로 구성하고, 객체들 간에 서로 상호 작용 하도록 작성하는 방법입니다. 네, 설명이 조금 어려운데요. JavaScript는 객체지향 중심에 있는 언어는 아니지만 프로그래밍에 있어서 Class, 객체, 객체지향은 항상 중요한 주제입니다. '객체지향 프로그래밍' 이라는 단어에서 '객체'는 앞서 배웠던 { num: 1 } 의 데이터 타입을 말하는 것은 아닙니다. 객체는 영어로 object, 말그대로 사물을 뜻합니다. 하지만, 클래스는 결국 { num: 1 } 처럼 생긴 객체(object)를 잘 설계하기 위한 틀은 맞습니다. 그런데 이 때의 객체는 특정 로직을 갖고 있는 행동(method)와 변.. 2022. 5. 18.

TIL :: DOM + Event 아래 이력서 사이트에 들어가서 개발자 도구를 활용하여 아래 과제를 진행한 후 구글 클래스룸에 제출해주세요. https://hyunseob.github.io/resume/ 개발자 도구 console 패널에서 작성한 코드를 캡쳐해서 제출하면 됩니다! 시행착오를 겪어 코드가 지저분하다면 그 코드 그대로! 캡쳐해서 올려주세요! 힌트1 : element 패널에서 DOM에서 접근하고자 하는 요소의 className을 확인해주세요. 과제 1. 아래와 같이 상단의 설명 부분의 글자를 파란색으로 바꿔주세요. 과제 2. 글자색을 바꾼 부분을 클릭하면 아래와 같은 alert 창이 뜨도록 구현해주세요. 나의 풀이 const a = document.getElementsByClassName('big-paragraph')[0]; .. 2022. 5. 17.

이전 1 2 다음

티스토리툴바