분류 전체보기

[문제] stack https://school.programmers.co.kr/learn/courses/30/lessons/12909 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 🤔 문제풀이 1. 첫 풀이 처음엔 단순히 스택구조로 쌓다가 역방향이면 없애주고 아니면 스택에 쌓다가 마지막 스택에 값이 남아있는 유무로 판단하려 했으나, 테스트케이스와 효율성에서 실패판정을 받았다. function solution(s) { let stack = []; for (const str of s.split('')) { if (str === '(') { stack.push..

[문제] https://school.programmers.co.kr/learn/courses/30/lessons/12930 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 🤔 문제풀이 내 풀이 문자열을 배열로 만들고 루프 돌면서 짝수일 경우 대문자 홀수일 경우 소문자로 변환 후 문자열로 반환해서 풀었다. function solution(s) { const arr = s.split(' '); const answer = arr.map((str) => [...str] .map((s, idx) => (idx % 2 === 0 ? s.toUpperCase() : s..

aws 관련 학습량이 점점 늘어남에 따라 학습한 내용을 정리하려함. 개요 풀스택 앱 구축을 위한 개발환경으로 기존 Amplify 백엔드 구축기능을 기반으로 빠르게 UI개발을 만들수 있도록 도와주는 서비스로 현재 개발중인 서비스를 스튜디오로 얼마나 빠르게 구축할수 있는지 테스트시도중 Amplify Studio Amplify Studio의 UI Library 기능이 최근 AWS re-invent에서 소개되었고. 이 UI Library를 통해 피그마 (Figma)디자인을 리액트 컴포넌트 코드로 변환가능. AWS Amplify CLI 설치 Amplify CLI를 글로벌 설치. (글로벌 설치란 패키지 안에서만 사용하는 것이 아닌 컴퓨터 안에 설치해서 언제든 사용가능) $ npm install -g @aws-amp..

오늘 배운것 window.location 객체 클립보드에 내가 현재 위치한 링크주소 말고 가고자하는 주소의 링크를 클립보드에 담을때 window.location 객체 중 origin을 활용 https://developer.mozilla.org/en-US/docs/Web/API/Location/origin location.origin - Web APIs | MDN The origin read-only property of the Location interface is a USVString containing the Unicode serialization of the origin of the represented URL. developer.mozilla.org https://hsmtree.wordpress...

오늘 배운것 계정여러개 세팅 회사에서는 bitbucket계정을 사용하지만 개인작업이다 협업프로젝트는 깃허브계정을 필요에 따라서 쓸수 있도록 세팅이 필요했다. https://want-itschool.tistory.com/48 [Git] github 다수의 계정 사용하기 회사에서 사용하는 github 계정과 개인 계정을 같이 쓸 수 있다는 사실을 구글링을 통해 알아내고서 열심히 뻘짓을 하며 며 성공했다...! 나중에 다시 하려면 또 뻘짓을 할 것 같아서 포스팅하기로 want-itschool.tistory.com https://jeunna.tistory.com/109

오늘 배운것 ract-query에서는 요청을 보내고 새로운 데이터를 받아올때 어떻게 해야할까? mutataion을 수행한 이후,변경된 데이터를 화면에 보여줘야하는 상황이 자주 있는데. 예를들면 북마크거나 이미지 또는 로고를 변경하는 등 많은 상황에서 변경된 데이터값으로 화면에 띄어줘야하고 이를 위해서는 데이터를 refetch하여 최신화해주어야 한다. react-query를 통해 refetch할 수 있는 방법을 몇가지 확인했다. 1. useQuery refetch 활용 react-query는 데이터 가져오기를 담당하는 키와 함수를 사용하는 useQuery 라는 훅이 사용가능하며 useQuery라는 후크를 가져옴. 다음과 같이 사용할 수 있다. const { isLoading, isSuccess, data,..

공식문서를 통해 진행 Next.js 사이드 프로젝트 특성상 검색엔진에 노출이 필수적이기에 Next.js의 도입이 필요하여 간단하게 튜토리얼을 진행해 보았다. Next.js는 빠른 웹애플리케이션을 만들기 위한 빌딩블록을 제공하는 리액트 프레임워크이다. 정확하게 리액트의 어떤부분을 서포트 해주는것인가. 웹 애플리케이션을 만들기 위해 고려해야할 몇가지가 있다. 유저인터페이스-우리의 앱을 유저가 어떻게 사용하고 적응하는가? 라우팅 - 사용자가 우리의 앱에서 어떻게 이동하는지? 데이터 fetching- 데이터를 어디서 어떻게 가져올것인가? 렌더링 - 정적, 동적인 컨텐츠를 언제 어디서 보여줄것인가? 인터그래이션(통합) 인증, 결제등을 어떨게 연결한것인가? 인프라구조 - 우리의 앱코드를 배포하거나 저장을 어떻게 할..

오늘 배운것 MUI datagrid switch button 추가 marterial-ui datagrid활용시 row와 column을 주입하면 높은 완성도의 테이블이 구축된다. column객체에 열을 정의하는 요소를 넣어줄수있는데 정의된 property가 생각보다 많아 잘활용하면 내가 원하는대로 쉽게 테이블을 구성할 수 있다. 기본 데이터 외에 열마다 switch버튼을 추가해야 할경우 renderCell이라는 키에 화살표함수에 return값에 만들고자 하는 버튼또는 컴포넌트를 주입하면 원하는 데이터가 완성된다. const column=[ { field: 'status', headerName: '상태', type: 'boolean', width: 210, editable: true, renderCell: ..

오늘 배운것 클립보드 복사하기 버튼 작업목록 중 바라보고 있는 url을 공유하는 버튼이 필요했고 자바스크립트 navigator객체를 활용했다. navigator객체 안에는 다양한 프로퍼티가 존재하는데 clipboardApi를 활용하여 복사기능을 구현해봤다. const clipboardUrl = window.location.href; const copyUrl = () => { navigator.clipboard.writeText(clipboardUrl); return setSnackOpen(true); }; https://developer.mozilla.org/ko/docs/Web/API/Clipboard Clipboard - Web API | MDN Clipboard API 의 Clipboard 인터페이..

오늘 배운것 계획대로 행동하지 않으면 기하급수로 할일이 쌓인고, 악순환의 반복이다. 그동안 일도 많고 생각도 많았는데 다시 하나하나씩 루틴으로 복귀해야겠다. 사이드프로젝트를 하나시작했다. 익숙하지 않은 구조에 파악하는데 조금 애먹었다. 오픈까지 일정이 좀 남긴했지만 스케일이 점점커지게되니 프로젝트에 대한 관심과 시간을 좀더 할애해야할것같다. 텍스트필드 입력에 대한 예외처리를 너무 얕봤다. ㅜㅜ useState 동기화 useState의 비동기작업으로 validation을 통한 팝업처리(예외처리)에 곤욕을 겪었다. 기본적으로 이전state값을 콜백으로 전달하는게 가장 이상적이지만 로직이 복잡해지면 이것도 먹히지 않는다. 아래 글에서 나온 방법은 모두 실패... 결국 로직을 손봐서 해결하긴했다. https:/..