Wecode 13

위코드에서 느낀 3가지

위코드에서 느낀 3가지 내가 3개월 회고를 쓰게될 거라고는 상상도 못했다. 그냥 어떻게 매일 하루하루 살아가다보니 수료식을 짠- 하고, 지금 이렇게 글을 쓴다. 시간이 참 빠르다. 그래도 참 감사한건 3개월을 한번 쭉 훑어보았을 때 최선을 다해 3개월을 보냈다는 것에 스스로를 칭찬해주기 마땅하다는 것이다. 행복하게 3개월을 보냈다. 어떤 날은 다음 날이 오는게 두렵기도 했고, 어떤 날에는 당장 내일 무언가를 시도해볼 생각에 두근대며 잠을 못이룰 때도 있었다. 어떤 날은 충분히 잘 해냈는데도 이유 없이 울기도 했고 어떤 날은 스스로가 대견해 꼭 안아주고 싶은 날도 있었다. 그런 다양한 하루하루가 쌓여서 지금의 내가 있다. 다채로운 나의 모습을 만날 때마다 고양되는 느낌이 있었다. 스스로를 미워하던 나도 혹..

기록/회고기록 2022.03.08

위코드 기업협업 회고 (feat. 기업협업에서 배운 것)

위코드 기업 협업 회고 길다면 길고 짧다면 짧은 3개월의 위코드 수료 기간이 끝났다. 지금은 위코드 수료식을 하고 난 후 5일이 지난날이다. 흐름상 사실 가 되어야 하지만 배운 것도 많고 우당탕탕 참 행복하게 지냈던 한 달 간의 기업 협업을 회고해보려고 한다. 최근에 당근 마켓의 동근님께서 진행한 세션을 들었는데, 회고를 하는 것이 참 중요하다고 하셨다. 일단 뭔가 끝나고 나면 후련한 마음으로 그동안 미뤄두었던 단잠도 충분히 자고 휴식을 취하게 되기 때문에 회고를 쓰려고 마음먹기가 정말 힘들다. 그래도 좋은 경험을 했는데 그 귀한 경험들이 휘발되는 것이 아까워서 비교적 빠른 시일 내에 작성하게 되었다. 그럼 즐겁고 보람찼던 기업 협업에서 나는 무엇을 배웠을까? 소통의 중요성: 할 수 있는 만큼만 하자, ..

기록/회고기록 2022.03.02

[React / 2차 프로젝트] react-slick 적용법

[React / 2차 프로젝트] react-slick 적용법 2차 프로젝트부터는 라이브러리를 써보게 되었다. 1차 프로젝트에서는 학습을 위해 지양했었다. 라이브러리라고 무조건 좋지 않은 것도 아니고, 무조건 좋은 것도 아니다. 적재적소에 필요할 때 사용할 수 있어야 한다. 가스레인지를 쓰면 되는데 굳이 부싯돌로 불을 피울 필요 없기도 하다. 다양한 라이브러리를 만나면서 배울 수 있는 것도 많다. 그 코드를 뜯어보면서 학습효과를 본다던가 혹은 라이브러리 사용법을 익히면서 점점 다양하게 마주칠 라이브러리에 대한 진입장벽이 좀 낮아진다고 해야할까? 2차 프로젝트를 진행하면서 react-slick이라는 라이브러리를 활용해 캐러셀을 만들었다. 역시 유명한 만큼 편리하고 좋았지만 공식 문서를 보아도 해결되지 않는 ..

WEB/REACT 2022.01.16

[JS] 객체안에 객체에서 원하는 값만 가져오기 (feat. entries, filter)

[JS] 객체안에 객체에서 원하는 값만 가져오기 (feat. entries, filter) 2차 프로젝트 - 마이리얼트립 (마이코드트립)를 진행하는 도중에 mock data에서 데이터를 가져오려는데 객체 안에 객체에서 조건에 맞는 데이터만 가져와야만 했다. 객체에 접근하는건 어려워도 천천히 생각하면 다 가능했는데 이건 조건이 들어가니까 어렵게 느껴져서 끙끙대고 있었다. 어떤 조건? 👩🏻‍🎨 마이리얼트립에서 항공권을 검색하는 부분에서 인원 및 좌석을 선택하는 곳이 있다. 성인, 소아, 유아의 데이터를 mock data에서 관리했는데 데이터를 관리할 때 0명인 승객은 보여주지 않아야 한다. 승객이 1명 이상일 때에만 표시된다. 예시) 성인 1, 소아 0, 유아 2일 경우 성인 1, 유아 2만 보여주도록 한다..

WEB/JAVASCRIPT 2022.01.16

[React] fetch로 백엔드와 통신하면서 놓쳤던 부분

[React] fetch로 백엔드와 통신하면서 놓쳤던 부분 장바구니를 구현하면서 백엔드와 통신할 일이 많았는데, 이때 다양한 실수를 범했기에 기록한다. 다음 통신때는 절대 이런 실수를 하지 않으리 다짐해본다. 우선 내가 장바구니에서 백엔드와 통신해야했던 부분, 중요한 부분을 이야기 해보자면, 장바구니는 회원만 이용이 가능하다. 백엔드에 POST로 보내줄 body 내용은 JSON 문자열로 변환해야 한다. 전체 삭제 및 선택 삭제, 제품 직접 삭제가 가능하고 삭제한 내용은 DB에서 지워져야 한다. 구매하기를 누르면 구매한 데이터가 백엔드 측에서 따로 저장되어야 한다. 장바구니는 회원만 이용이 가능하다. 회원만 가능하다는 뜻은 결국 Token을 갖고 있는 회원만 장바구니에 접근이 가능하다는 뜻이다. 회원만 가..

WEB/REACT 2022.01.09

[React] map 함수 적용시 key props를 부여하는 이유 (+index 안돼!)

[React] map 함수 적용시 key props를 부여하는 이유 본론부터 말하자면 key props를 지정해주지 않으면 사이트가 전체적으로 불필요한 랜더링을 진행한다. key값 부여 안하면 어떻게 될까? 🤓 콘솔에 에러 메세지가 뜬다. 너 동일한 형제들로 구성된 list(map에서 뿌려준 그 lists) 유닠크한 키 prop을 줘야돼. 왜 필요하지? 🤔 map으로 요소를 하나씩 뿌려준다고 하자. 리액트는 내용이 바뀔 때 다시 랜더링을 하는데 10개의 리스트중에 하나의 리스트만 바뀌었다면 리액트가 하나씩 리스트를 읽다가 여기서 달라졌네? 하고 전체를 재 랜더링 한다. 그걸 방지하기 위해 각각의 요소들이 고유한 정체성을 가지도록 key값을 부여하는 것이다. 그러면 리액트는 key값으로 변한 내용인지, 아..

WEB/REACT 2021.12.24

[JS] westagram - 댓글 게시 기능 구현

[JS] westagram - 댓글 게시 기능 구현 메인 페이지 내에서 피드에 댓글을 다는 기능을 구현하였다. 쉽게 말해서 해당 댓글 게시 기능은 사용자가 입력한 input값을 담은 요소가 새로 생성되는 것이다. Check List ✅ 사용자가 원하는 내용의 댓글을 입력할 수 있도록 input 요소가 있어야 한다. => input ❌, textarea ⭕️ input으로 구성하려던 도중 인스타그램의 경우 textarea로 구성되어 있었다. 생각해보니 사용자가 정말 긴 내용을 코멘트로 달 수도 있었다. 실제로 인스타그램에서는 많은 양의 내용을 담은 코멘트를 다는 사용자도 있으니 필요한 부분이었다. 사용자가 댓글을 입력을 할 때에만 게시 버튼이 활성화 되어야 한다. keyup 이벤트를 줘서 사용자가 입력하면..

WEB/JAVASCRIPT 2021.12.12

[CSS] westagram - inline 속성에서 발생하는 여백에 대해

[CSS] westagram - inline 속성에서 발생하는 여백에 대해 westagram 구현 도중 main 페이지에서 피드에 사용자의 아이디와 댓글 사이에 여백을 주지 않았는데 자동으로 여백이 생성되는 문제가 발생했다. 문제 되는 자동 여백 🤯 이게 뭐야잇!!! 동일한 CSS와 동일한 class, 동일한 레이아웃 구조인데 이런 문제가 발생했다. 아니 대체... 왜? 나는 일단 저 둘 사이에 여백을 준 적이 없습니다 (결백) 새로 생성된 댓글에 여백이 없는 것은 이해가 되는데 왜 그 전에 미리 HTML 안에서 생성해둔 요소들 사이에는 여백이 있을까? 그로 인해 왜 나에게 혼돈을 주는가...? 시도해본 것들 🛠 우선 자바스크립트를 살펴보자. 자바스크립트를 리팩토링 했을 때는 또 정상적으로 4px정도의 ..

WEB/CSS 2021.12.11

[JS] westagram login page (feat. 로그인 버튼 활성화&비활성화)

로그인 버튼 활성화&비활성화 (feat. westagram) instagram을 클론코딩(westagram)하면서 과제로 주어졌던 로그인 버튼 활성화 & 비활성화 기능에 대한 내용을 정리했다.  과제 ➡️ 로그인 페이지 1-1. 로그인 페이지 레이아웃 1-2. 로그인 페이지의 로그인 버튼 활성화 & 비활성화 메인 페이지 2-1. 메인 페이지 레이아웃 2-2. 메인 페이지 댓글 생성 기능 그 중 로그인 페이지를 먼저 작업하였다. 전체적인 westagram 레이아웃을 잡은 후 Javascript를 이용해 ID와 PassWord 입력란에 값이 모두 들어왔을 때만 로그인 버튼이 활성화 되도록 구현한다. checkList ✅ ID와 PassWord 둘 다 입력이 들어왔을 때만 로그인 버튼이 활성화 되는가? =>..

WEB/JAVASCRIPT 2021.12.07

[JS] ES6 (ECMA Script 2015) - arrow function

ES6 ES ? ECMA Script의 줄임말이다. Javascript를 표준화 시키고 규격화하기 위해 탄생했다. 현재는 ES10까지 나왔으나 주로 쓰이는 것은 ES6이다. ES6 ? 6번째 ES라는 뜻이다. 2015년에 처음 등장해 ECMA Script 2015라고도 불린다. ES5 이하 명세에서 문제 되었던 부분들이 ES6에서 많은 부분 해결이 되었고 다양한 기능들이 추가되었다. React, Vue 등의 라이브러리들이 개발 환경을 ES6로 바꾸다보니 ES6가 더 많은 관심을 갖게 되었다. 즉, ES6는 프로그래밍 언어가 아닌 스크립트 언어에 대한 표준 및 규격이다. arrow function 기본 형태 //ES5 function() {} //ES6 () = {} 이름이 있는 함수 //ES5 funct..

WEB/JAVASCRIPT 2021.12.05
728x90