전체 글
모던 리액트 deep dive 스터디 - 2주차 발표 정리
모던 리액트 deep dive 스터디 - 2주차 발표 정리 범위 : 5장 상태관리 웹 애플리케이션에서의 상태란? UI 웹 애플리케이션에서 상태는 상호 작용이 가능한 모든 요소의 현재 값을 의미한다. ex) 다크/라이트 모드, input... URL 브라우저에서 관리되고 있는 상태값 ex) 쿼리 Form 로딩중인지, 제출됐는지, 접근이 불가능한지, 값이 유효한지... 서버에서 가져온 값 API 요청의 결과 tearing을 어떻게 방지할것인가? tearing 하나의 상태에 따라 서로 다른 결과물을 사용자에게 보여주는 현상 리액트에서의 상태관리 Flux 패턴 단방향의 데이터 흐름 액션 어떠한 작업을 처리할 액션과 그 액션 발생 시 함께 포함시킬 데이터를 정의 디스패처 액션이 정의한 타입과 데이터을 스토어에 보..
모던 리액트 deep dive 스터디 - 1주차 발표 정리
모던 리액트 deep dive 스터디 - 1주차 발표 정리 리액트를 선호하는 이유는 뭘까? - 명시적인 상태 변경 리액트의 상태 변화는 '단방향' => 명시적이다. 양방향 데이터 흐름이 나쁜게 아니다. 다만, 단방향의 데이터 흐름은 변화가 단순하기 때문에 코드를 읽기가 쉽고 버그를 야기할 가능성이 비교적 적다는 장점이 있다. - JSX (JavaScript XML) Html에 JavaScript 문법을 더하다. 고유의 몇가지 특징만 이해하면 손쉽게 구현할 수 있다. ex) null은 아무것도 렌더링하지 않는다, JS 문법은 {}로 감싸야한다. 참고로, JSX는 리액트에 종속적이지 않은 독자적인 문법이다. - 비교적 배우기 쉽고 간결하다. 기존에 Html, JavaScript를 써봤다면, 쉽게 배우고 쓸 ..
프론트엔드 신입 개발자 취업 후기
프론트엔드 신입 개발자 취업 후기 오늘부터 진짜 프론트엔드 개발자가 되었다. ☺️ 2021년 컴퓨터공학과로 편입한 뒤로 2년여간의 시간이 지났다. 올해 2월에 졸업하였으니, 졸업 후 취업까지는 3개월정도? 걸린듯하다. 이 포스팅에서는 내가 프론트엔드 개발자 취업을 위해서 어떤 준비들을 해왔는지 적어보겠다. 프론트엔드 신입을 준비하고 있다면 참고하면 좋을 것이다. 우선, 나는 비전공자였다. 세무학과를 다니고 있었는데, 프로그래밍 관련된 일을 하고 싶어 2학년 학교 수업과 병행하여 편입을 준비하여 원하는 컴퓨터공학과로 편입을 하게 되었다. 전공자가 된 이후로 65학점에 달하는 전공 수업들을 2년여간 열심히 수강하였다. 프론트엔드, 백엔드, 빅데이터 등등 여러 관련 수업들을 들었고 내 적성에 가장 맞는다고 생..
Randomly 프로젝트 - React Query 데이터 캐싱 올바르게 사용하기
Randomly 프로젝트 - React Query 데이터 캐싱 올바르게 사용하기 🏡 GitHub : https://github.com/soohyun-dev/Randomly GitHub - soohyun-dev/Randomly: 📑 스터디를 돕는다~! : 질문 관리 프로젝트 📑 스터디를 돕는다~! : 질문 관리 프로젝트. Contribute to soohyun-dev/Randomly development by creating an account on GitHub. github.com React-Query의 캐싱 기능에 대해 잘못 알고 있는 부분이 있었고, 제대로 적용을 해보았습니다. 이전 게시물에서 React-Query를 통해 캐싱 기능을 이용한다고 하였습니다. 하지만, 정작 가장 중요한 stale-Tim..
Remind - 인플루언서 체험단/협찬 관리 서비스 프로젝트
Remind - 인플루언서 체험단/협찬 관리 서비스 프로젝트 📖 주제 인플루언서 체험단/협찬 활동에 대한 일정을 관리해주는 서비스 🛠️ 사용 기술 Vite React Redux-Toolkit React-Query TypeScript Style-Components Firebase Vercel 🏡 깃허브 https://github.com/soohyun-dev/Remind GitHub - soohyun-dev/Remind: 🗓️ 인플루언서 체험단/협찬 관리 프로젝트 🗓️ 인플루언서 체험단/협찬 관리 프로젝트. Contribute to soohyun-dev/Remind development by creating an account on GitHub. github.com 🛫 배포주소 https://remind-g..
백준/ Gold 5 문제 , 백준 Node.js 자바스크립트 9205 맥주 마시면서 걸어가기 [ BFS, 그래프 이론 ]
백준/ Gold 5 문제 , 백준 Node.js 자바스크립트 9205 맥주 마시면서 걸어가기 [ BFS, 그래프 이론 ] ✔️Check Point ! ( 해당사항 ✓체크 ) 1. 막힘 없이 수월하게 풀린 문제인가? 2. 1시간이내로 풀렸던 문제인가? 3. 1시간 이상 or 며칠을 두고 풀어봤더니 풀린 문제인가? 4. 시간을 써도 도무지 풀 수 없는 문제인가? 5. 솔루션을 찾아봤는가? ------------------------------------------------------------------------------------------- 난이도 체감 🧑💻 1. 최상 2. 상 3. 중 4. 하 이해도 🙆♂️ 1. 완벽히 이해 2. 다소 헷갈리는 부분들이 있음 3. 이해 못함 🏡 문제출처 htt..
Randomly 프로젝트 - 새폴더 모달창 구현 이외의 추가 기능들
Randomly 프로젝트 - 새폴더 모달창 구현 이외의 추가 기능들 🏡 GitHub : https://github.com/soohyun-dev/Randomly 이번주는 새폴더 추가 방식을 바꿔보았어요. 그리고 리팩터링을 진행하였습니다. 🫡 새폴더를 만들 수 있는 페이지입니다. 기존에는 질문 폴더 추가 버튼을 누르면 새폴더를 만들어주었지만, 새폴더라는 이름으로 무조건 사용해야 했어요. 저기 '3월 첫째주 금요일 스터디' 처럼 변경된 글씨는 운영진만 따로 임의대로 데이터를 변경해서 사용한거였습니다. 급하지 않은 기능 구현이라 생각했는데, 생각해보니 너무 불편한 방식이더라고요. 그래서 편의를 위해서 이번 기능 구현을 하였습니다. 어쩌면 빨리 했었어야하는 기능이였겠구나 싶네요. ❓어떤식으로 구현할까 새폴더의 이..
Randomly 프로젝트 - 팀원 피드백 기능, React로 모달창 구현
Randomly 프로젝트 - 팀원 피드백 기능, React로 모달창 구현 🏡 GitHub : https://github.com/soohyun-dev/Randomly 오늘 정리할 것은 그동안 구현한 팀원 피드백 기능이랑 그 과정에서 모달창을 구현한 방법 및 트러블 슈팅에 대한 것입니다. 😊 ❓ 무엇을 구현했나요 팀원 피드백 기능을 구현했습니다. 이 기능은 실제 면접 스터디를 하면서 각 팀원끼리 실시한 모의 면접에 대한 피드백을 주기 위한 것입니다. 위의 사진에서 확인할 수 있듯이 피드백에 대한 대상이 있고 피드백을 주는 대상이 있습니다. 이 기능은 현재 로그인을 하지 않아도 사용할 수 있게 하였습니다. 이유는 좀 더 많은 유저들이 사용할 수 있도록 편의를 제공하기 위함입니다. 아무래도 로그인을 해서 사용해..