본문 바로가기

분류 전체보기222

SQL문 연습 with 프로그래머스 (1) (MySQL) SQL문 with 프로그래머스 문제 답 (1) SQL문을 연습해보았다. 공부방법은 프로그래머스 문제를 쉬운 문제 부터 풀면서 모르는 문법을 하나씩 체크하고 익혀나가는 것 Level 1 수준 (JOIN 이전 간단한 쿼리문) SELECT -- 코드를 입력하세요 SELECT FACTORY_ID, FACTORY_NAME, ADDRESS FROM FOOD_FACTORY WHERE ADDRESS LIKE '강원도%' ORDER BY FACTORY_ID FACTORY_ID FACTORY_NAME ADDRESS FT19980003 (주)맛있는라면 강원도 정선군 남면 칠현로 679 FT20100003 (주)맛있는음료 강원도 원주시 문막읍 문막공단길 154 FT20100004 (주)맛있는국 강원도 평창군 봉평면 진조길 2.. 2023. 2. 8.
[Nest.js] Nest.js 특징, 구조, CRUD Nest.js 는 Node.js Express를 기반으로 한 프레임웤이다. (선택적으로 Fasify를 사용할 수도 있다.) nest는 Java진영의 Spring Boot를 한번이라도 봤다면 친숙한 느낌을 받을 수 있다. 이는 아키텍쳐 자체가 Sping Boot의 그것과 유사하고 @Annotaion을 통해 링크하는 점이 같기 때문이다. nest의 아키텍쳐는 Angular에서 영감을 받았다고 하는데... (이 부분은 앵귤러를 사용해보지 않아서 의아한데,,, 아무튼 스프링 사용자들도 앵귤러를 좋아하는 걸 보면 그 두 프레임웤 또한 유사하다고 봐도 될것 같다..?) 장점 nest.js를 공부해보고 있는 입장에서 느낀 nest의 장점은 빠른 시간 내로 간단한 Application이 깔끔하게 만들어 진다는 것이다... 2023. 2. 6.
[React.js] useCallback 예시 useCallback에 대해 질문이 들어와서 예시를 만들어 주면서 답변을 해주었는데, 짧게나마 적은 코드가 아까워서 블로그에 남깁니다. const message = 'hi'; function UseCallBackExample() { const [, renderingBtn] = useState(0); const noMemo = () => console.log('hi'); const yesMemo = useCallback(() => console.log(message), [message]); useEffect(() => { console.log('no memo called'); }, [noMemo]); useEffect(() => { console.log('.. 2023. 2. 4.
[LeetCode] 100문제 달성 LeetCode에서 100문제를 풀었습니다. 역시나 아직 미천한 실력이기에 Easy 위주로 풀었지만, 앞으로 점점 실력이 늘어날거니 신경쓰지 않고 200문제를 향해 가야겠습니다. 2023년도 목표가 하루 1문제씩 풀어 400문제를 달성하는것이었는데, 1월이 끝나지 않아 벌써 100문제를 달성하니 기분이 좋네요 ㅎㅎ 이렇게 하루 1문제씩 꾸준히 풀어나가면 400문제는 꼭 풀수있을것 같습니다. 물론 난이도가 점점 높아지겠지만... 실력도 같이 높아질테니 할수.. 있겠..죠?? ㅎㅎ 스타트업에서 프론트엔드 개발자로 일한지 1달이 다되어 가네요. 아직 probation 기간이지만 최선을 다해 배우고 싶습니다. 프론트엔드 개발자로 일하다 보니 문제풀이가 업무에 어떤 도움이 되는건지? 살짝 의구심이 생기긴하는데요 .. 2023. 1. 25.
[Javascript] (LeetCode) 17. Letter Combinations of a Phone Number (Medium) [Javascript] (LeetCode Medium) 17. Letter Combinations of a Phone Number 💡 구글에 Javascript 풀이가 많이 없거나, 배운 점이 있으면 포스팅합니다. 내 풀이 /** * @param {string} digits * @return {string[]} */ //숫자들이 주어진다. // 숫자들은 각 후보가 주어진다. // 숫자들을 돌면서 어떤 후보가 뽑힐수있는지 모든 경우의 수를 잡는다. const letterMap = ['','','abc', 'def', 'ghi', 'jkl', 'mno', 'pqrs', 'tuv', 'wxyz' ] var letterCombinations = function(digits) { const result = [] .. 2023. 1. 1.
[Next.js] Next.js 에서 aos 사용법 (Animation On Scroll) 1. AOS 설치 yarn add aos yarn add @types/aos 또는 npm i aos --save npm i @types/aos --save 2. AOS Init() import AOS from 'aos'; import 'aos/dist/aos.css'; export default function AOSPage() { useEffect(() => { AOS.init() }, []); return ( 넥스트에서도 AOS 된당!!! ); } 저는 AOS에서 하라는대로 했는데 Next.js라 그런지 자꾸 안되어 Github issue를 뒤져서 방법을 찾아냈습니다. 저 같은 경우 import ‘aos/dist/aos.css’를 하지 않아서 css가 안먹은거였습니다. 아.. 2022. 12. 22.
[Javascript] (LeetCode Medium) 841. Keys and Rooms 💡 구글에 Javascript 풀이가 많이 없거나, 배운 점이 있으면 포스팅합니다. 내 풀이 /** * @param {number[][]} rooms * @return {boolean} */ var canVisitAllRooms = function(rooms) { const visitedSet = new Set([0]) const keys = [0] let keyIndex = 0 while (keyIndex { if (!keys.includes(key)) { keys.push(key) } }) visitedSet.add(visiting) keyIndex++ } r.. 2022. 12. 21.
[Javascript] (프로그래머스 level 2) n^2 배열 자르기 💡 구글에 Javascript 풀이가 많이 없거나, 배운 점이 있으면 포스팅합니다. 내 풀이 // 최대 차수 n까지 // 해당 차수의 // 행 채우기 // 열 채우기 function solution(n, left, right) { const arr = Array(n).fill().map((x) => Array(n)) for (let k = 0; k < n; k++) { arr[k][k] = k + 1 for (let i = 0; i < k; i++) { arr[k][i] = k + 1 arr[i][k] = k + 1 } } const firstOrder = arr.flat() return firstOrder.slice(left, right + 1) } 위와 같이 하면 로직은 맞다. 하지만 채점 하면 메모.. 2022. 12. 15.
[Next.js] Next.js 특징, 프로젝트 초기 세팅 1. Next.js 시작하기 넥스트는 리액트 프레임웤이다. 라이브러리에 비해 기능도 다양하고 라이브러리 사용하지 않고도 많은 문제들을 해결할 수 있도록 설계해두어서 편리하게 개발이 가능하다. Next.js의 특징 1. SSR Next.js는 SSR을 지원한다. 이를 통해 SPA의 단점이었던 SEO문제가 해결이 되며, 같은 페이지 컴포넌트를 실행할 때 발생하는 무의미한 깜박거림(Flickering) 현상을 방지할 수 있다. 또한 SSR로 미리 생성해 둔 HTML을 그대로 렌더하기에 한층 더 빠르게 화면에 표현해줄 수 있다. 이외에도 Next.js와 Next.js의 개발사인 Vercell에서 제공하는 Next/image, CDN, Edge Computing 등의 라이브러리와 기법들이 존재하는데 이를 통해 강.. 2022. 12. 13.
[React.js] 제로초 슬랙 클론코딩 - 1. 회원가입/로그인 페이지 (SWR) 강의를 통해 배운 점 SWR을 활용해서 data fetching을 효과적으로 관리할 수 있다. 비동기 처리 뿐 아니라 다양한 방식으로 전역상태를 관리할 수 있는데, 이름 자체가 stale-while-revalidate 인것처럼 api 호출을 효율적으로 관리해주는 것이 가장 큰 장점인것 같다. SWR이 좋다는 이야기도 많이 들었고, 캐싱 기능 등이 강력하고 Next.js와 함께 사용하면 엄청 좋다는 이야기를 많이 들었는데, 이번 강의를 통해 사용해볼수 있어서 좋았다. 로그인, 회원가입, 로그아웃 시 유저정보가 있는지에 따라 Redirecting을 해주는 방법을 배웠다. 이전에 프로젝트를 진행할 땐 스토리지에 토큰이 있는지 없는지를 확인해서 리다이렉션을 진행했는데 이번엔 유저 정보를 받으면 로그인이 되어있다.. 2022. 12. 12.

티스토리툴바