본문 바로가기

전체 글

1주차 : 음악 스트리밍 서비스 회원가입 분석 분석기간 2022년 3월 29일 ~ 2022년 4월 1일 선정이유 입력받아야 하는 정보가 가장 많은 기능이기 때문에 타사 회원가입은 대체로 어떻게 되어있는지 알고 싶어서 회원가입 UX 트렌드를 파악하기 위해서 국내외를 막론하고 유명한 사이트가 존재하며 무료, 유료 서비스인 것처럼 다양하게 분포되어있기 때문에 여러 도메인의 회원가입을 경험할 수 있어서 사례 더보기 헤더 우측 상단에 버튼 존재 SNS 회원가입 있음 (페이스북, 구글, 애플) 기본 회원가입 있음 기존에 있는 아이디로 회원가입을 시도하면 로그인 화면으로 유도 기존에 없는 아이디로 회원가입을 시도하면 비밀번호 선택하고나서 로봇 여부 확인 이메일 코드 확인 후 가입 완료 더보기 헤더 우측 상단에 로그인과 함께 버튼 존재 SNS 회원가입 있음 (페이.. 더보기
[10분 테크톡] 결의 브라우저 렌더링 후기 웹 프론트엔드 개발자라면 브라우저 렌더링이 어떻게 진행되는지 알고 있어야 더욱 효율적이고 성능 친화적(?)으로 시스템을 설계하고 구현할 수 있다고 생각한다. 특히 이전에 렌더링 횟수로 인한 메모리 누수를 막기 위해 많은 노력을 봤었기 때문에 렌더링이 어떻게 진행되는지 알고 있는 것이 매우 중요하다고 느꼈다. 이전과 달리 특히 웹 개발자로 전향해서 준비하고 있는 나에게 브라우저에서 렌더링 과정은 반드시 알아야만 하는 개념인 것이다. 그리고 브라우저가 어떻게 렌더링하는지에 따라 사용자 경험에 많은 영향을 끼치기 때문에 웹 프론트엔드 개발자라면 짚고 넘어가야 한다. 목차 브라우저란? 브라우저란? 브라우저 : html 문서, 이미지, 폰트 등의 사용자가 선택한 자원을 전송 및 표현하는 소프트웨어 e.g. 크롬,.. 더보기
[10분 테크톡] 렉스의 Git 브랜칭 전략 후기 새로운 팀 프로젝트에 앞서 개발자는 2명 뿐이지만 어떤 브랜치 전략을 도입해야할지 고민하던 찰나 잘 정리된 영상을 보게 되어 정리해보았다. 물론 이와 관련해서 검색하면 더 나오긴 하지만 Git 브랜치 전략은 늘 다시 보게 되고, 늘 헷갈리는 것 같다. 다시 한 번 헷갈리지 않고 정확히 이해하기 위해 이번 영상을 정리해본다. 목차 Branch 전략이란? Github flow란? Git flow란? 우린 무엇을 사용해야할까? Branch 전략 평상시 우리의 branch 사용 유형 혼자 개인 프로젝트 개발을 할 때 -> 문제도 자신이, 규칙도 자신이 책임진다 코드의 수정, 기능 개발 등을 할 때만 branch를 여는 유형 하나의 branch만 사용하는 유형 팀으로 프로젝트 개발을 할 때 branch명에서 생성.. 더보기
토스 SLASH 21 - 실무에서 바로 쓰는 Frontend Clean Code 후기 작년 자료긴 하지만 프론트엔드에서도 클린한 코드를 구현해야 나뿐만 아니라 다른 개발자도 코드를 읽고 바로 기능을 이해할 수 있기 때문에 생산성을 더 높일 수 있다고 생각한다. 특히 좋은 개발자의 기준 중 하나로써 빠른 생산성을 강조하는 몇몇 포스팅을 본 적이 있는데 기업 입장에서도, 팀 입장에서도 업무에 교착상태없이 원활하게 업무를 진행하려면 팀원의 생산성 속도를 적절히 조절할 수 있어야 한다. 그러기 위해서는 우선 빠르게 생산성을 올릴 수 있는 방법부터 고안해봐야한다. 빠르게 하는 걸 느리게 하기는 쉬워도 느리게 하는 걸 빨리 하기는 어렵기 때문이다. 토스에서는 이런 생산성을 위해 프론트엔드에서도 클린 코드를 지향했다고 하는 강연이 있어서 보게 되었다. 이번 강연을 보면서 클린 코드의 개념과 의의를 다.. 더보기
토스 SLASH 21 - 프론트엔드 웹 서비스에서 우아하게 비동기 처리하기 후기 최근 기술면접 스터디에서 비동기와 동기 처리에 대해 계속 이야기가 나오고 있기도 하고 프로젝트를 하기에 앞서 React를 프론트엔드에서 사용할 생각이라 이런 내용도 알고 있으면 구현하는 데도 도움이 될 것 같아 이번주 세미나는 이 세미나로 결정했다. React를 사용하면서 비동기 처리를 고려해서 구현한 적이 많이 없었던 것 같고 왜 그렇게 구현해야하는지 주의 깊게 공부하지 못했던 것 같아 이번 세미나가 나에게는 비동기라는 개념에 대해서도 알 수 있고, 어떻게 비동기를 우아하게 처리할 수 있는지 방법까지 공부할 수 있는 세미나였다. 현재 토스의 상황 토스에서는 React, Next.js, Typescript를 현재 사용하고 있다. 웹 서비스에서 가장 다루기 어려운 부분은 비동기 프로그래밍 비동기 프로그래밍.. 더보기
4월 우아한테크세미나 <지속가능한 SW 개발을 위한 코드리뷰> 후기 이전 회사에서도 코드리뷰를 도입해서 했지만 적극적으로 참여한 것은 아니어서 여전히 '코드리뷰란 무엇인가' 상태에 있었던 찰나 우아한테크에서 이런 좋은 세미나를 열어주었다. 왜 코드리뷰를 해야하는가? 좋은 설계의 중요성 시장은 VUCA, 이중에서도 변화 주기가 빨라지고 있어서 비즈니스는 더 빨리 혁신해야하는데 개발의 경우 빠르게, 자주, 더 안정성있게 배포되어야 한다고 말하기 때문에 개발 조직의 성능(생산성)이 중요해졌기 때문 -> 좋은 설계 SW 공학에서 설계는 완전한 소스 코드고 좋은 설계는 클린한 코드, 설계를 잘하는 사람은 코드를 잘 작성하는 사람이라고 할 수 있음 SW의 진정한 비용은 유지보수, 90% 이상의 시간을 어떤 코드를 이해하는데 사용함 SW 개발의 단순한 진리 : 제일 빠르게 가는 유일.. 더보기
[Nodejs] Error: Cannot find module '<경로>' * 상황 - package.json에서 scripts 설정 후 명령어 입력했더니 다음과 같은 이슈 발생 * 이유 - 입력한 명령어가 node start였기 때문 * 해결방안 - npm start로 입력해주면 잘 된다 더보기
[노드 기초반] 5주차 개발일지 1. 배운 내용 크롤링 AWS EC2 인스턴스 이용해서 코드 배포 도메인 연결 2. 새로 알게 된 내용 (1) 크롤링 - axios로 크롤링할 페이지 접속, iconv-lite로 HTML 데이터 한글 깨짐 방지 # 한글 깨짐 방지 코드 const content = iconv.decode(html.data, "EUC-KR").toString(); - cheerio로 특정 태그를 가르켜 데이터 가져오기 const $ = cheerio.load(content); const list = $("ol li"); await list.each( async (i, tag) => { let desc = $(tag).find("p.copy a").text() let image = $(tag).find("p.image a i.. 더보기

반응형