일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- Node
- NextJs
- Mac OS NVM
- 알고리즘
- Client-Side Navigation
- 향해99
- 회고록
- 원티트 프리온보딩인턴십 1주차
- 원티드인턴십
- 프로젝트
- JavaScript
- Redux
- 유령 의존성
- react portal
- JS
- Til
- 인풋태그 엔터
- next/link
- input error
- CloudFront 무효화
- toast err
- 원티드프리온보딩
- 광고지구
- CPU와 GPU의 차이점
- react
- NVM
- jsEvent Loop
- 식별자란
- git
- Passed by Value
- Today
- Total
목록전체 글 (108)
SUIN
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bytUBx/btrpvRK6Cv1/FTo8lQK84sbaLEhwAooc01/img.jpg)
어김없이 아직까지 다이어리 팝업 페이지를 끝내지 못했다 다이어리 팝업페이지 하나에 CRUD 전체를 다 해야 했고 이모티콘 미리 보기 기능도 함께 들어가 있어서 생각보다 시간이 오래 걸렸다 트러블 슛팅 첫 기획에는 캐릭터 index 순서와 맞게 score 점수도 동일했는데 과하게 충분 보다는 적당이 점수가 저 높아야 할 것 같다는 의견으로 스코어 점수가 변경이 되었다 처음에는 이미지 넘버와 스코어 넘버를 동일하게 사용해서 개발에 들어갔지만 따로 해당 이미지에 스코어 점수를 별도로 적용해줘야 해서 name이라는 값을 스코어로 넣어주었다. db에는 스코어 점수를 보내줘야 하기 때문에 사용자가 선택했을 때 선택된 이미지의 name을 state에 저장해서 데이터를 담는 방법을 생각했다 오늘 한 작업 CRUD에 C..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/dNc2El/btrpiI25tWR/oB6785ORs416YPXiq0Tk10/img.jpg)
기존의 백엔드 2분이 개인 사정으로 하차하시면서 1분밖에 남지 않아서 요번 주 내내 팀 분위기가 많이 어수선했다 생각보다 기획일정이 늦어져서 개발 일정도 미뤄진 상황이어서 시작부터 고민과 걱정이 많았던 것 같다 며칠 뒤 백엔드 한분이 합류하시면서 우리조는 한줄기 빛이 내려온 느낌이었다 다시 힘차게 시작해보자며 팀원분들과 웃으며 저녁 팀미팅을 끝내고 왔다 아! 그리고 다른조에서 신조어 사전을 만드시는데 오늘 신조어를 하나 알려주셨다 어쩔 티비 ~ 어쩔 냉장고 ~ 어쩔 코딩 ~
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/WJoKO/btrn1g0tpHF/hQTBoqkUvddL6d38UzaKwk/img.jpg)
오전에는 팀원분들과 화요일까지 작업한 코드를 merge 하는 과정에서 충돌이 발생해 시간을 많이 소비했다 오후부터 포스트 작성페이지 적업을 진행했는데 사용자가 파일 선택 시 페이지 이동을 하며 미리보기가 보이게 구현을 해야 해서 기능 구현도 함께 작업이 들어갔다. 작업을 하면서 인스타그램에서 작성페이지를들어가면 메인 페이지 위로 모달 창처럼 보이게 페이지가 띄워지는 것 같아 라우터에 exact 을 적용하지 않고 페이지 위에 마치 모달처럼 보이게 작업을 했다 아직 서버가 완성되지 못해서 axios 요청까지만 작성이 되어있고 요청 데이터를 사전에 확인을 해 놓았다 오늘 작업내용 폼데이터 객체를 사용하는 법도 익히고 미리보기 기능을 구현이 이제 가능해졌다!!! 조금만 더 노력하기!!! 뽜샤!
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/eVum3H/btrn15KU8Da/QZdsr8Xy8nPQVvmWSPSqgk/img.jpg)
클론 코딩 2일 차 메인 페이지 뷰가 어느 정도 끝나간다! 혼자 디자인을 만들어 나가는것보다 따라 하는 것이 더 어렵다는 걸 알았다... 오늘 뷰 작업 마무리를 목표로 했지만 완벽하게 아직 끝내지는 못했다 뷰를 만들면서 flex를 익힐 수 있었고 컴포넌트의 분리의 중요성에 대해서 알 수 있는 시간이었다 ▾▾▾ 오늘까지 작업한 내용 ▾▾▾ 더보기 버튼 기능구현은 아직 작업이 덜 된 상태지만 뭔가 뷰가 만들어지니 뿌듯하다
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/buGW7y/btrmxGe2nks/XysG7RgkC35LJUI4kQd2Hk/img.jpg)
5주 차 심화과정이 시작되었다 이번 주 과제는 매거진 사이트 완성하기! 강의를 들으며 처음으로 컴포넌트를 쪼개는 방법에 대해 학습했는데 진짜 내 머리도 쪼개질뻔한 하루였다.... 오늘은 로그인,회원가입, 포스트 페이지의 전체적인 레이아웃 구조만 잡는데 시간을 다 소비했다 확실히 컴포넌트를 각각 분리하니 동일한 부분에서는 재사용하기가 편하다는 걸 알게 되었다 왜 코드가 간결해질수록 나의 머리는 터질것 같은가.... 처음으로 이렇게 많이 나눠봤는데 내일은 컴포넌트가 얼마나 더 많이 추가되는 걸까... 재미있지만 겁이난ㄷ..... 디자인은 아직 너무 심플하다... 꾸미기 나중에 꼭!!!! 꼭!!!!! 하고 제출할 것
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/Vy2MY/btrmjbz2sZe/WE1OkkLeIZzlQY1fT4s0X1/img.jpg)
앞의 포스팅에서 클래스과 함수 컴포넌트의 생명주기에 대하여 알아보았다 https://suinchoi.tistory.com/40 [React] 컴포넌트 생명주기 / Class LifeCycle컴포넌트 생명주기( React LifeCycle) 이란? 개발을 할때 어떤 타이밍에 어떤 순차적으로 동작들이 일어나는가 , 즉 화면에 컴포넌트가 나타났다가 사라지기 까지의 모든 과정 을 라이프 사이클이suinchoi.tistory.com React Hook Hook은 React 버전 16.8 버전부터 React 요소로 새로 추가되었다 Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있다 클래스 컴포넌트에서는 훅이 동작하..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/Ws2Gj/btrmpxowoNW/LuwS3DYmFKFlExORYKyHJk/img.jpg)
컴포넌트 생명주기( React LifeCycle) 이란?개발을 할때 어떤 타이밍에 어떤 순차적으로 동작들이 일어나는가 , 즉 화면에 컴포넌트가 나타났다가 사라지기 까지의 모든 과정 을 라이프 사이클이라 하며 생명주기를 통해 불필요한 업데이트를 방지할 수 있다 클래스 컴포넌트의 경우 특정 라이프 사이클 메소드를 사용하며 함수 컴포넌트에서는 Hook을 사용하여 클래스 component 의 lifeCycle처럼 관리가 가능하다 클래스 Component Life Cycle 그때그때 어떤 변경에 따라 그려질때 마다 자기가 선언해놓은 메소드를 사용한다. constructor(): 컴포넌트가 마운트되기 전에 호출되며 메서드를 바인딩하거나 state를 초기화하는 작업이 없다면, 해당..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/ltvCy/btrmidZnfeo/Eh0uXABSYa0P44MX5KPXf0/img.jpg)
1주간의 일정 및 프로젝트 내용 개인 프로젝트 과제 - 나만의 사전 제작하기 - Git Link : https://github.com/whl5105/hanghae99-chapther4-Dictionary GitHub - whl5105/hanghae99-chapther4-Dictionary: 향해99 4주차 개인과제 향해99 4주차 개인과제. Contribute to whl5105/hanghae99-chapther4-Dictionary development by creating an account on GitHub. github.com 팀 프로젝트 과제 - 답변 및 DIY Section 5개 만들기 - Notion Link : https://www.notion.so/4-React-a2bf52a7ccf946..