본문 바로가기

전체 글214

LV.2 :: 점프와 순간 이동 https://school.programmers.co.kr/learn/courses/30/lessons/12980 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr function solution(n) { var battery = 0; while (n > 0) { if (n % 2 == 0) { n = n / 2; } // 순간이동 else { battery++; // 점프해야 하는 경우 n = n - 1; } } return battery;} 2024. 10. 21.
LV. 2 :: 카펫 https://school.programmers.co.kr/learn/courses/30/lessons/42842 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr function solution(brown, yellow) { var arr = []; for (let i = 1; i 2024. 10. 21.
LV.2 :: 짝지어 제거하기 https://school.programmers.co.kr/learn/courses/30/lessons/12973 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr function solution(s) { const stack = []; for (let letter of s) { if (stack.length > 0 && stack[stack.length - 1] === letter) { stack.pop(); } else { stack.push(letter); } } .. 2024. 10. 21.
LV.2 :: 피보나치 수 https://school.programmers.co.kr/learn/courses/30/lessons/12945 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr function solution(n) { const arr = [0, 1]; // 피보나치 수열의 첫 두 수 for (let i = 2; i 2024. 10. 21.
LV.2 :: 다음 큰 숫자 https://school.programmers.co.kr/learn/courses/30/lessons/12911 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr function solution(n) { for (let i=n+1; i 2024. 10. 20.
LV.2 :: 이진 변환 반복하기 https://school.programmers.co.kr/learn/courses/30/lessons/70129 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr function solution(s) { let deletedzero = 0; let count = 0; while (s != '1'){ let arr = s.split(''); for (i=arr.length-1; i>=0; i--){ if (arr[i]=='0'){ arr.splice(i,.. 2024. 10. 20.
LV.2 :: JadenCase 문자열 만들기 https://school.programmers.co.kr/learn/courses/30/lessons/12951 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr function solution(s) { let arr = s.toLowerCase().split(''); arr[0] = arr[0].toUpperCase(); for (i=1; ifunction solution(s) { return s .toLowerCase() // 문자열 전체를 소문자로 변환 .split(' ') // 공백을 기.. 2024. 10. 20.
LV.2 :: 최솟값 만들기 https://school.programmers.co.kr/learn/courses/30/lessons/12941 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr function solution(A,B){ A.sort((a,b)=>a-b); // A를 오름차순대로 정렬 B.sort((a,b)=>b-a); // B를 내림차순대로 정렬 for (i=0; i a + b, 0);; // 총합} 2024. 10. 20.
LV.2 :: 올바른 괄호 https://school.programmers.co.kr/learn/courses/30/lessons/12909 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr function solution(s) { const stack = []; // 스택을 초기화 for (let char of s) { if (char === '(') { stack.push(char); // 여는 괄호는 스택에 추가 } else if (char === ')') { if (stack.length > 0) { .. 2024. 10. 20.
LV.0 :: 문자열 여러 번 뒤집기 https://school.programmers.co.kr/learn/courses/30/lessons/181913?language=javascript 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.krfunction solution(my_string, queries) { let arr = my_string.split(''); // 문자열을 배열로 변환 for (let i = 0; i 2024. 10. 18.
LV0 :: 조건에 맞게 수열 변환하기 2 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr function solution(arr) { let tempArr; let x = 0; while (true) { tempArr = []; for (let i = 0; i = 50 && arr[i] % 2 === 0) { tempArr[i] = arr[i] / 2; } else if (arr[i] 2024. 10. 18.
2024년 7월~8월 개발 회고 - Next.js의 getStaticProps를 사용한 서버사이드 렌더링. 서버사이드 렌더링을 어떨 때 쓰는지 알게 됐다.- 크롤링 구현- 구글 캘린더 연동 구현- 크롤링해온 데이터를 구글 캘린더와 연동시켜 유저마다 자신의 개인 구글 캘린더에 전시회 정보를 저장할 수 있게 했음- 범용적으로 쓰이는 레이아웃을 만들어 router별로 다르게 적용할 수 있게 함- 페이지네이션 구현- 연도 내림차순으로 정렬해서 보여주는 코드 작성- 파일 끌어서 넣는 드래그 앤 드롭 구현- 유저의 타입(작가, 갤러리 유저)에 따라 기능(작가 추가 여부)을 다르게 구현- math.random 사용해 랜덤한 숫자를 생성한 후 padding에 랜덤한 숫자를 넣어 사진이 무작위로 놓여있는듯한 레이아웃 만듬- SEO를 위해 페이지의 제목.. 2024. 9. 26.
props 상위 컴포넌트로 올리고 하위 컴포넌트로 내리기 PROPS


Import navnexport default function Layout({ children }) { const [hamburgerMenuOpened, setHamburgerMenuOpened] = useState(false) const hamburgerMenuOpener=()=>{ setHamburgerMenuOpened(true) } const hamburgerMenuCloser=()=>{ setHamburgerMenuOpened(false) } Return //아래로 내려주는코드





import HamburgerMenu from './hamburger-menu';function navn(props) const [hamburg.. 2024. 9. 26.
useRef 사용해서 컴포넌트 바깥을 클릭했을 때 컴포넌트가 닫히게 하기 USEREFimport { useEffect, useRef } from 'react'; const handleDetailMenuClose = () => { setMenus((prevMenus) => prevMenus.map((menu) => ({ ...menu, clicked: false, })) ); }; const appRef = useRef(null); useEffect(() => { const handleOutsideClick = (event) => { if (appRef.current && !appRef.current.contains(e.. 2024. 9. 26.
2024년 5월~6월 개발 회고 - 미디어 쿼리로 웹 버전 / 모바일 버전 만들기- react-beautiful-dnd를 사용해 드래그 앤 드롭 구현- Amplitude라는 툴을 사용하고 코드를 추가해 유저의 리텐션 체크- 아이템을 폴더로 정렬할 수 있게끔 하는 로직 구현- 마케팅 정보 수신 동의 구현- 유저들이 웹사이트 내에서 챌린지를 하나하나 달성해가며 playful한 경험을 할 수 있도록 Playbook 페이지를 개발- 방명록을 만들어 유저들이 방명록을 남길 수 있게 하기 2024. 7. 16.
2024년 4월 개발 회고 - router에서 locale을 받아와, 유저의 현재 지역에 따라 국가를 자동으로 설정할 수 있게끔 했다.- Demo 페이지를 없애고, 회원 가입시 즉시 튜토리얼로 이동시켜, 새롭게 가입한 회원들이 회원가입 직후 웹사이트의 기능을 체험해볼 수 있도록 했다- Mui Datagrid를 Datagrid Premium으로 변경하면서, Datagrid Premium에 맞게 기존 데이터를 이식했다- 아이템들에 폴더를 추가하면서, 폴더의 CRUD를 구현했다- 아이템들의 순서를 변경할 수 있도록 Row Ordering 을 구현했다- 폴더 정렬 모드, 순서 변경 모드를 토글할 수 있도록 했다- 사진 리사이징 및 최적화를 리팩토링 했다- 에 직접 입력해야 했던 아이템의 제작 연도 및 아티스트의 출생 연도를 로 바꿨다- .. 2024. 5. 10.
2024년 2월~3월 개발 회고 지금 회사에서의 1개월 반 동안 발전을 정말 많이 한 것 같다. 좋은 분들과 함께 내가 하고 싶은 일을 열정적으로 하며 개발자로 살고 있다. 내가 구현한 기능- 기존의 텔레그램 API를 사용해, 데모 페이지에서 유저가 이메일 입력 시 사내 텔레그램방으로 알림이 가도록 하기 function reportTelegram(Emaildata) { const today = new Date() const registerMessage = `Lead 생성!\r\n이메일: ${Emaildata}\r\n날짜: ${today.toLocaleString()}\r\nLocale:${router.locale}` api.reportTelegramBot(registerMessage) } - 이미지 최적화con.. 2024. 4. 2.
UI를 개발할 때는 이렇게 하자. 사용자가 혼란스럽지 않도록 하려면 : 아이콘이나 메뉴는 한 페이지에 최대한 적게 넣고, 관계된 것끼리만 묶자. 사람들이 계속 이용하게끔 하려면 : 무한 스크롤(유튜브 숏츠, 넷플릭스, 트위터가 그러하듯)을 사용한다. 사람들이 믿고 쓰게끔 하려면 : "3만명이 선택한 뉴스레터 구독하기", "1500명이 참여한 챌린지에 도전하기", "재이용률 85%인 서비스 믿고 맡기기" 이런 식으로 소셜 프루프 심리를 활용한다. 사용자들을 파악하는 것이 중요하다. 미국의 DIY 업체 홈디포가 중국에서 망한 이유: 중국인들은 DIY에 관심이 없고, 주택을 투기 목적으로 구입해 인테리어가 필요 없어서 미국의 월마트가 한국에서 실패한 이유: 이미 이마트와 롯데마트 등이 한국인의 구매 습관에 최적화되어있어서 인간의 뇌는 보상을 .. 2023. 10. 31.

티스토리툴바