전체 글 (44) 썸네일형 리스트형 부트캠프 수료 후 내게 남겨진 것들 익숙하던 일상에서 잠시 벗어나, 새로운 커리어와 인생을 위해 있는 힘껏 몰입했던 3개월이 마무리되었다. 2개월간 하루 10시간 이상 스스로 문제를 해결하는 연습도 해보고, 2주 Sprint의 협업 프로젝트를 2회 진행하기도 했다. 그 후 마지막 1개월은 프론트엔드 개발자로서 초기 스타트업에서 인턴쉽을 진행하며 부트캠프 과정을 수료했다. 쉴새없이 인풋을 채워넣기 바빴던 3개월은 마무리 되었지만 개발자로서의 커리어는 이제 시작이기에 지난 시간을 회고해보며 남겨진 것들을 동력으로 삼고자 한다. 개발자로 직무 전환을 한 이유 이전에 포스팅했었던 4년차 로펌비서였던 내가 개발자가 되기로 한 이유 에서 적어둔 내용이긴 하지만 그 생각에 변함이 없기에 간략하게 다시 적어본다. 내게 개발자는 (1) 그 과정은 다소 고.. React | Portal을 이용한 Modal 구현 한국인에게 portal이란.. 닥터스트레인지의 마법진같은 포탈만 떠오를 수 있다. 이미 충분히 익숙한 다른 곳으로 이동시킨다는 개념을 이어받아, 컴포넌트를 부모 컴포넌트의 바깥에 렌더링해주는 신기한 portal을 알아보자. Portal이란? React 공식 문서에 따르면, Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법이다. 위 설명이 쉽게 이해가지 않는다면, 아래를 보자. 현재 와 은 형제 관계처럼 보이지만 실제로 modal은 root 안에서 보여지는 자식 컴포넌트이고, 렌더링만 root의 바깥에서 이루어지고 있다. 왜 사용할까? 일반적으로 react는 부모 컴포넌트가 렌더링되면 자식 컴포넌트가 렌더링되는 tree 구조를 가지고 있다. 하지만 때.. React | Styled Components 💅 Styled Components란? 현대 웹 앱은 점차적으로 컴포넌트를 기반으로 고안되고 있고, 이에 따라 CSS 스타일링 또한 컴포넌트를 기반으로 재구성되고 있다. 이러한 흐름 속에서 등장한 패러다임이 CSS-in-JS (JS파일 안에서 CSS를 함께 관리하는 것)이고, 그 중 가장 인기 있는 라이브러리가 바로 Styled Components Styled Components을 사용하는 이유 위와 같이 클래스명을 해시값으로 자동 생성하므로 클래스명 오염을 방지한다. CSS 문법을 온전하게 사용할 수 있다. 자바스크립트의 동적인 값들을 온전하게 사용할 수 있다. 컴포넌트와 스타일이 하나의 파일로 결합되어 모듈화가 수월해진다. 사용 예시 컴포넌트 파일의 상단에 아래와 같이 styled-components.. React | 로그인 후 token 저장, 서버에 전달하기 유투브 프리미엄은 로그인을 해야 광고를 보지 않을 수 있고, 인스타그램에선 로그인을 해야 내 피드로 갈 수 있다. 이러한 인가 과정에 필요한 token 로그인 후 발생되는 token을 localStorage에 저장하고, 특정 사이트에서 필요할 때 서버에 보내는 것까지 알아보자. token, 왜 필요한가? HTTP는 단기기억상실과 같은 stateless 특성을 가지고 있기 때문에 한 번 로그인을 한다고 그 사실을 계속 기억하지 못한다. 따라서 원래대로라면 로그인을 했더라도 마이페이지 등 로그인이 필요한 사이트에 접속할 때마다 로그인을 진행해야 한다. 이러한 상황을 막기 위한 것이 token ! 먼저 로그인을 완료하면 인증 스티커와 같은 token을 전달받고, 마이페이지 등 로그인이 필요한 사이트를 접속할 .. React | 회원가입 기능 구현하기 현재 email창엔 '@'가 포함되어야 하고, password는 5자리 이상이어야 버튼이 활성화되도록 유효성 로직을 포함한 회원가입을 진행해보고자 한다. Step.1 : state 설정 최상위 컴포넌트의 state/fetch 함수 부분 (중요 부분만 발췌) // state 부분 constructor(props) { super(props); this.state = { first_name: 'Donghee', last_name: 'Kim', email: '', password: '', phone_number: '01011111111', gender: 'w', birth: '1995-12-27', }; } //fetch 함수 부분 (then 함수 부분은 생략) fetch('API주소', { method: 'P.. 프로젝트 FLIX 회고 🎬 Project Overview NETFLIX 를 모티브로 개발한 비디오 스트리밍 웹 어플리케이션 * 이 프로젝트는 NETFLIX 사이트를 참조하여 학습목적으로 만들었습니다 ✔ 결과물 시연 영상 ✔ Front-End Team GitHub ✔ Back-End Team GitHub 🔨 작업 기간 2021.09.13 - 2021.10.01 🔨 인원 총 5명 : Front-End : 3명 | Back-End : 2명 🔨 기술 스택 개발 도구 ⚙ Front-End HTML/CSS | JavaScript | React.js | styled-components ⚙ Back-End Python | Django | MySQL | Aquery 협업 도구 Trello | Git & Github | Slack | Zoom .. 프로젝트 주담화 - 기억에 남는 코드록 프로젝트가 끝난 후, 코드는 남지만 코드를 생각해내기까지의 고민과 과정은 쉽게 휘발된다. 이를 붙잡기위해 적어보는 기억에 남는 코드록 *본 프로젝트에 사용된 이미지 소스 및 데이터는 술담화 측에 양해를 구하고 학습 목적으로 사용하였습니다. 🍶 fetch 함수 축약 기본적으로 사용되는 fetch 함수 형태는 아래와 같다. 하지만 위의 fetch함수가 여러 번 반복되어 사용된다면 가독성이 현저히 떨어진다. 리팩토링의 중요한 원칙 중 하나 = 반복되는 요소를 축약시키자 위 함수에서 각각의 색으로 테두리친 fetch함수, 두 번의 then함수와 setState부분을 아래와 같이 변수화해서 가독성은 챙기고, 코드의 길이는 줄일 수 있다. 1. setState 변수화 const updateProducts = dat.. 프로젝트 주담화 회고 🍶 Project Overview 전통주 판매 웹 어플리케이션 (술담화 담화마켓을 모티브로 개발) *본 프로젝트에 사용된 이미지 소스 및 데이터는 술담화 측에 양해를 구하고 학습 목적으로 사용하였습니다. Link ✔ 결과물 시연 영상 ✔ Front-End Team GitHub ✔ Back-End Team GitHub 작업 기간 총 12일 : 21.08.30 (월) - 21.09.10 (금) 인원 총 5명 : Front-End : 3명 | Back-End : 2명 기술 스택 개발 도구 ⚙ Front-End HTML/CSS | JavaScript | React.js | Sass ⚙ Back-End Django | MySQL | Aquery 협업 도구 Trello | Git | Slack | Zoom 결과화면.. 이전 1 2 3 4 5 6 다음
