엘리스 코딩
[TIL] 엘리스 SW 엔지니어 트랙 Day 047
[TIL] 엘리스 SW 엔지니어 트랙 Day 047
2021.12.28📖 오늘 배운 내용 - 2021.12.28 리액트 수업 시작 create-react-app 📝 리액트 CRA로 시작하기 📕 해당 폴더에 리액트 프로젝트 설치 npx create-react-app . 📕 해당 폴더에 react-app 폴더를 만들어서 리액트 프로젝트 설치 npx create-react-app react-app 📕 리액트 실행 npm run start 📝 create-react-app npm run start src/index.js : 엔트리 파일 public/index.html : html 템플릿 파일 npm run build : 배포 버전 생성 build : 배포 버전의 내용 import ‘filename.css’를 이용해서 css를 사용할 수 있다. 리액트는 하나의 태그가 전체를 감싸야..
[TIL] 엘리스 SW 엔지니어 트랙 Day 046
[TIL] 엘리스 SW 엔지니어 트랙 Day 046
2021.12.27📖 오늘 배운 내용 - 2021.12.25 🎅🏻🎄크리스마스 코딩 🎄🎅🏻 부모 댓글, 대댓글 수정/삭제 기능 구현 💡 오늘 깨달은 것 새로 생긴 요소에 이벤트가 적용 안 되는 것을 발견하였고 이벤트 위임을 통해 문제를 해결했다. 이전에 같은 에러를 경험한 적이 있어서 해결 방법을 바로 알고 금방 해결하였다. 앞으로는 새로운 에러를 만나면 한숨을 쉬기보다는 즐거워해 보자...?! ㅋㅋㅋ const clickCommentToolBox = () => { const commentUl = document.querySelector(".comment__list"); commentUl.addEventListener("click", (e) => { if (e.target.classList.contains("tool__up..
[TIL] 엘리스 SW 엔지니어 트랙 Day 045
[TIL] 엘리스 SW 엔지니어 트랙 Day 045
2021.12.25📖 오늘 배운 내용 - 2021.12.24 대댓글 작성 기능 구현 💡 오늘 깨달은 것 하나의 문제를 해결하면 또 다른 문제가 생기고... 또 해결하면 다른 문제가 보이고 ....ㅋㅋㅋ 이런 문제에 지치지 않는 멘탈을 가져야겠다. 클릭 이벤트를 기준으로 노드를 타고 올라가 요소를 가져오는 과정 길어지다 보니 복잡하다. 중간에 마크업 구조가 변경되면 멘탈이 탈탈탈ㅋㅋㅋ 멘탈 관리, 휴식의 중요함을 느끼는 하루였다.
[TIL] 엘리스 SW 엔지니어 트랙 Day 044
[TIL] 엘리스 SW 엔지니어 트랙 Day 044
2021.12.24📖 오늘 배운 내용 - 2021.12.23 반려 이야기 상세 내용 가져오기(제목, 작성자, 시간, 조회 수, 내용 등) 접근 제한자 기능 구현 📝 자바스크립트 빈 객체 확인 Object.keys(checkLogin).length === 0 📝 html 커스텀 속성 접근하기 답글쓰기 const handleRePostComment = (isNotLogin) => { const reCommentLink = document.querySelectorAll(".comment__link"); if (!isNotLogin) { reCommentLink.forEach((el) => { el.classList.remove("hidden"); el.addEventListener("click", (e) => { e.preve..
[TIL] 엘리스 SW 엔지니어 트랙 Day 043
[TIL] 엘리스 SW 엔지니어 트랙 Day 043
2021.12.23📖 오늘 배운 내용 - 2021.12.22 프론트엔드 오피스아워 반려 이야기 검색 기능 구현, 수정/삭제 버튼 생성 📝 셀렉트 박스 옵션 가져오기 selected.options[selected.selectedIndex].value; 제목 내용 작성자 검색 const selected = document.querySelector(".main__select"); selected.options[selected.selectedIndex].value; console.log(selected.options[selected.selectedIndex].value); 💡 오늘 깨달은 것 게시글/댓글 작성자만 수정 및 삭제 버튼을 보여주는 부분을 어떻게 처리할지 고민하고 있다가 백엔드 분에게 고민사항을 공유했다. 그리고 짧은..
[TIL] 엘리스 SW 엔지니어 트랙 Day 042
[TIL] 엘리스 SW 엔지니어 트랙 Day 042
2021.12.22📖 오늘 배운 내용 - 2021.12.21 상세 페이지 렌더링 방식 변경 백엔드 오피스아워 💡 오늘 깨달은 것 이번 프로젝트를 진행하면서 실천하려고 했던 점 중 하나는 바로 키보드 위에 손을 올리지 않기였다. 코딩 대신 머릿속에 생각을 아이패드로 정리했다. 즉, 나의 생각을 그림과 글로 적어가며 어떻게 구현할 것인지, 순서는 어떻게 할 건지에 대해 시각화하였다. 이러한 작업을 거치면 내가 구현할 기능의 순서가 보이고 잘못 생각했던 점이 드러나고 더 좋은 아이디어가 떠올랐다. 초반에는 작업 속도가 느려 보일 수 있지만 시각화한 것을 바탕으로 코딩을 하니 삽질하는 시간이 줄어들며 생산성을 높일 수 있었다. 폴더 구조를 페이지별로 나누고 재사용할 수 있는 기능들은 하나의 폴더에 넣기로 결정했다. 지난 주말에 ..
[TIL] 엘리스 SW 엔지니어 트랙 Day 041
[TIL] 엘리스 SW 엔지니어 트랙 Day 041
2021.12.21📖 오늘 배운 내용 - 2021.12.18 게시판 상세 페이지 구현 중 백엔드 오피스 아워 💡 오늘 깨달은 것 오늘은 프론트엔드에서 구현해야 할 기능들을 나열하고 유저와의 상호작용이 있는 부분을 우선순위로 정했다. 전체 페이지는 SSR으로 보여주고 일부 페이지만 세부 내용을 동적으로 구현하기로 결정했다. 여기서 자바스크립트를 어떻게 동작시킬지에 대해서 고민했다. 각 페이지에서 해당되는 스크립트 파일만 링크 걸어서 동작시킬 것인지 아니면 router.js라는 파일을 모든 페이지에 태그 해주고 location.pathname으로 페이지를 구분해서 해당 스크립트를 동작시킬 것인지를 고민했다. 이러한 고민사항을 오피스 아워 때 질문했다. 코치님이 항상 말씀하시는 부분 중 하나가 오버 엔지니어링은 좋지 않다. 현..
[TIL] 엘리스 SW 엔지니어 트랙 Day 040
[TIL] 엘리스 SW 엔지니어 트랙 Day 040
2021.12.18📖 오늘 배운 내용 - 2021.12.17 로그인 페이지 마크업 게시글 상세 페이지 구현 프론트엔드 오피스아워 💡 오늘 깨달은 것 프론트엔드와 백엔드의 의사소통이 부족했었다. 초반에 기술 스택과 구현 방식 등을 명확하게 하고 가야 했는데 미숙했다. 수업 때 pug를 사용하는 SSR 방식으로 학습했었다. 그래서 누군가는 SSR 방식을, 누군가는 CSR 방식을 생각하다 보니 협업 과정에서 미스 커뮤니케이션이 발생했다. A라는 기능을 프론트엔드 측에서 처리하는 거로 생각했는데, 백엔드에서 ejs 내에서 처리를 하거나 등의 의사소통 문제가 발생했다. 이러한 상황을 겪으면서 나의 문제점을 발견하였다. 서로 생각하는 점이 다를 수 있으며 내가 말하는 말이 무조건적으로 옳지는 않다. 하지만 내 생각의 밑받침이 되는 ..
[TIL] 엘리스 SW 엔지니어 트랙 Day 039
[TIL] 엘리스 SW 엔지니어 트랙 Day 039
2021.12.17📖 오늘 배운 내용 - 2021.12.16 백엔드 오피스아워 화면 설계 마크업 📝 프론트엔드 기획 회의를 진행했고 화면 설계 작업을 다시 했다. [반려 이야기] 게시판의 상세 페이지 마크업 완료 📝 백엔드 오피스아워 미래에 서비스 규모가 커지는 것을 생각해서 유연하고 확장성 있게 설계하는 것이 좋지만 때로는 애플리케이션이 작은데 너무 오버 스펙이라면 오히려 독이 될 수 있다. 자신의 상황을 잘 판단해서 결정을 내려야 된다고 코치님이 조언해 주셨다. 💡 오늘 깨달은 것 핵심 기능과 부가기능을 나누는 연습이 더 필요하다고 생각된다. 기획과 마크업을 하다 보면 기존 서비스에서 사용했던 기능을 추가하고 싶지만 다시 생각해 보면 CRUD의 핵심이 아니고 부가기능이었다. 프로젝트의 핵심 기능을 구현한 뒤 하나씩 살..
[TIL] 엘리스 SW 엔지니어 트랙 Day 038
[TIL] 엘리스 SW 엔지니어 트랙 Day 038
2021.12.16📖 오늘 배운 내용 - 2021.12.15 프로젝트 기획 회의 프론트엔드 오피스아워 📝 프로젝트 기획 회의 반려동물 커뮤니티 기획에 맞춰 header, footer 등 홈페이지 골격 잡고 마크업 진행 대표 색상 지정 CSS BEM 방식 도입 📝 프론트엔드 오피스아워 프로젝트에 대한 조언 특색 있는 자랑 게시판에 초점 맞추기 💡 오늘 깨달은 것 오늘은 어제 기획에 맞춰서 기본 골격을 잡고 기초적인 마크업을 진행했다. CSS 프레임워크는 사용하지 않고 BEM 방법론을 도입하기로 했다. 누구나 클래스명만 봐도 어떠한 역할을 하는지 파악하며 유지 보수를 높이기 위함이다. 오피스아워 때 코치님의 조언을 듣고 전반적인 기획을 변경하기로 했다. 기존 반려동물이라는 주제에서 유기 동물이라는 주제로 세분화하여 커뮤니티를..
[TIL] 엘리스 SW 엔지니어 트랙 Day 037
[TIL] 엘리스 SW 엔지니어 트랙 Day 037
2021.12.15📖 오늘 배운 내용 - 2021.12.14 애자일 방법론 gitlab 사용 방법 팀 프로젝트 아이디어 회의 진행 📝 팀 프로젝트 아이디어 회의 반려동물 커뮤니티를 제작하기로 결정 핵심 기능과 부가기능을 나눠서 업무 중요도를 나눠서 진행 자신의 반려동물을 자랑할 수 있는 사진 중심의 게시판, 나눔 게시판, 자유게시판으로 나눠서 CRUD, 댓글, 텍스트 에디터, OAuth 등 구현하기로 결정 기본적인 와이어 프레임 제작 완료 💡 오늘 깨달은 것 혼자서 토이 프로젝트를 진행했는데 프론트엔드와 백엔드로 나뉘어서 작업하는 것이 처음이라 모든 게 낯설고 어색했다. 협업을 하면서 지켜야 되는 코딩 컨벤션을 정해야 되는 것부터 쉽지 않았다. 스펀지처럼 많은 점을 보고 배우며 흡수하자!!
[TIL] 엘리스 SW 엔지니어 트랙 Day 036
[TIL] 엘리스 SW 엔지니어 트랙 Day 036
2021.12.15📖 오늘 배운 내용 - 2021.12.11 JWT OAuth 회원 비밀번호 찾기 구현 메일 발송 기능 📝 JWT [Node.js] JWT란? 🎯 JWT JSON Web Token 인증을 위한 정보를 특별한 저장소를 이용하지 않고 전자 서명을 이용하여 확인하는 방법 📝 JWT의 구성 header : 토큰의 타입 (jwt), 데이터 서명방식 payload : 전달되는 데이터 sign lakelouise.tistory.com 📝 JWT + Cookie 사용하기 [Node.js] JWT + Cookie 사용하기 🎯 JWT + Cookie 사용하기 📝 Cookie 란? 웹 서비스에서 사용하는 정보를 클라이언트에 저장하고 HTTP 요청 시 이를 함께 전송하여 클라이언트 정보를 서버에 전달하는 기술이다. 📝 Sess..