프론트엔드 킹왕짱이될테다 프론트엔드 킹왕짱이될테다

일주일동안 코테준비로 아주 정신없이 흘러갔다! 아직 알고리즘 문제를 많이 푼건 아니지만 (총 60문제정도?) 난이도가 높아지면서 공통적으로 자주쓰이는 자바스크립트 메서드 중 하나로 reduce함수를 정리해봤다 누적값이 필요할 때, 혹은 중복을 찾을 때 Reduce메서드 자바스크립트의 reduce함수는 배열의 각 요소를 순회하며 callback함수의 실행 값을 누적하여 하나의 결과값을 반환 합니다. const numbers = [1,2,3,4] numbers.reduce( //첫번째 파라미터 : 콜백함수 (누산값,현재요소값,현재요소index,현재배열)=> { return 다음누산값 }, //두번째 파라미터: 초기 누산값 초기누산값) 요소를 모두 합한 값을 구할 때도 간단히 Array.reduce((acc,..

이 문제는 한국어로해도 알아먹기 어려운 문제였다 샘의집에는 열매가 많이 맺힌 사과나무와 오렌지나무가있습니다. 아래의 정보를 이용하여 사과와 오렌지가 각각 몇 개인지 도출하세요. 붉은색영역은 집을 의미한다. s는 시작점, t는 끝나는지점이다. 사과나무는 집의 왼쪽에위치, 오렌지나무는 오른쪽에. 과일이 나무에서 떨어질 때, 과일은 나무의 원점에서 x축을 따라 나무로부터 d 거리 단위로 떨어집니다.음수값은 왼쪽, 양수값은 오른쪽으로 과일이 떨어진 것을 의미함. m개의 사과와 n개의 오렌지의 값이 주어진다. 몇개의 사과와 오렌지가 샘의 집(즉, [s,t]포함 범위)에 떨어질 것인지 구하시오. 예를 들어, 샘의 집이 s=7 t=10에 위치했을 때, 사과나무의 위치는 4이고 오렌지나무의 위치는 12임. 3개의 사과..

문제 해석 해커랜드대학교는 다음과 같은 평가 방침을 갖고있다. -모든 학생은 0-100점사이의 점수를 받음 -40점 미만은 F Sam교수는 학생들을 아래와 같은 방식으로 점수를 주려 한다. -한 학생의 점수가 현 점수의 다음 5의 배수보다 3이하로 차이난다면, 반올림하여 현 점수의 다음 5의 배수를 준다. -점수가 38점 이하라면, 반올림을 해봤자 fail이기 때문에 반올림하지 않는다. example -점수 = 84 (84의 다음 5의 배수는 85이기 때문에 1 차이가 나서 반올림. 점수는 85점을 준다. ) -점수 = 29 ( 38점 이하는 반올림 할 것도 없이 fail. 점수는 그대로 29를준다. ) -점수 = 57 (57의 다음 5의 배수는 60이기 때문에 3 차이가 나서 반올림 하지 않음. 점수는..

Q. 두 정수 left와 right가 매개변수로 주어집니다. left부터 right까지의 모든 수들 중에서, 약수의 개수가 짝수인 수는 더하고, 약수의 개수가 홀수인 수는 뺀 수를 return 하도록 solution 함수를 완성해주세요 // 두 정수 left와 right가 매개변수로 주어집니다. left부터 right까지의 모든 수들 중에서, 약수의 개수가 짝수인 수는 더하고, // 약수의 개수가 홀수인 수는 뺀 수를 return 하도록 solution 함수를 완성해주세요. function solution(left, right) { let answer = 0; let arr = []; //left부터 right까지 정수의 약수를 차례로 담을 array let count = []; //left부터 righ..

추가되는 게시글은 순차적으로 커지는 id값을 가지고있어 기존 old순서에서 최신순 배치로 변경하는데 id값을 이용할 수 있었다. sorting의 순서를 바꾸는건 처음해보는데 useState를 이용한 로직은 머릿속에 금방 그려졌고, 다른 방법도 고민해보고싶어서 찾아보다가 조금 더 복잡한 데이터를 다룰 때 useReducer를 이용한다는 것을 알게되었다. 최신순으로 정렬하는건 useState와 쿼리스트링으로 충분히 구현이 가능했고, useReducer를 사용하는게 과연 더 편할지 직접 로직을 짜보면서 공부해보았다. useState를 이용한 코드. (sort메소드) const WikiPage = () => { ... //postData 데이터 원본을 담을 변수 const [postData, setPostDat..

Q.Semantic HTML의 필요성을 예시를 들어 설명해주세요. Semantic HTML은 웹 페이지의 구조와 의미를 명확하게 전달하는 마크업 방식을 의미합니다. 이를 사용함으로써 웹 페이지의 가독성과 접근성을 향상시킬 수 있습니다. John Doe Software Engineer 이 코드는 이름과 직함을 담은 두 개의 문장을 포함하고 있는데, 그 문장이 무엇을 의미하는지는 알 수 없습니다. 이를 Semantic HTML을 적용하여 다음과 같이 수정할 수 있습니다 About the Author John Doe Software Engineer 위 코드에서 `` 요소는 페이지 내용을 구분하고 있으며, `` 요소는 섹션의 제목을 나타내고 있습니다. `` 요소는 페이지의 주요 내용을 포함하고 있으며, `` 요..

다음 주 금요일에 Hacker Rank라는 사이트를 통해 코테를 보게되었다...(둑흔) 영어로 문제푸는데 익숙해져야 할 것 같다. 내일부터 일요일까지는 과제가 있어 월요일부터 코테 집중적으로 풀어봐야될 것 같다ㅠㅠ 영어 + 수학용어는 많이 낯설다 ㅎ.ㅎ... Given an array of integers, calculate the ratios of its elements that are positive, negative, and zero. Print the decimal value of each fraction on a new line with places after the decimal.주어진 정수 배열에서 양수, 음수, 0이 전체에서 차지하는 비율을 계산하세요. 그리고 각 소수의 소숫점 6자리 pr..

Q. 순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여설명해주세요. 순수함수 부수효과 없는 함수. 즉, 어떤 함수에 동일한 인자를 주었을 때 항상 같은 값을 리턴하는 함수 외부 상태를 변경하지 않는 함수 순수함수와 순수함수가 아닌 것 function add(a,b){ return a+b; } console.log(add(19,6)) 언제 어디서 add함수를 실행해도 add(19,6)은 항상 25를 리턴하고 외부상태를 변경하지 않았기 때문에 add는 순수하다. let c=10; function add2(a+b){ return a+b+c } console.log(add2(10,3)) c=20; console.log(add2(10,3)) add2는 c라는 변수값이 변하면 결과값도 달라지기 때문에 순수함..

Q. useRef가 필요한 상황을 예시를 들어 설명해주세요 1. 폼요소에 자동으로 초점을 맞출 때. useRef를 이용해 해당 요소를 선택하고 focus()메서드를 호출하여 초점을 설정할 수 있다. 2. 이전 상태 저장하기 useState 를 이용할 때 이전샅애를 유지하고 싶은 경우, useRef를 사용하여 이전 값을 저장하고 변경을 추적할 수 있습니다. 이것ㅅ은 상태가 변경되어도 컴포넌트가 다시 렌더링 될 때마다 동일한 값을 유지할 수 있습니다. 3. 애니메이션 컨트롤 useRef를 이용하여 애니메이션을 컨트롤 할 수 있습니다. 애니메이션을 시작, 일시중지 또는 싸디 시작할 때 사용됩니다. 4. DOM요소 조작 useRef를 사용하여 DOM요소에 직접 접근하고 해당 요소의 속성을 변경할 수 있습니다. ..

항해99를 수료하고,, 스파르타에서 하는 취업대비반에서 이것저것 도움 받으며 면접준비+이력서첨삭+코딩공부를 하고있다. 면접 예상질문을 받고 답변을 준비하며 거기에 대한 공부를 하는데, 항해를 하는동안은 집중적으로 실전에 필요한 부분만 빠르게 습득하고 적용시키느라 디테일한 것들을 많이 공부하지 못했다. 그래서 지금 하고있는 면접대비 답변정리가 실제로 면접에서도 도움이 되겠지만 무엇보다 전반적인 JS에대한 이해도를 높이고있는 것 같아 좋은 것 같다. 제일 어려웠던 this에 대해 좀 더 작성해보려한다! this바인딩의 예시 -일반함수 호출시 this바인딩 (window객체가 출력됨.) function myFunction() { console.log(this); } myFunction(); // this는 전..

Q. require와 import차이점을 설명해주세요. 각각 어떤 상황에서 쓸 수 있나요? A. require는 NodeJS에서 사용되고있는 CommonJS키워드이고, import는 ES6에서 새롭게 도입된 키워드입니다. 두개의 키워드는 모두 하나의 파일에서 다른 파일의 코드를 불러온다는 동일한 목적을 가지고있습니다. require는 다른 변수를 할당하듯이 모듈을 불러오는 반면에, ES6방식을 따른 import방식은 Java나 python처럼 import 키워드를 이용해 좀 더 명시적으로 모듈을 불러옵니다. //CommnJS const moment = require("moment"); //ES5 import moment from "moment"; follow up question ES6모듈 시스템의 이점..

9. this의 동작원리와 용법 this는 현재 실행중인 함수의 객체를 참조하는 키워드입니다. this를 통해 함수 내부에서 객체의 속성에 접근하거나 메소드를 호출할 수 있습니다.this의 동작원리는 호출되는 방법에 따라 달라지는데, 함수를 일반적인 방법으로 호출하면 this는 전역 객체를 참조하게 됩니다. 그러나 객체의 메소드로 호출하면 this는 해당 객체를 참조하게 됩니다. 또한, 함수를 생성자로 호출하면 this는 새로운 객체를 참조하게 됩니다. 객체의 메소드를 호출할 때 this를 사용하여 해당 객체의 속성에 접근하거나 메소드를 호출할 수 있습니다. 또한, 함수를 생성자로 사용하여 새로운 객체를 생성할 때 this를 사용하여 해당 객체의 속성을 초기화할 수 있습니다. this를 사용할 떄 주의할..

HTTP에 대해 설명하고, 알고있다면 HTTP 메세지 구조에 대해 더 자세히 설명해주세요 position 을 어떻게 사용하는지 알려주세요 HTTP란, HTTP는 HTML과 같은 문서를 전송하기 위한 Application Layer Protocol입니다. HTTP는 웹브라우저와 웹서버의 소통을 위해 디자인되었습니다. 클라이언트가 HTTP 메세지 양식에 요청을 보내면, 서버도 HTTP 메세지 양식에 맞춰 응답합니다. HTTP메세지는 요청과 응답의 유형이있으며, 헤드부분(start line, HTTP headers)과 바디부분 (payload)로 구성됩니다. HTTP 메세지는 Request message Start line에는 세가지 요소가 있다. 1. HTTP method : (GET, PUT, POST 등..

머쓱이는 프로그래머스에 로그인하려고 합니다. 머쓱이가 입력한 아이디와 패스워드가 담긴 배열 id_pw와 회원들의 정보가 담긴 2차원 배열 db가 주어질 때, 다음과 같이 로그인 성공, 실패에 따른 메시지를 return하도록 solution 함수를 완성해주세요. 아이디와 비밀번호가 모두 일치하는 회원정보가 있으면 "login"을 return합니다. 로그인이 실패했을 때 아이디가 일치하는 회원이 없다면 “fail”를, 아이디는 일치하지만 비밀번호가 일치하는 회원이 없다면 “wrong pw”를 return 합니다. 제한사항 회원들의 아이디는 문자열입니다. 회원들의 아이디는 알파벳 소문자와 숫자로만 이루어져 있습니다. 회원들의 패스워드는 숫자로 구성된 문자열입니다. 회원들의 비밀번호는 같을 수 있지만 아이디는 ..

5. 프레임워크와 라이브러리 차이점에 대해 설명해주세요. 프레임워크와 라이브러리의 차이점은 "제어 흐름"의 권한이 어디에 있는가입니다. 라이브러리를 사용할 때 사용자는 애플리케이션 코드의 흐름을 직접 제어해야 합니다. 개발 시 필요한 기능이 있을 경우 능동적으로 라이브러리를 호출하여 사용하거나 기존에 구성된 함수나 코드를 가져다 써야 합니다. 반면 프레임워크는 애플리케이션의 코드가 프레임워크에 의해 사용됩니다. 애플리케이션 코드는 프레임워크가 짜 놓은 틀에서 수동적으로 동작하기 때문에 제어의 흐름은 프레임워크가 가지고 있고 사용자가 그 안에 필요한 코드를 작성하게 됩니다. 여기서 제어의 역전(IoC, Inversion of Control)이란, 어떠한 일을 하도록 만들어진 Framework에 Contro..

내일 첫 코딩테스트가 있어서 어제부터 정말 오랜만에 알고리즘문제를풀고있다 꾸준히 풀어볼걸 ㅠ_ㅠ 나는 잘 못풀어서 무조건 for문을 쓰는 찐따다 문자열 s가 입력되었을 때 다음 규칙을 따라서 이 문자열을 여러 문자열로 분해하려고 합니다. 먼저 첫 글자를 읽습니다. 이 글자를 x라고 합시다. 이제 이 문자열을 왼쪽에서 오른쪽으로 읽어나가면서, x와 x가 아닌 다른 글자들이 나온 횟수를 각각 셉니다. 처음으로 두 횟수가 같아지는 순간 멈추고, 지금까지 읽은 문자열을 분리합니다. s에서 분리한 문자열을 빼고 남은 부분에 대해서 이 과정을 반복합니다. 남은 부분이 없다면 종료합니다. 만약 두 횟수가 다른 상태에서 더 이상 읽을 글자가 없다면, 역시 지금까지 읽은 문자열을 분리하고, 종료합니다. 문자열 s가 매개..