TIL

[TIL] 2022-1222 : 프리온보딩 인턴십 1차 과제 ing

🐈오늘 배운 것 ✔️EsLint, husky 그리고 자동화 첫 주차 프로젝트 셋팅을 위해 기존 프로젝트에 초기 세팅을 추가하고, 리팩토링을 진행했다. 이번 프로젝트에서 EsLint와 Prettier 그리고 husky를 사용하게 되었는데, 설정 방법 등을 간단하게 복기해보려고 한다. EsLint Lint 란 코드 문법 교정을 위해서 사용하는 툴로, 여러 사람이 함께 프로젝트 작업을 할 때 문법, 코드 스타일 등을 맞춰 가독성을 높이고 협업 능률을 향상시키기 위해서 사용한다. 주로 문법 교정의 용도로 EsLint를 많이 사용하고, 코드 교정의 경우 prettier 를 사용한다. 충돌 가능성이 있기 때문에 eslint-config-prettier 같은 별도의 플러그인을 설치하여 esLint 의 formatti..

[TIL] 2022-1220 : 알고리즘, 프리온보딩 인턴십, 알루 모임 시작

🐈오늘 배운 것 ✔️알고리즘 문제 풀이 https://github.com/algorithm-tear-up-20b/algorithm/pull/6 박혜정 / 5주차 by hyejj19 · Pull Request #6 · algorithm-tear-up-20b/algorithm github.com 위와 같은 문제들을 풀었다. 다시 알고리즘 스터디를 시작해서 일주일에 6문제인데, 지난주에 많이 못풀어서 오늘 나머지 4문제를 푸느라 좀 힘들었다. 1일 1알고리즘 실천하자. 알고리즘 스터디 관련해서, 풀이 방법은 접근 가능한데 구현이 안되는거면 매달리고, 접근조차 못하는거면 레퍼런스를 보면서 공부하는게 좋다는 추천이 있었다. 매달리면 3시간이고 4시간이고 허비할 것 같아서, 30분 고민하고 안되겠으면 힌트를 잠깐 ..

[TIL] 2022-1212 : 이력서 작성을 위한 에피소드 정리 / 뽑히는 개발자의 포트폴리오 라이브세션 / 모락모락 프로젝트 코멘트 리팩토링

한 달 만에 적어보는 TIL. 그동안 프로젝트를 하느라 매일 기록은 노션에 정말 대충 적어두었었는데 이제는 조금이나마 여유가 생겼으니 하루를 다시 구조적으로 돌아보려고 한다. 🐈오늘 배운 것 ✔️면접 준비, 에피소드 STAR 기법으로 정리 + 뽑히는 개발자의 포트폴리오 라이브세션 오늘은 코드스테이츠 잡서칭 3일차 면접 준비 시간이었다. 사실 지난 금요일부터 주말동안 놀기도 놀았고 원티드 프리온보딩 사전 과제를 하루 만에 끝내느라 경험 정리등을 제대로 하지 못해서 면접 예상 질문에 답변을 준비하기가 너무 힘들었다;; 자기소개에도 떠오르는 말이 없어서 에피소드 정리부터 시작했다. 에피소드 정리도 많이는 못했지만, 메인 프로젝트에서 경험했던 두 개의 문제 상황에 대한 경험을 STAR 기법으로 정리했다. STA..

[TIL] 2022-1111 : UI 프로토타입 작업 / 타입스크립트 공부

🐈오늘 배운 것 ✔️UI 프로토타입 작업 현재까지 피그마를 사용해 각 페이지별 디자인 + 프로토타입까지 동시에 작업을 진행했다. 기획 과정에서 도출된 요구사항 정의서를 바탕으로 플로우차트를 만들고, 해당 플로우 차트를 기반으로 ui 계획에 들어가니 어떤 방식으로 동작할 것이라는게 눈에 들어와서 수월한 느낌이었다. UI, 디자인적인 측면에서는 내가 방향을 잡고 많이 진행을 하게 되었다. 플로우차트를 그렸을 때 각자 맡은 부분을 그대로 진행할까 했는데, 주요한 비즈니스 로직에 대한 화면을 먼저 끝내야 백엔드 파트와 소통이 수월할 것 같아서 페이지별 우선순위를 정해 각자 업무를 분담했다. 피그마를 꼼꼼하고 완벽하게 다루지는 못했지만 그래도 그동안 많은 디자인 툴을 다뤄본 것이 이번 단계에서는 큰 도움이 된 것..

[TIL] 2022-1020 : pre-project DAY-0

🐈오늘 배운 것 ✔️프리 프로젝트 팀장이 되었다. 스택 오버플로우를 클론코딩하는 약 2주간의 프리 프로젝트가 시작되었다. 팀장을 하고 싶다고 생각은 했는데, 얼떨결에 하고 싶다고 어필까지 해버렸다. 그래도 어느정도 체계를 갖춘 FE-BE 팀프로젝트는 처음이라 부족한 점이 많지만, 모르면 배우면 되니까 열심히 해보려고 한다. 첫 날에는 자기소개도 하고 팀 빌딩도 하고 서로에 대해 첫 인사를 나누는 시간으로 가졌다. 주 소통 창구는 디스코드로 정했다. 아무래도 주로 사용하는 소통 방식이 디스코드라 편의성을 위해서! 정했던 규칙은 디스코드 상에서 볼 수 있게 채널도 개설하고, 각종 회의 시간에 맞춰 입장할 수 있도록 회의실도 개설하고 등등. 팀원분들과 이야기를 좀 많이 나누었는데 다들 성격도 좋으시고 또 아는..

[TIL] 2022-1019 (티스토리 복구 경축!)

블로그 플랫폼을 벨로그로 옮길까 하다가, 티스토리가 복구되어 다시 써보려고 한다. 지금까지 작성한 글들이 이 곳에 있다보니 옮기기가 쉽지 않았다...! 🐈오늘 배운 것 ✔️기술면접 준비 오늘 준비 시간이 살짝 촉박하고 질문이 많아서 주어진 시간안에 모든 질문을 다 준비할 수는 없었다. 섹션 4 기술면접 준비 노션 링크 전체 내용을 블로그에 정리하는 것은 내용이 너무 길어질 것 같고... 오늘 좀 몰랐던 부분에 대해서만 간략히 정리하려고 한다. 먼저 Node.js 는 일정 부분 멀티 스레딩을 지원한다. 자바스크립트가 싱글스레드 언어이기 때문에 node 도 당연히 싱글 스레드일 것이라고 생각했는데, 일정 부분은 맞지만 libuv 라는 노드 라이브러리가 멀티스레드를 지원하고 이 라이브러리를 통해 비동기 작업을..

[TIL] 2022-1013

🐈오늘 배운 것 ✔️Proxy 개발시에 서버쪽으로 요청을 보낼 때, 브라우저와 api 서버의 출처가 달라 발생하는 CORS 에러를 해결하기 위해 Proxy 우회를 사용할 수 있다. 기본적으로 브라우저가 "우리 같은 출처에 있어😊" 하고 착각하게 만든 다음에 요청하는 것이다. 여기서 다시 복습... CORS 는 왜 발생하는가? CORS 란 Cross-Origin Resource Sharing의 약자로, 출처가 다를 때 리소스를 공유할 수 있도록 허용해주는 것을 말한다. 브라우저는 기본적으로 출처가 다를 경우(여기서 출처는 스킴(프로토콜), 호스트(도메인), 포트 이렇게 3가지를 포함하는 URL 이다) 리소스를 공유하지 못하도록 막는 SOP (동일 출처 정책) 때문에 별도의 권한 허용 없이는 다른 URL 끼..

[TIL] 2022-1012

🐈오늘 배운 것 ✔️CI / CD Continuous Intergration 지속적인 통합 / Continuous Delivery 혹은 Deployment 지속적인 서비스 제공 혹은 지속적인 배포 애자일을 기반으로 수정사항을 빠르게 서비스에 반영하고 피드백을 받을 수 있도록 하는 빌드/테스트 + 배포 자동화 과정을 의미한다. 통합 단계 CI 와 배포 단계 CD로 나눌 수 있는데, 자동화가 진행되는 단계는 회사별로 상이할 수 있다. CI 단계에서는 Code, Build, Test 단계로 나눌 수 있는데 원격 저장소에 코드가 push 되면 이를 빌드하고 테스트하는 과정을 거친다. 이 과정이 자동화되면 코드를 빠르게 통합할 수 있고 지속적인 배포를 위한 준비를 할 수 있다. 코드가 통합되는 과정을 자주 거치면..

[TIL] 2022-1011

🐈오늘 배운 것 ✔️AWS AWS 아마존 웹 서비스는 클라우드 컴퓨팅 서비스를 제공한다. 클라우드 컴퓨팅이란 가상의 컴퓨터를 대여해주는 서비스로, 직접 서버실을 갖추고 운영,관리하는 온프레미스 방식에 비해 많은 장점을 가지고 있다. 먼저 인프라를 구축하는 초기 비용이 적게 들고, 사용한 만큼 금액을 지불할 수 있으며 컴퓨팅 능력을 필요에 맞게 탄력적으로 조절할 수 있다는 장점이 있다. 단점으로는 서비스 제공 업체의 문제로 전체 서비스가 영향을 받게 된다는 점이 있다. AWS 에서 제공하는 서비스의 종류가 많은데, 그 중 세 가지를 정리해보자. EC2 (Elastic Compute Cloude) AWS 에서 제공하는 클라우드 컴퓨팅 서비스, 가상의 컴퓨터를 한 대 빌리는 것과 같다. Elastic 이라는 ..

[TIL] 2022-1010

🐈오늘 배운 것 ✔️Next.js Auth : iron-session으로 유저 인증하기 Next.js 에서 iron-session 라이브러리를 사용해 유저를 인증하는 로직을 복습했다. 로직 자체는 간단하다. 1. 유저가 이메일로 받은 인증번호를 입력한다. 2. 해당 인증번호와 일치하는 유저 데이터를 찾는다. 3. 데이터를 찾는데 성공하면 쿠키를 통해 유저 아이디를 암호화하여 응답한다. 4. 다음 요청에서 쿠키와 함께 서버에 요청을 보내면, 쿠키를 확인하여 인증 여부를 결정한다. iron-session은 클라이언트쪽에 데이터를 저장한다는 점에서 토큰과 비슷하지만 payload가 암호화 된다는 점이 차이점이라고 한다. 또한 쿠키 생성 및 응답을 위한 helper 함수(withIronSessionApiRout..