20대의 자산

애매한 쌩신입의 SI취준 기록 ~ 그래서 4월 달엔 뭘 했는데? (자기소개서, 포트폴리오, 블로그)

자기 소개서 쓰는것만 한달이 걸렸다.도대체 어디부터 어떻게 쓰는거지 하면서 처음에는 이리머리 머리 굴려가면서 작성 했던거 같다ㅠㅠ나의 장점은 뭘까, 그동안 무얼 했나 엄청 고민 하면서 작성을 했다.심지어 같은 국비를 들었던 오빠의 자소서는 국비 담당자분들께서 고칠게 없다고 하시면서 내꺼는 엄청 걱정?을 막 하심 ㅠ^ㅠ 그래서 내린 결론은 국취제랑 취업담당자분들에게 자소서를 보내고 컨펌 받은 내용을 바탕으로 어떤 내용을 써야하는지 다시 쓰고 고치고를 10번을 반복했다.그러다가 국비 수업 들었던 오빠한테 가서 도움을 요청 했다ㅋㅋㅋ내 자소서를 보더니 처음 썻던거와 비교를 하면서 어떻게 써야하는지 감을 잡은거 같다고 좀만 다듬자고 막 뿌듯해하심....ㅎㅎ  진짜 아무것도 아니라고 생각을 했는데 그동안 내가 무..

[react] todolist 만들기 컴포넌트 나누고, 이벤트 핸들러 주기

큰 컴포넌트와 작은 컴포넌트로 나누기 큰 컴포넌트는 TodoList테두리 부분 - 빨간색 선 작은 컴포넌트는 추가되는 아이템 부분 - 검은색 선 어떤 기능이 있나? 1. input창이 있고, 버튼이 있다. 2. 인풋창에 값을 입력하고 버튼을 클릭하면 아이템이 추가가된다. 3. 아이템 삭제버튼을 누르면 삭제가 가능하다. function App() { const [inputValue,setInputValue] = useState(''); const [todoList,setTodoList] = useState([]); const addItem = () => { console.log("요기", inputValue) // 새로운 인풋벨루 setTodoList([...todoList, inputValue]) // ..

[React] 스터디 1회차 현직 개발자와 함께 공부

프론트앤드를 하고 싶었는데 국비 수업을 들어와서 길을 많이 잃은거 같다. 다시 멘탈을 잡을라고 스터디도 하고 여기저기 뛰어 다니면서 현직개발자 중에 중심을 잡을 수 있는 분을 만났다 ㅠㅠ (갈피를 잃었는데 지쳐있던터라.....그래도 집중하려고 노력했다) 같이 스터디 하면서 궁금한 점이나 타입스크립트 next.js 등등 왜 쓰는지 칠판에 정리해 주면서 설명해줬다. 1. next.js를 왜 쓰는가? - 고객 유입을 위한 SEO 최적의 리액트 프레임워크이기 때문에 고객의 유입이 많아져야 하는 스타트업의 회사가 이 프래임 워크를 많이 사용한다고 한다. 리액트로도 안되는건 아니다 그래서 섞어서 쓰는것. 스타트업일 아닐경우에는 고객을 상대하는게 아니기 떄문이기도하고 기존의 레거시도 유지보수 해야하기 때문에 next..

내가 만든 포트폴리오 웹사이트의 성능테스트 해보기

개발자 도구를 누르고 기록 버튼을 누르자~버튼, 메뉴, 하나 하나 다 눌러보고 페이지 잘 넘어가는지 확인하고 기록 중지 누르고 기다리면 아래와 같은 화면이 뜬다. 여기까지 만들어본 내 웹사이트의 성능이 어떤지 이것저것 눌러보고 이동도 해본 결과 다행히 빨간색은 안 뜬다!!!성능이 안 좋으면 빨간색이 막 뜬다고 나왔는데 내꺼는 다행히 안 뜬다.

[JS] Intersection Observer API의 사용법과 활용방법(코드 있음)

바닐라 자바스크립트로 좌표값을 찍어서 효과를 주려고 할 때마다 효과를 주려는 높이를 콘솔로 찍어서 높이를 재는게 너무 불편해서 Intersection Observer API를 활용하여 편하게 구현하였다. 아래 코드를 보면 효과를 주고싶은 높이와 윈도우의 자표를 찍어 번거롭게 구현을 하였는데 Intersection Observer API를 쓰면 더 쉽게 효과를 줄 수 있다. const header = document.querySelector('.header'); const headerHeight = header.getBoundingClientRect().height;// getBoundingClientRect 높이를 반환해주는 함수임 document.addEventListener('scroll', () =..

unsplash API를 활용해서 이미지 검색 어플리케이션 만들기

국비 프론트 수업 중 API를 불러와서 웹사이트를 만드는 과제를 주셨는데 한번도 해본 적이 없어서 많이 어려웠다. 이 이미지 API의 장점은 url을 불러오지 않아도 검색만으로 불러올 수 있고 용량을 확 줄일 수 있다는 장점이다. $(document).ready(() => { $("#search-form").submit((e) => { const perPage =20; // 예: 20개의 항목을 가져옴 let searchText = $("#photo").val(); let responseContainer = $("#img-thumbnail");// 결과창을 저장하기 위한 컨테이너 let userApi = `Ypo4TFbTd4iHDksg9sNx7CyyPNF7f4fly2xQ_orZb7o` let url = ..