coding- w00se

얼마 전에 Vanilla Javascript로 탭 메뉴와 탭 전환 기능을 구현할 일이 있었습니다. 구현을 할 때는 느끼지 못했지만, 돌이켜 생각을 해보니 비효율적으로 구현을 한 게 아닌가 생각이 들었습니다. 따라서 해당 기능에 대해 다시 연습을 해보았고, 이번 글에서는 탭 메뉴와 탭 전환 기능을 구현하는 방식에 대해 정리하려 합니다. 연습 예시 연습 예시 화면은 아래와 같습니다. 구현 방법 연습 화면은 위 이미지와 같습니다. 빨간색 영역: 버튼 목록 영역으로 각 버튼을 누르면 파란색 영역에 변화가 생깁니다. 파란색 영역: 탭의 내용을 나타는 영역으로, 클릭된 버튼에 따라 '탭 1 페이지', '탭 2 페이지', '탭 3 페이지'로 변하게 됩니다. 전체 코드 1. 각 button 태그에 데이터 속성으로 se..

최종 코딩 테스트로 우아한 테크코스 4기 프론트엔드 프리코스의 모든 과정이 끝났습니다. 결론부터 적으면 최종 코딩 테스트의 요구사항을 완벽히 구현하지 못했으며, 주어진 테스트도 3개 중 2개만 통과했기 때문에 점수는 0점입니다🙃 과제 형식의 코딩 테스트는 이번이 처음이었는데, 아쉬운 점도 있고 스스로 부족한 점이 많았습니다. 따라서 이번 글에서는 프리코스 최종 코딩 테스트를 하면서 느낀 점과 부족한 점을 정리하려 합니다. 느낀 점 대부분 시험을 보고 나서 드는 생각이 '시간이 조금만 더 있었더라면!'인데, 이번 시험도 어김없이 그랬습니다. 중요한 시험이었던 만큼 시간이 부족한 게 더욱 아쉽게 느껴졌습니다. 물론, 실력이 부족해서 시간이 부족했던 거지만..! 제 생각일 뿐이지만, 최종 코딩 테스트에서 구현..

우아한 테크코스 프리코스 마지막 미션이 어제 끝났습니다. 애당초 후기를 미션 pr을 제출하면서 같이 제출하는 게 목표였는데, 구현에 급급해서 결국 후기까지는 작성하지 못했습니다. 후기를 공유하는 게 프리코스를 준비하시는 분들께 힘이 된다고 하셨는데 힘을 드리지 못해 죄송하며, 혹시라도 이 글을 확인하신다면 감사하다는 말을 전해드리고 싶네요ㅎㅎ 이번 글에는 우아한 테크코스 지원부터 프리코스까지 느꼈던 점에 대해 정리하려 합니다. 지원 동기 작년 12월 말부터 지금까지 대학생 창업팀에 속해 프론트엔드 개발자로 앱 서비스를 개발했습니다. 그 앱 서비스가 바로 ATSAY 입니다. 빠르지는 않지만 꾸준하게 사용하는 유저분들이 늘어나고 있고, 유저분들이 '잘 이용하고 있어요~'라는 반응을 해주실 때 보람을 느낍니다..

최근 vscode에서 eslint를 사용하면서 extension이 제대로 동작하지 않는 에러를 만나 불편함을 겪었습니다. 다행히 vscode-eslint repository의 issue에서 해결 방법을 찾아 잘 해결이 됐습니다. 이번 글에서는 eslint와 prettier의 설치법과 설정, 그리고 vscode에서 eslint extension 사용 시 만났던 에러에 대해 정리를 하려 합니다. eslint와 prettier란? eslint 린트(lint)는 소스 코드에서 문제가 될 만한 점을 찾는 작업이고, 린터(linter)는 이를 도와주는 소프트웨어이다. eslint는 javascript에서 대중적으로 사용되는 linter이다. prettier code formater의 일종으로, 정해진 규칙에 따르도..

오늘 linter를 이용해서 컨벤션의 어긋난 코드를 수정하면서, Airbnb Javascript Style Guide에서 아래의 규칙을 발견했습니다. 3.6 Only quote properties that are invalid identifiers. eslint: quote-props 해당 규칙은 객체(object) 내의 프로퍼티의 이름과 관련된 규칙으로, Javascript 식별자 네이밍 규칙을 준수하는 프로퍼티 이름은 '(따옴표)를 쓰지 않아도 된다는 규칙입니다. 해당 영어 구문의 indentifiers을 보고 식별자가 매칭이 안돼서 번역기를 돌렸습니다. 따라서 'identifier === 식별자'를 각인시키는 겸, 이번 글에서는 Javscript의 용어인 식별자와 프로퍼티에 대해 정리하려 합니다. ..

웹 프로젝트를 계획 중 어떤 기술 스택을 사용할지 고민하는 시간을 가졌습니다. 기술 스택의 선택 기준과 프로젝트 구조에 대해 조사하면서 CSR/SSR과 SPA/MPA의 각 특징에 대해 알게 됐습니다. 오늘은 CSR/SSR과 SPA/MPA에 대해 알게 된 내용을 정리하려 합니다. CSR과 SSR CSR(=Client Side Rendering)과 SSR(Server Sdie Rendering)은 렌더링을 하는 주체가 누구냐에 따라 구분됩니다. CSR 특징 처음 서버에 요청 시 렌더링에 필요한 파일(html, css, javascript 등)을 모두 한 번에 받는다. 전달받은 html 파일은 컨텐츠가 없는 빈 파일이고(React의 index.html처럼), javascript 파일을 실행시키며 DOM을 구성..

'좋은 개발자가 되기 위해 잘 공부하고 성장하고 있는 가?'와 같이 성장에 대한 고민을 항상 합니다. 이런 성장과 경험에 대한 고민을 팀원에게 털어 이야기하니, 부족한 것들을 기록해 보는 걸 권유받았습니다. 덕분에 스스로를 돌아볼 수 있었고 부족한 점, 필요한 역량, 개선 방안(목표)들을 기록하려 합니다. 1. 테스트 코드 작성에 지식 및 경험 부족 - 졸업 프로젝트를 통해 Unit test를 수행한 경험이 있지만, 아직까지 습관화가 되지 않았음 - 프론트엔드 웹 애플리케이션(앱 애플리케이션 포함)에서 고려해야 할 테스트 범위와 종류에 대해 모른다. 이어서, 현재 진행 중인 프로젝트(ATSAY)에 적합한 테스트 방법이 무엇인지 파악하고 적용하는 역량과 경험 부족 2. 효율적인 코드 작성을 위한 노하우 부..

얼마 전 코드 리뷰를 해주시는 팀원으로부터 '구조 분해 할당 준수 필요!'라는 내용의 피드백을 받았습니다. 덕분에 '구조 분해 할당'이라는 키워드도 알게 됐고, 이번 글에서는 '구조 분해 할당'에 대해 찾아본 내용을 정리하려 합니다. 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 값들을 개별 변수에 저장하는 Javascript의 표현식입니다. 사용 예시 구조 분해 할당 - 배열 예시 // 구조 분해 할당 - 배열 예시 // 구조 분해 할당 - 기본 사용 예시 let arr = [1, 2, 3, 4, 5] let [ first, second, ...rest ] = arr; console.log("frist: ", first); // first: 1 console.log("second: ", sec..

https://www.acmicpc.net/problem/2468 2468번: 안전 영역 재난방재청에서는 많은 비가 내리는 장마철에 대비해서 다음과 같은 일을 계획하고 있다. 먼저 어떤 지역의 높이 정보를 파악한다. 그 다음에 그 지역에 많은 비가 내렸을 때 물에 잠기지 않는 www.acmicpc.net 한 지역의 높이 정보가 NXN 배열로 주어지고 비로 인해 물에 잠기지 않은 서로 연결된 영역을 안전 영역이라 할 때, 장마철에 안전 영역의 최대 개수를 구하는 것이 이 문제의 목표입니다. 이 문제에서는 내리는 비의 양은 입력으로 주어지지 않습니다. 하지만, 지역의 높이의 최소 높이와 최대 높이를 알 수 있으므로 비의 양을 적절히 조정하여 테스트를 진행할 수 있습니다. 해당 문제는 그래프 탐색 문제로, 저..

https://www.acmicpc.net/problem/9012 9012번: 괄호 괄호 문자열(Parenthesis String, PS)은 두 개의 괄호 기호인 ‘(’ 와 ‘)’ 만으로 구성되어 있는 문자열이다. 그 중에서 괄호의 모양이 바르게 구성된 문자열을 올바른 괄호 문자열(Valid PS, VPS)이라고 www.acmicpc.net 괄호로만 구성된 문자열 중 괄호의 모양이 바르게 구성된 문자열을 올바른 괄호 문자열(VPS)라고 합니다. 입력으로 주어진 문자열이 VPS인지 확인하는 것이 이 문제의 목표입니다. 이 문제는 문자열, 스택 문제로 분류됩니다. 저는 스택은 사용하지 않고, 단순히 괄호를 세는 방식으로 해결했습니다. 접근 방식 1. VPS인지 검사하기 위해 문자 하나 씩 검사를 수행합니다...