FrontJin

오늘 스탠다드반 강의 직후, 튜터님이 질문을 내고 참여 사람들 중 핀볼을 돌려 랜덤으로 세 명이 대답한 후, 맞추면 상품을 주는 퀴즈 실습 세션 가 진행되었다. Next.js를 공부하면서 희미하게 알고 있던 점을 콕콕 집어주는 내용이 도움이 많이 되어서 블로그에 정리해 두려고 한다.  *모범 답변은 수강생들의 답변을 총정리하여 재구성함. 1. 라이브러리와 프레임워크의 차이는 무엇이고 어떤 장단점이 있나요? 라이브러리(ex.리액트)는 제어권이 개발자에게 있고, 프레임워크(ex.넥스트)는 제어권을 프레임워크가 가지고 있다. 라이브러리는 개발자가 필요할 때 호출하여 사용하는 도구 모음집이고, 가볍다는 장점이 있지만 직접 (react-router-dom과 같은 것들) 가져와야 한다. 프레임워크는 따로 사용 시..

스파르타 강의를 들으면서 4가지 렌더링 방식(SSG, CSR, ISR, SSR)을 배웠다. 그런데 SSR을 배우는 과정에서 SSR는 사용자와 상호작용되지 않는다고 이해했고, 그걸 튜터님한테 말씀드렸는데 hydration이라는 것이 끝나면 상호작용이 가능하다고 하셨다. 이어 hydration에 대해 공부하고 공부한 내용을 토론하자고 말씀을 주셔서 개발 아티클들을 몇 개 뒤져보고 내가 이해한 내용을 기록하려고 한다.  1. 정의 SSR(Server Side Rendering)에서, 서버에서는 사용자의 요청이 있을 때 마다 페이지를 새로 그려서 사용자에게 제공한다. 서버에서 index.html 파일을 제공하고 곧이어 자바스크립트 파일을 제공하는데, 브라우저에서는 html 파일을 미리 로드하고 자바스크립트 파일..

이번 Next 주특기 주차를 맞아 개인 과제가 발제되었다. 저번 mbti 개인 과제를 진행하면서 가장 힘든 것이 하기 싫은 나를 내가 붙들고 책상에 앉혀야 했던 것이었기 때문에, Onegreat튜터님에게 부탁해 보기로 했다.  1. 진행 방법- Onegreat 튜터님 방에 찾아가서 1시간동안 보고하겠노라고 말씀드린다. 1시간 후 계획한 걸 다 했다는 걸 증명하기 위해 + 배운 걸 정리하기 위해 배운 내용을 요약해서 브리핑하고 다음 1시간 동안 무엇을 할 건지 말씀드린다. 이걸 반복.2. 성과-주특기 발제(3시쯤) 스타트해서 8시까지 밥먹는 시간 빼고 한번도 안 쉬었다. 4-50분 집중하고 남은 시간 쉬고를 반복했다. 효과는 엄청 좋다.  3. 문제점-**(중요)**체력의 한계 때문인지 저녁 먹고 나니 집..

이춘구 님의 [번역] 여러분이 React Query를 원하는(x) 필요로 하는 이유 를 읽고 짧게 감상을 서술한다.  이번에 팀 과제에서 북마크 기능을 TanstackQuery로 구현한 것을 인연으로 Vintz 튜터님께서 이 글을 읽어보라고 공유해 주셨다. 나는 사실 스파르타에서 제공하는 자료 외에는 개발 칼럼이나 블로그 글도 필요하지 않으면 잘 읽어보지 않는 편인데, 이 블로그 글을 읽고 개발을 더 깊이 공부하는 것에 대해 필요성을 조금 느껴서 블로그에 기록한다. 흥미로운 점0. ( 사실 ReactQuery가 TanstackQuery를 뜻하는 건지 몰라서 한참 찾아봤다.) 1. 내가 겪지 않았던 오류를 불편한 상황의 예시로 제시하는 것이 되게 도움이 된다.  : 블로그 글에서는 간단한 코드를 제시하고,..

이번 팀 과제에서 제일 애를 먹였던 것은 단연컨대 북마크 기능이다. 튜터님들도 북마크라는 말을 들으면 기겁할 정도로 악명이 높은데, 처음 맡을 땐 그렇게 어려울 줄 몰랐다. 그런데 구현하다 보니 까다롭고, 내가 처음 써보는 데이터 불러오기 기능(axios, try-catch, json-server 다루기 등)들이 너무 많이 쓰였다. 어려운 것을 알고 맡았다면 덜 급했겠지만 모르고 맡았기 때문에 시간이 촉박했다. 튜터님들과 불같은 토론을 통해서 발전한 내 새끼(코드)를 여기에 기록해두려고 한다. 1. 북마크 기능 구현의 방향 로직 자체는 간단했다. 로그인 체크 + 유저정보 빼 오고 > 저장하기 누르면 저장하고 (axios post 써서 데이터 작성하고) > 취소하기 누르면 취소되고(axios delete ..

1. 문제 발생Main에 축제 리스트 데이터를 넣으면서 map을 돌리게 되었는데, map에 key 값이 필요했다. 급한대로 uuid()를 써서 key값을 넣었는데, 멘토링을 진행하다 key값을 uuid로 넣게 되면 리렌더링이 될 때 마다 uuid 값이 변경된다는 것을 알게 되었다.2. 해결 방안따라서 리팩토링을 진행하였다. 생각한 방법은 Festival을 api로 불러왔으니, 거기 값에 id를 더 집어넣어서 festival 마다 고유한 id 값을 만드는 것이었다. festival마다 고유한 id가 있으면 여러모로 편하기도 하고 리렌더링 될 때 마다 uuid가 변경되는 문제도 해결할 수 있을 듯 했다. festival에 어떻게 고유한 id를 넣는가? 일단 festival data를 살펴보기로 했다. axi..

문제 설명새로 생긴 놀이기구는 인기가 매우 많아 줄이 끊이질 않습니다. 이 놀이기구의 원래 이용료는 price원 인데, 놀이기구를 N 번 째 이용한다면 원래 이용료의 N배를 받기로 하였습니다. 즉, 처음 이용료가 100이었다면 2번째에는 200, 3번째에는 300으로 요금이 인상됩니다.놀이기구를 count번 타게 되면 현재 자신이 가지고 있는 금액에서 얼마가 모자라는지를 return 하도록 solution 함수를 완성하세요.단, 금액이 부족하지 않으면 0을 return 하세요. 제한사항놀이기구의 이용료 price : 1 ≤ price ≤ 2,500, price는 자연수처음 가지고 있던 금액 money : 1 ≤ money ≤ 1,000,000,000, money는 자연수놀이기구의 이용 횟수 count :..

문제 설명문자열 s에 나타나는 문자를 큰것부터 작은 순으로 정렬해 새로운 문자열을 리턴하는 함수, solution을 완성해주세요.s는 영문 대소문자로만 구성되어 있으며, 대문자는 소문자보다 작은 것으로 간주합니다. 제한 사항str은 길이 1 이상인 문자열입니다.입출력 예s                                                                                               return"Zbcdefg""gfedcbZ" 풀이 과정더보기감이 안 잡혔다. 큰 것부터 작은 순으로 정렬한다는게 무슨 말이지? 대문자는 소문자보가 작은 것으로 간주한다는 것은 알겠다. 그런데 대문자와 소문자끼리는 어떻게 정렬한다는 거지? 구글에 '대문자 찾아내는 방법'등..