728x90 반응형 분류 전체보기235 자기소개 기록을 바탕으로 성장하는 프론트엔드 개발자 조은지입니다. 🌈 끝없이 성장하고자 하는 신입 프론트엔드 개발자 조은지입니다. 다양한 프로젝트의 협업 경험으로 유연한 커뮤니케이션이 가능하며 팀원과 함께 문제를 해결하고 이를 기록해 성장해나가는 것을 지향합니다. ⚒️ Skills Hard Skills HTML5 웹 표준 문법을 준수하며 시맨틱 마크업을 적절하게 사용합니다. CSS3 문제 없이 UI를 그릴 수 있으며 반응형 활용이 가능합니다. JavaScript ES6 ES6의 let, const, 화살표 함수, 구조 분해, 스프레드 연산자를 적절히 사용합니다. 직관적이고 유연한 코드를 지향합니다. React 프로젝트 작업에 모두 react를 사용하였고 기능을 무리 없이 구현할 수 있습니다. 원하는 로직을 바로 .. 2023. 1. 9. 2023.01.08, weekly memoirs weekly memoirs 이번 주 공부한 메모 이번 주에 한 일 ✅ observer 블로깅 기술 면접 대비하면서 observer를 다시 공부했다. 언제나 봐도 새로운 Observer지만 어느 정도 자신감이 붙은 거 같다. 준호님의 cleanUp이 필요없는 무한 스크롤 로직도 오늘 제대로 이해한 거 같아서 나름 뿌듯하다. 얼른 catbow에 catbow 라이브러리 적용하면서 observer를 더 심도있게 파보고 싶다 ☺️ ✅ 코딩테스트 월요일에 기업 코딩테스트를 진행했다. 생각보다 어려운 문제는 아니었지만 테스트에서 효율성 점수는 탈락했다. 찾아보니 알고리즘을 이용해서 푸는 게 좋다고하는데 요것도 공부를 해야하나 고민이 많다 🤔 하루에 한 시간씩 공부해보면 어떨까 싶다 ✅ 캣보우 캣보우 convertPa.. 2023. 1. 8. observer API 무한스크롤 Intersection Observer API - Web API | MDN Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 document 의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법입니다. developer.mozilla.org 한번에 이해하면 천재! 옵저버 공식문서 👆 let options = { root: document.querySelector('#scrollArea'), rootMargin: '0px', threshold: 1.0 } let observer = new IntersectionObserver(callback, options); observer API 는 매우 유용한 API 이다. 뷰포트와 관찰자를 설정해.. 2023. 1. 8. Winnerest 메인 페이지 리팩토링(Observer 무한스크롤) Winnerest 메인 페이지 구현 (무한 스크롤, Intersection Observer) 👆 메인페이지 구현 움짤 Pinterest clone Project Winnerest 총 5명이서 구성된 Winnerest ( FE : 3, BE : 2 )에서 2주간 학습용으로 로그인 페이지 / 메인 페이지 / 마이 페이지 구현을 맡았습니다. 메인 페이지 0119eunji.tistory.com observer Intersection 라이브러리를 사용해 구현했던 메인 페이지를 캣보우 프로젝트를 하며 다시 공부한 Observer API 를 사용해 다시 리팩토링했다. const Main = () => { const navigate = useNavigate(); const token = localStorage.get.. 2023. 1. 8. 2023.01.01, weekly memoirs weekly memoirs 이번 주에 한 일 ✅ 2차 프로젝트 observer 리팩토링 이번주 목표 : observer 라이브러리 사용한 거 observer로 바꾸기 느낀점 캣보우를 하며 시간 내어 학습했던 observer로 2차 프로젝트를 다시 리팩토링했다. 무한스크롤 기능이 있던 메인 페이지만 살짝 손 봤는데 아직 완벽히 숙지했다는 느낌은 아직 없다고 느낀다. 몇번 더 써보아야할 듯 싶다. ✅ 코딩테스트 운 좋게 코딩 테스트를 받아서 열심히 코테 준비를 했다. 급하게 1,2 단계 문제를 풀었는데 어떻게 풀어야 좋을지 감이 아직 안 잡혀서 아쉽다. 매일 꾸준히 30분씩 풀어왔던게 그래도 도움이 많이 되어서 문제 이해하는데는 크게 어렵지 않았지만 생각보다 변수가 많아 어려웠다. 🥲 그래도 처음 코딩테스트.. 2023. 1. 1. 프로그래머스 js 마법의 엘리베이터 문제 마법의 세계에 사는 민수는 아주 높은 탑에 살고 있습니다. 탑이 너무 높아서 걸어 다니기 힘든 민수는 마법의 엘리베이터를 만들었습니다. 마법의 엘리베이터의 버튼은 특별합니다. 마법의 엘리베이터에는 -1, +1, -10, +10, -100, +100 등과 같이 절댓값이 10c (c ≥ 0 인 정수) 형태인 정수들이 적힌 버튼이 있습니다. 마법의 엘리베이터의 버튼을 누르면 현재 층 수에 버튼에 적혀 있는 값을 더한 층으로 이동하게 됩니다. 단, 엘리베이터가 위치해 있는 층과 버튼의 값을 더한 결과가 0보다 작으면 엘리베이터는 움직이지 않습니다. 민수의 세계에서는 0층이 가장 아래층이며 엘리베이터는 현재 민수가 있는 층에 있습니다. 마법의 엘리베이터를 움직이기 위해서 버튼 한 번당 마법의 돌 한 개를 사.. 2022. 12. 31. 바벨 bable : 자바스크립트 컴파일러 @babel/preset 쉽게 얘기하자면 es6에서 es5로 바꾸어주는 컴파일러 다양한 브라우저에서 서비스를 제공해야하기 때문에 주로 es5 버전으로 컴파일해서 배포함 바벨 동작 단계 파싱 (parsing) : 코드를 읽고 추상 구문 트리(AST)로 변환하는 단계 변환 (Transsforming) : 추상 구문 트리를 변경하는 단계 출력 (Printing) : 변경된 결과물을 출력하는 단계 ✅ 추상 구문 트리(AST) 프로그램 내에서 발생하는 기능을 나타내기 위해 만들어진 구문 구조 바벨은 자바스크립트 코드를 받아서 AST를 만들고 그걸로 새로운 자바스크립트 코드를 출력함 바벨 플러그인(어떻게 변환할지에 대한 규칙)들을 목적에 따라 묶어놓은 세트를 프리셋(preset).. 2022. 12. 27. 자바스크립트 Dom 이란? 자바스크립트는 웹 문서를 제어하기 위해 만들어진 언어 다른 html 요소를 추가하거나 제거하는 등 html 문서를 조작하기 위해 만들어진 언어 그렇다면 how? 브라우저 안에는 웹 문서를 해석할 수 있는 렌더링 엔진이 있음 브라우저로 html 파일을 열게 되면 이 렌더링 엔진이 html를 읽음 그리고 해석이 끝나면 문서를 객체화하여 자바스크립트로 접근할 수 있게 함 문서 객체 모델 (Document Oject Model) = DOM -> 스크립트 언어로 html을 제어할 수 있도록 웹 문서를 객체화 한 것 DOM : 문서 객체 모델로, 브라우저에서 자바스크립트로 html를 제어할 수 있도록 제공하는 API -> API : 자바스크립트 언어 자체는 아니지만 브라우저에서 제공하는 기능 트리 구조, 돔 트리 .. 2022. 12. 27. dependencies 와 devDependencies 차이 dependencies npm install 라이브러리명 흔히 쓰는 npm install 라이브러리명 명령어를 통해 설치 애플리케이션 동작과 연관된 라이브러리 설치, 배포할 때 포함됨 devDependencies npm install 라이브러리명 --save-dev 혹은 npm install 라이브러리명 -D 애플리케이션 동작과 직접적인 연관은 없지만 개발할 때 필요한 라이브러리 배포할 때 포함되지 않음 둘을 나누는 이유 devDependencies 같이 배포시 개발 단계에서만 쓰이는 불필요한 라이브러리를 포함시키지 않을 수 있음 2022. 12. 27. 이전 1 ··· 15 16 17 18 19 20 21 ··· 27 다음 728x90 반응형
