일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 모던 자바스크립트 딥다이브
- 모던 자바스크립트 Deep Dive
- 모던 javascript Deep Dive
- KDT 프로그래머스 데브코스 프론트엔드
- useRef 지역 변수
- 프로그래머스 K_Digital Training 프론트엔드
- 백준 node.js
- Vue3 Router
- 투포인터알고리즘 js
- Frontend Roadmap
- 개발자 특강
- 모던 자바스크립트 Deep Dive TIL
- frontend roadmap study
- 프로그래머스 K_Digital Training
- Vue3
- 인프런 자바스크립트 알고리즘 문제풀이
- 프로그래머스 데브코스
- 백준 js
- 프로그래머스 데브코스 프론트엔드
- 우테캠 회고록
- 머쓱이
- KDT 프로그래머스
- react 프로젝트 리팩토링
- 리팩토링 회고
- TypeScript 문법 소개
- useEffect return
- K_Digital Training
- 프로그래머스 데브코스 프론트엔드 TIL
- react customHook 예시
- 모던 자바스크립트 TIL
- Today
- Total
목록전체 글 (254)
프론트엔드 개발자의 기록 공간
본 글은 cra react+typeScript 환경에서 테스팅을 사용하면서 기록하고 정리한 글입니다. React Testing Library testing-libray를 사용하면 사용자 중심 방식으로 UI 구성 요소를 테스트 할 수 있습니다. 테스트가 소프트웨어 사용 방식과 비슷할수록 더 많은 자신감을 얻을 수 있습니다. testing-libray는 행위 주도 테스트 방법론을 따르는 테스트를 작성하는데 매우 적합합니다. jsdom이라는 라이브러리를 통해 실제 브라우저 DOM을 제공해주기 때문에 화면에 보여지는 실제 모습 그 상태로 테스트를 수행할 수 있게 해준다. jest는 자바스크립트 또는 타입스크립트 환경에서 테스트를 진행할 수 있게 해준다. 즉, 테스트 코드는 testing-libray로 작성하고 ..
2주 차도 빨리 지나갔다.. 이번 주는 많이 잔 게 6시간인 것 같다. 2주 차는 2인이 한 팀이 되어 "TODO" 프로젝트를 개발하는 것이었다. 월요일에 출근하자마자 팀원과 아이스브레이킹 타임을 가졌다. 짧은 시간이지만 이 분도 대단하다고 느껴졌다. 매일매일이 겸손해지는 것 같다. 간단한 잡담 타임이 끝나고 프로젝트 소개를 해주셨다. 이번 미션은 VanillaJS와 node를 이용하여 CSR로 개발하는 것이 미션이었다. 프런트에서 CSR을 하기 위해 babel, webpack 환경 세팅을 직접 하는 것도 미션에 포함되어 있었다. 간략한 수업을 마치고 팀원과 이번 프로젝트를 기획서를 보면서 일정과 협업 방식을 정했다. 하루마다 진행해야 할 일정을 정리하고 git commit, git issue, git ..
시간이 이렇게 빨리 흘러가나라고 느껴질 정도로 한 주가 빨리 흘러갔다. OT 내용에 언급했던 것처럼 이번 주 프로젝트는 로그인/회원가입 기능을 VanillaJs, node express를 이용해서 풀스택 개발을 진행하는 것이었다. 사실상 OT 날 제외하고 금요일 오전에 프로젝트 마감이라 이틀하고 반나절이라는 시간이 주어졌다. 둘째 날 강의장에 오니 1주 차 팀을 배정해 주셨다. 개인 프로젝트지만, 각자 의견을 나누면서 개발을 진행하라는 의미로 팀을 짜주셨다. 팀과의 첫 만남에서 아이스브레이킹 타임을 가졌다. 4명이지만 다양한 사람이 있었다. 경력자, 비전공자, 전공 학부생.. 짧게 얘기를 나눴지만 전부 배울 점이 많고 실력이 뛰어나셨다. 그렇게 팀원들과 프로젝트 방향성이나 개발 환경에 대해서 의논을 얘기..
OT는 롯데타워에 "더 큰집"에서 진행됐다. (지옥철 1시간 30분 죽을 것 같았다..) 1층에서 모여서 운영 매니저님의 안내에 따라 출입증 발급하고 사무실로 갔다. 입구에서부터 여기가 회사인가 카페인지 헷갈릴 정도로 편안한 분위기의 인테리어로 되어 있었다. 조금 앉아 있으니 운영진, 마스터, CTO 환영 인사와 설명회를 진행했다. 여러 설명과 조언을 토대로 설명을 해주셨다. 기억에 남는 말은 "지금 여러분은 탄소지만 우테캠 과정이 끝났을 때, 다이아몬드가 되어서 나갈 것을 당부했다." 그만큼 열정을 불태우라는 말씀이었다. 이후에 오피스 투어를 진행했다. 구경하느라 사진을 못 찍었지만, 카페인지 세미나 왔는지 모를 정도로 엄청 휴게 공간과 자유로운 업무 환경으로 이루어져 있었다. 모든 공간과 인테리어에 ..
우아한테크캠프 1년마다 돌아오는 우테캠 모집 글이 올라왔다. 우형에 대한 관심과 우테캠에 대한 관심이 많아서 무조건 붙어야겠다는 마음으로 준비했다. 세부 전형 단계 사전접수 > 1차 코딩테스트 > 2차 과제테스트 > 서류접수 > 면접 > 우아한테크캠프 작년과 다르게 자소서 기입 항목이 2차 테스트까지 거친 이후에 진행되었다. 1차 코딩 테스트 프로그래머스 플랫폼으로 150분 4문제로 시험이 치러진다. 화상 감독이나 캠은 키지 않고 편안한 분위기에서 진행됐다. 프론트엔드 웹 풀스택 과정은 코딩 테스트 언어를 JS로 제한되어 있었다. 덕분에 자료구조를 직접 구현해야 하는 까다로운 문제는 나오지 않았다. 1번과 2번 문제는 최근에 코테에서 자주 나오는 유형으로 나왔다. 주어진 정보와 문제로 객체 or 배열로 ..
🚩 7576번_토마토 골드5 📖 문제 설명 : N x M 상자 크기에 토마토가 있을 경우, 하루가 지날 때마다 인접 토마토들을 익게 한다. 모든 토마토가 익는 데까지 걸리는 최소 일수 구하기 💡 시간 초과를 벗어나기 위해서는 queue 알고리즘을 구현해서 사용 or index가 증가하는 cursor를 두고, queue.length < queueCursor를 사용 queue 알고리즘을 구현 예시 const fs = require('fs') const [mn, ...input] = fs .readFileSync('/dev/stdin') .toString() .trim() .split('\n') const [m, n] = mn.split(' ').map(Number) const graph = input.map..
아토믹 디자인(Atomic Design)을 착안하여 실제로 프로젝트를 수행한 경험을 늦게나마 공유하겠습니다. 완벽한 아토믹 디자인이 아니지만 프로젝트 기획에 맞게 팀원들과 논의를 통해 적절히 입맛에 바꿔 사용했습니다. 그전에 아토믹 디자인에 대해서 간략히 알아보도록 합시다. ❓ Atomic Design이란? 웹 프론트 개발 프레임워크, 라이브러리인 Angular, Vue, React는 컴포넌트 단위로 개발을 진행한다. 이러한 컴포넌트를 가장 작은 단위로 설정하고 이를 바탕으로 상위 컴포넌트를 만들어 코드 재사용을 최대화하는 방법론이다. 따라서 아토믹 디자인이 컴포넌트 중심 설계 패턴에서 더욱 주목받게 되었다. 아토믹 디자인은 원자(Atoms), 분자(Molecules), 유기체(Organisms), 템플..