👩🏻💻 프론트엔드 개발을 공부중입니다 🔥
-
Input 쏟아넣기
[원티드 프리온보딩 FE 챌린지 3월] React 실전 가이드: 면접 및 실무 기술
[원티드 프리온보딩 FE 챌린지 3월] React 실전 가이드: 면접 및 실무 기술 🗓️ 2024.03.04 ~ 2024.03.17 원티드에서 진행하는 프리온보딩 FE 챌린지 수강 후 정리한 글입니다. 👩🏻💻 [STUDY NOTE] ⭐️ 코스 둘러보기 - 4번의 코스에서 다루어 볼 이야기 • 1차 • web의 역사 (browser 렌더링, AJAX, DOM, Virtual DOM) • react 기본 기념 (render(), jsx, hooks) • 이력서 관련 팁 • 2차 redux-toolkit 상태관리 • 3차 현업 프로젝트에 적용하는 패턴 (project structure, error handling) • 4차 coding convention, 이력서 feedback 📚 노션에 정리한 스터디 노..
-
Input 쏟아넣기
[원티드 프리온보딩 FE 챌린지 2월] 상황에 맞는 프론트엔드 개발 전략 이해하기
[원티드 프리온보딩 FE 챌린지 2월] 상황에 맞는 프론트엔드 개발 전략 이해하기 🗓️ 2024.02.05 ~ 2024.02.18 원티드에서 진행하는 프리온보딩 FE 챌린지 수강 후 정리한 글입니다. 👩🏻💻 [STUDY NOTE] ⭐️ 코스 둘러보기 - 4번의 코스에서 다루어 볼 이야기 • SPA의 원리를 배우고, 사용자 경험을 향상시키는 방법을 탐구합니다. • SSR과 CSR의 차이를 이해하고, 각각의 장단점을 비교합니다. • 웹으로도 앱처럼 사용가능한 PWA를 알아봅시다. • 브라우저가 아닌 데스크톱 환경에서 사용되는 애플리케이션을 구현하는 방법을 알아봅시다. 📚 노션에 정리한 스터디 노트 이번 스터디 노트는 비공개합니다. 🫢 제 방식으로 좀 더 정리된다면 공개하겠습니다! ► 챌린지 전, 🔥 목표 ..
-
Input 쏟아넣기
[원티드 프리온보딩 FE 챌린지 1월] 포트폴리오 작성을 위한 리액트 프로젝트 고도화
[원티드 프리온보딩 FE 챌린지 1월] 포트폴리오 작성을 위한 리액트 프로젝트 고도화 🗓️ 2024.01.02 ~ 2024.01.15 원티드에서 진행하는 프리온보딩 FE 챌린지 수강 후 정리한 글입니다. 👩🏻💻 [STUDY NOTE] ⭐️ 코스 둘러보기 - 4번의 코스에서 다루어 볼 이야기 • 전역변수를 설정하는 기준과 방법 • 테스트코드를 활용한 효율적인 리팩토링 • 백엔드 코드를 수정할 수 없을때 프론트엔드가 할 수 있는 최적화방법 • 실전 리팩토링 📚 노션에 정리한 스터디 노트 1️⃣ 전역변수를 설정하는 기준과 방법 2️⃣ 테스트코드를 활용한 효율적인 리팩토링 3️⃣ 백엔드 코드를 수정할 수 없을때 프론트엔드가 할 수 있는 최적화방법 4️⃣ 실전 리팩토링 ► 챌린지 전, 🔥 목표 및 다짐 현재 취..
-
Output 내기
[Mini Project] 프론트엔드 과제테스트로 만난 Note-App 구현 과정 정리 (3)
[Mini Project] Note-App 👩🏻💻 Github Repository https://github.com/sw2377/note-app 작업 기간 : 2024. 01. 09 ~ 2024. 01. 16 프론트엔드 채용 과제로 수행한 Note-App 구현 과정 (구현 중 에러사항 & 고민한 부분)을 정리한 글입니다. 🔗 시리즈 이어보기 Note-App 구현 과정 정리 (1) Note-App 구현 과정 정리 (2) 현재글 : Note-App 구현 과정 정리 (3) 📖 목차 1. 외부 타입정의 파일 만들기 2. 노트 삭제시 비동기 코드 작성하기 (async / await) 3. 반복되던 handleCreateNote 커스텀 훅으로 만들기 4. TypeScript의 Date 타입 5. vercel 배포..
-
Output 내기
[Mini Project] 프론트엔드 과제테스트로 만난 Note-App 구현 과정 정리 (2)
[Mini Project] Note-App 👩🏻💻 Github Repository https://github.com/sw2377/note-app 작업 기간 : 2024. 01. 09 ~ 2024. 01. 16 프론트엔드 채용 과제로 수행한 Note-App 구현 과정 (구현 중 에러사항 & 고민한 부분)을 정리한 글입니다. 🔗 시리즈 이어보기 Note-App 구현 과정 정리 (1) 현재글 : Note-App 구현 과정 정리 (2) Note-App 구현 과정 정리 (3) 📖 목차 1. lexical text editor 사용하기 2. 헷갈렸던 부분 1, props type 정의 방법 3. 헷갈렸던 부분 2, JSX를 반환하지 않는 React component의 return null 4. 생각보다 어려웠던 ..
-
Output 내기
[Mini Project] 프론트엔드 과제테스트로 만난 Note-App 구현 과정 정리 (1)
[Mini Project] Note-App 👩🏻💻 Github Repository https://github.com/sw2377/note-app 작업 기간 : 2024. 01. 09 ~ 2024. 01. 16 프론트엔드 채용 과제로 수행한 Note-App 구현 과정 (구현 중 에러사항 & 고민한 부분)을 정리한 글입니다. 🔗 시리즈 이어보기 현재글 : Note-App 구현 과정 정리 (1) Note-App 구현 과정 정리 (2) Note-App 구현 과정 정리 (3) 📖 목차 1. 기술 스택의 선택 (TypeScript, Styled-components를 사용한 이유) 2. 레이아웃 고민하기 3. Vite로 React + TypeScript 조합으로 프로젝트를 생성 후,main.tsx 파일의 docum..
-
Input 쏟아넣기
[원티드 프리온보딩 FE 챌린지 12월] 실전 스킬: 비즈니스 로직 완전 정복 with React
[원티드 프리온보딩 FE 챌린지 12월] 실전 스킬: 비즈니스 로직 완전 정복 with React 🗓️ 2023.12.04 ~ 2023.12.17 원티드에서 진행하는 프리온보딩 FE 챌린지 수강 후 정리한 글입니다. 이번 챌린지는 이해가 어려워, 후기만 남깁니다 🥲 👩🏻💻 [STUDY NOTE] ⭐️ 코스 둘러보기 - 4번의 코스에서 다루어 볼 이야기 • 컴포넌트가 복잡해지는 원인에 대해 고찰해보기 • 비즈니스 로직을 제압하는 개발자가 퇴근을 한다 • SOLID한 컴포넌트 만들기 • Logic First, React Late 📚 노션에 정리한 스터디 노트 이번 챌린지는 이해가 어려워 노션 스터디 노트는 비공개 합니다... 🥲 더더더 많~~이 공부를 해야할 듯한데, 이 스터디 노트를 업데이트 할 날이 올..
-
🐥 코드스테이츠 FE 부트캠프
코드스테이츠 프론트엔드 부트캠프 후기 (CodeStates SEB, KDT 국비지원과정)
KDT(K-Digital Training) 국비지원 과정으로 코드스테이츠 프론트엔드 부트캠프를 수료한지 약 2개월 정도가 지났다. 수료 후 후기를 작성하려고 생각은 하고 있었는데, 마음처럼 움직여주지 않던 게으름과 코드스테이츠가 다시 국비지원 과정이 사라짐으로써 이 글을 누가 보려나~ 하는 생각에 미뤄두고 있었는데, 나의 TodoList에 매번 업데이트 되듯 “코드스테이츠 수강 후기 작성하기”가 거의 두 달 째 따라오고 있어 그 모습을 더는 볼 수가 없어 얼른 해치워버리기로 했다. 나는 지난 4월부터 10월까지 개발 부트캠프를 운영하는 “코드스테이츠”에서 웹 프론트엔드 과정을 학습했다. 사실 부트캠프 4개월 쯤 지나고, 팀 프로젝트에 진입하기 전 “코드스테이츠 프론트엔드 부트캠프 4개월 수강 후기(팀 프..
-
Input 쏟아넣기
[원티드 프리온보딩 FE 챌린지 11월] 클린 코드 프론트엔드
[원티드 프리온보딩 FE 챌린지 11월] 클린 코드 프론트엔드 🗓️ 2023.11.6 ~ 2023.11.19 원티드에서 진행하는 프리온보딩 FE 챌린지 수강 후 정리한 글입니다. 👩🏻💻 [STUDY NOTE] ⭐️ 코스 둘러보기 - 4번의 코스에서 다루어 볼 이야기 • 개발자의 멘탈 모델 - YAGNI, 르블랑의 법칙, 보이스카우트 규칙, Real World, Runtime • JavaScript for Clean Code - Scope, Type, Variable, if-else - Object, Prototype, Function, Closure • React for Clean Code - JSX, State, Components, Props, Hooks API, Immutable, ESLink, ..
-
Input 쏟아넣기
[IT 5분 잡학사전 2주 챌린지] 하이브리드 앱, 크로스 플랫폼 앱 다른거 나만 몰랐어..?
노마드 개발 북클럽 “IT 5분 잡학사전” 2주 챌린지 (23.11.10 ~ 23.11.24) 11/22 WED, Assignment # 13 🔖 오늘 읽은 범위 : 에피소드 39 ~ 에피소드 45 1. 책에서 기억하고 싶은 내용은? ✏️ 하이브리드・・・앱? 뭐라고요? (에피소드 43) ”우선 모바일 애플리케이션이라 하면 iOS 앱, 안드로이드 앱을 말해. 이건 알지? iOS는 아이폰이나 아이패드, 안드로이드는 갤럭시폰이나 탭처럼 모바일에서 동작하는 운영체제야. 그리고 이 녀석들 위에서 돌아가는 애플리케이션을 만드는 방법에는 보통 세 갈래의 선택지가 있어. 바로 하이브리드 방식, 크로스 플랫폼 방식, 네이티브 방식이지. 여기에 앱이라는 단어만 붙여서 그 방식으로 만들어진 애플리케이션을 하이브리드 앱, 크..
-
Input 쏟아넣기
[IT 5분 잡학사전 2주 챌린지] 프로그래밍 패러다임과 객체지향 프로그래밍
노마드 개발 북클럽 “IT 5분 잡학사전” 2주 챌린지 (23.11.10 ~ 23.11.24) 11/21 TUE, Assignment # 12 🔖 오늘 읽은 범위 : 에피소드 35 ~ 에피소드 38 1. 책에서 기억하고 싶은 내용은? ✏️ 객체 지향 프로그래밍이 뭐죠? ①② (에피소드 36, 37) 프로그래밍 패러다임이란? 프로그래밍 패러다임은 프로그래머가 프로그래밍을 할 때의 관점, 방식 이런 것을 말해. 프로그래밍을 하는 사고의 틀이라고 생각해도 좋아. 프로그래밍 언어는 이런 프로그래밍 패러다임을 하나 또는 하나 이상을 지원해. 이를테면 자바는 객체 지향 프로그래밍, 함수형 프로그래밍을 지원해. 대표적인 프로그래밍 패러다임으로 절차 지향 프로그래밍, 객체 지향 프로그래밍, 함수형 프로그래밍이 있어. ..
-
Input 쏟아넣기
[IT 5분 잡학사전 2주 챌린지] 코볼 개발자를 찾는다구요? (👥 코볼이 뭔데..? 👥👥)
노마드 개발 북클럽 “IT 5분 잡학사전” 2주 챌린지 (23.11.10 ~ 23.11.24) 11/19 SUN, Assignment # 10 🔖 오늘 읽은 범위 : 에피소드 30 ~ 에피소드 34 1. 책에서 기억하고 싶은 내용은? ✏️ 코로나가 준 레거시 시스템의 교훈 (에피소드 30) ✓ 프로그램은 책임 있게 만들어야 한다 먼저 개발자의 관점에서 살펴볼게. 개발자는 자신이 만든 프로그램에 완벽하게 책임을 져야 해. 왜냐하면 개발자가 만든 프로그램은 사람들에게 영향을 줄 테니까 말이야. ✓ 프로그램은 끊임없이 관리해야 한다 이건 관리하는 사람이 생각해 보면 좋겠어. 코볼 개발자를 구할 때 이 문제를 더 부각시켰던 건 시스템 관리자가 코볼을 코발트로 잘못 알고 있었다는 거야. 정부 시스템 관리자가 언어..
