본문 바로가기

전체 글49

PES 프로젝트 회고 (2023-07-17 ~ 2024-05-31) 회사에 입사하고 나서 1년 가까운 기간동안 프로젝트 시작부터 끝까지 온전히 참여한 첫 프로젝트가 끝났다.이 프로젝트에서 내가 맡았던 직무는 프론트엔드였고 했던 일은Nexacro로 만들어져 있는 기존 페이지의 소스를 분석해서 Vue3로 마이그레이션 하는 것 + 추가 기능 개발 이었다.대외비 때문에 어떤 프로젝트였는지는 안 적는게 좋을 것 같아서 그냥 Realgrid를 사용해 Cell, Row끼리 계산하는 로직을 많이 개발했었다 정도로 적어두고 기억하고자 한다.  일단 프로젝트를 진행하면서 고생을 참 많이 했었던 것 같다..특히 올해 봄은 파견지에서 매일 밤늦게 퇴근하고 새벽에 퇴근하기도 하고 주말에도 출근하고 하는 삶을 보내서 그 시간이 어떻게 지나갔는지, 뭘 하면서 보냈는지에 대한 기억이 아예 없다.회사.. 2024. 6. 4.
[세미나] 위시켓+요즘IT : SI 초보자를 위한 Q&A 세션 후기 SI 초보자를 위한 Q&A 세션 참석 후기 트위터에서 SI 초보자를 위한 Q&A 세션을 열어 선착순으로 참석자를 받는다는 글을 봐서 얼른 신청하여 다녀왔다. (근데 선착순이 아니었던것 같기도 하고..?) 후기를 다소 늦게 작성하는 감이 있지만 기록을 해둬야 나중에 보면서 다시 회고를 할 수 있으니 또 열심히 적어본다 😂 세션은 타이틀에 맞게 Q&A 형식으로 구성이 되어 있었고, 역삼역 근방의 위시켓에서 진행이 되었다.구글 폼에서 미리 받은 질문에 대해 모임 리더이신 김수보 연사님, 안영회 연사님께서 번갈아 가며 정성스레 답변을 해주셨다. 김수보 연사님 블로그 https://subokim.wordpress.com/ IT의 중심에서 28년째 쓰고 있는 프로젝트 회고록 subokim.wordpress.com .. 2024. 4. 4.
[Node.js로 봇 만들기] - twilio 봇 'twilio.RestClient is not a function' 에러 해결 에두아르도 프레이타스, 마단 빈타드 - Node.js로 봇 만들기 를 읽으며 이 책... 집 앞 도서관 구경을 하다가 Node.js로 봇을 만들 수 있다는 제목에 혹해서 골라와 무작정 집에서 따라 만들어 보았다.. 그런데 생각보다 옛날에 출판된 책이라 (2018년..) 따라하면서 예상 외의 오류를 마주하게 된 것 같아 그 해결법을 남긴다.. 😅 아직 흥미가 식지는 않아서 일단 계속 읽어보며 따라해볼 것 같긴 한데 이런 오류가 계속 되면 포기할지도? 일단 나는 책의 코드를 똑같이 따라 쳤는데 node 실행할 때 자꾸 에러가 발생해서 화가 났다.. 😫 책의 코드 // 책의 코드 let twilio = require("twilio"); const accountSid = "내 twilio 계정 sid"; con.. 2024. 3. 24.
[Git] node_modules 잘못 올렸을 때!! Git 특정 커밋 history 기록 삭제 하기 Github에 실수로 node_modules를 올렸을 때 대처법 Introduction 개인 프로젝트를 하는데 초기 세팅중에 실수로 github에 node_modules를 통째로 올려버리고 말았다 😫 구글링을 해보니 내가 commit - push해 이미 repository에 올라간 파일도 지울 수 있다고 한다. 그리고 파일을 지우고 나서 git에 남아있는 기록들 (내가 파일을 올렸었다는 기록, 커밋 기록)도 지워서 파일 history 까지 열람할 수 없게 하는 것도 가능했다. 이번 경험으로 중요한 파일(가령 env 파일)을 실수로 git에 push 했을 때 이렇게 수습하는구나 하고 알게 되기도 했다.. 😅 그래도 애초에 이런 실수를 하지 않도록 .gitignore 설정을 잘 하도록 하자 😂 나처럼 대충 .. 2024. 3. 12.
NEXTSTEP React Study : Week 2 - PR approve 전 확인, 코드 리뷰 팁 코드리뷰 나보다 잘 하는 사람의 코드는 어떻게 리뷰해야 할까? 어떻게 코멘트를 남겨야 도움을 드릴 수 있을까? 스터디를 하면서 실력이 뛰어난 분의 코드를 보고 도움이 될 리뷰를 남기고 싶었는데 어떻게 남겨야 할 지 막막했다. 그분의 코드를 보고 내 코드를 보니 너무 부끄러웠는데.. 핳하 😂 그래서 코드 리뷰와 관련한 다른 분들의 의견을 찾아서 읽어보고, 일단은 코드를 작성하신 분께서 사용하신 스택을 따로 검색하며 공부해 보았다. 실력자분들의 코드를 보면 감탄과 반성만 나오는데 그런 것만 리뷰에 구구절절 적고싶지는 않았기에! 파팅 😭 그 중 남겨서 두고두고 읽고 싶은 글들은 여기다 박제... 구글링하다가 찾아서 정독한 좋은 글 https://hyeon9mak.github.io/code-review-know.. 2023. 4. 18.
네이버 컨퍼런스 2023 DEVIEW(DAY 1) 굿즈, 후기(웹 프론트세션 위주) 네이버 컨퍼런스 DEVIEW DAY 1 후기 🥰 DEVIEW : https://deview.kr/2023 2/27일(DAY 1)에 네이버 컨퍼런스를 다녀왔습니다 저는 웹 프론트엔드 개발자라서 주로 웹 세션에 관심이 있었구 대기업에서 하는 컨퍼런스는 처음 가봐서 기대가 많이 되었었습니다 😎🤗 흐흐 입장 시간 관련 및 세션 시작 전 도움 될 팁들 컨퍼런스는 코엑스의 그랜드블룸 홀에서 진행이 되었습니다! 저는 아침 8시 45분에 삼성역 6번 출구에 도착해서 코엑스 맥날에서 맥모닝 하나 먹구... 함께 출발 할 동료분 기다렸다가 9시 30분쯤 출발해서 9시 45분에 도착했어요😁 DDC 컨퍼런스를 가보고 컨퍼런스날 아침 식사의 중요성을 크게 느꼈습니다.. 아침을 꼭 먹고가야 체력 소모가 덜해요😅 당 엄청 떨어져요.. 2023. 2. 28.
20221013 본 프로젝트에 투입되고, 3개의 project 파일을 오가면서 구조를 살피기로 했다. 코드를 읽으면서 모르는 개념이 나오면 이곳에 정리해 둘 예정. 편의상 파일명을 줄여서 호칭하겠다. ModelEquipmentContainer.tsx => MEC ModelEquipmentModule.ts => MEM ModelEquipmentApi.ts => MEA MEC => MEM => MEA? 의 흐름이라고 들었던 것 같긴 한데 아직 잘 모르겠다 JSX.Element(MEC.76) 값-기반 요소 (value-based elements) 사용자가 만든 사용자 정의 컴포넌트로 스코프 내의 식별자에 의해 사용됨 타스에서는 함수형 컴포넌트로 표현을 해석을 기본으로 하고, 함수형 컴포넌트가 확인되지 않으면 클래스 컴포넌트로.. 2022. 10. 13.
20221007 열람한 글 https://www.w3schools.com/howto/howto_css_switch.asp How To Create a Toggle Switch W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com http://www.tcpschool.com/html-tags/input 코딩교육 티씨피스쿨 4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이.. 2022. 10. 7.
20220930 사수님 면담 & 코드리뷰 => other1 / other2 에 뭘 넣을지 정했다!! (todolist & 지도 API 구현) mission 1 : todolist = https://sangjuntech.tistory.com/27 / 해당 블로그 참고해서 클론코딩 하며 recoil에 익숙해지되, 난이도를 좀 더 올려서 기능을 추가해보기로 했다 타이머 기능(일정 마감기한 설정) - 하루 24시간 중 마감 시간을 정하고, 시간이 지나서 초기에 설정한 마감 기한을 넘기면, "일정 실패" 로 이동하는 기능 추가 mission 2 : 지도 API 구현 https://brunch.co.kr/@aykim13/46 / 카카오 API 참고 잘 안되면 사수님께 도움...!!! 그래서 오늘 할 일은? 다음주 협업을 대비하여 .. 2022. 9. 30.
20220927~20220929 20220927 매주 코드리뷰 목요일 이번에 목요일까지 구현할 기능 & 리뷰받을 것 [이 중 2개 이상 달성할 것] dog page(페이징 처리 가능하면 ㄱㄱ) cat page Breed나 Categories 불러와서 화면에 띄워보기 cat page 상세 페이지 ✅ modal 창으로 구현할 예정 others1, others2 에 뭐 넣을지 정리(검색..? kakao map api?(https://brunch.co.kr/@aykim13/46)) 따로 공부할 것 TS 기본 문법 youtube 강의 1회독 오늘 참고한 글 CSS relative / absolute 상세, img hover 할 때 img wrap box div를 만들어야 하는 이유 https://moonformeli.tistory.com/10 .. 2022. 9. 29.
20220923 읽고 공부한 것 사수님께서 내주신 과제를 수행하다가 loading 화면도 추가해보고 싶어져서 작업하고 있었음 기왕 하는거 이쁘게 하고싶어서 참고하게 된 스피너 추가하기(사건의 발단) https://anerim.tistory.com/221 [리액트 React] 리액트 로딩화면(스피너) 추가하기 / api 호출 시 로딩화면(스피너) 넣기 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 리액트에서 api 호출했을 때 로딩화면/스피너 넣는 방법에 대해 공유하겠습니다. 어렵지 않으니 차례대로 따라 anerim.tistory.com 글을 읽다가 생각보다 모르는게 많아서 자꾸 다른 개념을 파고 들어가게 됨...... 우선 어제 설명들은 React 라이프 사이클 https://kyun2da.dev/r.. 2022. 9. 23.
20220921 보호되어 있는 글 입니다. 2022. 9. 21.
DOM의 뜻은?! 그리고 Node tree, javascript event는 뭘까? Elice Today's TIL 🎉 메인 키워드 : DOM, Node, Javascript Event !! 배울 내용 확인하기 DOM 객체 지향 모델로써 구조화된 문서를 표현하는 형식으로, 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 하는 인터페이스 이벤트 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 가리키는 말로, 자바스크립트는 이것에 반응하여 특정 동작을 수행할 수 있게 된다. 1. DOM 이란? DOM 이란? 이미지 출처 : elice 코딩 [SW 엔지니어 트랙] 의 학습자료에서 발췌 DOM = 문서 객체 모델(Document Object Model) : 객체 지향 모델로써 구조화된 문서를 표현하는 형식 HTML 문서에 대한 인터페이스 DOM은 XML이나 HTM.. 2022. 7. 18.
리액트(React) Effect Hook 엘리스 코딩 TIL (20220630) "Effect Hook의 사용과 이해" 리액트(React) 엘리스 코딩 daliy TIL 안녕하세요! 오늘은 엘리스 코딩 리액트 2022/06/30에 "Effect hook"의 사용과 이해에 대해 알아보도록 하겠습니다. 우선 effect hook에 대해 살펴본 후 effect hook과 관련한 Clean up과 같은 연관성이 있는 요소들에 대한 내용을 파악해보고 관련 내용을 최종 요약 정리를 해볼 예정입니다. Effect Hook [1] Effect Hook 이해하기 - Effect Hook의 사용 React의 컴포넌트는 다음과 같은 생명주기를 가지는데요! a. Mounting(컴포넌트 생성) b. Updating(컴포넌트 수정) c. Unmounting(컴포넌트 해제) 여기서 Effect Hook을 사.. 2022. 7. 4.
엘리스 코딩 TIL (리액트, 20220624) 03. 유연하게 state 변경하기 Object를 갖는 State를 만들 때 주의사항 // 잘못된 예시 const [user, setUser] = useState({name: "민수", grade:1}) setUser((current) => { current.grade = 2; return current; }) // 좋은 예시 const [user, setUser] = useState({name: "민수", grade:1}) setUser((current) => { const newUser = { ...current } newUser.grade = 2; return newUser }) object 내의 값만 바꾸게 되면 object 그 자체는 바뀌지 않기 때문에 리액트가 알아차리지 못해 컴포넌트가 재 랜.. 2022. 6. 30.

티스토리툴바