안녕하세요. 정말 오랜만에 블로그를 작성하네요ㅎㅎ문제은행 관련 내용 제외하고는 일년이 넘은 것 같아요. 오늘은 지난 23년 6월 합류한 스타트업에서의 회고와 함께 채용을 준비하며 글을 작성해보려고 해요.현재보다 더 책임감을 가져야 할 자리를 위임받는만큼 고민이 많이 되는 시기네요ㅎㅎ 1. 스타트업에서 지난 16개월 회고 먼저 회고를 두가지 관점에서 바라보려고 해요.개인의 성장개발팀의 성장각각의 관점에서 나는 어떤 역할을 했는지, 어떤 생각을 갖고 일을 했는지 돌아볼게요. 첫번째. 개인의 성장 정말 어려운 관점인 것 같아요. 스타트업에서 개인의 성장을 말하면 이런 말들이 많아요.회사의 성장과 개인의 성장은 다르다스타트업은 망해도 개인은 성장한다.회사가 성장한다고 개인이 성장하는 것은 아니다.회사의 성장을 ..

robots.txt가 무엇인지, 어떻게 적용하는지, 그리고 역할에 대해서 알아보는 시간을 갖도록 할게요! 검색엔진에 노출되기 위해 사이트를 네이버서치어드바이저, 또는 구글서치콘솔을 사용한 분이라면 당연히 알고 있을거라고 생각해요. robots.txt도 SEO(검색엔진최적화)를 위해서 꼭 있어야하는 존재인만큼 다뤄보도록 하겠습니다! robots.txt는 무엇일까? 구글 서치 콘솔에서는 아래와 같이 설명하고 있습니다. robots.txt는 크롤링해서는 안 되는 사이트 내 URL 또는 디렉터리를 검색엔진에 알려주는 텍스트 파일의 이름입니다. 특정 크롤러(또는 모든 크롤러)에 대해 개별 URL 또는 전체 디렉터리를 차단하는 규칙이 포함되어 있습니다 위의 글을 읽어보면 알겠지만, 이 파일은 봇을 차단 또는 사이트..

오늘도 지난 시간에 이어서 다시 코드스멜 2탄을 하려해요! 오늘 내용에서 되게 많은 내용을 제거시켰는데, 대부분이 클래스를 활용한 방법이여서 뺏어요! 제가 javascript에서 클래스를 자주 쓰지 않기도 하고, 실제 적용을 어떤식으로 나타낼지 난감하기도해서 그랬으니 이해해주세요! 그럼 이제 시작해볼까요!! 긴 매개변수 목록 함수의 매개변수가 많아지면 그 자체로 이해하기 어려워져요! 우리는 최대 2개로 매개변수를 최소화하려고 해요. (어쩔수없으면 3개…?!?) 또한 매개변수 중 하나로 플래그 형태를 자주 쓰지않나요? (주로 true, false를 통해 나누는) 저는 아래처럼 함수안에서 타입별로 무언가를 나누는 함수를 작성했었어요! const getDurationTimeBy = (distance:numbe..

오늘은 리팩터링 2판 3단원의 코드스멜 단원을 읽으며 드는 생각을 나눠보려해요~ 그리고 내용을 읽어보면서 팀문화에 녹여낼 수 있다면 좋겠다는 점도 써보고싶어요! 기이한 이름 기이한 이름 단원에서 설명하고자하는 바는 N년차 개발자들의 최대 고민인 변수(함수)명 짓기에 해당해요. 해당 파일을 작성하고 있는 본인은 당연하다고 생각한 "이름 짓기"도 처음보는 사람 입장에선 전혀 이해가 안가는 경우가 있을거에요. 저는 최대한 코드의 맥락을 통해 어떤 역할을 담당하는지 나타내고자 스스로 "리팩터링"을 진행하며, “코드리뷰”를 통해 다시 한번 체크하고 넘어가고 있어요! 대표적으로 아래와 같은 함수를 리팩터링을 통해 효과를 얻을 수 있어요! {getDurationTimeBy(distance)} // 결과값 : 00분 ..

이번 내용을 읽으면서는 다음과 같은 내용을 나누고 싶었어요. 언제 리팩터링을 하면 좋을지 명확하게 정할 수 있는 개발자, 그리고 적용할 수 있는 문화를 갖춰가는 개발팀이 되기 위해서 리팩터링을 언제할지 생각해보면 좋겠어요. 2.4 언제 리팩터링해야 할까? 리팩터링을 하는 시기는 생각보다 자주 일어나요. 저자는 거의 한시간마다 한 번은 한다고 말해요! 하지만 뭐든지 시기가 중요한게 아니라! 자연스럽게 본인의 개발 스타일에 맞게 리팩터링을 하는 시기를 녹여내는게 중요한거겠죠?? 저는 책을 읽으며, 그리고 직접 최근에 계속해서 적용해보며 앞으로 새로운 기능 개발을 할 때, 이렇게 하려고 해요! 보이스카웃트 원칙! 기능을 쉽게 추가할 수 있도록 리팩터링 기능 구현 (기능 중심 개발) 자가 리팩터링 (컴포넌트 분..

리팩터링하는 이유는 무엇인지 알아보려해요. 최근 개발하면서 리팩터링을 하셨나요? 했다면 어떤 이유로 하셨나요?! (오늘도 어김없이 컨셉을 잡습니다 ㅎ) 리팩터링을 통해 모든 문제점이 해결하는건 아니지만, 우리가 확실히 얻을 수 있는 이점은 꼭 얻었으면 좋겠어요. 우리가 왜 리팩터링을 해야하는지 한번 나눠볼게요! 소프트웨어 설계가 좋아지게 하자! 대표적으로 중복 코드가 여기저기 뿌려져있다면 모든 곳을 수정했는지 알 수 없어요. 그 말은 해당 코드를 수정할 때, 모든 곳에서 예상대로 작동할 것을 확신할 수 있을까요? 바람직한 설계의 핵심은 모든 코드가 언제나 고유한 일을 수행함을 보장할 수 있어야해요. // / 오픈채팅링크 // /user 오픈채팅링크 // /home 오픈채팅링크 // /test 오픈채팅링크..

이 문제의 input은 위와 같다. 문제 읽으며 생각한 풀이 방향성!!!! 1. 유저가 신고한 유저의 리스트를 갖는 Map 구현 2. 유저당 신고당한 count를 갖는 Map구현 이 두가지를 통해서 구현할 계획이다! 먼저 reportMap과 cntMap 두개를 만들었다. let reportMap = {}; let cntMap = {}; report.forEach((re)=>{ const [from, to] = re.split(' '); if(reportMap[from]){ if(!reportMap[from].includes(to)){ reportMap[from].push(to) cntMap[to] ? cntMap[to]+=1 :cntMap[to] =1 } }else { reportMap[from] = [..

문제 읽으며 생각한 풀이 방향성!!!! 1. 전달받는 board의 배열이 moves 값으로 인덱싱하기에 용이하지 못하다고 판단! board[row][col]에서 board[col][row]로 조회할 수 있도록 변경!! 2. 100 * 100 까지 가능하므로 Array 인덱싱보단 Map으로 column 조회가 좋지 않을까? 라고 생각! 아래 코드와 같이 boardMap을 구현함! let boardMap = {}; board.forEach((row,i)=>{ row.forEach((val,j)=>{ if(val !== 0){ boardMap[j+1] ? boardMap[j+1].push(val) : boardMap[j+1] = [val]; } }) }) 0 인 경우엔 넣지 않고, row를 0번부터 인덱싱 하..

오늘은! NextJs에서 페이지를 이동하는 방법에 대해서 알아보도록 합시다! NextJs는 pages directory의 .js .ts .jsx .tsx 파일을 기반으로 페이지가 라우팅되는 시스템을 가져요! 예를 들면, React를 한다면 아래처럼 react-router-dom을 사용하여 설정해야 하죠... 사실 저는 위와 같은 페이지 라우팅 방식이 너무 귀찮아서 ,,,,, Next만 사용해요...(못쓴다고 한적은 없슴다!!) Next에선 위의 방식들이 전혀 필요가 없게 되는데요! 처음에 말했듯이 pages directory의 파일을 기반으로 라우팅되기 때문입니다! 예를 들면 메인 페이지같은 경우는 pages/index.tsx 가 되고요! about 페이지는 pages/about/index.tsx 를 만..

오늘은 정말 간단하게 절대경로를 뚝딱 설정하는 법을 알아보도록 하자! 기억상으로...는 React에서 절대경로를 사용하려면 좀 복잡하게 설정해야했던 기억이 있다...?! 물론 내가 엄청 돌아갔을지도 모르겠지만 react-app-rewired와 customize-cra를 설치해서 config 파일도 만들고해서 귀찮았던 기억이 있지만, Next에선 정말 간편하게 할 수 있다! 후후 저번 시간에 만들어졌던 tsconfig.json 파일에서만 수정하면 되는데요! 아래처럼 기존에 있던 compilerOptions 에다가 추가로 baseUrl을 "."으로 현재경로로 설정한 후! paths를 통해 설정해주면 끝~!!! { "compilerOptions": { "baseUrl": ".", "paths": { "@lib..