프론트엔드 킹왕짱이될테다 프론트엔드 킹왕짱이될테다

내가 만든 스케쥴 디테일페이지에 이런 피드백이 있었다. 이미 끝난 프로젝트이지만 프로젝트 기간내에 다 하지 못했어도 추가적으로 디벨롭을 시키고싶었다! 최종 프로젝튼데 애니메이션효과정돈 넣어줘야하지 않겠수? Framer 사이트 완전 예쁨 https://www.framer.com/?utm_source=motion-readme Framer — Design and ship your dream site. Zero code, maximum speed. Design your website on a familiar canvas. Add animations, interactions and a CMS. Optimize for every breakpoint — no code needed and publish for free..

최종프로젝트 발표회가 어제 끝났다 오늘부터 지원주차! 그래서 이력서를 쓰는데.... 아직 내가 배운게 이렇게 적은데 무엇을 적어야하나 막막하다.... 아직 전 걸음마 뗀 감자인데요 ㅠㅠ 두시간 발제+이력서 특강해주고 9시까지 이력서 쓰래서 이력서 후딱 쓰고 앞으로 뭘 할지 고민했다. Type script & Next.js 제일 먼저 공부해야겠다 생각한건 선용매니저님께서 필수라고 하신 타입스크립트였다. 고민중인거 두개

기존 env는 gitignore에 등록되어있어 깃헙에 올라가지 않도록 설정되어있지요. 그렇다면 배포용 main 레포지토리는 어떻게 환경변수를 관리할까요? 저희 팀은 액션스 시크릿을 활용했습니다! .env파일을 삭제하고 깃헙 액션스 시크릿에 등록하면 코드상 바뀌어야 할 부분은 없는데요, 다음 코드는 process.env를 이용한 예시입니다. export const instance = axios.create({ baseURL: process.env.REACT_APP_BASE_URL, }); axios instance를 적극적으로 이용하고있는 저희 팀은 이렇게 baseURL을 생성했습니다. axios 통신시에 baseurl 뒤에 추가적인 주소를 붙일 땐 templete literal을 이용하여 `${proce..

저희 팀은 월요일부터 유저테스트를 시작했습니다. 팀장님께서 우리팀이 가장 먼저 배포했으면한다고하셔서 기한을 맞추기 위해 다들 최선을 다해서 다같이 노력한 결과 결국 가장 먼저 배포를 해냈어요! 생각보다 많은 분들께서 피드백을 주셨고, 현재 총 74개의 구글폼 응답을 받았습니다! 미리 내부테스트를 많이 해보았고 내부 QA를 받아 지난 주에 빡세게 고쳐보았지만 예상했던 것과 같이 CSS 피드백이 많았어요 🥺 이건 디자이너님께서 따로 작성해주신 디자인 수정할 사항들.. 이중에 몇가지는 담주 월요일까지 해볼 예정이에요. 전 개인적으로 너무나 심각하다고 생각했던,, 네비게이션바 아이콘문제는 가장 먼저 해결하고싶었어요....!!! 흐릿흐릿.. 저..저저 픽셀 깨지는거 좀 보소 분명 PNG로 파일 받아서 확인해보면 ..

// 모든 리렌더링마다 로그가 찍힘 useEffect(() => { console.log("call useEffect after every re-render"); }); // value 변수 값이 변할 때만 로그가 찍힘 useEffect(() => { console.log("call useEffect when value changes"); }, [value]); // 첫 렌더링 후에만 로그가 찍힘. useEffect(() => { console.log("call useEffect only after initial render"); }, []); #Lifecycle 컴포넌트가 페이지에 장착된다 (mount ) 컴포넌트가 업데이트된다 (update) 컴포넌트가 삭제된다 (unmount) 라이프사이클 중간중간..

저희 팀의 최종프로젝트 Gnims는 일정관리 웹앱입니다! 초기 기획단계에서 많은 의견이 오고갔던 주제.. 달력을 넣을 것이냐... 현업에 계셨던 디자이너님께서 달력은 정말 공수가 많이 드는 작업이기에 디자이너님과 프론트엔드에서 고통스러울 것이라는 조언을 주셔서 오랜 논의 끝에 datepicker라이브러리를 이용하기로 했습니다! yarn add react-datepicker 로 라이브러리를 설치한 다음, https://reactdatepicker.com/ React Datepicker crafted by HackerOne reactdatepicker.com Datepicker 공식사이트에서 여러가지 설정을 할 수 있습니다. 그러나 공식사이트에서도 찾을 수 없었던 몇가지 추가 설정이 있어요..! 우선 제 코..

소셜로그인을 구현하기로 한 우리 팀 소셜로그인중에서도 네이버가 제일 정보가 없었습니다.. 네이버로그인 구현을 거의 일주일 내내 했는데 참 외롭고 힘든 시간이었습니다. .. 네이버 developer만 봐서는 구현하기 너무 어렵고, 검색해서 나오는 블로그들 다 참고해봤지만 처음부터 끝까지 잘 나와있는 곳이 없어서 여기저기 코드 섞이다보니 더 헷갈리고 너무 어렵더라고요.. 그래서 도중에 포기하고싶단 생각을 얼마나 많이했는지 어찌어찌 시행착오 끝에 되긴 됐습니다 😅 이건 블로그에 꼭 써서 오래 보관해야겠다 다짐헀었죠.. 네이버로그인도 카카오로그인 검색해보면 금방 나오는 그 로직 그대로 네이버로그인페이지로 이동시켜서 수집정보에 동의 이후에 로그인버튼을 누르면 우리 서버로 네이버의 access token을 보냅니다..

발생한 문제 Server Sent Event를 이용해 알림받는 페이지를 구현하는 도중, 알림이 도착해서 첫 알림은 화면에 잘 렌더링이 되나, 두번째, 세번째 알림이 올 때 알림이 축적되는 것이 아닌, 첫번째 알림을 새로운 알림이 대체해버리는 문제점을 발견했다. 이용하고있던 해당 코드는 아래와 같다. notifications배열에 새 알림을 첫번째로 가져오고 기존 알림을 spread연산자로 불변성을 유지하며 새 배열을 만들 의도였다. setNotifications([newNotification, ...notifications]) 이 문제점은 useState hook이 비동기적으로 동작하기 때문에 setNotifications 함수가 실행될 때 notifications 배열의 최신 값을 반영하지 않은 것이 ..

서버에서 보내주는 response값을 담은 schedule의 구조, invitees (일정참여자) 구조 다른 코드에 변화가 없음에도 될 때도 있습니다. 다만 새로고침을 하거나 여기에서 다른 코드가 추가되면 이 부분에서 에러가 발생합니다.에러메세지 (invitees의 length를 인식할 수 없는 문제.)invitees가 array형태인데, length를 가져올 수 없다는 것이 이해가 안감.특히 이 부분이 항상 에러가 발생하는게 아니라, 불러오는데 성공할 때가 있고 에러가 생길 때도 있어서 더욱 의아함이 부분에서 에러가 생기는데, 이게 콘솔에도 찍히고return에서도 화면에 잘 그려지다가 새로고침하거나 전혀 상관없는 코드가 추가되고나면 화면이 날아가면서 에러가 뜨니까 error tracking이 안되는 상..

SSE-Server Sent Event 서버에서 클라이언트로 데이터를 보내는 단방향 통신 실시간 알림을 구현하며 백엔드분께서 웹소켓 대신 제안하신 SSE! 실시간 채팅과같이 양방향통신이 필요없기 때문에 데이터가 무거워지는 웹소켓보단 SSE를 써보자는 의견이었다. SSE는 별도의 프로토콜 없이 HTTP 프로토콜만으로 사용 가능하고 훨씬 가볍다. Event Source 서버와 클라이언트 간 SSE 통신을 하려면 처음에 클라이언트에서 서버로 연결 요청을 보내야 한다. EventSource는 SSE 연결 요청을 보내기 위해 JavaScript가 제공하는 객체이며, SSE Client API는 EventSource 객체에 포함된다. 이벤트 핸들러 EventSource.onopen : 서버와 연결이 open되었을 ..

이 에러 밭 무슨 일이죠? 리렌더링이 너무 많이 일어나서 리액트가 자체적으로 infinite loop을 방지하기 위해 렌더링횟수에 제한을 두고있다고합니다. 그래서 화면이 날아가고 보이지 않습니다... 제 멘탈도 하얗게 날아갔습니다... const onParticipantsChangeHandler = (e) => { setParticipants(e.target.value); }; const [participantss, setParticipantss] = useState([]); if (participants.length > 0) { setParticipantss(participants); } 문제의 코드... 리렌더링이 되는 케이스 부모 컴포넌트가 렌더링 된 경우 컴포넌트의 state가 변경된 경우 부모로..

별점: {"★".repeat(storeScore)} {"★".repeat(5 - storeScore)} 개인적으로 넘나뿌듯한 이번 클론코딩프로젝트 별점구현도 맘에 든다 태그 내 스타일은 안녕 이런 식으로 넣는다! 중괄호가 두개 들어가는게 포인트.

더보기 export default function SignUp() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [confirmpassword, setConfirmpassword] = useState(""); const [username, setUserName] = useState(""); ///유효성 검사 후 띄울 메세지 const [usernameMessage, setUsernameMessage] = useState(""); const [emailMessage, setEmailMessage] = useState(""); const [passwordMessage, setPasswor..

리액트에서 배열이나 객체를 업데이트해야 할 때에는 직접적인 수정을 하면 안되고 불변성을 지켜주면서 업데이트를 해야한다. const object = { a: 1, b: 2 }; const nextObject = { ...object, b: 3 }; 위와 같이 spread연산자를 이용해서 새로운 객체를 만들어준다. 배열 또한 마찬가지로 push, splice등의 함수를 사용해 직접 수정하면 안되고, concat, filter, map등의 함수를 사용해야 한다. 대부분의 경우 spread연산자 또는 배열 내장함수를 사용하는건 어렵지 않지만 데이터 구조가 조금 까다로워지면 불변성을 지키면서 새로운 데이터를 생성하는 코드가 복잡해진다. Immer라는 라이브러리를 사용하면 불변성을 유지하며 간결한 코드로 필요한 내..

툴킷을 이용했을 때 기존 버전과 큰 차이점: action value와 action creator를 직접 생성해주지 않고 action value, action creator, reducer가 하나로 합쳐짐. 툴킷의 slice API를 이용한 간단한 모듈작성. createSlice라는 api로 생성. 모듈의 name, initial state, reducers 로직 reducer를 작성함과 동시에 action creator가 됨 Action value도 함수의 이름으로 자동생성됨. export도 제일 밑에 이렇게 작성한다. 간결해짐. 객체 내에 함수명만 추가해주면 됨 //필수로 설정해줘야하는 값은 name, initialState, reducers. const counterSlice = createSlice..

Thunk 리덕스에서 dispatch를 하면 action이 리듀서로 전달이 되고, 리듀서는 새로운 State를 반환하는데, 이 중간에 미들웨어를 넣어서 원하는 작업을 중간에 실행할 수 있다. 미들웨어로 가장 많이 이용되고 있는 방식이 redux Thunk이다. Thunk의 핵심은 객체가 아닌, 함수를 dispatch할 수 있게 해준다는 것이다. 리덕스 툴킷에서 thunk함수를 생성할 땐, **createAsyncThunk()**를 통해 생성하며, 첫번째 자리에는 action value, 두 번째 자리에는 함수가 들어간다. 🔐 프로미스는 정확히 말하면 비동기가 아닙니다. 비동기와 프로미스는 각각 무엇일까요? 🐹 동기와 비동기의 차이 동기 Synchronous : 요청 후 응답을 받아야 다음 동작 실행. 비..