분류 전체보기416 [ 프로그래머스 / Javascript ] 가운데 글자 가져오기 https://school.programmers.co.kr/learn/courses/30/lessons/12903 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보세요. 단어의 길이가 짝수라면 가운데 두 글자를 반환하면 됩니다. 제한사항 s는 길이가 1 이상, 100 이하인 스트링입니다. 입출력 예 s return "abcde" "c" "qwer" "we" 나의 풀이 일단 문자열을 2로 나눠준 뒤 return 구문에서 짝수일 경우 중앙의 두 글자를 리턴하고 홀수일 경우 중앙에 위.. 2022. 12. 17. [ 스파르타 / TIL ] 내일배움캠프 #35 오늘 한 것 알고리즘 문제 풀기 리액트 강의 보기 Todo list 리덕스로 만들기 오늘의 배움 react-router-dom의 Link를 styled-components로 꾸미기 아래의 코드처럼 styled(Link)`` 를 해주면 Link의 모든 속성을 inherit 하면서 새로운 속성을 더해줄 수 있다. style.js import styled from "styled-components"; import { Link } from "react-router-dom"; export const DetailsButton = styled(Link)` text-decoration: none; color: blue; font-size: 14px; &:hover { color: black; } `; TodoItem... 2022. 12. 16. [ 스파르타 / TIL ] 내일배움캠프 #34 오늘 한 것 알고리즘 문제 풀기 리액트 강의 보기 오늘의 배움 soup란? 인접한 요소들을 로 감싸게 되는데, 불필요한 div요소가 중첩되어 soup이 발생한다. soup에 빠지지 않기 위한 방법 아래와 같이 는 빈 wrapper 컴포넌트다. HTML 테그가 DOM에 렌더링 되지 않으면서 코드가 실행된다. return ( Hello World! This works👍 }; 만약 아래와 같이 Import Fragment를 했다면 React를 붙이지 않아도 태그만으로도 사용이 가능해진다. import {Fragment} from 'react'; return ( Hello World! This works👍 }; 아래와 같이 사용할 수도 있지만 버전에 따라 사용할 수 없을 수도 있다. 하지만 위의 는 모든 버전에.. 2022. 12. 15. [ 스파르타 / TIL ] 내일배움캠프 #33 오늘 한 것 알고리즘 문제 풀기 리액트 강의 보기 오늘의 배움 JSX 제한 사항 요소가 1개여야 한다. 2,3,4개의 인접한 요소들이면 안된다. 예제 아래의 코드는 에러가 난다. return ( Hello World! This does not work👎 }; 아래의 코드는 정상적으로 실행이 된다. return ( Hello World! This works👍 }; 위의 이유는 자바스크립트 또한 둘 이상을 반환할 수가 없다. return ( React.createElement('h1', {}, 'Hellow World!'); React.createElement('p', {}, 'This does not work👎'); ); 2022. 12. 15. [ 프로그래머스 / Javascript ] 점프와 순간 이동 https://school.programmers.co.kr/learn/courses/30/lessons/12980 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 OO 연구소는 한 번에 K 칸을 앞으로 점프하거나, (현재까지 온 거리) x 2 에 해당하는 위치로 순간이동을 할 수 있는 특수한 기능을 가진 아이언 슈트를 개발하여 판매하고 있습니다. 이 아이언 슈트는 건전지로 작동되는데, 순간이동을 하면 건전지 사용량이 줄지 않지만, 앞으로 K 칸을 점프하면 K 만큼의 건전지 사용량이 듭니다. 그러므로 아이언 슈트를 착용하고 이동할 때는 순간 이동을.. 2022. 12. 15. [ 프로그래머스 / Javascript ] 핸드폰 번호 가리기 https://school.programmers.co.kr/learn/courses/30/lessons/12948 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다. 전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요. 제한 조건 phone_number는 길이 4 이상, 20이하인 문자열입니다. 입출력 예 phone_number r.. 2022. 12. 14. [ 스파르타 / TIL ] 내일배움캠프 #32 오늘 한 것 알고리즘 문제 풀기 Redux 강의 보기 Todo list 코드 리뷰 받기 오늘 깨달은 것 최원장 튜터님께 저번에 리액트로 만든 Todo list 코드 리뷰를 부탁드렸는데 리뷰받기를 정말 잘한 것 같다. 덕분에 아래와 같은 사항들을 새롭게 알게 되었다! 리액트에서 .js 파일은 .jsx로 쓰자. index.js 파일만 제외하고 나머지 App.js와 내가 만든 js파일들은 모두 .jsx로 써주자. index.js를 변경하지 않는 이유는 이 파일은 자바스크립트 코드이므로 js로 유지되어야 한다. 버튼에는 cursor: pointer;을 설정해주자. 사용자들에게 버튼이라는 것을 인지하게 클릭이 가능하다는 것을 인지하게 하기 위해서는 항상 설정해주도록 하자. 입력창의 값이 둘 중에 하나라도 비어있다.. 2022. 12. 13. [ 스파르타 / TIL ] 내일배움캠프 #31 오늘 한 것 알고리즘 문제 풀기 리액트 강의 보기 오늘의 배움 리덕스 시작하는 방법 npm init -y npm install redux import redux const redux = requier(‘redux’); store 만들기 데이터를 관리해준다. 관리하는 데이터는 리듀서 함수에 의해 결정된다. 리듀서 함수가 새로운 상태 스냅샷을 생성하기 때문이다. 리듀서는 액션이 도착할 때마다 새로운 상태 스냅샷을 뱉어낸다. 위의 코드를 실행하면 초기 상태를 출력해낸다. const store = redux.createStore(); 리듀서 함수 state(현재 상태)와 action을 기본값으로 받는다. 리덕스는 궁극적으로 리덕스 라이브러리에 의해 실행된다. 그리고 새로운 상태를 return 한다. 기존의 상태.. 2022. 12. 12. [ WIL ] 내일배움캠프 6주차 Facts 리액트 강의 수강. 앞전 팀원 분들과 시작한 알로리즘 스터디에서 함께 매일 알고리즘 문제 풀기. 주말에는 평일에 풀었던 문제 다시 복습했다. 개인 과제인 Todo list 만들기. 스파르타 리액트 강의 수강. Feelings 스파르타에서 Todo list를 구현하라는 과제를 줬을 때는 정말 못해 낼 것 같았다. 이제 강의를 제대로 듣기 시작한 지 2,3일 밖에 되지 않았고 이제야 component와 props가 잡히기 시작했다. 하지만 하루 종일 에러들을 하나씩 해결하고 출력해보면서 내가 원하는 기능들을 끝내 구현해냈다. 뿌듯했다! Findings 코드를 섰다면 주석을 달자. Future 유데미에서 수강 중인 리액트 강의 계속 수강 하기 스파르타 리액트 강의 수강 하기 알고리즘 스터디 팀원들과.. 2022. 12. 11. 이전 1 ··· 12 13 14 15 16 17 18 ··· 47 다음 728x90
