본문 바로가기

전체 글29

원티드 프리온보딩 과제 - 환율 계산기 들어가며 원티드 프리온보딩이 시작되었다. 첫날이라서 가볍게 오리엔테이션을 진행하고 끝날 줄 알았는데, 첫날부터 바로 과제가 주어졌다. 😢 원티드 프리온보딩 시간표를 보면 3일마다 과제가 주어지는데, 그게 오늘부터였다니.. 원티드 프리 온보딩을 지원할 당시에는 시간표상에 있는 스케줄이 할만할 줄 알았는데,,, 원티드 프리온보딩을 합격하고 나니 갑자기 해야 할 일이 너무 많아졌다... 우선 Yapp 19기에서 진행했던 북마크 서비스의 2차 개발이 시작되었고, 이번 Yapp 20기에 운영진을 하게 되어서 공식 Yapp 홈페이지를 개편하는 업무를 하게되었다. 또 예전에 진행했던 개발자의 품격2기 멤버들과 개발자 Qna 서비스를 만들기로 했는데, 그게 이번 주부터 시작이다.. 오전 8시부터 오후 4시 30분까지는.. 2022. 1. 30.
원티드 프리 온보딩 선발과제 후기 원티드 프리온보딩 프론트엔드 코스에 지원했을 당시에 제출했던 선발 과제에 대해서 포스팅해보려고 한다. 과제를 그대로 포스팅해도 될지 몰라서 멘토님께 여쭤봤는데, 마음껏 가능하다고 하셨다! 💡 과제 요구사항 [선발 과제]: 원티드 페이지 상단 영역을 React 기반으로 클론해주세요. 💡 요구사항 분석 원티드 상단 영역을 분석해보면 다음과 같다. 슬라이드 되어야 할 이미지가 어떠한 반응형에도 항상 페이지의 정중앙에 유지되도록 설정 슬라이드 이미지가 3~4 초마다 자동으로 슬라이드 되어야 함 슬라이드 이미지에 마우스를 hover 하게 되면 슬라이드를 멈춤 이미지가 무한 루프로 연결되어 있음 브라우저 배율을 500%로 최대한 줄여도 이미지가 끊이지 않고 계속 보여야 함 페이지를 새로 고침 할 때마다 나오는 이미.. 2022. 1. 26.
원티드 프리 온보딩 지원 후기 💡 원티드 프리 온보딩 소개 원티드 공식 소개 내용은 다음과 같다. 원티드 X 위코드 X 임팩트캠퍼스 프리온보딩 프론트엔드 코스는 전공자, 주니어 경력자, 부트캠프등을 통해 일정 수준 이상의 기술역량을 갖춘 인재들의 graduate school로서, 단기간에 참가기업의 실전 과제와 팀 단위 동료 학습을 통한 역량 향상과 취업을 목표로 하고 있습니다. 채용 목적의 참가 기업은 1. 참가자 분들의 Pre-온보딩을 위해 자사의 기술과제를 제공합니다. 2. 채용설명회를 통해 서비스, 팀, 직무에 대해 소개합니다. 3. 참가자를 채용합니다. 취업목적의 후보자는 1. Free로 Pre-온보딩에 참여합니다. 2. 참가기업의 제출 과제로 문제 정의, 해결 그리고 피드백을 통해 기술역량을 성장시킵니다. 3. 팀 과제 수.. 2022. 1. 26.
Recoil에서 Redux로 마이그레이션 하게 된 이유 배경 현재 나는 IT 연합동아리 Yapp에서 활동을 하고 있다. 우리 팀은 북마크를 좀 더 쉽고 편리하게 관리하기 위한 서비스를 기획하게 되었는데, 첫 기획 당시에는 단순히 북마크 관리 페이지(검색, 휴지통), 로그인, 회원가입 페이지 이게 전부였다. 그래서 기술 스택을 정할 당시에 전역 상태가 그렇게 많을 거 같지 않아서, 러닝 커브가 매우 적고 상태를 react의 useState처럼 쉽게 관리할 수 있는 recoil을 하기로 정했었다. 동아리에서 진행하는 1차 기획캠프를 하게 되었는데, 기획 캠프는 각 팀별로 기획 내용을 발표한 후에 현업 기획자 분들에게 피드백을 받을 수 있는 시간이었다. 우리가 기획한 북마크 관리 서비스에 대해서도 피드백을 많이 받았는데, 다른 북마크 관리 서비스와의 차별점이 없다.. 2022. 1. 16.
리액트 라이프 사이클 - useEffect 라이프 사이클(Lifecycle) 이란? 라이프 사이클은 말 그대로 생명 주기이다. 그렇다면 리액트에서의 라이프 사이클은 무엇일까? 리액트에서의 라이프 사이클은 바로 컴포넌트의 수명 주기를 말한다. 컴포넌트의 수명 주기는 총 3단계가 있다. 1. 컴포넌트가 생성될 때 (마운트) 2. 컴포넌트가 업데이트 될 때 (업데이트) 3. 컴포넌트가 제거 될 때 (언마운트) 이 3단계의 수명 주기에 관해서 알아보자 컴포넌트가 생성될 때 (마운트) 다음과 같이 useEffect hooks를 이용하여 안에 코드를 넣어주면 컴포넌트가 생성(마운트)될 때 해당 코드가 실행이 된다. useEffect(() => { console.log("첫 랜더링") }, []) 컴포넌트가 업데이트될 때 (업데이트) 컴포넌트가 업데이트될 때.. 2022. 1. 8.
WebRTC 란? (개념정리) 요즘 코로나로 인해서 많은 회사들이 비대면으로 회의를 진행하고 있다. 나 같은 경우는 IT 동아리를 참여하고 있는데, 원래는 대면으로 진행했던 동아리였지만 코로나로 인해서 게더타운 이라는 서비스를 이용해서 비대면으로 매주 세션을 진행하고 있다. 이러한 비대면 회의를 진행할 수 있게 도와주는 여러 플랫폼들이 있는데 그중 대표적으로 Google Meet, Discord, Gather Town, Zoom 같은 것들이 있다. 이 서비스들 중 Zoom을 제외하고는 모두 웹 브라우저에서 화상회의를 진행할 수 있다. 이렇게 어떠한 소프트웨어 설치 없이 웹 브라우저만 있으면 화상회의를 가능하게 해주는 기술이 바로 webRTC 기술이다. webRTC란? 그렇다면 이 webRTC 기술은 정확히 어떤 것일까 ?? MDN의 .. 2022. 1. 5.
[리얼월드 HTTP] 스터디 시작 리팩터링 2판 스터디가 끝난 후 다음 스터디는 리얼월드 HTTP 책으로 하기로 하였다. 스터디는 리팩터링 때와 마찬가지로 매주 수요일 오후 7시에 진행하기로 하였다. 스터디를 하지 않았으면 그저 다른 날과 다를 거 없이 평범하게 지나갔을 텐데, 스터디를 하게 되니 강제성(?)이 생겨서 틈틈이 책을 읽는 습관이 생기고 있다. 아마 혼자 공부를 했더라면 책 한 권 읽는데 1년이 걸렸을 거 같다.. (1년도 부족할지도..?) 포스팅에는 책 내용을 요약해서 정리하는 것도 좋겠지만, 스터디 중에 다른 개발자 분과 얘기하면서 알고 가면 좋을 것 같은 얘기들도 함께 작성하겠다. 스터디를 하다 보면 책 내용 외적으로도 개발 관련 좋은 얘기들을 많이 하게 되어서 개발 의지도 더 불타오르고 좋은 거 같다. 리팩터링 스터디.. 2022. 1. 4.
Git 로그아웃 하기 (windows) 기존에 사용 중인 컴퓨터에서 git 계정을 로그아웃 해야 할 때가 있다. 나는 단순히 제어판에서 git을 삭제하면 git 계정이 로그아웃 되는 줄 알고 삭제하고 다시 설치했는데 git 계정이 그대로 있어서 놀랐었다. 그렇게 해서 검색하면서 git을 로그아웃 했었는데, 그 과정을 블로그에 남기려 한다. 다음 과정은 Window 환경을 기준으로 작성하였다. 나중에 내가 다시 보기 위해 또는 나 처럼 Git 로그아웃 하는 방법을 모르는 분들을 위해 남기는 글 1. 제어판 실행 2. 사용자 계정 클릭 3. 왼쪽 탭에서 자격 증명 관리 클릭 4. Windows 자격 증명 클릭 후 GitHub 자격 증명들 클릭 후 제거 이렇게 자격증명을 삭제 해주면 Git 계정 로그아웃이 완료된다. 2022. 1. 4.
자바스크립트 비동기 처리에 대하여 - 1 자바스크립트하면 항상 따라다니는 개념 비동기 처리에 대해서 알아보려고 한다. 필자도 여러 블로그들을 참고하면서 공부를 하였는데, 자바스크립트의 동기, 비동기에 대해서 잘못 설명하고 있는 블로그들이 너무 많아서 새롭게 공부를 하고 있는 분들이 혼동을 가질 거 같다. 그런 분들을 위해 실제 코드를 중심으로 글을 작성해서 비동기 처리에 대해 개념을 정리해보려고 한다. 동기(synchronous), 비동기(asynchronous)란 ? 동기(synchronous) 요청을 보낸 후 해당 응답을 받아야 다음 동작을 실행하는 것을 동기라고 한다. 쉽게 말해서, 코드가 동작한다고 할 때 코드 한 줄이 완료가 된 후 그 뒤에 코드가 실행되고, 그 뒤에 코드가 완료가 된 후, 그다음 코드가 실행되는 것이 동기적으로 작동하.. 2021. 12. 31.
헤로쿠(Heroku)에 Node.js 서버 올리기 (express, socket.io) socket.io를 이용하는 개인 프로젝트를 진행하다가 배포를 하려고 배포 플랫폼들을 많이 알아보았다. 처음에는 AWS를 이용해서 배포를 하려고 하였는데, 실제 서비스를 할 프로젝트도 아니었고 AWS의 프리티어를 조금 아껴두고 싶어 알아보다 heroku를 찾게 되었다. 프론트엔드는 https를 지원하는 netlify에 배포를 해놨기 때문에 백앤드도 https로 배포를 해야 한다. heroku도 알아보니 https를 자동으로 설정해준다고 하여서 heroku에 백앤드를 배포하기로 하였다. 영어로 된 공식문서를 보면서 실패도 많이 했었는데, 나처럼 heroku에 처음 배포하는 분들을 위해서 내가 배포했던 과정들을 블로그에 남기려고 한다. 그럼 Node.js + express + socket.io 서버를 Her.. 2021. 12. 30.
React 프로젝트 Netlify에 배포하기 (+ Github) 오늘은 Github Repository의 올라가 있는 React 프로젝트를 Netlify에 배포하는 방법을 알아보자. 프로젝트를 배포하기 위해서는 우선 Netlify의 계정이 있어야 한다. Netlify에 회원가입이 되어있고, 배포할 프로젝트가 Github Repository에 올라와있으면 다음 진행과정을 따라 해 보자 Netlify 로그인 후 Import from Git 버튼 클릭 GitHub 버튼 클릭 배포할 Repository 선택 배포 환경 세팅 - Branch to deploy: 프로젝트 Repository의 배포할 브랜치 (ex main) - Base directory: repository 안에 client, server 이런 식으로 프론트, 백 둘다 관리하는 경우 우린 React를 배포할 예.. 2021. 12. 29.
React Router v6 업데이트 정리 velopert님의 영상을 토대로 정리한 블로그 글입니다. 동영상으로 보실분들은 velopert님의 유튜브 영상을 시청해주세요! React Router v6 정식 릴리즈 React Router v6가 정식으로 릴리즈 되었다. 공식문서 그 동안 사용했던 React Router의 문법이 조금 바뀌었는데 v5문법에 많이 익숙해서 그런지 v6문법과 v5문법이 많이 헷갈린다. ㅎㅎ.. 그럼 어떤점이 바뀌었는지 한번 보자 Switch가 사라지고, Routes 등장 Routes는 기존 Switch처럼 경로의 순서를 기준으로 선택하는 것이 아닌, 가장 일치하는 라우트를 기반으로 선택하게 된다. Routes로 기존 Switch의 기능을 대체 가능 기존 코드 v6 코드 useHistory가 사라지고, useNavigate.. 2021. 12. 29.

티스토리툴바