분류 전체보기 (65) 썸네일형 리스트형 [React] useEffect 사용해보기 [React] useState 사용해보기멘토님께서 React에서 제공하는 useHook 중 몇 개를 써보았는지 물어보시며한번씩 다 써보는걸 추천하셨다. 그래서 하나씩 직접 써보고 정리해보기로 했다.🙂 React에서 가장 자주 사용되는 Hook인 usmin-i0212.tistory.com이전 편에 이어 이번엔 useEffect를 사용해보자 React에서 컴포넌트의 렌더링 외 작업이 필요한 순간이 있다. 예를 들자면- API 요청- 이벤트 리스너 등록- 타이머 설정- 외부 상태 동기화등등.. 이런 작업들을 사이드 이펙트라고 하며, 이를 처리하기 위해 useEffect라는 Hook을 제공한다. useEffect란?컴포넌트가 마운트(렌더링)된 이후 실행되는 코드 블록을 정의할 수 있게 해주는 Hook이다.us.. 구름톤 풀스택 트레이닝 12회차를 마치며 지난 금요일, 7개월 동안의 대장정이 마무리되었다.기억에 남기고 싶어 이렇게 주절주절 정리해본다. 프로젝트 기획 발표우리 팀은 FE 2명, BE 4명으로 구성되었다.초기 아이디에이션을 통해 무려 100가지 아이디어를 도출했고,회의를 거쳐 사용자 공감도 / 기술 구현 가능성 / 카카오 API 활용 적합성을 기준으로 선별했다. 최종적으로 선택된 아이템은 자취생을 위한 커뮤니티 플랫폼.기능 확장성과 팀원들의 관심도가 높았던 것이 결정적인 이유였다. 발표 당일솔직히 발표 당일에는 걱정도 많았다.심사위원분들로부터 “일정에 비해 기능이 너무 많다”는 피드백을 들었는데,사실 우리 입장에선 거르고 또 걸러서 남긴 기능들이었기 때문에 좀 아쉽기도 했다 ㅎㅎ.. 그리고 기획 발표 결과는 아쉽게도 1등은 하지 못했다.1등 .. [React] useState 사용해보기 멘토님께서 React에서 제공하는 useHook 중 몇 개를 써보았는지 물어보시며한번씩 다 써보는걸 추천하셨다. 그래서 하나씩 직접 써보고 정리해보기로 했다.🙂 React에서 가장 자주 사용되는 Hook인 useState는 컴포넌트의 상태를 관리할 때 사용된다.상태 관리에도 여러 종류가 있지만 나는 숫자, 객체, 배열의 상태를 다뤄보았다. useState란?useSate는 React에서 컴포넌트의 상태(state)를 저장하고 갱신할 수 있는 Hook이다.const [state, setState] = useState(초기값);여기서 state는 현재 상태 값, setState는 상태를 업데이트하는 함수이다. 실습해보기숫자 상태 관리const Counter = () => { const [count, set.. 구름톤 풀스택 트레이닝 25주차 회고 회고.. 라기보단 이젠 거의 뭐 일기? 있었던 일 메모? 가 되어버린 것 같다. 주차로 표기하기보단 있었던 일들로 나열해본다.. 프론트냐 백이냐 정하여라네 정했습니다.저는 프론트입니다. 그동안 주로 프론트 쪽 작업을 해왔고, 무엇보다 눈에 보이는 결과물을 만드는 게 나와 잘 맞다고 느꼈다.현재 커리큘럼 상 백엔드 강의를 진행해야하지만나는 그 시간에 개인 공부를 하며 프론트에 집중하기로 했다. 쇼핑몰 프로젝트지난 12월에 원티드에서 들은 프론트엔드 강의에서 강사님의 공통 UI 컴포넌트 설계를 보고 깊은 감명을 받았다나도 이걸 쇼핑몰 프로젝트에 적용해봐야겠다고 결심했다. iOS개발할 때도 비슷한 경험이 있었기에 이번에도 금방 할 수 있을거라 생각했지만..일정 계산을 완전히 잘못했다.결국 예상보다 시간이 훨씬.. [vscode] ESLint, Prettier 적용하기 예전 팀 프로젝트인 Web IDE 만들기 프로젝트에서 prettier를 개인적으로 적용한 상태라저장 한 번에 전체 파일 포맷이 바뀌는 상황이 많았고,내가 작업하지 않는 파일도 git diff에 떠서 많은 스트레스를 받았다. 그래서 이번에는 Prettier + Lint를 명확하게 설정하여 vscode에서도 자동 적용 되도록 환경을 만들어해당 이슈가 재발하지 않도록 해야겠다는 결심을 했다. 다른 팀원분께는 위 작업을 위해 내가 이번에 구조 작업을 맡겠다고 제안드렸고 흔쾌히 ok하심 Prettier 설정하기(.prettierrc){ "singleQuote": false, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComma": "all", .. Next.js + SockJS + STOMP로 실시간 채팅 구현하기 구름에서 진행한 Web IDE 프로젝트에서 실시간 채팅 구현을 맡게 되었고,해당 기능을 SockJS + STOMP 조합으로 구현했다.나름 고생했던지라.. 작업 내용과 트러블 슈팅을 기록으로 남기려한다.실시간 채팅 구현하기사용 기술 스택- Next.js- TypeScript- Zustand(v 5.0.3) - 상태 관리- sockjs-client(v 1.6.1) - WebSocket 연결- @stomp/stompjs(v 7.1.1) - 메시징 프로토콜 타입 스크립트에서 STOMP 사용을 위한 declarestompjs와 sockjs-client는 브라우저 전용으로 작성되어 있어, TypeScript 환경에선 타입 에러가 발생한다.`declare module "sockjs-client";`이렇게 declar.. 구름톤 풀스택 트레이닝 12회차 11주차 회고 24년에 마지막으로 작성하고 영 작성을 잊어버린..방학 + 설 다녀왔더니 두 달이 지나버렸네 ㅎㅎ.. 7주차에는 아침 9시부터 실시간 강의를 진행했다.첫날에는 아침 10시부터 시작한다고해서 늑장부렸는데 출석은 9시까지였다? 9시 11분에 출석해서 하루 지각 되어버림..실시간 강의로는 협업과 API 문서화, 깃에 대한 것들을 들었다.오후 시간엔 타입스크립트 강의를 들었다(커리큘럼에는 없음) 8주-9주차에는 팀원들과 TMDB를 활용한 넷플릭스 클론코딩을 진행했다.파트는 자발적으로 가져가기였는데, 나는 상세 정보 모달을 가져왔다.리액트 강의 들으며 넷플릭스 비스무리하게 클론하며 팝업 띄우는 부분을 잘 이해하지 못했는데 이번 프로젝트를 통해 여러모로 공부할 수 있었다. 일정을 짜며 간과했던게 저번 프로젝트까진 .. [Spring Boot] @RestController와 @Controller의 차이점 스프링 입문 실습 후 과제를 진행하기 위해 문항을 봤다. "기본 웹 페이지를 설정하고 @RestController를 사용하여 간단한 REST API 엔드포인트를 구현합니다.예를 들어, “Hello, World” 메시지를 반환하는 API를 만듭니다.엔드포인트 실행 결과 스크린샷 및 코드를 결과물로 제출합니다." 수업들었던 것 참고하려는데 수업에서는 @Controller를 사용했는데 과제는 @RestController?무슨 차이지 하면서 찾아보게 되었다. @RestController란?@RestController는 Spring MVC에서 RESTful 웹 서비스를 개발하기 위한 어노테이션이다.Spring은 반환 값을 JSON 또는 XML로 변환해 클라이언트에 전달하고, @Controller와 @Respon.. 이전 1 2 3 4 ··· 9 다음
