post-thumbnail

TIL_69_Hook

생활코딩훅에서 clean up의 역할을 하는 것은?클래스 방식에서는 스테이트가 바뀔 때마다 이전의 props 와 이전의 state 값을 전달하여 두 개의 값이 다를 때만 작업을 처리하도록 했었다.아래의 코드처럼.스테이트가 바뀔 때마다 인자로 이전의 프롭스 값과 이전의

약 14시간 전
·
0개의 댓글
post-thumbnail

TIL_68_Hook

클래스 방식은 라이프사이클에 따라서 정해진 메소드에 따라 원하는 타이밍에 원하는 어떤 코드를 호출할 수 있다.어떻게 하면 랜더와 관련된 작업을 하는 FuncComp라는 함수가 실행된 후에 추가적으로 필요한 작업을 처리하게 할 수 있을까?\-> 그것이 바로 리엑트의 유즈

1일 전
·
0개의 댓글
post-thumbnail

TIL_67_Portal

Learn React Portal In 12 Minutes By Building A Modal위 영상을 기반으로 작성하였음.기업협업 4일차. 함께 프로젝트를 진행할 개발자 분께서 모달창 관련하여 왜 포탈을 사용하게 됐는지를 이해하는 것이 중요하다고 말씀해주셨다. 준우님

5일 전
·
0개의 댓글
post-thumbnail

TIL_65_React Portal

PortalsPortals포탈은 부모 컴퍼넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공.첫번째 인자 (child)는 엘리먼트, 문자열, 혹은 fragment와 같은 어떤 종류이든 렌더링할 수 있는 React 자식.두번째 인자(

5일 전
·
0개의 댓글
post-thumbnail

TIL_64_Hook

생활코딩 Hook함수형 컴퍼넌트함수 스타일 코딩으로 할 수 없는 대표적인 작업이컴퍼넌트 내부의 스테이트를 만들어 사용하는 것.또한 컴퍼넌트의 생성 변경 소멸에 대한 이벤트인 라이프 사이클 api를 사용할 수도 없었음.그래서 함수 방식은 상위 컴퍼넌트가 시키는 일만 처리

6일 전
·
0개의 댓글
post-thumbnail

TIL_63_Recoil

Recoil: 왕위를 계승하는 중입니다 (새로운 React 상태 관리 라이브러리)유진님이 공유해주신 영상을 보며 정리한 내용을 여기에 기록해보고자 한다.리코일새로운 react 상태 관리 라이브러리.리액트 상태 관리의 역사.한동안은 기본적인 context, prop, s

7일 전
·
0개의 댓글
post-thumbnail

TIL_62_Recoil

오늘은 기업협업의 첫 날. 대표님께서 리덕스보다 리코일을 더 추천한다는 얘길 듣고, 개념이 궁금해져서 찾아보았다. 정말 공부할게 많구나 새삼 느꼈고공부하는 만큼 계속 성장할 수 있다는 것에 설렘도 느꼈다.Recoil — 새로운 리액트 상태 관리 라이브러리?

2021년 4월 12일
·
0개의 댓글
post-thumbnail

TIL_61_2차 프로젝트 후기

어느새 2차 프로젝트가 끝이 났다고..?1차 프로젝트 마무리도 얼떨떨한데.. 2차프로젝트 후기를 써야할 때가 오다니. 위코드에서의 시간은 정말 순식간이구나.. 싶다.이번에 맡은 사이트는 한정판 스니커즈 또는 옷을 거래할 수 있는 사이트 'KREAM'이다.프론트엔드: 재

2021년 4월 12일
·
2개의 댓글
post-thumbnail

TIL_60_2차 프로젝트 Nav 와 검색 모달창

네브 바와 검색 모달창에 대해 간단한 리뷰를 남겨보겠다.네브 바에서 검색 인풋창을 클릭하면 검색 모달창이 뜨도록 구현했다.검색 모달창의 이미지들에 호버효과도 추가했다.(우리 팀원들의 사진은 보너스\~~)api 통신을 통해 영어 이름 과 한글 이름 둘 다로 가능하며, 1

2021년 4월 8일
·
2개의 댓글
post-thumbnail

TIL_59_2차 프로젝트 로그인

소셜로그인을 도전하다!네이버 로그인이라고 쓰여있긴 하나, 카카오톡 로그인이다.카카오톡에서 제공하는 오픈 api를 통해 소셜 로그인을 진행했다.소셜로그인은 사실 프론트엔드에서 특별히 할 건 없고 (카카오톡에 이미 설명이 잘 되어있따.) 다만, 백엔드에서 할 게 많았을 것

2021년 4월 8일
·
0개의 댓글
post-thumbnail

TIL_58_2차 프로젝트 회원가입

내가 구현한 회원가입 페이지.이메일 주소와 비밀번호가 조건에 부합할 경우, 밑에 뜨는 빨간 글씨 경고가 사라지도록 했다.사이즈 선택 모달창을 구현했고, 자식 컴퍼넌트인 모달창에서 얻은 데이터를 부모 컴퍼넌트인 회원가입 페이지에 전달하였다.동의를 구하는 체크박스를 구현.

2021년 4월 7일
·
0개의 댓글
post-thumbnail

TIL_57_2차 프로젝트 모달창

2차 프로젝트에서 맡은 사이트는 KREAM!나는 로그인/회원가입 그리고 네브 바와 검색창을 맡았다.우리는 흐림 HEUREAM 이란 이름으로 클론을 진행하게 되었따.회원가입 페이지를 보면, 사이즈를 선택할 시 사이즈 선택 모달창이 띄워진다. 모달창을 한번도 시도해본 적이

2021년 4월 4일
·
0개의 댓글
post-thumbnail

TIL_52_1차 프로젝트 후기

카카오 프렌즈샵 클론을 하게 되다. 그리고 PM을 맡게 되다.프론트엔드에는 준우님, 성훈님, 나은님 그리고 나 이렇게 네 명과 백엔드에는 왕록님, 정원님 까지 총 6명이 한 팀이 되었다. 일단 나는 모든게 두렵고 자신이 없었다. 어떻게 백엔드와 소통이 되는지 그 구조

2021년 3월 27일
·
12개의 댓글
post-thumbnail

TIL_51_동적 라우팅

상품 리스트 페이지에서 해당 상품을 클릭시 상세 페이지로 넘어가는 기능은 어떻게 구현할까요? 단순히 path를 바꿔준다고 해서 해당 상품에 대한 상세 페이지로는 넘어갈 수 없습니다. 동적 라우팅을 통해 제품의 상세페이지로 이동하는 방법에 대해 알아보겠습니다.동적라우팅?

2021년 3월 21일
·
0개의 댓글
post-thumbnail

TIL_50_Life Cycle 과 조건부 랜더링

constructorrendercomponentDidMount(fetch 완료)다시 render (setState)componentDidUpdate (setState 되었기 때문에 컴포넌트 업데이트 발생)componentWillUnmountstate에 담긴 데이터를 변

2021년 3월 21일
·
0개의 댓글
post-thumbnail

TIL_49_Component Life cycle

render, componentDidMount, componentDidUpdate, componentWillUnmount 등의 함수는 React.Component class에서 제공하는 메서드이다. 컴포넌트를 만들 때 class로 생성하면 위의 메서드를 사용할 수 있다

2021년 3월 14일
·
0개의 댓글
post-thumbnail

TIL_48_with Wecode 038 몬스터 과제

몬스터 과제에 대한 내용을 벨로깅 해보겠다.

2021년 3월 14일
·
0개의 댓글
post-thumbnail

TIL_47_with Wecode 037 인스타그램 클론 마무리

어쩌저찌 위코드 4주차가 되었고 인스타그램 클론도 마무리 단계에 접어들었다. 따로 추가기능들을 구현할 예정이지만 공식적으로는 마무리가 되었기에 간단한 리뷰를 남기도록 하겠다. 코드리뷰 후 부족한 코드들은 보충을 하고, 잘못된 코드들도 수정을 하였고 scss 네스팅도 완

2021년 3월 13일
·
0개의 댓글
post-thumbnail

TIL_46_with Wecode 036 Mock data 활용법

Mock data?실제 API 에서 받아온 데이터가 아닌 프론트앤드 개발자가 필요에 의해 샘플로 만들어본 데이터mock data 를 만들어 데이터가 들어오는 상황을 미리 대비하고 UI 가 기획에 맞게 구현 되는지 확인Backend 와의 소통 - 주고 받는 데이터가 어떤

2021년 3월 12일
·
0개의 댓글
post-thumbnail

TIL_45_with Wecode 035 React

map 함수에 대한 이해가 부족하다 보니, 코드를 완전히 이해하는데 시간이 걸렸던.. 미션... 하고나서 보니 막상 코드는 몇 줄 안되는데 왤케 머리를 싸매고 고민한건지 ㅠㅠ주석으로 참고 내용을 써놓긴 했지만 한번 더 봐보자면, 일단 댓글이 어떤 식으로 달릴지를 생각해

2021년 3월 9일
·
2개의 댓글