본문 바로가기

전체 글409

[ WIL ] 내일배움캠프 7주차 Facts 리액트 강의 수강. 알로리즘 스터디에서 함께 매일 알고리즘 문제 풀기. 주말에는 평일에 풀었던 문제 다시 복습했다. 개인 과제인 Todo list redux와 styled components를 사용하여 만들기. 스파르타 리액트 강의 수강. Feelings 리액트로 만든 Todo list를 redux를 사용하여 다시 만들어야 했다. 이때 styled-components도 함께 사용했다. 아직은 프로젝트가 작지만 redux를 사용하니 확실히 다른 컴포넌트들을 사용하기가 쉬워졌다. 처음이라 생각보다 완성하는데 오래 걸렸지만 덕분에 리덕스를 제대로 배우는 한 주가 되었다. Findings styled-components를 사용하여 태그에 붙는 className이 없어서 코드가 조금 더 깔끔하고 간결한.. 2022. 12. 19.
[ 프로그래머스 / Javascript ] 겹치는 선분의 길이 https://school.programmers.co.kr/learn/courses/30/lessons/120876# 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 선분 3개가 평행하게 놓여 있습니다. 세 선분의 시작과 끝 좌표가 [[start, end], [start, end], [start, end]] 형태로 들어있는 2차원 배열 lines가 매개변수로 주어질 때, 두 개 이상의 선분이 겹치는 부분의 길이를 return 하도록 solution 함수를 완성해보세요. lines가 [[0, 2], [-3, -1], [-2, 1]]일 때 그림으로 .. 2022. 12. 18.
[ 프로그래머스 / 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.
728x90

티스토리툴바