React 애니메이션 라이브러리는 웹 애플리케이션의 사용자 경험(UX)를 높이기 위해 많이 사용됩니다 1. Framer Motion 특징: Framer Motion은 사용하기 쉬운 API와 풍부한 기능을 제공하는 React 애니메이션 라이브러리입니다. 물리 기반 애니메이션, 제스처 제어, 컴포넌트 간 전환 등의 기능을 제공합니다. 장점: 사용하기 쉬운 API 높은 성능 물리 기반 애니메이션 및 제스처 제어 지원 풍부한 예제와 문서화 단점: 비교적 큰 파일 크기 사용해야 하는 경우: 사용하기 쉬운 API와 높은 성능이 필요한 경우, 물리 기반 애니메이션을 적용할 때 사용합니다. 2. React-Spring 특징: React-Spring은 물리 기반의 애니메이션을 구현할 수 있는 라이브러리입니다. 직관적인 ..

TailwindCSS를 사용하기 위해 프로젝트에서 작업을 하다가 무언가가 이상하게 디자인이 적용이 안되어서 원인을 파악해보아야겠다고 생각했습니다. 따라서 이 글은 어떤 원인들이 있었고 어떻게 해결했는 지 기록해 둔 글입니다. 프로젝트 스펙 Vite, React, TypeScript TailwindCSS yarn 원인 원인은 여러가지가 있던 것 같았습니다. 나열 해보자면 아래와 같았습니다. 패키지 설치 시 tailwindcss만 설치한 점 typescript 프로젝트로 마이그레이션 하면서 tailwind.config.js를 .cjs로 변경한 것 tailwindcss를 어느 형식의 파일에 적용시킬 것인 지 명시하지 않은 것 index.css에 import문을 통해 tailwind를 선언한 것 해결법 해결법은..

.with Route Handlers 목표 : (구) API Routes라고 불리는 현 Route Handler를 활용해서 API를 Mocking해보자 Framework : NextJS 13(App Router) 여기서 사용 할 예시 API는 POST api/v1/users/login 로그인 기능이다. 돌아가는 지 확인만 해 볼 예정으로 간단하게만 mocking 해 볼 예정 1. app directory에 api 경로 생성 우선, API 명세서의 엔드포인트에 맞게 경로를 생성한다. app directory 내부에 다음과 같이 생성한다. app ┗ api ┃ ┗ v1 ┃ ┃ ┗ users ┃ ┃ ┃ ┣ login ┃ ┃ ┃ ┃ ┗ route.ts만약 엔트포인트 끝에 id와 같은 특정 값이 들어오는 경우 ..

오늘은 좌측에는 검색창, 중앙에는 로고, 우측에는 부가메뉴가 있는 헤더를 만들어보려 한다 우선 다음 글에서 기본적인 틀을 나눠둔 코드를 가져오도록 하겠다 0. 코드 준비 [HTML+CSS] 무작정 따라 만들어보기(쿠팡 footer만들기 1편) HTML, CSS를 그 누구보다 더 빠르고 정확하고 생동감 있고 실감 나게 체험을 해 보고 싶었던 나는 일단 유명한 브랜드의 웹 페이지를 직접 따라 만들면서 이게 이런 거구나 라는 감정을 느껴보고 time-map-installer.tistory.com 언제나 시작할 때 코드를 입력할 공간을 준비를 해 두는 것이 좋다 1. 헤더 나누기 총 세 가지 요소가 들어갈 것이기에 3등분을 해 둔다 #header { border: 1px solid red; height: 20%..

HTML, CSS를 그 누구보다 더 빠르고 정확하고 생동감 있고 실감 나게 체험을 해 보고 싶었던 나는 일단 유명한 브랜드의 웹 페이지를 직접 따라 만들면서 이게 이런 거구나 라는 감정을 느껴보고 싶었다 그래서 갑자기 선택해본 실습 예정 작품은 아래와 같다 이 실습을 진행하면서 하게 될 작업들은 다음과 같다 모양 최대한 근접하게 만들기 링크들은 미 구현할 예정 반응형으로 만들어버릴 예정 1. 구역 나누기(devide whole page) 우선, 웹페이지를 구현하기 위해 형식상이지만 구역을 나누려고 한다 tag를 통해 header, content, footer로 나누어 구현하겠다 눈으로 대략 재었을 때 약 30% 정도면 되겠다 싶어서 다음과 같이 나눴다 header 20% content 50% footer..

3주차를 돌아보며 3주차에서 가장 크게 와닿았던 부분이 소숫점 계산이었다. 원래는 round() 메서드를 이용하여 10을 곱하고 10을 나누어서 했었는데 toFixed() 라는 아주 좋은 메서드가 있었다. 이제 깊은 깨달음을 얻었으니 앞으로는 이걸 써야겠다. plus+ : 이거 알았으면 숫자 제한으로 안걸리도고 10억원어치 로또를 한번에 살 수 있었을지도... 무슨 소리냐고?? 로또를 10억원어치 자동으로 돌려보았던 지난주차 보고오기 프리코스 4주차는 시작부터 폭탄이 예고되어 있었다 ???: 여러분들 지금까지 프리코스 잘 즐기셨죠? 이제부터는 익스펜시브코스에요~ 때는 바야흐로 수업을 듣고 있는 시간대이며, 코수타가 진행되는 시기인 목요일 오후 2시 이후... 이번 주에도 수업이 있어서 라이브로 듣지는 못..

2023 Series [ 2023 ] CheckPoint, 2023년 2023년 동안 작성했던 의미있다고 생각하는 포스팅들을 모아 둔 게시글입니다 이 글은 2023년이 끝날 때까지 계속해서 업데이트 해 나갈 예정입니다 [ January ] - 변화의 시작, 1월 더보기 [2022WinterBoo time-map-installer.tistory.com 진행 기간 : 23/05/11~23/05/14 ( 약 4일 ) 얼마 전 프로그래머스에서 새로 등장한 문제들과 캘린더가 있었습니다. 바로 프로그래머스 코딩 기초 트레이닝 캘린더 입니다. 124문제이긴 하지만 문제들이 간단하여 약 4일 만에 푼 것 같습니다 Day 별 어떤 문제들이 있는 지 궁금하신 분들은 이 이미지를 참고하시면 될 듯 합니다. 문제 정리 보러가..

이번에 알아볼 내용은 CSS 프레임워크이다. 프론트의 메타 자체가 빠르게 바뀌는 편이므로 작성일을 기준으로 많이 쓰이는 프레임워크 기준으로 정리를 해 두었다 + 이 글에서 쓰인 수치들은 별도의 명시가 없을 시 2021년 데이터 수치를 작성해 둔 것이다 CSS 프레임워크란? 미리 개발 해 둔 완성형 디자인을 쉽게 가져다 쓸 수 있도록 한 것 바로 아래에 이전년도까지의 만족도, 흥미, 사용률을 나타내는 사이트에서 정보를 얻어왔다 The State of CSS 2021: CSS Frameworks The Rankings chart can be toggled between satisfaction, interest, usage, and awareness to give you a fuller picture of a..

백준 알고리즘 문제를 풀 때는 입력을 받고 그 입력을 바탕으로 계산을 수행한 뒤 결과를 출력하는 형태가 일반적이므로, 이를 기반으로 한 간단한 Node.js 템플릿을 만들어 이 글에 제시하였습니다. 백준 바로가기 Baekjoon Online Judge Baekjoon Online Judge 프로그래밍 문제를 풀고 온라인으로 채점받을 수 있는 곳입니다. www.acmicpc.net Node.js 환경에서 사용할 수 있는 Beakjoon용 코드 템플릿 주석을 통해 나눠둔 몇 가지 주요 입력방식에 따른 기본 템플릿입니다. 문제 유형에 따라 주석을 해제하거나 이를 참고하여 입력받는 로직을 완성시키신 이후, 아래의 solution 함수 내부에 정답을 위한 코드를 적어 사용하시면 됩니다. // 이 두 줄을 필수로 ..

일단 저장해두면 굉장히 좋은 곳에 쓸 것 같은 기능이라 가져와 보았습니다 코드를 뜯어보면 동적인 애니메이션 관련 코드들에 대해 알 수 있기에 굉장히 의미있는 코드들이라고 생각합니다 seroSlide.html Welcome to Coda Let's play programming with HTML/CSS seroSlide.css body{ margin: 0; padding: 0; font-family: montserrat, sans-serif; background: black; } .animated-text{ color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #2980b9; pad..

'클린 코드'가 코드에 대한 책이 아닌 사실에 대하여 책이 아니라고요? 그렇다네요. 왜 두번이나 다녀왔어요? 오늘은 학교에서의 회의를 마치고 클린코드에 대한 2번째 컨퍼런스에 다녀왔습니다. 첫 번째는 11월 22일에 다녀왔던 GOORM COMMIT에서, 그리고 두 번째는 오늘 다녀온 튜링의 사과에서 진행된 강연이었습니다. 첫 번째 클린 코드 관련 강연에 갔을 때에는 클린코드가 무언인지 궁금해서 갔고, 그리고 두 번째는 그래서 코드를 어떻게 대해야 하는 지 궁금했기에 다녀왔습니다. 물론 두 곳 모두 왕복 약 80정거장이라는 정말 긴 거리를 다녀오긴 했지만, 그래도 처음과 두 번째가 모두 얻어가는 것이 있었습니다. 결론부터 말씀드리자면 클린코드에 대한 생각 뿐만 아니라 코딩을 대하는 근본적인 생각까지도 변화..

3주차를 돌아보며 3주차에서 가장 크게 와닿았던 부분이 소숫점 계산이었다. 원래는 round() 메서드를 이용하여 10을 곱하고 10을 나누어서 했었는데 toFixed() 라는 아주 좋은 메서드가 있었다. 이제 깊은 깨달음을 얻었으니 앞으로는 이걸 써야겠다. plus+ : 이거 알았으면 숫자 제한으로 안걸리도고 10억원어치 로또를 한번에 살 수 있었을지도... 무슨 소리냐고?? 로또를 10억원어치 자동으로 돌려보았던 지난주차 보고오기 프리코스 4주차는 시작부터 폭탄이 예고되어 있었다 ???: 여러분들 지금까지 프리코스 잘 즐기셨죠? 이제부터는 익스펜시브코스에요~ 때는 바야흐로 수업을 듣고 있는 시간대이며, 코수타가 진행되는 시기인 목요일 오후 2시 이후... 이번 주에도 수업이 있어서 라이브로 듣지는 못..

깃허브 바로가기 GitHub - TMInstaller/javascript-lotto-6 Contribute to TMInstaller/javascript-lotto-6 development by creating an account on GitHub. github.com 2주차엔 어땠는지 보고싶다면? 2주차: 자동차 게임 보러가기 제출 직전의 스프린트 2주차 자동차 경주 과제에서 나는 제출 직전에 갑작스럽게 몰입이 되는 상황을 겪었다. 왜 였을까? 갑자기 끝나기 직전이 되니 집중이 잘된다니? 사건의 전말은 이러하였다. 나는 분명 내 코드를 보면서 "음음 이런 피드백이 나오겠지? 이렇게 고치면 되겠다 라는 피드백이 오겠지? 라고 생각하고 있었다. 이왕이면 내가 스스로 피드백 한 부분들을 주석으로 달아두면 더..

이 포스팅은 회고 겸 TroubleShooting 겸 한 주 간의 고민과정을 모두 정리해둔 글임을 알립니다 Visit GitHub Repository 1주차 후기 바로가기 코수타, 코치들과의 수다 타임 물론 이 시점에서도 나는 수업을 듣고있었기에 집에 가는 길에 모두 들으며 유익한 시간을 보냈다. https://www.youtube.com/watch?v=xwqIBM-vOdU 내 개인적인 입장에서는 참 아쉬운 시간대라고 생각한다. 하필 수업이 시작하는 그 시점에 이런 재미있는 행사들이 벌어지니 말이다. 이 이후에도 진행했던 5기 분들과의 이야기 시간 또한 수업시간과 겹쳐서 굉장히 아쉽다고 생각하고는 있다. 그래도 다시보기가 있어 참 다행이라고 생각하는데, 여기서 재밌는 말 하나를 들었다. 요구사항 분석을 ..

이 포스팅은 회고 겸 TroubleShooting 겸 한 주 간의 고민과정을 모두 정리해둔 글임을 알립니다 Visit GitHub Repository 프리코스가 그렇게 유명하다던데? 지난 번 Software Maestro에 도전했던 올해 초가 기억나는 시작이다. 이번에는 가장 인지도가 높고 성장하기에 특화되어있는 교육 프로그램인 에 합류하기 위한 단계인 에 도전하기로 했다. 사전 과제를 통한 평가단계이고, 과제전형이기에 그냥 과제만 풀고 끝이 아닐까 싶겠지만 지난 5기때의 많은 후기들, 검증된 몰입할 수 있는 과제들이 이 자체에 참여하는것만으로도 많은 도움이 될 것이라는 신호를 보내고 있었다. 유명한 데에는 다 이유가 있었다. 1주차를 마친 나 또한 이 프리코스가 왜 유명한 지 일부나마 이해할 수 있었으..

파트너스에서 진행한 Git Session입니다! https://youtu.be/k2bGh_My78U

[Good Night Hackathon] 2023/08/26 10:00 ~ 2023/08/28 00:00 이번에는 반년만에 열린 2회차 Good Night Hackathon에 참여하였습니다. 분명 이전에 열렸던 스프링부트에 참여한 지 얼마 되지 않은 것 같았는데 벌써 더 업그레이드 된 해커톤이 진행되었네요! https://time-map-installer.tistory.com/175 [Good Night Hackathon] SpringBoot! 맛 좀 보자! 2023 Serieses [ 2023 ] CheckPoint, 2023년 2023년동안 작성했던 회고록들을 모아 둔 게시글이다 2023년 동안 작성한 회고들을 계속해서 업데이트 해 나갈 예정이다 [ January ] - 변화의 시작, 1월 [2022..

태그: Techeer 6주 동안의 일들을 담아냈기에 다소 양이 많을 수 있다는 점을 미리 알립니다. 활동명: SilliconValley 2023 Summer Bootcamp 역할: 리더 기여 분야: Frontend, 배포, 문서화, 팀원 관리, 최종 발표 GitHub: https://github.com/SV-Summer-BootCamp-Team-F SV-Summer-BootCamp-Team-F SV-Summer-BootCamp-Team-F has 4 repositories available. Follow their code on GitHub. github.com Notion 2023 Summer Bootcamp Team-F ⬇️ 프로젝트 포트폴리오 바로가기 changeable-team-242.notion..

프로젝트 Repository GitHub - SV-Summer-BootCamp-Team-F/frontend Contribute to SV-Summer-BootCamp-Team-F/frontend development by creating an account on GitHub. github.com 목표 프로젝트에서 D3를 사용하는 페이지를 하나 맡았다. 아래에 있는 사이트처럼 마우스를 통해 넓은 화면을 이동할 수 있도록 하며 확대, 축소 기능까지 넣는 것을 목표로 한다. React D3 Tree bkrem.github.io 프로젝트 스펙 React, Vite, TailwindCSS, TypeScript Issue 1. D3.js 설치 우선, 2D 시각화에 특화되어있는 D3를 설치한다. 이 때, 주의해야 할..

주요 기능 Fragments Map API Results & DataBase Used Queries End

진행정보 기간 : 23/05/26 ~ 20/05/27 (1박 2일) 규모 : 약 110명 참가 유형 : 참가자(개발 파트) 개발 유형 : iOS Demo https://youtube.com/shorts/u38oQMk1ERw?feature=share - YouTube www.youtube.com 개요(발표자료 활용) 방방고는 무계획 여행, 부담없는 여행, 근교 여행을 위한 앱 서비스 입니다. 현재 위치에서 가까운 관광지를 추천해주는 것을 메인 기능으로 하며 기획되었죠. 이제 방방고에 원하는 거리, 추천받을 관광지의 갯수, 현재 위치를 입력합니다. 그 과정을 거친 후 앱에서 관광지에 대한 정보를 사용자에게 보여줍니다 프론트엔드로는 iOS를 위한 Swift를, 백엔드로는 서버를 위해 python 기반의 dja..

Git : https://github.com/TMInstaller/GradeBuddy GitHub - TMInstaller/GradeBuddy Contribute to TMInstaller/GradeBuddy development by creating an account on GitHub. github.com IDE : IntelliJ IDEA Language : Java 11 Framework : Spring Boot 2.7.12 ORM : MyBatis Database : MariaDB Template Engine : JSP 제작기간 : 23/06/05 ~ 23/06/18 Demo End

Frontend Spec Language : TypeScript Framework : Next.js Library : Axios, Moment.js, react-paginate, react-quill, next/Image, react-slick CSS : Sass IDE : Visual Studio Code Git Hooks : Husky, Prettier, ESLint 이론 관련 문서화 내용들 JavaScript에서 화살표 함수와 function 함수의 차이점 https://time-map-installer.tistory.com/233 [JavaScript, React] const = () => {}? function () {}? 함수 표현식, 함수 선언문 중 무엇을 쓸까? 자바스크립트에서 함수를 작성..

2023 Series [ 2023 ] CheckPoint, 2023년 2023년 동안 작성했던 의미있다고 생각하는 포스팅들을 모아 둔 게시글입니다 이 글은 2023년이 끝날 때까지 계속해서 업데이트 해 나갈 예정입니다 [ January ] - 변화의 시작, 1월 더보기 [2022WinterBoo time-map-installer.tistory.com 진행 기간 : 23/05/11~23/05/14 ( 약 4일 ) 얼마 전 프로그래머스에서 새로 등장한 문제들과 캘린더가 있었습니다. 바로 프로그래머스 코딩 기초 트레이닝 캘린더 입니다. 124문제이긴 하지만 문제들이 간단하여 약 4일 만에 푼 것 같습니다 Day 별 어떤 문제들이 있는 지 궁금하신 분들은 이 이미지를 참고하시면 될 듯 합니다. 문제 정리 보러가..

2023 Series [ 2023 ] CheckPoint, 2023년 2023년 동안 작성했던 의미있다고 생각하는 포스팅들을 모아 둔 게시글입니다 이 글은 2023년이 끝날 때까지 계속해서 업데이트 해 나갈 예정입니다 [ January ] - 변화의 시작, 1월 더보기 [2022WinterBoo time-map-installer.tistory.com 들어가며 프로젝트의 첫 번째 분기점인 POC 단계가 모두 끝난 이후에 약 60여 명의 네트워킹 시간을 통해 진행상황을 공유하는 행사를 진행했습니다. "테커인의 낮"이라는 이름의 이 행사를 통해 그동안 비대면으로만 봐 왔던 팀원분들과 다른 여러 개발자분들, 그리고 여러 스타트업과 기업에서 대표로 방문해 주신 분들을 만나 뵈었고, 그분들과 함께 이야기를 하며 더..

옛날 옛적(어제), 한 개발자가 살았어요.이 개발자는 아이디어가 떠오를 때마다 도구를 만들어 제공하려고 하는 특징이 있었지만,사내 비즈니스 로직이 엮여있을까봐 마음편히 배포하지 못하고 어떻게 해야할 지 고민을 하고있었어요.정말 아쉬웠어요.그렇게 계속해서 쌓여만 가는 코드들을 가만히 내버려 둘 수는 없던 저는 방법을 찾아보기로 했습니다.그렇게 찾은 굉장한 프로그램, Electron을 소개합니다!왜 하필 Electron이죠?Electron?Electron은 GitHub에서 개발한 오픈 소스 프레임워크로, 웹 기술(HTML, CSS, JavaScript) 을 사용하여 데스크탑 애플리케이션을 만들 수 있게 해줍니다.Node.js와 Chromium을 결합하여 크로스 플랫폼 애플리케이션을 개발할 수 있으며, 윈도우..

https://medium.com/@tminstaller/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C%EC%9[…]D%94%EA%B5%AC%EC%A1%B0%EB%8A%94-%EC%97%86%EB%8B%A4-ba3a47e91508 프론트엔드에 적절한 폴더구조는 없다. 폴더구조엔 정답이 있을까요? medium.com

들어가며 나는 포트폴리오 웹사이트를 만들었다. 처음엔 그저 언젠간 나만의 페이지를 만들어야지 싶었는데, 그러지 못했다. 왜냐하면 처음부터 너무나도 완벽한 것을 바랬으니, 디자인이 마음에 들지 않으면 제작하지 않기를 반복하였다. 그렇게 시간이 흘러 웹 개발을 시작한 지 1년이 다 되어갈 무렵, 클린코드에 대한 컨퍼런스를 다녀오며 프로젝트와 코드를 대하는 마음가짐을 어떻게 설정해야 할 지에 대한 생각의 변화가 생겼다. 바로 이 글을 통해 생각이 변했다. 우선 만들어두고, 계속해서 발전시켜나가야겠다. 언제곤 머릿속에서만 아이디어로 남겨둘 수는 없다. 그렇게 생각하는 순간 바로 이 계획을 실행하기로 했다. 간단하게 초안을 만들고, 계속해서 업데이트 해나가는 방식으로 코드를 성장시키기로 했다. 그렇게 만들어진 사..

0. 문제 상황 파악하기 가장 먼저 해야 할 일은 현재 프로젝트에서 내가 무엇을 해야하는가에 대한 이해와 이 문제를 해결하기 위해 어떤 것을 활용하느냐 입니다. 그 부분을 잘 알고 있으시다면 분명 원활한 협업이 이루어질 것이라고 생각하며 글을 시작합니다. 어느정도 초반 세팅이 되어있다면 프로젝트에서는 2~5번을 반복합니다. 1. 프로젝트 클론 받기 우선 개인 컴퓨터가 준비가 되셨고, 팀 organization이 있다면 그 안에 프로젝트 레포지토리로 들어가줍니다. 팀원과 함께 프로젝트를 함께 세팅을 했을 것이고, 그 프로젝트 파일이 당신의 컴퓨터에 존재하지 않는다면 이 과정을 거치도록 합니다. 이 글에서는 프로젝트가 진행중인 frontend를 기준으로 설명드리겠습니다. 우선, 작업을 하려는 레포지토리로 들..

TailwindCSS를 사용하기 위해 프로젝트에서 작업을 하다가 무언가가 이상하게 디자인이 적용이 안되어서 원인을 파악해보아야겠다고 생각했습니다. 따라서 이 글은 어떤 원인들이 있었고 어떻게 해결했는 지 기록해 둔 글입니다. 프로젝트 스펙 Vite, React, TypeScript TailwindCSS yarn 원인 원인은 여러가지가 있던 것 같았습니다. 나열 해보자면 아래와 같았습니다. 패키지 설치 시 tailwindcss만 설치한 점 typescript 프로젝트로 마이그레이션 하면서 tailwind.config.js를 .cjs로 변경한 것 tailwindcss를 어느 형식의 파일에 적용시킬 것인 지 명시하지 않은 것 index.css에 import문을 통해 tailwind를 선언한 것 해결법 해결법은..

상황 : .prettierrc 파일에 따로 typescript 설정을 해두지 않았습니다. 문제는 아래와 같았습니다. const [position, setPosition] = useState({ x: 0, y: 0 }); const [dragging, setDragging] = useState(false); const [rel, setRel] = useState(null); // 위와 같아야 하던 코드가 Prettier 세팅으로 인해 아래와 같이 변경됨 const [position, setPosition] = useState { x: 0, y: 0 }; const [dragging, setDragging] = useState false; const [re..

프론트엔드를 함에 따라 기본적인 개발과정을 따를 수 있으면 한 번 씩은 바라보는 주제가 있습니다. 바로 시각화 입니다. 어떤 주제로 개발을 할 때, 개발에 사용했던 데이터를 이용하여 시각화를 하는 것은 꽤나 값진 경험이 될 것입니다. 그렇기에 오늘은 D3를 이용하여 간단한 노드를 연결하는 작업을 해 볼 것입니다. 우선, D3가 무엇인 지 알아보아야겠죠? D3를 이전에 정리했던 글에서 살펴보실 수 있습니다. [D3.js] 강력한 성능의 시각화 라이브러리, D3.js에 대해 알아보자 D3.js 라는 이름을 들어 보셨나요? "Data-Driven Documents"의 줄임말인 D3.js는 웹 표준을 이용해 데이터를 시각화하는 데 사용되는 강력한 자바스크립트 라이브러리입니다. 주로 프론트엔드 고도화의 time-..

웹 디자인을 할 때 필요한 피그마 그리드 템플릿입니다. Columns과 Rows로 나뉘며 스펙은 다음과 같습니다. 이런 그리드가 들어올텐데 Columns와 Rows는 Grid를 선택해서 고를 수 있습니다. 제작 후 눈 모양을 통해 켜고 끄며 그리드를 활용하여 웹 디자인을 진행할 수 있습니다. Columns(세로줄) Count Color Type Width Offset Gutter 10 FF0000, 10% Center 80 0 20 Rows(가로줄) Count Color Type Height Offset Gutter 10 FF0000, 10% Center 16 0 16 결과물 End

상황 설명 Project: HQRoutine IDE: Visual Studio Code Environment: Mac M1(Apple Sillicon) 상황: 맥북 초기화 이후 Project 리팩토링 중 작업 branch에서 git pull origin develop을 할 때 아래와 같은 문제 발생 사실 이건 Mac을 산 지 얼마 되지 않았을 때에도 발생했던 문제라서 이렇게 기록을 남겨두면 좋겠다 싶었습니다. 1st Trying - yarn 다시 설치해 보기 Git log 상태 2023-06-03 23:05:13.974 [info] > git -c user.useConfigOnly=true commit --quiet --allow-empty-message --file - [32ms] 2023-06-03 ..

아마 이 글에서 NIMBY는 이런 뜻일 겁니다. Now I am going to tell you about how I fixed error about setting Mysql and mariadb in local environment. But I can't solve this problem. so reset Your computer 2023 Series [ 2023 ] CheckPoint, 2023년 2023년 동안 작성했던 의미있다고 생각하는 포스팅들을 모아 둔 게시글입니다 이 글은 2023년이 끝날 때까지 계속해서 업데이트 해 나갈 예정입니다 [ January ] - 변화의 시작, 1월 더보기 [2022WinterBoo time-map-installer.tistory.com 문제 정의 - 왜 내 lo..

SEO가 무엇인지 궁금하다면? [SEO] 서비스의 검색 엔진 순위를 높여보자, 헤더에 SEO 적용하기 SEO(검색 엔진 최적화)는 웹사이트의 검색 엔진 순위를 높이기 위한 중요한 요소 입니다. 웹사이트를 아무리 잘 만들어 두어도 검색이 되지 않는다면 사용자는 쉽게 들어오지 않을 것이고, 결국 time-map-installer.tistory.com Head 태그 안에 이런 식으로 만들어 보는건 어때요? head 태그 안에 이러한 정보들을 넣으면 SEO를 향상시키는데 좋습니다. 몇 가지 추가 예시를 넣어두었고, 이를 참고하여 작성하면 되겠습니다. 어? meta 안에 name과 property가 있네요? 어떤 차이가 있는건가요? name 속성은 일반적으로 HTML 문서의 메타데이터를 정의하는 데 사용됩니다. ..

우선, 이 파트는 메인 분야가 아니므로 천천히 업데이트될 예정임을 알립니다. 갑자기 이러는 데 이유가 있을 꺼 아니에요.. 그동안 프론트엔드의 길을 잘 걷고 있다가 문득 든 생각이 있습니다. "백엔드에 대해 어느 정도 알고 있으면 협업이 더 잘 되지 않을까?" 맞습니다. 요즘에는 프론트엔드에서도 백엔드의 구조를 어느 정도 알고 있어야 하는 시대입니다. 그리고 백엔드도 할 줄 알면 더 좋다는 건 다른 사람들도 알고 있는 사실이죠. 물론 가장 근본적인 이유는 이 타입스크립트를 이용해 백엔드 코드까지 직접 작성하다 보면 코딩테스트 준비에도 많은 도움이 될 것이라고 생각해서이기도 합니다. 그럼, Nest.js의 세계에서 백엔드와 TypeScript라는 두마리의 토끼를 함께 잡으려고 하는 글을 이제 시작하겠습니다..

백준 알고리즘 문제를 풀 때는 입력을 받고 그 입력을 바탕으로 계산을 수행한 뒤 결과를 출력하는 형태가 일반적이므로, 이를 기반으로 한 간단한 Node.js 템플릿을 만들어 이 글에 제시하였습니다. 백준 바로가기 Baekjoon Online Judge Baekjoon Online Judge 프로그래밍 문제를 풀고 온라인으로 채점받을 수 있는 곳입니다. www.acmicpc.net Node.js 환경에서 사용할 수 있는 Beakjoon용 코드 템플릿 주석을 통해 나눠둔 몇 가지 주요 입력방식에 따른 기본 템플릿입니다. 문제 유형에 따라 주석을 해제하거나 이를 참고하여 입력받는 로직을 완성시키신 이후, 아래의 solution 함수 내부에 정답을 위한 코드를 적어 사용하시면 됩니다. // 이 두 줄을 필수로 ..

ESLint는 개발할 때 있어 매우 유용하게 쓰이는 코드 품질을 책임져주는 도구들 중 하나입니다. 그리고 여기에는 개발을 하고 ESLint를 사용할 때 미리 커스텀을 해둘 수 있는 파일인 .eslintrc.js의 템플릿을 미리 만들어두었습니다. 개발환경 세팅을 할 때 이 글이 많은 도움이 되길 바랍니다. 아래에는 참고하면 좋을 관련 글과 작성하는데 참고했던 프리티어 공식 문서를 두었습니다. [ESLint, husky, Prettier] 당신의 코드 품질을 책임져주는 3가지 도구들 ESLint? Husky? Prettier? ESLint, Husky, Prettier는 프로그래밍을 할 때 코드 품질과 일관성을 유지하기 위한 도구입니다. 그리고 이제 개발의 세계에서는 코드 품질과 일관성을 유지하는 것이 굉장..

Prettier은 개발할 때 있어 매우 유용하게 쓰이는 코드 품질을 책임져주는 도구들 중 하나입니다. 그리고 여기에는 프론트엔드 개발을 하고 prettier을 사용할 때 미리 커스텀을 해둘 수 있는 파일인 .prettierrc의 템플릿을 미리 만들어두었습니다. 개발 시작할 때 이 글이 많은 도움이 되길 바랍니다. 아래에는 참고하면 좋을 관련 글과 작성하는데 참고했던 프리티어 공식 문서를 두었습니다. [ESLint, husky, Prettier] 당신의 코드 품질을 책임져주는 3가지 도구들 ESLint? Husky? Prettier? ESLint, Husky, Prettier는 프로그래밍을 할 때 코드 품질과 일관성을 유지하기 위한 도구입니다. 그리고 이제 개발의 세계에서는 코드 품질과 일관성을 유지하는 ..

[ComputerScience] 비전공자의 시선으로 바라본 TCP와 UDP, 이쯤되면 다시 한번 복습해 봐야겠죠? TCP, UDP, 근본적인 개념이라 이미 알고 있는 내용이긴 한데 다시 자세히 말해보라하면 기억이 잘 나지 않으신가요? 그렇다면 다시 한 번 봐야겠죠! medium.com

이 글은 코딩 테스트를 풀다가 다른 사람들의 풀이를 확인하던 도중 신기한 코드를 발견해서 알아본 내용들을 정리한 글이에요. 정말 신기하게 생겨서 공유하고자 이 글을 작성합니다. 제너레이터 함수란 무엇일까요? 이런 상상을 해봐요. 평화로운 오후, 당신은 서재에서 시간을 보내고 있었어요. 평화롭게 읽고싶었던 책을 읽고 있었는데, 갑자기 중요한 전화가 온 거에요. 책에 책갈피를 꽂아두고 잠시 덮어두고 전화를 받았어요. 업무 관런해서 질문이 들어왔었네요. 당신은 대답을 해주고 다시 책을 펼쳐 정확히 읽던 부분부터 읽기 시작했습니다. 제너레이터 함수도 이와 비슷하게 돌아가요. 함수의 실행을 '일시 중지'했다가 '다시 시작'할 수 있다는 것이죠! 어떻게 작동할까요? function 키워..

들어가며 React Native Expo를 통해 프로젝트를 생성했다면, 이제 각각의 화면마다 이를 넘겨주는 기능이 필요하다. 이에 TypeScript와 함께 사용하는 방법을 보도록 하겠다. React에 React Router DOM이 있듯이 React Native에는 react-navigation이 있다. 이 글에서는 프로젝트를 생성한 상태에서 "home", 그리고 "login"을 만들어 두 페이지끼리 이동하도록 해볼 것이다. 1. Install Packages 먼저 네비게이션과 관련되어있는 모듈들을 설치한다. # 이 부분은 이상하게 npx expo를 통해 설치하면 오류가 발생한다. yarn add @react-navigation/stack # 나머지 패키지 설치(expo cli 사용) npx expo..

들어가며 크로스 브라우징 이슈는 현대 웹 개발의 중요한 과제입니다. 오늘날, Microsoft Edge, Safari, Chrome, Arc와 같은 다양한 브라우저가 존재하면서, 웹 개발자들은 이들 각각의 특성을 고려하여 웹서비스를 개발해야 합니다. 그리고 이러한 상황에서 발생하는 중복과 호환성 문제를 '크로스 브라우징 이슈'라고 부릅니다. 그렇다면, 이 이슈는 왜 발생하는 것일까요? 이 문제를 깊이 이해하기 위해, 먼저 크로스 브라우징의 원인을 살펴보고, 그로 인해 발생하는 문제들을 탐구해보겠습니다. 크로스 브라우징 이슈란? "크로스 브라우징 이슈"는 여러 웹 브라우저 간의 호환성 문제로 인해 발생합니다. 다음과 같이 몇가지 주요한 원인들이 존재합니다 브라우저 간 차이 웹 표준 준수 사용..

들어가며 굳이 테스트 코드가 필요해?? 그냥 실행해보면서 개선사항들을 찾으면 안되려나? 나는 지금까지 프론트엔드 개발을 접해오면서 이런 생각을 해왔다. 그도 그럴것이 백엔드보다는 테스트가 덜 중요한 것이 이 프론트엔드였고, 프론트엔드에서는 렌더링만 잘하고 화면을 멋지게 잘 구성하기만 하면 된다라는 인식이 널리 퍼져있기 때문이었다. 하지만 이는 내 오판이었다. 실제로 개발을 하면서 규모가 커지고 복잡해지자 어디서부터 오류가 발생하였는 지 찾는 데 걸리는 시간이 훨씬 더 오래 걸리게 되었고, 테스트코드를 작성하지 않음으로 인해 생겨나는 디버깅 시간이 테스트코드를 작성하는 데 걸리는 시간보다 더 길게 걸린다는 사실을 얼마 뒤 알 수 있었다. 그렇다면 테스트코드, 왜 필요한 것이고 어떻게 작성해야 할까? 우아한..

들어가며 최근 참여하고 있는 우아한테크코스 프리코스의 1, 2주차를 지나며 그동안 해오던 것과는 다른 방식인 객체지향 프로그래밍을 사용하여 코드를 작성하기 시작했습니다. 이젠 서로 다른 두 방법을 모두 익히게 되어 이를 통해 프로그래밍 그 자체에 대한 더 깊은 이해로 나아가기 위한 초석이 될 것이라 믿고 있습니다. 그리고 여기에 스스로 익힌 클래스에 대한 내용을 정리해두도록 하겠습니다. https://time-map-installer.tistory.com/258 1주차 후기: 숫자야구게임, 그런데 객체로 만든다고? 이 포스팅은 회고 겸 TroubleShooting 겸 한 주 간의 고민과정을 모두 정리해둔 글임을 알립니다 Visit GitHub Repository 프리코스가 그렇게 유명하다던데? 지난 번 ..

Automatic Batching이란 무엇일까? [[React]] 18에서 나온 새로운 기능, Automatic Batching에 대한 문서이다 여기서 Batching이란, 이벤트 핸들러나 hooks 안에서 상태 업데이트를 묶어서 동작하도록 만들어준다. 즉, 렌더링을 한 번만 일어나도록 해주는 것이다 따라서 Automatic Batching = 자동화된 일괄 렌더링 이라고 생각할 수 있다 사실 생각해보면 이상하다. 기존의 함수 내부에서 여러 setState()를 실행시키면 이미 Batching이 이루어졌을까? 그 이유는 React에는 여러 번의 state update 작업을 Queue에 몰아넣고 일정 주기마다 Queue에 등록된 작업을 순차적으로 일괄 시행하면서 불필요한 리렌더링을 방지하는 특징이 있기..

전부터 궁금한 것이 있었다 비동기 처리는 API에서만 할 수 있는 것일까? 사용자가 상호작용하는 모든 것에 API가 들어있지는 않을 텐데, 그렇다면 어떡하지? 이런 질문들이 나를 감싸고 있을 때, 갑자기 스쳐지나가는 질문 하나가 있었다 Web Worker, 이거 Promise랑 다른건가? 생각해보니 궁금해졌다. 둘 다 비동기, 병렬의 키워드를 가지고 있는 개념이 아닌가 그래서 이참에 Web Worker에 대해 알아보기로 했다 Web Worker란 무엇일까? 싱글스레드인 자바스크립트에서 많은 양의 데이터를 받아와 가공해야하는 경우 시간이 오래걸리게 되면서 병목이 발생, 따라서 다른 스레드에서 병렬적으로 처리해주는 역할을 하는 것이 web-worker다 웹 API의 일부 함수는 멀티 스레드로 처리가 되는 것..

.with Route Handlers 목표 : (구) API Routes라고 불리는 현 Route Handler를 활용해서 API를 Mocking해보자 Framework : NextJS 13(App Router) 여기서 사용 할 예시 API는 POST api/v1/users/login 로그인 기능이다. 돌아가는 지 확인만 해 볼 예정으로 간단하게만 mocking 해 볼 예정 1. app directory에 api 경로 생성 우선, API 명세서의 엔드포인트에 맞게 경로를 생성한다. app directory 내부에 다음과 같이 생성한다. app ┗ api ┃ ┗ v1 ┃ ┃ ┗ users ┃ ┃ ┃ ┣ login ┃ ┃ ┃ ┃ ┗ route.ts만약 엔트포인트 끝에 id와 같은 특정 값이 들어오는 경우 ..

React 18에 등장한 React Server Components React 18에서 새롭게 도입된 개념인 React Server Component(RSC) 에 대해 살펴봅시다. React Server Components(RSC)란? RSC는 서버에서만 렌더링되어 전달되는 컴포넌트를 의미합니다. 이는 HTML이 아닌 특별한 형태로 서버에서 렌더링되어 클라이언트에게 전달됩니다. 특히, NextJS App Router는 이를 기본적으로 지원합니다. 기존 방식의 문제점 컴포넌트 구조는 다음과 같이 설정됩니다 const App = () => { return ( ) } 기존의 방식은 각 컴포넌트에서 API 호출을 통해 데이터를 렌더링합니다. 이렇게 하면 각 컴포넌트는 자신에게 필요한 데이터만을 받게 됩니다. 각..

오늘은 Next.js 13버전이 Stable이 되고 시간이 흘러 안정되었다고 하여 이를 프로젝트에 적용해보고자 하였고, Page Router였던 12버전 대신 App Router을 사용할 예정이므로 큰 변환점을 중심으로 하여 리뷰해보려고 합니다. 다들 Next.js가 React를 기반으로 한 프레임워크라는 것을 알고계신다는 전제 하에 진행하도록 하겠습니다! 간단하게 알아볼 5가지 특징들(App Router 기준) 여기서 알아볼 5가지는 다음과 같습니다. App Router로 넘어오면서 새로 등장한 app directory App Router로 넘어오면서 변경된 Rendering 설정방법 개선된 Navigation tag, API Routes를 통한 백엔드 접근 보다 개선된 이미지 렌더링을 위해 사용된 1..

Spring Boot를 사용하기 위해 학습을 하던 중, 문득 HTTP 요청에 따른 어노테이션들이 무엇이 있고, 어떤 일을 하는 지 궁금했습니다. 그래서 저는 이에 대해 알아보기로 하였고, 나중에 이 글을 읽고 도움이 되었으면 하는 마음에 새 글을 작성하기로 하였습니다. @GetMapping 은 무엇인가요? @GetMapping은 Spring Framework에서 제공하는 annotation이며, 주로 HTTP GET 요청을 처리하는 메소드에 사용됩니다. 이는 @RequestMapping의 특수한 형태라고 볼 수 있습니다. 기본적으로, @GetMapping은 컨트롤러의 메소드 위에 위치하여, 특정 URL에 대한 GET 요청이 오면 그 요청을 처리할 메소드를 지정합니다. 간단한 예를 보자면 다음과 같습니다...

JWT를 프론트엔드와 백엔드 관점에서 살펴보자 JWT(Json Web Token) 로그인 방법은 클라이언트(프론트엔드)와 서버(백엔드) 간의 사용자 인증을 수행하는 데 주로 사용됩니다. 이 방법을 사용하면 사용자는 한 번 인증하면 해당 토큰을 계속 사용할 수 있으므로 복잡한 세션 관리를 할 필요가 없습니다. 이에 대한 설명을 프론트엔드와 백엔드의 관점에서 분할해 설명하겠습니다. 프론트엔드 사용자가 프론트엔드에서 로그인 요청을 할 때, 일반적으로 아이디와 비밀번호 등의 정보를 함께 보냅니다. 이는 일반적으로 HTTP POST 요청을 통해 이루어집니다. 로그인 요청이 성공하면 서버는 JWT를 생성하고 이를 HTTP 응답으로 클라이언트에게 보냅니다. 클라이언트(프론트엔드)는 이 토큰을 저장해야 합니다. 이를 ..

BEM (Block, Element, Modifier)은 CSS 클래스를 명명하는 방법론 중 하나로, HTML과 CSS의 구조를 더 이해하기 쉽고 유지보수하기 쉽게 만들어주는 효과가 있습니다. BEM의 이름은 아래 세 가지 컴포넌트에 따라 붙여집니다. Block (블록) Element (요소) Modifier (수정자) 1. Block (블록) 블록은 독립적인 엔티티로, 재사용이 가능합니다. 예를 들면, 헤더, 컨테이너, 메뉴, 체크박스 등이 이에 해당합니다. 2. Element (요소) 요소는 블록 내부의 구성 요소로, 블록이 없으면 의미를 가지지 못합니다. 예를 들면, 메뉴 항목, 리스트 항목, 헤더 타이틀 등이 이에 해당합니다. 3. Modifier (수정자) 수정자는 블록이나 요소의 상태와 행동을..

결론부터 말해보자면 JWT를 많이 사용합니다. 그 이유 중 하나가 세션을 쓰는 방식 자체가 확장성이 있는 구조가 아니기 때문입니다. 세션과 JWT, 이 두 방법은 어떤 차이가 있는지 알기쉽게 설명 해보도록 하겠습니다. 세션(Session), 고속도로 일반 결제 창구 세션 방식을 사용하는 것은 고속도로의 일반 결제창구를 이용하는 것과 유사합니다. 운전자가 창구에 도착하면 요금을 납부하고, 차량이 정상적으로 통행료를 납부했음을 확인하기 위해 입출구 정보가 기록됩니다. 이 기록은 서버의 메모리에 저장되며, 차량이 고속도로를 빠져나갈 때까지 유지됩니다. 이 방식은 안전하지만, 차량이 많아질수록 결제 창구에서 대기하는 차량이 많아지고, 이로 인해 부하가 발생합니다. JWT(JSON Web Token), 하이패..

문제 링크 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 정답 코드 번호에 따른 이동 방향을 미리 정해두고 대각선 방향의 경우에는 두 번에 걸쳐 이동하도록 설계하였습니다. function solution(arrows) { let answer = 0; // 방의 개수를 저장할 변수 // 각 방향에 따른 좌표 변화를 저장한 배열 // prettier-ignore const move = [ [-1, 0], [-1, 1], [0, 1], [1, 1], [1, 0], [1, -1], [0, -1], [-1, -1] ]; let vertexVisited = new ..

문제 링크 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 정답 코드 Array.from()을 이용하여 초기에 크기가 정해진 배열을 생성해두는 데 사용하였습니다. function solution(n, results) { let answer = 0; // 정확하게 순위를 매길 수 있는 선수의 수를 저장하는 변수 // n+1 크기의 2차원 배열 생성. 모든 값은 false로 초기화 let graph = Array.from({ length: n + 1 }, () => Array(n + 1).fill(false)); // results 배열을 순회하며 승리한 선수..

문제 링크 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 정답 코드Array.from(); JavaScript ES6에 등장한 문법으로, 이 코드에서는 length에 할당된 길이만큼의 빈 배열을 만드는 데 사용되었습니다.// edge = [[3, 6], [4, 3], [3, 2], [1, 3], [1, 2], [2, 4], [5, 2]] function solution(n, edge) { // graph 배열을 초기화. 각 노드와 그 노드에 연결된 다른 노드들의 정보를 저장할 예정. const graph = Array.from({ length: n + 1 }..

캘린더를 완성한 이후 풀었던 모든 문제들을 이 글에 담아 올립니다. 가장 최적화된 코드로 푼 것은 아니기에 코드를 본 후 본인만의 방법으로 코드를 재구성해보는 건 어떨까요? 문제를 풀어보고 싶다면? 코딩 기초 트레이닝 | 프로그래머스 스쿨 프로그래밍 언어를 처음 접하거나 프로그래밍 언어에 익숙해지고 싶다면? 코딩 역량을 탄탄하게 길러주는 코딩 기초 트레이닝으로 차근차근 코딩에 대한 기초 감각을 길러 보세요. school.programmers.co.kr Day 1 - 출력 문자열 출력하기 const readline = require("readline"); const rl = readline.createInterface({ input: process.stdin, output: process.stdout, }..

문제 링크 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 초기 정답 코드 - 로직 설명 주석 // 함수 solution은 세 개의 매개변수를 받습니다. // n: 전체 섹션의 개수 (정수) // m: 한 번에 처리할 수 있는 섹션의 범위 (정수) // section: 처리해야 할 섹션의 목록 (정수 배열) function solution(n, m, section) { // count는 처리된 섹션의 개수를 저장합니다. let count = 0; // location은 현재 처리 위치를 저장합니다. let location = 0; // section 배열의..

문제 링크 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 초기 정답 코드 - 소인수분해 로직 사용 기존 우리가 알고 있던 약수를 구하는 가장 기본적인 for 문 로직으로는 시간 초과가 발생하였습니다. 그래서 소인수분해를 통해 얻은 각 인수들의 지수+1 을 더하는 로직을 사용하여 문제를 해결했습니다. function solution(number, limit, power) { let answer = 1; // 소인수 분해 함수 정의 function primeFactorization(num) { const factors = {}; let divisor = 2;..

문제 링크 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 초기 정답 코드 function solution(cards1, cards2, goal) { let answer = "Yes"; // 여기에 이전 사용한 카드 뭉치 명 저장 let lastCards = "cards2"; // 여기에 만들어지는 문장 저장 let sentence = []; // 각각의 카드들에서 하나씩 빼가면서 0번째 자리에 들어갈 수 있는 지 확인하는 로직 goal.forEach((g) => { if (g === cards1[0] && cards1) { sentence.push(ca..

문제 링크 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 초기 정답 코드 function solution(s) { let answer = ''; s = s.split(" "); answer = `${Math.min(...s)} ${Math.max(...s)}`; return answer; } 로직 설명 주어진 숫자들이 들어있는 문자열 s를 공백을 기준으로 나눕니다. 템플릿 리터럴을 이용하여 간결하게 문자열 내에 최솟값과 최댓값을 배치합니다. 정답을 반환합니다. 1차 개선 - 한 줄 코드 만들기 불필요한 선언과 리턴을 줄여 한 줄 코드로 만든 결과물 입니다..

문제 링크 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 초기 정답 코드 function solution(lottos, win_nums) { let answer = []; let sameNumCount = 0; let zeroCount = 0; // lottos와 win_nums를 크기순으로 정렬 // 우선 이 둘의 같은 숫자의 개수와 0의 개수를 따로 저장 // 같은 숫자의 개수는 최저 점수가 될 것이고, 같은 숫자 + 0의 개수를 더한 순위는 최고 점수가 될 것 lottos.forEach((l) => { if (win_nums.includes(l)) ..

문제 링크 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 초기 정답 코드 function solution(k, score) { let lowList = []; let nowList = []; for (let i = 0; i Math.min(a, b))); nowList.sort((a, b) => a - b); } else { if (score[i] > nowL..

DFS 문제를 통해 여러 시행착오를 거칠 필요가 있다고 생각했던 나는 한 문제를 더 찾아서 풀기 시작했고, 재귀 함수를 이용했기에 발생했던 런타임 에러가 발생했다 해결법도 찾았고, 그 방법까지 해서 이번 글에 포스팅하려고 한다 문제 1012번: 유기농 배추 차세대 영농인 한나는 강원도 고랭지에서 유기농 배추를 재배하기로 하였다. 농약을 쓰지 않고 배추를 재배하려면 배추를 해충으로부터 보호하는 것이 중요하기 때문에, 한나는 해충 방지에 www.acmicpc.net 문제 분석 이 문제는 DFS를 이용하여 블록단위 탐색을 이용하면 되지만 몇 가지 유의사항이 존재한다 그래프 형태로 존재하는 것이 아닌 좌표단위로 존재하는 것 -> 가상의 그래프 맵을 만든다 배추밭이 굉장히 넓어졌을 때 재귀를 이용할 경우 깊이의 ..

SM 마에스트로 준비가 한창인 와중, DFS에 대해 자신감이 생겼다 싶어서 도전 해 본 문제이다 한 번에 맞춰 기분이 좋은 문제였다 문제 문제 분석 이 문제는 DFS를 이용해서 풀 수 있다. 재귀적인 방법을 통해 하나를 발견하면 상, 하, 좌, 우로 이동하며 재탐색을 하는 과정을 거친다 그리고 DFS 한 번 실행될 때마다 단지 하나가 1 -> 0으로 바뀌므로 그 타이밍에 count + 1 하는 방법을 생각했다 후에 한 DFS 사이클이 끝날 때마다 count를 초기화시키는 방법으로 단지 별 건물 수를 세었다 코드 작성 N = int(input()) house = [] for i in range(N): house.append(list(map(int, input()))) # 단지의 건물 개수를 담을 변수 co..

문제 코드 설계 유의사항 1. 첫 글자를 담고, 이를 세는 변수 추가, 다음 글자가 같다면 새로 담지 않고 세는 변수를 1 증가 2. 첫 글자와 다른 글자가 나온 횟수 변수 추가, 첫 글자 count 변수과 값이 같아지면 첫 번째 문자 값을 옮긴 후 분리하기 3. 분리 할 때마다 이를 세는 변수를 증가시키고, 분해하지 못하면 종료하기 코드 # 풀이 추가 def solution(s): # count 할 배열 미리 생성, 처음에는 첫 번째 글자 저장 # 두 번째와 세 번째에는 각각 s[0]과 동일하고, 다른 문자를 세는 자리이다 answer = 0 count = [s[0], 0, 0] # count에 저장된 변수들의 조건에 맞게 작성하고 문제에 나온 조건에 따라 마지막에 한 번 더 분리한다 for i in ..

문제 카카오 아이디 규칙에 맞게 추천 1. 아이디의 길이는 3자 이상 15자 이하 2. 아이디는 알파벳 소문자, 숫자, 빼기( - ), 언더바( _ ), 마침표( . )만 사용가능 3. 마침표( . )는 처음과 끝에 사용하지 못하며 연속으로 사용 불가능하다 신규 유저가 입력한 new_id가 규칙에 맞지 않다면 아래와 같이 추천 1. new_id의 모든 대문자를 소문자로 치환 2. new_id에서 알파벳 소문자, 숫자, 빼기( - ), 밑줄( _ ), 마침표( . )를 제외한 모든 문자 제거 3. new_id에서 마침표( . )가 두 번 이상 연속 된 부분을 하나의 마침표( . )로 치환 4. new_id에서 마침표( . )가 처음이나 끝에 위치한다면 제거 5. new_id가 빈 문자열이라면 new_id에..

문제를 제대로 파악한 후 시나리오를 미리 따로 적어두고 코드를 작성하면 크게 어렵지 않게 풀 수 있는 문제인 것 같다 문제 화면의 구성, 규칙을 다음과 같이 설정 할 예정이다 1. 게임 화면은 N x N 크기의 격자이다 2. 위쪽에는 크레인이 있고, 오른쪽에는 바구니가 있다 3. 각 격자마다 다른 속성의 인형이 있고, 인형이 없는 칸은 공백이다 4. 각 인형들은 아래에서부터 차곡차곡 쌓여있다 5. 크레인을 멈춘 위치에서 인형을 들어올릴 수 있다 6. 집어올린 인형이 바구니에 들어가면 아래에서 부터 쌓인다 7. 바구니에 같은 속성의 두 개의 인형이 두 개 붙으면 사라진다 8. 바구니는 모든 인형이 들어갈 정도로 크다 무엇을 확인해야할까? 1. board 배열은 N x N 형태로 ( 5