728x90

프론트엔드 9

리액트 공부 이렇게 하세요! - best github react

일반 과목들을 공부할 때, 개념서를 먼저 훑는 편이다. 한 번 훑는 것에 그치지 않고 몇 회독씩 반복하며 공부하는 타입이라 대학 다니면서 전공과목 시험공부도 실습보다는 전공서적을 몇 번씩 읽으며 준비하곤 하였다. 그런 방법으로 꽤 좋은 성적을 받으며 다녔다. 막상 사회에 나와보니 무조건 개념서 회독이 답이 아님을 하루하루 느낀다. 개념이 중요하지 않다는 말은 절대 아니고, 개념만 이해했을 때 분명 한계가 있다는 뜻인데, 이게 개발에서는 더욱 많이 적용되는 것 같다. 기능의 비즈니스 로직을 구현하는 알고리즘에는 단순 개념의 100 회독보다는 10번의 노하우가 더 유용할 때가 많기 때문이다. 그런 면에서 '백문이 불여일견'이라는 말을 공부법에 적용시키는게 좋다고 생각했는데, 직접 부딪히며 코딩해보는 방법이다..

프론트엔드 네이버 api 연결하기 - 예시 검색 api (쇼핑,영화)

개발을 하다 보면 잘 나가다가 어느 순간 막힐 때가 있다. 갑자기. 지난 토요일의 나는 토이 프로젝트를 진행하며, 네이버 api 중 영화 검색 api를 연결하려고 시도했다. 이제 와서 왜였을까? 라고 생각하지만 그 당시에 갑자기 api를 연결해야 하니까 express를 설치하자!라는 생각이 들었다. 개발을 잘하시는 분들은 그게 왜?라고 생각하실 수도 있지만 나는 node.js를 통하여 백엔드를 구현해 본 적도 없을뿐더러 이미 다른 곳에서 제공하는 api들은 axios를 통해서 데이터를 잘 불러오고 있었기 때문이다. https://yuniel.tistory.com/60 axios를 통한 오픈 API 연결하기 나이가 연차가 몇 년인데, 아직도 api 연결할 때 세팅을 까먹어서 url이 문구로 그냥 나오면 당..

react creat-react-app 설치, eslintrc.js 통해 eslint 설정하기

react CRA는... 정말 모든 게 다 있다. 코딩을 하던 중 eslint 규칙을 한 곳에서 설정해야겠다.라고 생각이 들어 package.json을 찾아보니, 웬걸. react CRA는 eslint까지 설정하고 있었다. 덕분에 손 안 대고 코 풀 정도로 쉬운 설정이 가능하였다. 보통은 명령어를 통하여 많이 설치하곤 한다. npm i eslint https://www.npmjs.com/package/eslint eslint An AST-based pattern checker for JavaScript. www.npmjs.com 나는 먼저 최상단 root에 eslint를 설정할 수 있는 eslintrc.js 파일을 생성하였다. 그리고 내부에는 package.json에 기본적으로 설정되어 있던 코드와 내가..

환경변수를 설정하여 api key 숨기기.

https://yuniel.tistory.com/60 axios를 통한 오픈 API 연결하기 나이가 연차가 몇 년인데, 아직도 api 연결할 때 세팅을 까먹어서 url이 문구로 그냥 나오면 당황해버린다... 허허... 실무에만 신경쓰고 개인 포트폴리오를 잘 안 하다보니 할 때마다 매 번 새롭다 yuniel.tistory.com 상단 포스팅에서 axios를 연결하며, api key는 개인 발급을 받는 것이니 환경 변수를 통하여 관리하라고 언급했었다. 그러면서 관련 포스팅을 연결했는데, 해당 포스팅은 웹팩으로 설치한 경우라서 해당이 안 되시는 분들에게는 매우 불친절한 설명이라고 생각이 들었다. https://yuniel.tistory.com/34

axios를 통한 오픈 API 연결하기

나이가 연차가 몇 년인데, 아직도 api 연결할 때 세팅을 까먹어서 url이 문구로 그냥 나오면 당황해버린다... 허허... 실무에만 신경쓰고 개인 포트폴리오를 잘 안 하다보니 할 때마다 매 번 새롭다. 짜릿해. 나를 반성하는 마음으로 또 나와같이 할 때마다 검색을 해보시는 분들을 위하여 정리해보도록 한다. 심지어 이 글은 내가 예전에 만들었던 코드들을 기반으로 작성한다. 과거의 나는 오늘의 내가 다시 헤맬줄은 몰랐겠찌 ㅎ.ㅎ... (사실 진짜 별거 없어서 쓰기 부끄럽..) * 오픈 api를 사용하려면 회원가입을 통하여 각자에게 맞는 발급키를 받아야 한다. 해당 포스팅은 키를 발급받았다는 가정하에 진행한다. * 보통 발급 key값은 필수일테고, 이외의 것은 사용하고자 하는 api의 필수값에 따라 다르다...

프론트엔드 개발자 면접 후기 1탄 [ N사, Y사, Y사, N사 ]

2021년 여름 두 번째 이직 준비 (세 번째 회사 구하기)를 시작했다. 사회 초년생일 때 보다 커리어가 더 단단해졌고, 더 단단한 커리어를 쌓기 위한 회사를 가고 싶었다. 개발자는 코딩 테스트가 필수인 데다가 나는 면접도 너무너무 자신이 없었기 때문에 해당 회사의 후기를 몇 번씩이나 읽어보고 갔다. 사실 그럼에도 불구하고, 지원 팀과 시기 등의 변수가 너무 많아 크게 도움이 되지는 않았지만 정말 많은 위안이 되었다. 나도 많은 분들에게 조금이나마 도움이 되고 또 위안이 되기 위하여 늦기 전에 포스팅을 하려고 한다. 다만, 이미 어느정도 시간이 흐른 후라 처음 다짐했던 것만큼 기억이 다 나질 않아 안타까울 뿐이다. 나는 총 중복 포함하여 17개의 회사(팀이 달랐음)에 지원하였고, 그 중 7곳의 서류 탈락..

프론트엔드에서 에러 처리하기 - 기본문법

지난번 프론트에서 에러를 로깅하는 방법 중 하나인 sentry 관련 포스팅을 진행하며, 프론트엔드에서 에러 처리하는 방법에 대하여 정리해 봐야겠다는 생각이 들었다. 막상 정리하고 보니 너무나 기본 문법들이었는데, 안일한 마음에 나도 많이 놓치고 있었던 부분들이었다. 다만, 프론트엔드 내부에서의 일시적인 에러 처리이며, 에러 관련 데이터 수집 등에는 다소 비효율적이라는 한계가 있다. https://yuniel.tistory.com/39 프론트엔드에서 에러 처리하기 - SENTRY 이직 면접에서 나 스스로가 만족하지 못 한 대답을 하여 아직까지 기억하고 있는 질문이 있다. 고객의 에러를 어떻게 수집하는가. 당시 소속되어있던 회사는 고객의 소리를 듣지도 못 할 정도로 yuniel.tistory.com Type..

프론트엔드에서 에러 처리하기 - SENTRY

* 많은 분들이 sentry로 인입되어 남깁니다. 센트리의 더 많은 이야기는 기술전용 블로그의 센트리 카테고리에 업데이트 하고 있으니 참고해주세요! (클릭 시, 해당 블로그로 이동합니다) 이직 면접에서 나 스스로가 만족하지 못 한 대답을 하여 아직까지 기억하고 있는 질문이 있다. 고객의 에러를 어떻게 수집하는가. 당시 소속되어있던 회사는 고객의 소리를 듣지도 못 할 정도로 빡빡하고 빠른 기능의 스케줄을 가지고 있었고, 대다수의 사용자가 내부 직원들이었던 관계로 고객의 소리를 놓치고 있었다. 하여 내가 대답에서 할 수 있었던 말은 ‘‘사용자가 직접 문의를 넣어줍니다.’’ 정도였고, 사용자가 문의를 안 하면 어떻게 처리하는가에 대한 재 질문이 들어왔을 때, ‘‘문의사항이 들어오지 않았으며, QA와 개발자 테..

[뷰쟁이의 리액트 시작하기] 리액트를 알아보자.

글을 시작하며.. (첫 시작을 알리는 벅찬 잡담이 시작됩니다... 지루하신 분은 스크롤을 시원하게 한 번 내려주시길..!) 인생을 흘러 흘러 살아오다가 문득 눈을 떠서 바라본 지금의 나는 VUE를 사용하는 프론트엔드 개발자가 되었다. 세상에 여러 직업이 많고, 하고 싶은 것도 참 많은 나였지만 그 중에 프론트엔드 개발자는 없었고, 생각도 해 본 적이 없었다... 아무튼 프론트엔드의 세계에 발을 들이게 되었는데, 기왕 할거면 전문가가 되어야 하지 않겠는가..! VUE에만 국한 될 수 없어 React를 하자고 마음먹은지 엄~청 오랜 시간이 지났지만 도무지 하지 않는 나를 채찍질 하기 위해 또 그간 많은 블로그들의 도움을 받았기에 이제는 나도 도움을 주고자 오늘부터 리액트를 포스팅하기로 했다- 작심삼일이 되지..

728x90