My Boundary As Much As I Experienced

https://www.acmicpc.net/problem/17294 문제 수준: 브론즈1 문제 요약: 욱제쨩은 카와이한 수가 좋다능.. SSS급 카와이한 수는 각 자릿수가 등차수열을 이루는 수라능. (ex: 13579) 이때 공차는 0이 될수도 있다능 (ex: 111111) 당신은 욱제한테 귀여운 수~ε٩(๑> ₃ +x); // ex: [1,3,5] let diff; let flag = true; // flag가 true로 유지되면 귀여운 수로 친다. for (let i = 0; i < input.length; i++) { if (input.length

(링크) https://www.acmicpc.net/problem/1652 문제 수준: 실버5 문제 요약: 영식이가 여행와서 코레스코 콘도?라는데서 잔댄다. 방은 N x N 크기의 방이다. 옮길 수 없는 짐도 있다고 한다. 영식이가 누우려면 최소 2칸 이상 이어져 있는 공간이 필요하다. '이때 영식이가 무조건 몸을 쭉 피기 때문에 머리와 발은 무조건 벽이나 짐에 닿는다. 중간에 어정쩡하게 자지않는다'...라는 조건이 있는데 사실 뭔 말인지 헷갈렸다. 이 말은, '5칸 연속 빈 공간이 있을 때, 최소 2칸 필요하다고 해서 5칸을 2칸씩 다 쪼개보면 4가지의 경우가 있네?' 라고 하지 않는다는 것이다. 5칸 연속 빈 공간은 그냥 1개의 경우로 보는 것이다. 이때 가로로 잘 수 있는 경우와 세로로 잘 수 있는..

자바스크립트의 Set 자료구조는 한 마디로 '중복을 허용하지 않는 배열'이다. Set 객체는 배열과 유사하지만 다음과 같은 차이가 있다. 구분 배열 Set 객체 동일 값 중복 가능하다. 불가능하다. 요소 순서에 의미가 있다. (index) 있다. 없다. 인덱스로 요소에 접근 가능하다. 가능하다. 불가능하다. 아래는 Set 객체의 기본적인 사용법(생성, 추가, 삭제, 특정 인자 존재 여부 체크, 사이즈 체크 방법)들이다. Set 객체의 생성 아래와 같이 생성자의 인자로 아무 것도 넘기지 않으면 빈 세트가 만들어진다. const set = new Set(); // Set(0) {size: 0} 또한 아래와 같이 배열을 인수로 넘기면 배열에 담긴 값으로 세트가 만들어진다. const numSet = new S..

https://www.acmicpc.net/problem/20529 문제 수준: 실버1 문제 요약: 수많은 학생 중에 딱 3명을 뽑았을 때, mbti 알파벳의 차이가 가장 적은 조합이 어떻게 되는지를 판단하는 문제이다. 예를 들어, INFP 학생과 INFP 학생은 완전 똑같으니 차이가 0이다. INFP 학생과 INTP 학생은 알파벳 하나가 다르니 차이는 1이다. 이를 세 학생의 심리적 거리로 나타내면 라고 할 수 있단다. N명 (N >= 3)의 학생 중에서 가장 적은 차이를 보이는 엠비티아이 조합을 구하면 된다. 입출력 예 (입력 / 출력): 문제 풀이 아이디어: 그런데 조금 생각해보면 알 수 있는 사실이 있다. (E / I), (N / S), (F / T), (P / J) 모두 알파벳은 두 개 뿐이므로..

MSW란?Mock Service Worker의 준말이다.이때 Service Worker는 앱의 백그라운드에서 실행되는 브라우저가 제공하는 기능이다.브라우저와 앱의 중간에서 이벤트를 listening하고 있는 존재라고 보면 된다.(PWA나 Firebase Cloud Message같은 기능들을 구현해보려고 했던 개발자들은 사용해본 경험이 있을 것이다.) Mock이란 단어에서 알 수 있듯이, MSW는 브라우저의 백그라운드에서 비동기 api통신 호출을 가로채서 가짜 응답을 해주는 Proxy의 역할을 한다. 왜 필요한가? 백엔드에서 API를 아직 주지 않았을 때, api 명세서대로 객체를 생성하여일단 호출 받았다 치고 화면 구현해본 경험이 다들 있을 것이다.그러나 이런 방식으로 모사하는건 마크업을 확인하는 용도로..

앞서 node.js의 기본 모듈들을 학습한 후, 이번 시간엔 본격적으로 http모듈만을 이용한 서버 만들기를 진행해봤다. 제공된 코드만 읽지말고 꼭 개량해보고 기능 추가해보라는 제로초 선생님의 말씀대로 한 번 기능들을 추가해봤다. 추가한 기능: 모두 삭제하기 기능 (유저등록/코멘트) 토끼로 만들기 기능 (유저등록/코멘트) 코멘트 란 읽기/추가/삭제/수정 node 서버를 처음 만들어본 느낌은 '뭐야 이거 자바스크립트잖아?' 이다. (당연한 얘기지만😂) 프론트에서도 서버가 깔끔하게 정제된 정보를 주지않고 날것의 것을 주면 손수 데이터를 가공해서 쓰는데, 노드 서버가 하는 일도 별반 다르지 않다는 것을 알 수 있었다. '프론트에서 받은 요청과 request body에 따라 내 저장소에 있는 내용을 편집하고 그..

요새 프론트 취준 경쟁이 아주 맹렬해져 그 수준들이 계속 올라가고 있다고 한다. 예전엔 리액트에 손이 어느정도 익고, 최적화hook을 잘 사용한다던가 정도 했으면 신입 기준에 부합했는데 현재는 리액트, 넥스트, 각종 전역상태관리, 리액트쿼리까지는 다들 기술 스택에 넣고 있는 분위기다.. 야놀자 부트캠프 다닐 때도 거의 파이널 프로젝트까지 가니까 다들 msw까지도 활용하는 분위기이기도 했다. 물론 기술 스택을 무조건 올리는게 능사는 아니다. 프로젝트를 만들 때 어떤 고민을 했고, 어떻게 구현했는지를 어필하는 것이 제일 중요하다는 것은 틀림없긴 하다고는 한다. 나도 이 편이 같이 일하는 사람으로 뽑고 싶을거 같긴하나, 수많은 비슷한 경쟁자들이 있는 것보다 차별적인 기술을 알고 있어서 뾰족한 쓰임새가 있는 인..

노드란? Node.js는 크롬 자바스크립트 엔진으로 빌드된 자바스크립트 런타임입니다. (실행기) 서버의 역할도 수행할 수 있는 자바스크립트 런타임 노드로 자바스크립트로 작성된 서버를 실행할 수 있음. 서버 실행을 위해 필요한 http/https/http2 모듈을 제공 런타임: 특정 언어로 만든 프로그램들을 실행할 수 있게 해주는 가상 머신 노드의 특성 이벤트 기반 대부분의 프로그램은 이벤트 기반이다. (클릭, 네트워크 요청, 타이머 등) 주소를 치는 것도 이벤트이다. (get) 이벤트 리스너: 이벤트를 등록하는 함수 콜백 함수: 이벤트가 발생했을 대 실행될 함수 논블로킹 I/O 논블로킹: 오래 걸리는 함수를 백그라운드로 보내서 다음 코드가 먼저 실행되게 하고, 나중에 오래 걸리는 함수를 실행 대충 논블로..

팀 문화 만들기이번 파이널 프로젝트를 통해 야놀자 부트캠프에서 두 번째 팀장 경험을 하게 되었다.다들 극 I밖에 없는 팀에서 그나마 사회자 역할을 자처할 수 있는게 나밖에 없었기 때문이다.팀장으로서 엄청나게 책임감이 막중해야되는 일은 많이 발생하진 않았지만,팀이 잘 굴러가도록 소소하게 지켰던 룰들을 소개해보도록 하겠다.  매일 데일리 스크럼으로 작업 내역 공유12시 반에 모든 직군 간 데일리 스크럼이 있기 때문에, 그 전에 프론트끼리 데일리 스크럼을 해서 얼라인을 맞추려고 했다.일단 예전 회사에서 했던 대로 매일 아침 10시 데일리 스크럼을 하며 서로의 작업 내역을 파악하는 시간을 가지려고 했으나,이번 팀은 올빼미들이 많아서 아침 스크럼 참여율이 너무 낮았다.. 추후 12시 반 전체 스크럼이 끝난 다음에..

React의 SEO 문제 해결을 위한 라이브러리 리액트는 SEO 점수를 잘 받기 힘들다고 보편적으로 인식되고 있다. 그 이유는 SPA 특유의 동작 방식 때문인데, 웹 크롤러가 크롤링해갈 HTML 파일이 비어있고, 라우팅을 모두 React router dom 같은 자바스크립트 라이브러리로 히스토리 객체에 동적으로 추가하여 이동한 것처럼 느껴지게 할 뿐이지 실제 html파일은 index.html 하나 뿐이기 때문이다. (그러므로 페이지 별 메타 태그를 설정할 수 없다. 하나밖에 없으니..) 이를 해결하기 위해 여러가지 방법들이 고안 되었는데 그 중 가장 유명한 것이 react-helmet-async와 react-snap이다. 리액트 헬멧 라이브러리란? 리액트 헬멧은 리액트 앱에 jsx 컴포넌트 형식으로 채워..