전체 글

알고리즘

Algorithm | String형 인자에서 중복되지 않는 가장 긴 단어의 길이 반환하기-CodeKata3

문제 > String 형인 str 인자에서 중복되지 않은 알파벳으로 이루어진 제일 긴 단어의 길이를 반환해주세요. str: 텍스트 return: 중복되지 않은 알파벳 길이 (숫자 반환) 예를 들어, str = "abcabcabc" return 은 3 => 'abc' 가 제일 길기 때문 str = "aaaaa" return 은 1 => 'a' 가 제일 길기 때문 str = "sttrg" return 은 3 => 'trg' 가 제일 길기 때문 모범 문제 풀이1 ```js const getLengthOfStr = str => { let countMax = 0; let countString = ''; for(let i=0; i 오늘 문제는 접근 방법조차 제대로 생각해내지 못했다. 독서를 통해 컴퓨터적 사고력을 ..

알고리즘

Algorithm | Brackets 유효성 로직 구현

👓 문제 나의 답안 function isValid(s) { const openBrackets = ['(', '[', '{']; const closeBrackets = [')', ']', '}']; for(let i=0; i

React

React | props와 state

🍣 props - Component 속성을 설정할 때 사용하는 요소 - 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 사용가능 1️⃣ 컴포넌트를 사용할 때 pros 값 지정하기 부모 컴포넌트인 App 컴포넌트에서 MyComponent의 props 값을 지정, MyComponenet에서 props 사용 2️⃣ 비구조화 할당 문법을 통해 props 내부 값 추출하기 객체에서 값을 추출하는 문법 === 비구조화 할당(destructuring assignment) === 구조 분해 문법 함수의 파라미터가 객체라면 그 값을 바로 비구조화해서 사용할 수 있다. # 객체에서 값을 추출하는 비구조화 할당 const MyComponent = (props) => { const { name, title } = props..

React

React | 로그인 버튼 활성화(React를 이용하여)

🏫 오늘의 미션 React의 state와 event 기능을 사용하여 전에 js로 구현했던 로그인 버튼 활성화 기능을 React로 변환해 보겠다. #Routes.js import LoginSejun from './pages/sejun/Login/Login'; class Routes extends React.Component { constructor(props) { super(props); this.state = { id: 0, pw: 0, }; } render() { return ( . . . #Login.js import React from 'react'; import { Link } from 'react-router-dom'; import './Login.scss'; class Login extends..

React

React | Router 요약

Create React App (CRA) 과 가장 인기있는 routing solution인 react-router 를 조합하여 routing 로직을 구현할 것 1. React 개발환경 세팅 1️⃣ npm 설치 2️⃣ CRA 설치 3️⃣ 프로젝트 내에서 CRA 실행 4️⃣ npm start 2. Routes Component & Scss 1️⃣ react-router 설치 2️⃣ Routes 컴포넌트 구현 ( / this.props.history.push()) 3️⃣ scss 설치 1. react-router 설치 npm install react-router-dom --save 2. Routes 컴포넌트 구현하기 import React from 'react'; import { BrowserRouter as..

React

React | Routes Component & Sass

SPA (Single Page Application) Westagram-fontend: longin.html, main.html 등 - 페이지 수 만큼 html 파일이 존재한다. 리액트 프로젝트에서 .html 파일의 개수는? 1개 ==> SPA 한 개의 웹페이지(html) 안에서 여러개의 페이지를 보여주는 방법? => Routing Routing 어떤 특정한 경로가 들어왔을 때 그 경로에 맞는 화면을 보여주는 것. 다시 말해 각각의 경로(url 주소)에 따라 다른 View(화면)을 보여주는 것이다. 리액트 자치에는 이러한 기능이 내장되어 있지 않다. ==> React Router : 리액트에서 라우팅 기능을 구현하기 위한 third-party 라이브러리 `npm install react-router-do..

알고리즘

알고리즘 | 더 해서 특정 수 나오는 배열 요소 찾기 (codeKata day1)

문제 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개 밖에 없다고 가정하겠습니다.문제풀이 const nums = [4, 9, 11, 14]; const target = 14; const twoSum = (nums, targe..

JavaScript

JS | 댓글 좋아요/삭제 기능

댓글 좋아요/삭제 기능 구현 인스타 클론 코딩 중 각 게시글의 댓글에 좋아요 추가/삭제 기능을 구현하였다. 화면 구조는 아래와 같고 각 댓글의 DOM 구조는 아래 코드와 같다. john.johnson what the heck 채우기 색이 없는 하트와 채우기 색이 빨간색인 2가지 svg 파일이 각각의 .likeBtn에 들어있고, 각각 하얀 하트는 display="inline-block", 빨간 하트는 display="none" 값을 주어 하얀 하트만 버튼에서 나오게 되어있다. 첫번째 방법 const likeBtn = document.querySelector('button'); const svgs = likeBtn.getElementsByTagName('svg'); likeBtn.addEventListene..

JavaScript

JS | 로그인 활성화 기능 구현 (+ 유효성 로직 추가)

Mission. id, password 가 입력되면 로그인 버튼 활성화 id, password 가 다시 지워지면 로그인 버튼 비활성화 DOM요소 const inputId = document.querySelector('.loginId'); const inputPw = document.querySelector('.loginPw'); const loginBtn = document.querySelector('.loginBtn');첫번째 방법 inputPw.addEventListener('keydown', () => { if(inputId.value && inputPw.value) { loginBtn.disabled = false; loginBtn.styl..

JavaScript

JS | 예약어(keyword)와 식별자(Identifiers)

예약어와 약속어 예약어 keyword 예약어(keyword)는 프로그래밍 언어에서 문법의 일종으로 미리 지정된 단어들이다. const a = `hello`;여기서 const 는 a rk 상수(const)임을 나타내는 예약어이다. 예약어는 식별자(identifier)의 이름으로 쓰일 수 없다. * await * break * case * catch * const * continue * debugger * default * delete * do * else * enum * export * extends * false * finally * for * function * if * implements * in * instanceof * interface * let * new * null * package * pr..

3jun
3jun