에이미의 성장기록

- 12주차 프로젝트: 실전 프로젝트 "동물마켓" 마지막 주차 회고를 밀렸다. 더 밀리기 전에 써놔야지😂😂😂 배운것 - https 배포 (CloudFront) / 도메인 연결 - 현업자에게 받는 피드백 - 고차 컴포넌트 - 커스텀 훅 - 반응형(미디어 쿼리) 느낀것 - 현업자한테 받는 피드백은 정말 생각지도 못했던 것들이었다. OKKY에 올려서 현업분들에게 받았던 피드백은 정말 감사할정도로 구체적이고, 아 이런 부분까지 생각할 수 있구나! 라는 생각을 들게 했다. 일부분은 놓친 것이었고, 또 어떤 부분은 아예 처음 보는 것이었다. 리액트는 페이지 이동시 스크롤이 자동으로 올라간다는것을 이제야 알다니... 이제라도 알아서 다행이다. 반응형 메인 화면에서 4개씩 게시글을 짜를때, 4개 미만의 게시글은 왼쪽으..

◼ 기간: 2021.4/23~5/28 (5주) ◼ 프로젝트명: 동물마켓(동네에서 물물교환하는 마켓) ◼ 팀원 구성: 6명 - 백엔드 2명(Node.js) + 프론트 2명(React.js) + 디자이너 2명 ◼ 기획배경 - 커머스 플랫폼 중 최근 급 부상중인 C2C 직거래 플랫폼의 빠른 성장 속도 및 가능성 - 실제 유저가 쉽게 사용할 수 있는 가장 밀접한 서비스로 고객 반응을 실시간으로 듣고 개선할 수 있다고 판단 - 현재 서비스를 제공하고 있는 유사 플랫폼이 가진 불편함 개선 (한 거래당 무수히 생기는 1:1 채팅창) - 장기적으로 큰 개발 확장성(결제, 검색, 지역 커뮤니티 등)을 통한 서비스 확장 경험 가능 ◼ 프로젝트 설명 - 위치를 기반으로 동네에서 필요한 물물교환할 수 있는 웹사이트입니다. 다..

"동물마켓 안녕" 5주간 너무 바빠서 회고, 일기 다 못 썼다. 이번 실전 프로젝트는 개인적으로 굉장히 힘들었다. 무언가 내 역량 이상의 기술들을 혼자서 케어하려니까 맘대로 잘 안 되고, 오류는 계속 나고, 좀 많이 불안했던 것 같다.이거 프로젝트 제대로 끝낼 수 있을까 ㅠㅠ 다른 조 벌써 끝나간다는 말 들으면 조바심 나고 그랬는데, 여튼 어떻게든 끝난다고 짧으면서도 긴 시간이 끝나긴 끝났다. 뭔가 끝났음에도 아쉬움이 많이 남는다. 사용자 의견을 받아서 수정할 수 있는 시간이 촉박해서 많이 수정을 못했는데, 했으면 더 완성도 있는 사이트가 나오지 않았을까? 그래도 실 사용자 의견을 들으면서 내가 생각지도 못했던 부분에서의 감각? 혹은 사용성을 되돌아보게 되었다. 아 뭐지 나 프론트엔드 개발자 될 자격있나..

0. 짧은 자기소개? 1. 왜 개발자가 되려고 하는가? 개발자는 어떤 직업이라고 생각하는가? 2. 프로젝트 진행하면서 어려웠던 점 → 어떻게 극복했는지? 3. 팀원간의 문제 또는 갈등이 있을시에 보통 어떻게 해결하는 편인가? 4. 왜 굳이 프론트엔드를 선택했는지? 프론트엔드는 어떤 분야인가? 5. 프론트엔드 개발자로서 가장 중요하게 생각하는 점은? 6. 디자이너와 협업해서 프로젝트를 진행했던 경험 (장단점) 7. 개발을 시작한지 얼마 되지 않았고, 경험도 매우 짧은데 우리 (회사) 입장에서 왜 그쪽을 뽑아야 하는가? ✔ 8. 항해99 도중 가장 힘들었던 점? 많이 배운 점? ✔ 9. 최근에 했던 프로젝트 중 본인이 가장 만족했던 성과가 있다면 구체적인 예를 들어서 설명을 해주세요! ✔ 10. 주니어 개발..

JWT JSON Web Token의 약자로 전자 서명 된 URL-safe (URL로 이용할 수있는 문자 만 구성된)의 JSON. 클라이언트와 서버, 서비스와 서비스 사이 통신 시 권한 인가를 위해 사용하는 토큰이다. JWT는 서버와 클라이언트 간 정보를 주고 받을 때 Http 리퀘스트 헤더에 JSON 토큰을 넣은 후 서버는 별도의 인증 과정없이 헤더에 포함되어 있는 JWT 정보를 통해 인증합니다. 이때 사용되는 JSON 데이터는 URL-Safe 하도록 URL에 포함할 수 있는 문자만으로 만듭니다. JWT는 HMAC 알고리즘을 사용하여 비밀키 또는 RSA를 이용한 Public Key/ Private Key 쌍으로 서명할 수 있습니다. JWT는 웹표준(RFC 7519)으로서 두 개체에서 JSON 객체를 사용..

Cookie & Session 쿠키(Cookie) HTTP의 일종으로 사용자가 어떠한 웹 사이트를 방문할 경우, 그 사이트가 사용하고 있는 서버에서 사용자의 컴퓨터에 저장하는 작은 기록 정보 파일이다. HTTP에서 클라이언트의 상태 정보를 클라이언트의 PC에 저장하였다가 필요시 정보를 참조하거나 재사용할 수 있다. 쿠키 특징 이름, 값, 만료일(저장 기간 설정), 경로 정보로 구성되어 있다. 클라이언트에 총 300개의 쿠키를 저장할 수 있다. 하나의 도메인 당 20개의 쿠키를 가질 수 있다 하나의 쿠키는 4KB(=4096byte)까지 저장 가능하다. 쿠키의 동작 순서 클라이언트가 페이지를 요청한다. (사용자가 웹사이트 접근) 웹 서버는 쿠키를 생성한다. 생성한 쿠키에 정보를 담아 HTTP 화면을 돌려줄 ..

◼ SPA(Single Page Application) - 어플리케이션 생명 주기 중에서 단 한 번만 리소스(HTML, CSS, JavaScript) 를 로딩하고, 그 후에는 데이터를 받아올 때만 서버와 통신 - 단 하나의 HTML 문서로만 돌아가는 웹페이지, 사용자의 요청(request)에 따라 내용이 동적으로 바뀜 즉, 첫 요청시 딱 한 페이지만 불러오고 페이지 이동시 기존 페이지의 내부를 수정해서 보여주는 방식 - 사용자(클라이언트) 관점에서 다시 말하자면, 최초 페이지를 로딩한 시점부터는 페이지 리로딩 없이 필요한 부분만 서버로 부터 받아서 화면을 갱신하는 것 입니다 등장배경 모바일 시대가 도래하면서 모바일 환경에 최적화된 서비스가 필요해졌으나 일반적인 컴퓨터에 비해 성능이 낮은 모바일에 최적화시..

정리하다가 다 날아갔다........... 티스토리 부들부들... :-( 한번 더 정리하기 ◼ 라이프 사이클 모든 리액트 컴포넌트에는 라이프 사이클(수명 주기)이 존재. 라이프 사이클은 컴포넌트가 생성되고 소멸될 때까지 일련의 과정을 의미 ◼ 라이프 사이클 함수 총 10가지의 함수가 존재하며, will이 붙은 함수는 어떤 작업을 하기 전에 실행되고, did가 붙은 함수는 작업을 한 후에 실행 ◼ 라이프 사이클 함수를 사용 하는 경우 어떤 작업을 수행할 때 렌더링 할 때 처리해야 하는 경우가 있고 업데이트 전후로 처리해야 하는 경우가 있는데 이럴 경우 라이프 사이클 함수를 이용해서 처리한다! ◼ 마운트 DOM이 생성되고 웹 브라우저상에 나타는 과정 ◼ 업데이트 컴포넌트를 업데이트 하는 경우로 아래와 같은 ..

리액트의 주요 특징 중 하나는 Virtual DOM을 사용하는 것 ◼ DOM이란? Document Object Model의 약어로, 객체로 문서 구조를 표현하는 방법. XML이나 HTML로 작성한다. 웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용함. DOM은 트리 형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있다. ◼ DOM의 단점 동적 UI에 최적화되어 있지 않음! DOM 자체는 빠르지만, 웹 브라우저 단에서 DOM에 변화가 일어나면 CSS를 다시 연산하고 레이아웃을 구성하고, 페이지를 리페인트 하는 시간이 허비됨 돔트리가 수정될때 마다 렌더트리가 실시간으로 갱신됨 SPA(Single Page Application)가 대세인 웹앱 같은 경우, 단일 페이..

◼ 리덕스란? 가장 많이 사용하는 리액트 상태 관리 라이브러리로 자바스크립트 앱에서 상태(state)를 효율적으로 관리할 수 있게 도와주는 도구 입니다. ◼ 리덕스를 왜 쓸까? - 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다. - 컴포넌트끼리 똑같은 상태를 공유해야할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태값을 전달하거나 업데이트할 수 있다. - 규모가 큰 경우에는 리덕스를 사용하여 작업하는것이 상태를 체계적으로 관리할 수 있고, 코드의 유지 보수성을 높여주고, 작업 효율을 극대화해준다. - 미들웨어라는 기능을 제공하여 비동기 작업을 효율적으로 관리해줌 ◼ 기본 개념정리 1) 액션 - state를 어떻게 바꿀지 적어놓은 행동 2) 액션 생성 함수 - ..