분류 전체보기138

• 

  [코딩테스트] 스킬 체크 테스트 Level.2 by Programmers 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. 문제 설명 Leo는 카펫을 사러 갔다가 아래 그림과 같이 중앙에는 노란색으로 칠해져 있고 테두리 1줄은 갈색으로 칠해져 있는 격자 모양 카펫을 봤습니다. Leo는 집으로 돌아와서 아까 본 카펫의 노란색과 갈색으로 색칠된 격자의 개수는 기억했지만, 전체 카펫의 크기는 기억하지 못했습니다. Leo가 본 카펫에서 갈색 격자의 수 brown, 노란색 격자의 수 yellow가 매개변수로 주어질 때 카펫의 가로, 세로 크기를 순서대로 배열에 담아 retur.. Javascript 2022. 6. 20.

• 

  [JavaScript] ES6 알아야 할 기능 노션으로 정리해두었다. 이런 저런 자료 찾아보면서 나도 자세히 이해하느라 3일 정도 소요되었던 것 같다. 이미 알고 있던 기능도 있고, 트렌드의 변화도 함께 알아야 했던 것들도 있었다. JS는 정말 급변하고 있다... 7.ES6 업그레이드 기능 + promise await async 등 ES6 업그레이드 기능 seeik.notion.site Javascript/Basic 2022. 6. 15.

• 

  [성능최적화] 차세대 이미지 적용하기 (webp) 아래와 같이 적용하면 된다. 그러면, source 부분을 먼저 불러오고, 불러오지 못하는 환경(구형 브라우저나 webp를 미지원하는 경우)일 때는 img 태그를 불러오게 된다고 한다. 확실히 성능최적화는...이미지가 가장 크게 효과보는 것 같은 기분이다. 디자이너가 제대로 있어서 webp도 주고, jpg도 압축해서 전달해주면 참 조으련만......팀에 부재해있다. 그래서 이미지를 전달해 주시는 담당자에게, 아래 사이트에서 줄이고 전달해달라고 요청해두었다. jpg -> webp 변환사이트 : https://convertio.co/kr/jpg-webp/ jpg 용량 줄이는 사이트 : https://www.iloveimg.com/ko/compress-image 결과 점수를 10점 올렸다. 신난다. 이미지만 줄.. HTML&CSS 2022. 5. 25.

• 

  React useEffect (included api 호출) 가 있는 컴포넌트 분리 방법 자식 컴포넌트에서는 아래와 같이 쓰고 export const childComp = () => { const [data, setData] = useState(); useEffect(() => { refresh(); },[]) const refresh = () => { fetch("URL") .then((res)=> res.json()) .then(_newData => setData(_newData)); } return [data, refresh]; } 부모 컴포넌트에서는 아래와 같이 쓴다. import childComp from "./childComp"; const parentComp = () => { const [data, refresh] = childComp(); return ( Refresh! ) }.. React & TypeScript/React 2022. 4. 29.

• 

  [코딩테스트/배열] Two Sum by LeetCode 문제 Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to target. You may assume that each input would have exactly one solution, and you may not use the same element twice. You can return the answer in any order. 정수 숫자와 정수 대상의 배열이 주어지면 두 숫자의 인덱스를 반환하여 대상에 더합니다. 각 입력에 정확히 하나의 솔루션이 있다고 가정하고 동일한 요소를 두 번 사용할 수 없습니다. 답변은 어떤 순서로든 반환할 수 있습니다. .. Javascript/Basic 2022. 3. 12.

• 

  [javascript] async / await 짧은 정리 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com Code 주석에 의미를 담아두었다. async function logName() { //이 건 비동기 함수야 const user = await fetch('url.com/users/1'); //그런데,이 함수는 결과를 기다려줘. 결과를 받고나서 넘어가줘 if (user.id === 1) { console.log(user.name); } } 사전적 의미 * async 약어 컴퓨터/통신 asynchronous commun.. Javascript 2022. 1. 7.

• 

  [javascript/basic] import / export 구문과 코딩 스타일 짧은 정리 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com import 하는 방식이 너무 여러가지여서, 솔직히 좀 헷갈릴 때가 많았다. App Component export from 이후에 있는 R004_LifecycleEx 부분은 R004_LifecycleEx Component 에서 export한 식별자를 적은 것이다. R004_LifecycleEx.js 라는 파일명과는 무관하다. 사실 파일명을 써도 무관하다. 왜냐하면, 파일명을 써도 파일내부에서 export한 모듈을 인식.. Javascript/Basic 2022. 1. 6.

• 

  [코딩테스트/해시] 위장 by Programmers 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com 문제 설명 스파이들은 매일 다른 옷을 조합하여 입어 자신을 위장합니다. 예를 들어 스파이가 가진 옷이 아래와 같고 오늘 스파이가 동그란 안경, 긴 코트, 파란색 티셔츠를 입었다면 다음날은 청바지를 추가로 입거나 동그란 안경 대신 검정 선글라스를 착용하거나 해야 합니다. 종류 / 이름 얼굴 동그란 안경, 검정 선글라스 상의 파란색 티셔츠 하의 청바지 겉옷 긴 코트 스파이가 가진 의상들이 담긴 2차원 배열 clothes가.. Javascript 2021. 11. 12.

• 

  [코딩테스트/정렬] H-index by Programmers 문제 설명 H-Index는 과학자의 생산성과 영향력을 나타내는 지표입니다. 어느 과학자의 H-Index를 나타내는 값인 h를 구하려고 합니다. 위키백과1에 따르면, H-Index는 다음과 같이 구합니다. 어떤 과학자가 발표한 논문 n편 중, h번 이상 인용된 논문이 h편 이상이고 나머지 논문이 h번 이하 인용되었다면 h의 최댓값이 이 과학자의 H-Index입니다. 어떤 과학자가 발표한 논문의 인용 횟수를 담은 배열 citations가 매개변수로 주어질 때, 이 과학자의 H-Index를 return 하도록 solution 함수를 작성해주세요. 제한사항 과학자가 발표한 논문의 수는 1편 이상 1,000편 이하입니다. 논문별 인용 횟수는 0회 이상 10,000회 이하입니다. 입출력 예 citations / r.. Javascript 2021. 11. 4.

• 

  [코딩테스트/정렬] 가장 큰 수 by Programmers 문제 설명 0 또는 양의 정수가 주어졌을 때, 정수를 이어 붙여 만들 수 있는 가장 큰 수를 알아내 주세요. 예를 들어, 주어진 정수가 [6, 10, 2]라면 [6102, 6210, 1062, 1026, 2610, 2106]를 만들 수 있고, 이중 가장 큰 수는 6210입니다. 0 또는 양의 정수가 담긴 배열 numbers가 매개변수로 주어질 때, 순서를 재배치하여 만들 수 있는 가장 큰 수를 문자열로 바꾸어 return 하도록 solution 함수를 작성해주세요. 제한 사항 numbers의 길이는 1 이상 100,000 이하입니다. numbers의 원소는 0 이상 1,000 이하입니다. 정답이 너무 클 수 있으니 문자열로 바꾸어 return 합니다. 입출력 예 numbers / return [6, 10.. Javascript 2021. 11. 3.

• 

  [코딩테스트/탐욕법(Greedy)] 체육복 by Programmers 문제 설명 점심시간에 도둑이 들어, 일부 학생이 체육복을 도난당했습니다. 다행히 여벌 체육복이 있는 학생이 이들에게 체육복을 빌려주려 합니다. 학생들의 번호는 체격 순으로 매겨져 있어, 바로 앞번호의 학생이나 바로 뒷번호의 학생에게만 체육복을 빌려줄 수 있습니다. 예를 들어, 4번 학생은 3번 학생이나 5번 학생에게만 체육복을 빌려줄 수 있습니다. 체육복이 없으면 수업을 들을 수 없기 때문에 체육복을 적절히 빌려 최대한 많은 학생이 체육수업을 들어야 합니다. 전체 학생의 수 n, 체육복을 도난당한 학생들의 번호가 담긴 배열 lost, 여벌의 체육복을 가져온 학생들의 번호가 담긴 배열 reserve가 매개변수로 주어질 때, 체육수업을 들을 수 있는 학생의 최댓값을 return 하도록 solution 함수를.. Javascript 2021. 10. 30.

• 

  [코딩테스트] 주로 사용하는 원리 정리 테스트 케이스는 통과했는데, 채점에서 실패할 경우... 제한 사항을 꼼꼼히 읽어볼 것. (테스트 케이스에는 없었을 수도 있다) Array 1. array의 범위를 추출해야할 때 Filter를 사용한다. const array = [0,1,2,3,4,5]; const newArray = array .filter((value, fIndex) => fIndex >= 2 - 1 && fIndex a - b); // 오름차순, 내림차순은 b-a // return [1,2,3] ...to be countinue Javascript 2021. 10. 28.