Lucky Charms Clover

전체 글

☘️
🛠️ 프로젝트/☁️ 구름톤 Hongflix

[Hongflix] 조건부 렌더링 헤더 & Slick으로 배너와 캐러셀 만들기

구름에서 진행한 두 번째 팀 프로젝트 ☁️ 넷플릭스 클론 코딩이지만 이번에도 넷플릭스를 똑같이 클론하지는 않았다. 우리 팀의 이름인 홍삼의 홍을 따와 Hongflix를 만들었고 메인 컬러는 남색을 사용했다. 영화 사이트 클론 코딩은 비교적 흔한 레퍼런스이기도 하고, 존 안 코치님의 강의에서도 들었어서 익숙했다. 다만 위 경우는 외부 API를 가져오는 거였고, 우리는 관리자로 고도화 해서 콘텐츠 DB를 CRUD 했다. 그래서 이렇게 생성된 DB에서 정보를 가져오는 구조였지만 그래도 기본 틀은 비슷해서 곧잘 할 수 있었다. 다만 이번 프로젝트의 챌린지는 동영상 재생 & 기간 내 다양한 페이지 구현이었다. 🥲 자세한 부분은 각 파트로 나눠 서술할 예정이다. TO DO 홈 화면 유저 회원가입/로그인 마이페이지 ..

🛠️ 프로젝트/☁️ 구름톤 Hongflix

[HongsamSNS] 로그인/회원가입 구현하기

드디어 쓰는 첫 프로젝트 회고 ☁️ 첫 프로젝트는 7월 말에 시작했던 인스타그램 클론 코딩이다. 우리팀은 똑같이 클론하는 게 아니라 그 안에서도 각자 할 수 있는 부분을 좀 더 디벨롭하기로 했다. 예컨대 CICD나 기획, 디자인 같은 부분을 우리의 입맛대로 수정해서 하면 조금 더 애정이 갈 것 같았다. 이 프로젝트는 어떤... 진짜 공식적인 프로젝트까진 아니었고, 그냥 팀 빌딩 활동의 일환? 이전까지 개인 과제를 했다면 이번에는 좀 더 협업 중심의 팀 과제였다. 강제성은 없었지만, 우리는 본래 스터디 팀이어서 스터디와 병행하면서 프로젝트를 시작했다. TO DO 로그인, 회원가입, 게시글 CRUD, 홈 화면 원래 회의를 거쳐 이런 저런 다양한 기능들이 나왔지만... 우리끼리 협업이 처음이다 보니 처음은 퀄..

⚙️ 코딩테스트

[JavaScript] 프로그래머스 코딩테스트 레벨 2 : 영어 끝말잇기

📌 문제 1부터 n까지 번호가 붙어있는 n명의 사람이 영어 끝말잇기를 하고 있습니다. 영어 끝말잇기는 다음과 같은 규칙으로 진행됩니다. 1번부터 번호 순서대로 한 사람씩 차례대로 단어를 말합니다. 마지막 사람이 단어를 말한 다음에는 다시 1번부터 시작합니다. 앞사람이 말한 단어의 마지막 문자로 시작하는 단어를 말해야 합니다. 이전에 등장했던 단어는 사용할 수 없습니다. 한 글자인 단어는 인정되지 않습니다. 다음은 3명이 끝말잇기를 하는 상황을 나타냅니다. tank → kick → know → wheel → land → dream → mother → robot → tank 위 끝말잇기는 다음과 같이 진행됩니다. 1번 사람이 자신의 첫 번째 차례에 tank를 말합니다. 2번 사람이 자신의 첫 번째 차례에 k..

⚙️ 코딩테스트

[JavaScript] 프로그래머스 코딩테스트 레벨 2 : 캐시

📌 문제 지도개발팀에서 근무하는 제이지는 지도에서 도시 이름을 검색하면 해당 도시와 관련된 맛집 게시물들을 데이터베이스에서 읽어 보여주는 서비스를 개발하고 있다. 이 프로그램의 테스팅 업무를 담당하고 있는 어피치는 서비스를 오픈하기 전 각 로직에 대한 성능 측정을 수행하였는데, 제이지가 작성한 부분 중 데이터베이스에서 게시물을 가져오는 부분의 실행시간이 너무 오래 걸린다는 것을 알게 되었다. 어피치는 제이지에게 해당 로직을 개선하라고 닦달하기 시작하였고, 제이지는 DB 캐시를 적용하여 성능 개선을 시도하고 있지만 캐시 크기를 얼마로 해야 효율적인지 몰라 난감한 상황이다. 어피치에게 시달리는 제이지를 도와, DB 캐시를 적용할 때 캐시 크기에 따른 실행시간 측정 프로그램을 작성하시오. 📌 제한사항 캐시 크..

⚙️ 코딩테스트

[JavaScript] 프로그래머스 코딩테스트 레벨 1 : 신규 아이디 추천

📌 문제 카카오에 입사한 신입 개발자 네오는 "카카오계정개발팀"에 배치되어, 카카오 서비스에 가입하는 유저들의 아이디를 생성하는 업무를 담당하게 되었습니다. "네오"에게 주어진 첫 업무는 새로 가입하는 유저들이 카카오 아이디 규칙에 맞지 않는 아이디를 입력했을 때, 입력된 아이디와 유사하면서 규칙에 맞는 아이디를 추천해주는 프로그램을 개발하는 것입니다. 다음은 카카오 아이디의 규칙입니다. 아이디의 길이는 3자 이상 15자 이하여야 합니다. 아이디는 알파벳 소문자, 숫자, 빼기(-), 밑줄(_), 마침표(.) 문자만 사용할 수 있습니다. 단, 마침표(.)는 처음과 끝에 사용할 수 없으며 또한 연속으로 사용할 수 없습니다. "네오"는 다음과 같이 7단계의 순차적인 처리 과정을 통해 신규 유저가 입력한 아이디..

⚙️ 코딩테스트

[JavaScript] 백준 코딩테스트 2775. 브론즈 1 : 부녀회장이 될테야

📌 문제 평소 반상회에 참석하는 것을 좋아하는 주희는 이번 기회에 부녀회장이 되고 싶어 각 층의 사람들을 불러 모아 반상회를 주최하려고 한다. 이 아파트에 거주를 하려면 조건이 있는데, “a층의 b호에 살려면 자신의 아래(a-1)층의 1호부터 b호까지 사람들의 수의 합만큼 사람들을 데려와 살아야 한다” 는 계약 조항을 꼭 지키고 들어와야 한다. 아파트에 비어있는 집은 없고 모든 거주민들이 이 계약 조건을 지키고 왔다고 가정했을 때, 주어지는 양의 정수 k와 n에 대해 k층에 n호에는 몇 명이 살고 있는지 출력하라. 단, 아파트에는 0층부터 있고 각층에는 1호부터 있으며, 0층의 i호에는 i명이 산다. 📌 입력 첫 번째 줄에 Test case의 수 T가 주어진다. 그리고 각각의 케이스마다 입력으로 첫 번째..

⚙️ 코딩테스트

[JavaScript] 구름톤 챌린지 4주차 코딩테스트 : 통신망 분석 (다시 풀어야 함)

📌 문제 📌 입력 📌 출력 및 예제 📌 풀이 알아야 하는 것 DFS 구할 것 그래프 구현까지는 괜찮은데 DFS 부분부터 좀 까다로워졌다... 특히 출력할 때 조건이 3가지인데 이걸 다 고려해서 코드를 짜야 하는 부분이 좀 어려웠다. 다른 분들 풀이를 참고하고 짬뽕한 거라 아직 로직이 100% 이해가 안 간다. 다시 풀어봐야함. const readline = require('readline'); const rl = readline.createInterface({ input: process.stdin, output: process.stdout, }); let N, M; let graph = []; // 그래프 구성 rl.on('line', (line) => { // 첫 번째 줄에서 N을 읽어올 경우 if (..

⚙️ 코딩테스트

[JavaScript] 구름톤 챌린지 4주차 코딩테스트 : 연합 (다시 풀어야 함)

📌 문제 📌 입력 📌 출력 및 예제 📌 풀이 알아야 하는 것 Array.from BFS 구할 것 BFS로 구현한다. union-find 알고리즘으로 푼 분들이 많던데 이게 뭔지 알아봐야겠다. const readline = require('readline'); let rl = readline.createInterface({ input: process.stdin, output: process.stdout, }); let input = []; rl.on('line', (line) => { input.push(line.split(' ').map(Number)); if (input.length === input[0][1] + 1) { rl.close(); } }); rl.on('close', () => { con..

❔ TypeScript/💭 한 입 크기 TypeScript

[TypeScript] 타입스크립트 실행 및 컴파일러 옵션 설정

타입스크립트 실행하기 시작 npm init -> package.json 확인 npm i @types/node 로 패키지 설치 후 dependencies 확인 (TS 타입 이해하는 패키지) npm install typescript -g: TS 컴파일러도 위와 같이 node.js 패키지로 공급되고 있어서 같이 설치 tsc 로 TS 컴파일러 실행 (tsc -v로 버전 확인): tsc 경로 이 때 ts 파일에서 문제가 없다면 JS 파일이 생성된다. ts node 설치 지금은 TS 타입을 이해하고, 컴파일 하는 패키지만 설치했다. 콘솔에서 TS를 node 로 실행 시키려면 ts node를 설치해야 한다. npm install ts-node -g ts-node 경로 를 입력하면 해당 TS 파일을 VSC에서 실행시킬..

❔ TypeScript/💭 한 입 크기 TypeScript

[TypeScript] 타입 스크립트의 등장과 동작 원리

JS의 약점과 TS의 등장 모든 프로그래밍 언어에는 '타입 시스템'이 존재한다. 타입 시스템이란 값들을 어떤 기준으로 묶어 타입을 규정할 것인지, 코드의 타입을 언제 어떻게 검사할 것인지와 같이 언어의 타입과 관련된 규칙들을 모아둔 체계를 말한다. 이런 타입 시스템은 크게 정적 타입 시스템과 동적 타입 시스템 2가지로 구분된다. 정적 타입 시스템은 C, JAVA와 같이 코드 실행 이전에 모든 변수의 타입을 '고정적으로' 결정해야 한다. 따라서 동적 타입 시스템보다 엄격하며, 모든 변수에 타입을 지정해야 하다 보니 타이핑 양이 매우 증가한다는 단점이 있다. 반대 개념인 동적 타입 시스템으로는 Python, JS가 있다. 동적 타입 시스템은 코드를 실행하고 나서 유동적으로 변수의 타입을 결정할 수 있다. J..

썸머몽
윤일무이