Tech is created to fix problem

1. 응시회차 / 시험결과2024년도 제일 마지막 회차인 55회 SQLD 자격증에 합격했다!어제 12/6일자로 사전점수 발표를 했다. 72점! 1과목 문제에서 답을 수정한 게 2개 있었는데다 틀려서 여기서 1-2개만 더 틀려도 60%가 안 넘기 때문에1과목 과락으로 떨어질 수도 있을거라 조마조마했었다. 그렇지만 딱 그 2개 틀리고 나머지는 맞았다!! 그래서 합격~            2. 응시배경 / 취득목적프론트 개발자로 취업한 지 9개월이 다 되어간다.투입된 프로젝트 특성상 공장 시스템을 개발하기 때문에데이터 양이 무지하게 많고 각 데이터가 가진 속성이 무려 기본 20-30개가 넘는다.개발하다 보면 테스트를 많이 해봐야 하는데꼬인 데이터나 쓰레기 데이터가 많아서 테스트하기가 어지간히 어려웠다. 값을 ..

나는 워드프레스로 운영 중인 사이트가 몇 개 있다.크롬에서는 모든 사이트마다 보안인증서 SSL 설치를 권장하기 때문에혹시 설치하지 않았다면 url 상단에 되게 보기 싫은 권장 문구가 뜬다. 그래서 워드프레스 사이트에 ssl 인증서를 3개월 전에 WP Encryption이라는 플러그인으로 설치했었다.https://www.youtube.com/watch?v=BmWSg6HBWNc(은근 많이 보게 되는 WordPress tutorial님,,,,) 그러고 분명 달력에 만료일을 적어두었건만ㅜ 깜빡하고 인증서 만료가 되었다.그래서 사이트에는 아래와 같이 경고가 떴고 (안전하지 않음) 을 눌러야지만 http라도 사이트 접속이 된다. 기존에는 WP Encryption 플러그인으로 ssl 발급을 진행했는데어느새 이 플러그..

7개월 간의  패스트캠퍼스 X 야놀자 FE 1기 수료 그 이후,,, 23.07 ~ 24.01 약 7개월 간의 부트캠프가 끝나고 취직한 지 딱 2개월이 되었다. 한참 부캠에 참여하는 기간에는 프로젝트에 집중하느라 정신이 없었고,수료일이 다가올수록 이제는 취업전선에 뛰어들어야 하기 때문에수료가 홀가분하면서도 취직에 대한 고민, 걱정이 시간이 갈수록 많아졌다.  그렇지만 무엇부터 해야 할지 막막하지는 않았다.왜냐하면 수료하기 몇 달 전부터 포트폴리오/이력서 제출 미션이 있었고, 커리어 멘토링을 3회 진행을 했었기 때문이다. 커리어 멘토링 때, - 포트폴리오 불필요한 내용 삭제하고, 강조할 점 찾아서 전반적인 가독성 높이기- 면접관의 입장에서 궁금해 할 포인트 찾기등등 면접관 입장에서의 조언을 많이 들을 수 있..

문제상황)배열을 map으로 돌리면서, 각 배열의 값에 itemnum이라는 특정 속성 값을 넣어주어야 했다.그리고 그 값은 api 호출을 통해 가져와야 하는 값이다.그래서 우선 getValue라는 api를 호출하는 함수를 작성해 주었고그 함수를 bin 속성의 값에 실행시켜 주었다.Array.map((item) => { const getValue = async () => { const num = await 비동기함수(); return num; } const result = { ...item, itemnum: getValue() }; return result;}); 그랬더니 binValue의 리턴값은 아래와 같이 Promise 객체가 반환되었다. 문제원인 1) binValue 함..

- 목록 더보기 동작, 화면 작아졌을때 고려 - 코드리뷰도 어필할 부분이구나 - 지라와같은 칸반보드, 그리고 디스커션 등록 괜찮다 - 뒤로가기 앞으로가기 상관없이 주소가 바뀐다면 주소를 기준으로 리렌더링 하도록 (SPA 는 한번 불러와서 진행) - ux도 관심가져야할것 blocking이 너무 많다 - 사소한 부분에 집착하는 경향 - 코드리뷰는 question이 뜨면 무조건 물어봐야함, 6:4는 많고 7:3은 적은느낌 —> 생각지 못한 고려사항이 많았다 전역상태 새로고침시 날아가는 현상 Refetch 및 리렌더딩 - 스켈레톤 적용해볼것 - Stateless 쿼리 파라미터 url 로 보내는,,것 좋음 - wbs , swagger 진짜 필요한거같음 - 유효성검사 프엔에서는 사용자를 도와주는 개념 - 대부분 백..

폰트 설정을 위한 scss 문법을 작성하고 있었는데 @function rem($val, $std: 16) { @return ($val/$std) * 1rem; } 경고문구가 떴다. Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0. Recommendation: math.div($val, $std) or calc($val / $std) More info and automated migrator: https://sass-lang.com/d/slash-div 나눗셈 방식이 곧 폐기 예정임을 알려주는 경고 메시지이다. 특히 calc() 함수 외부에서 나눗셈 연산..

처음 알게 된 사실,, 스크린 리더기가 각 사이트에서 Cmd + Fn5 단축키를 누르면 태그들을 소리로 읽어준다 스크린 리더기는 어떻게 작동하는지 궁금했는데 이렇게 간단했구나ㅎㅎ img태그에 alt태그를 사용하는 이유에 대해서는 알고 있었다. 그러나 스크린 리더기를 사용해본 후 알게 된 안 좋은 케이스 두 가지를 적어보았다. Bad case1) alt="~~~ 이미지" -> 스크린 리더기에서 기본적으로 이미지 태그는 무엇무엇 이미지 라고 말이 끝난다. 그래서 alt 태그 마지막 단어로 이미지를 한 번 적어주면 "이미지" 라는 음성이 2번 중복되어 들려서 직접 써주는 이미지라는 단어가 불필요하게 된다. Bad case2) alt="정보력이 없는 이미지마다 다 써주는것" or 빈란으로 둔다고 alt 속성 자..

- 역할을 나눠서 작업할 때 프엔 백엔 나누지 말고 컴포넌트별로 나눠서 맡아라 - 하나 끝나면 하나 시작하고 기다리는 식 말고 병렬적으로 동시 작업을 해라 - 에러핸들링? 크게 두 부류. 복구 가능하냐 안하냐 -> 복구 가능 : 로그인을 안해서 생긴 오류? 해결하면 됨 -> 복구할 수 없는 에러 : 네트워크가 끊겨서 갈 수 없는 상황 (두 머신간의 통신 에러) - 로직을 얼마나 잘 나누느냐 - 컴포넌트 별로 어떻게 구현할 줄 아느냐 - 마진 패딩 구분하면서 쓸 줄 아느냐 - 로직도 functional 하게 구현하는 부분 - Unit test도 하려면 최대한 렌더링 하는 부분이랑 비즈니스쪽이랑 구분할 줄 알아야 함 - If switch for 분기하는 것들 이런것들을 최소한으로 하고 비즈니스 로직이 있는 ..

리액트를 사용하다보면 map 함수를 정말 많이 사용한다. 객체.map() map을 돌려서 각 객체수 만큼 요소들을 렌더링할 때 각 요소들에 고유한 key값을 주지 않으면 경고가 뜬다. 그런데 코드 리뷰를 받은 것 중에 key 값을 흔히 index로 많이 넣고는 하는데 ${item}-{index} 등 말그대로 고유한 키값을 줄 것을 권장해주셔서 그 이유에 대해 궁금해졌다. 일단 key 자체는 왜 필요할까? key는 react가 어떤 항목을 변경, 추가, 삭제할 지 식별하는 것을 도와준다. react는 업데이트 요소들을 기존의 요소들과 비교 후 변경하는데 이때 key로 식별을 하기 때문에 해당 엘리먼트에 고유성을 부여해 그 고유성을 비교해서 렌더링을 효과적으로 수행할 수 있다. 그럼 key에 index를 넣..

* 프로젝트명 : FastCatch (빨리잡아!) * 주제 : 숙박 예약 API 서비스 * 개발기간 : 11/20(월) ~ 12/01(금) * 깃헙주소 : https://github.com/FC-FastCatch/FastCatch-FrontEnd * 배포사이트 : https://www.fastcatchapp.com/ 이번 미니 프로젝트를 진행하면서 배운 점 그리고 아쉬운 점 맡은 기능 중 보완한 부분에 대해 작성하려고 한다. 1. 배운 점 프로젝트란 팀의 결과물이기 때문에 컨벤션이 아주 중요하다 이전 회사에서 했던 일이나 이전 프로젝트를 진행하면서 팀의 컨벤션에 대해 신경을 많이 쓰지 못했었다. 일하면서는 대부분 혼자 역할을 처음부터 끝까지 맡았기 때문에 컨벤션이 네이밍정도였고 그 나머지의 코드들은 내가..

코드 리팩토링을 하면서 어떻게 하면 더 가독성이 있고 다른 사람이 봐도 수정이 쉬운 코드를 짤 수 있을까? 라는 고민을 하게 되었다. 그러던 중 '함수와 부수효과' 라는 주제의 강의를 듣게 되었고 들으면서 함수를 작성할 때 무엇을 중점으로 생각해야 하는지 조금은 알게되었다. '순수 함수인가?' = '의존성이 많지는 않은가?' = '외부의 값을 바꾸는가?' 순수 함수란 매개변수(입력)를 받으면 항상 같은 값을 반환하는 함수이다 이러한 특성 때문에 순수 함수는 사이드 이펙트를 발생시키지 않는다. 그래서 예측이 가능하고 테스트하기 쉬우며 가독성이 높다는 장점을 가지고 있다. 1. 함수의 내용은 어떻게 가 아닌 무엇을 이 되어야 한다. 예를 들어 전역변수 totalPrice를 선언 후, 각 함수에서 totalP..

보호되어 있는 글입니다.

이번 과제는 "채팅기능을 사용한 서비스"를 만드는 것이었다. 채팅은 실시간으로 데이터를 업데이트 해주어야 한다. 그 실시간 통신을 가능하게 해주는 것은 프로토콜의 한 종류인 WebSocket 이다. 채팅, 알림기능 등등 WebSocket 이 자주 사용된다고 한다. 기본적으로 접했던 HTTP 방식은 클라이언트가 request 를 하면 response 해주는 것인데 HTTP 와 WebSocket 를 비교했을 때 무엇이 다를까? HTTP의 특징 Stateless Stateless = 상태를 저장하지 않는 것 즉 유저를 기억하지 못한다는 것이다. 유저를 기억하지 못하면 데이터 주고받고 한 번 하면 유저를 잊어버리게 된다. 통신 후에 그 다음 request 를 기다릴 뿐이다. 그래서 로그인한 서비스의 경우 req..

미니 프로젝트인 포토프로젝트를 진행하면서 겪었던 2가지 이슈에 대해 적고자 한다. 1. Kakao map index.html head 에 카카오맵 스크립트를 삽입하고 컴포넌트에 옵션들과 함께 #map 에 지도와 마커를 생성해주었다. 오류 1) 그런데 kakao 와 kakao.map 객체를 찾지 못하는 오류가 발생했다. index.html 의 스크립트를 로드하지 못하는 상황 주로 스크립트를 불러오는 상황에서 비동기적으로 처리할 때 이슈가 발생하는 것 같다. 스크립트가 완전히 로드되기 전에 코드가 실행되어서 오류가 나는 것이다. 해결책 1) useEffect 를 사용해서 스크립트 로딩을 시키고 로딩 후에 지도 생성하는 함수 실행 (순서가 보장되게끔) useEffect(() => { const script =..

이번 프로젝트 초기세팅 중 시행착오를 겪었던 몇 가지에 대해 적어보고자 한다. 1. public 폴더 정말 초보적인 내용인데,, 로고 이미지를 Public에 넣어주었다. 그런데 왜 꼭 Public 이어야 하지? Public 은 컴파일이 되지 않는 폴더이고 Src는 컴파일이 되는 폴더이다. 그래서 컴파일이 필요없는 기본적인 이미지 같은 경우는 public 에 넣어주고 경로는 항상 절대경로로 사용한다. 2. css 아키텍처 팔레트를 어떻게 만들까 하다가 styled-component 와 scss 두 개를 사용했다. 이유는 페이지별로 스타일을 잡고 싶은 마음에 scss를 사용하고 싶었고 그 안에 상세한 컴포넌트들은 styled-component 를 사용해 목적성에 다르게 스타일 라이브러리를 사용하고 싶었다. ..

Wiki 프로젝트가 끝나고 파이어베이스 용량 초과, 한 컴포넌트에 200~300줄 가까이 되는 코드량, 더딘 로딩 속도 등등... 리팩토링의 필요성을 느꼈고 팀원들과 개선점을 논의하고 코드 수정을 진행했다. 먼저, 성능최적화할 때 고려해야 할 사항들을 팀장님이 정리해왔고 아래 항목들에서 각자 선택해서 리팩토링을 진행했다. 1. 로딩성능 1) 이미지 최적화 - 이미지 확장자 : png => webp 파일로 변환 🏁 - 이미지 자체 크기 조절 - 용량 압축 - 디바이스 크기에 대응하는 이미지 사이즈 srcset - 파이어베이스 이미지 업로드 전 최적화 - image 프록시 - Lazy / Pre Loading 적용하기 2) 번들 사이즈 최적화 - cra-bundle-analyzer 전체 : 6.51MB sr..

🗼리팩토링 리뷰1 "index.html 정보를 관리하자" index.html You need to enable JavaScript to run this app. 이 태그의 의미는 자바스크립트를 활성화하지 않아서 활성화하라고 안내하는 태그이다. React에서도 index.html에서 해야할 일들이 있기 때문에 활성화를 해주어야 하며 보통 해야할 일들은 google analytics 와 같이 분석할 때도 index.html 에 코드를 넣어준다. 혹은 특정 페이지나 컴포넌트에서만 불러와야 할 스크립트가 있다면? React Helmet을 사용하면 된다. React Helmet은 정보를 동적으로 변경할 수 있게 해주는 라이브러리이다. 이 라이브러리를 사용하면 다른 컴포넌트에서 정보를 변경할 수 있다. 🗼리팩토링 ..

Q. API가 뭔데? Application Programming Interface Interface? 한 겹 쌓아놓는 것 (벽 뒤에 무슨 일이 있는지 모름 "나한테 말해") : 요청하면 뒤에서 무슨 일이 일어나는지 모르겠지만 작업해서 전달해줌 ex) 지하철 어플 요청 -> 인터페이스(API) -> 서울교통공사의 정보들 (도착정보, 막차, 첫차, 인구밀도 등등) "정보들 알고 싶어? 나한테 얘기해" Q. http는 뭔데? 인터넷 : 네트워크(모든 기기를 연결해주는) 웹 : 연결망에서 파놓은 방, 가상의 공간 for 정보 공유 클라이언트 -> url 화면 (FE) -> url -> 로직 (BE) 인터넷은 광활한 네트워크인데 다 길이 같다면 얼마나 헷갈릴까,, 인터넷 연결망에 도로 중 하나가 http이다. h..