안녕하세요! 이번에 문제은행 서비스 ExamBomb에 정보보안기사 문제은행이 추가됐어요! 정보보안기사 시험을 준비하시는 분에게 이동 중에도 간편하게 복습을 할 수 있는 서비스를 만들어보았어요. 기존 정보처리기사필기에서 정보보안기사 문제 490문제 기출 5회 분이 추가되었으니 아래 사이트 또는 검색창에 ExamBomb 문제은행을 검색하여 많이 이용해주세요! https://exam-bomb-service.vercel.app/start/subject/%EC%A0%95%EB%B3%B4%EB%B3%B4%EC%95%88%EA%B8%B0%EC%82%AC 기사 필/실기 문제은행(기출문제, 시험) | Exam Bomb. 기사 필/실기 시험대비 문제은행을 제공해요. 기출문제, 시험 등 다양한 문제가 준비됐어요. exam-..

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

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

지난 시간엔 serverside를 통해서 정적인 xml로 sitemap을 생성하는 과정을 나타냈어요! 오늘은 동적인 xml을 생성하여 페이지에 들어올 때, 항상 최신 sitemap이 생성되도록 만드는 과정을 해보도록 할게요! sitemap에 대해 지난 시간보다 좀 더 알아본 후에 진행하려합니다. sitemap xml 태그 방법 https://exam-bomb-service.vercel.app/ https://zippoom.com/sitemap/sub/index.xml 2023-03-17T09:00:23.523Z 위의 첫번째 케이스는 urlset 태그로 url 자체를 알려주는 방식과, 두번째 케이스처럼 태그를 통해 해당 xml에 또다른 sitemap이 존재함을 알려주는 방식이 있어요! 두가지 방법 중에 저..

대표적인 자료구조들인 스택, 큐, 연결리스트들과 정렬 알고리즘들을 직접 구현해보며 알아보면서 공부하고자 해요! 기본적인 동작 원리나 개념은 이미 알고있지만, 직접 구현해보며 동작원리를 살펴볼께요. 오늘은 먼저 스택! 스택(Stack) 1. 스택이란? 스택은 가장 많이 사용하는 자료구조로 말 그대로 "쌓여있는 데이터 더미"이고, 입구가 하나로 이루어진 자료구조라고 생각하면 돼요! 그렇기때문에 입구에 계속 넣는다면 처음에 넣은 것이 가장 마지막에 나오게 되는 후입선출[Last In First Out] 특성을 가지게 됩니다. 2. 스택의 연산? 스택의 연산에는 두가지 종류가 있어요. 첫번째는 push를 통한 입력, 두번째는 pop을 통한 제거 (플러스로 stack의 길이 ..?!) 스택의 입구는 뒤에 있기 때..

오늘은 직접 SSR과 CSR, SSG을 Nextjs에서 결과를 통해 차이점을 알아보도록 할까요?! 요즘 프론트엔드 면접의 대표 질문이기 때문에 어떤식으로 활용해야 좋은지를 제대로 아는게 중요하다고 생각해요ㅎㅎ 오늘은 CSR과 SSG만 알아보도록 할께요! (추후에 SSR / ISR 예정) 1. CSR(Client Side Rendering) 먼저 Client Side Rendering(CSR)은 말그대로 클라이언트에서 렌더링 진행한다는 뜻으로 초기 로드시에 HTML를 통해 다운받은 JS파일 빈 HTML에 DOM을 그려나간다는 특징이 있습니다. 대표적으로 Single Page Application(SPA)의 React를 통해 사용할 수 있어요. 그렇기때문에 초기에 그리는 시간으로 인해 초기페이지 진입에 살짝..

2023년 6월 2일부터 새로운 곳에서 프론트엔드 개발자로 다시 시작하게 되면서 이전과 비교했을 때, 앞으로 어떤 개발자가 돼야 하는지 써보려 해요! 더 좋은 생각을 많이 나눠준다면 저희 팀과 저의 큰 성장이 될 것 같아요! 크게 현재 나는 어떤 사람인지 돌아보며 시작하도록 할게요 Q1. 어떤 개발자가 되고 싶나요? 저는 단기적, 장기적으로 두 가지 목표를 갖고 있어요! 먼저 단기적으로는 현재 맡은 서비스를 유저에게 더 좋은 경험을 주는 플랫폼으로 만들어가는 게 현재 목표예요!그러기 위해선 스스로 세 가지가 중요하다고 생각하여 꼭 숙지하면서 개발하기 위해 노력하고 있어요. 첫째, 내 서비스를 누구보다 완벽하게 이해하기 (이제 막 알아가고 있죠..!)둘째, 좋은 개발팀문화를 만들어가며 함께 정착하기셋째, ..

이 문제의 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번부터 인덱싱 하..

오늘은 저의 개발속도를 향상 시켜줄 tailwindcss를 프로젝트에 install하는 방법을 알아볼까 해요! tailwindCSS를 한 번도 안써본 사람은 있어도 한 번만 쓴 사람은 아마 없을거라고 생각해욯ㅎㅎ 그렇다면 왜 제가 이걸 계속 쓰는지 한 번 볼까요?! 일단 제가 생각하는 장점을 말해보자면 1. 조금만 익숙해진다면 css 개발 속도가 훨씬 증가! (코드량 감소) 2. 자주 필요한 css가 미리 만들어져 있어서 손쉽게 구현 가능! 하지만 그럼에도 단점이 있긴하죠,, 제가 생각하는 단점을 말해보면 1. 익숙하지 않다면 지저분하게 생각들수도 있다! 태그의 className에 연달아 쓰기때문에 지저분하대요.... (하지만 저는 css 파일에 tailwind를 적용하여 사용하기에 지저분하다고는 생각안..